<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->

<template>
    <div>
        <LHeader v-bind:text="text"></LHeader>
        <!-- <van-form @submit="onSubmit" @failed="onFailed"> -->
        <div class="card">
            <van-field
                v-model="warningDetailForm.gradeName"
                name="所属场景"
                :disabled="true"
                label="所属场景"
                placeholder="所属场景"
                :rules="[{ required: true, message: '请填写所属场景' }]"
            />
            <van-field
                v-model="warningDetailForm.gradeType"
                class="level"
                :disabled="true"
                name="预警等级"
                label="预警等级"
                placeholder="预警等级"
                :rules="[{ required: true, message: '请填写预警等级' }]"
            />
            <van-field
                v-model="warningDetailForm.orderType"
                name="预警类型"
                :disabled="true"
                label="预警类型"
                placeholder="预警类型"
                :rules="[{ required: true, message: '请填写预警类型' }]"
            />
            <van-field
                readonly
                clickable
                :disabled="true"
                name="picker"
                :value="util.timestampToTime(warningDetailForm.alarmTime,'DT1',true)"
                label="预警时间"
                placeholder="预警时间"
                @click="showPicker = false"
                :rules="[{ required: true, message: '请填写预警时间' }]"
            />
            <van-popup v-model="showPicker" position="bottom">
                <van-datetime-picker ref="picker"
                    type="datehour"
                    title="选择年月日小时"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
                    @change="checkScroll"
                    :formatter="formatter"
                />
                <!-- <van-area title="标题" :area-list="areaList" @confirm="onConfirm" /> -->
            </van-popup>
             <van-field name="uploader" label="预警图片" :rules="[{ required: true, message: '请上传预警图片' }]">
                <template #input>
                    <van-uploader :show-upload="false"  :deletable="false" v-model="warningDetailForm.picture" />
                </template>
            </van-field>
        </div>
        <div class="card">
            <van-field
                v-model="warningDetailForm.relevanceUser"
                name="关联人员"
                :disabled="true"
                label="关联人员"
                placeholder="关联人员"
                :rules="[{ required: true, message: '请填写关联人员' }]"
            />
            <van-field
                v-model="warningDetailForm.relevanceDegree"
                name="相似程度"
                :disabled="true"
                label="相似程度"
                placeholder="相似程度"
                :rules="[{ required: true, message: '请填写相似程度' }]"
            />
            <van-field name="uploader" label="人脸照片" v-if="warningDetailForm.relevanceUser!='未知人员'&&warningForm.relevanceUser">
                <template #input>
                    <van-uploader v-if="isface"  :deletable="false" :show-upload="false"  v-model="warningDetailForm.relevancePicture">
                        <template #preview-cover="{ url }">
                            <img muted autoplay :src="url" style="width:80px;height:80px;object-fit:cover;"/>
                        </template>
                    </van-uploader>
                </template>
            </van-field>
        </div>
        <div class="card">
            <van-field
                v-model="warningDetailForm.status"
                name="处置状态"
                :disabled="true"
                label="处置状态"
                placeholder="处置状态"
                :rules="[{ required: true, message: '请填写处置状态' }]"
            />
        </div>
        <div class="card">
            <van-field
                v-model="warningDetailForm.finishDept"
                name="所属单位"
                :disabled="true"
                label="所属单位"
                placeholder="所属单位"
                :rules="[{ required: true, message: '请填写所属单位' }]"
            />
            <van-field
                v-model="warningDetailForm.finishUser"
                name="处置人员"
                :disabled="true"
                label="处置人员"
                placeholder="处置人员"
                :rules="[{ required: true, message: '请填写处置人员' }]"
            />
            <van-field
                v-model="warningDetailForm.finishTime"
                name="记录时间"
                :disabled="true"
                label="记录时间"
                placeholder="记录时间"
                :rules="[{ required: true, message: '请填写记录时间' }]"
            />
             <van-field
                v-model="warningDetailForm.finishContent"
                name="处理记录"
                :disabled="true"
                label="处理记录"
                type="textarea"
                placeholder="处理记录"
                :rules="[{ required: true, message: '请填写处理记录' }]"
            />
            <van-field name="uploader2" label="照片上传" :rules="[{ required: true, message: '请上传视频' }]">
                <template #input>
                    <van-uploader  :show-upload="false" :deletable="false" :disabled="true" v-model="warningDetailForm.finishPicture" />
                </template>
            </van-field>
        </div>
        <!-- </van-form> -->
        <tab-bar :index="1"></tab-bar>
    </div>
</template>

<script>
import tabBar from "@/components/TabBar";
import LHeader from '@/components/header.vue'
import { getFun,postFun ,getFunTwo,postFunTwo} from '@/service/table'
export default {
    name: 'list',
    components: {
        "LHeader":LHeader,
        "tabBar":tabBar
    },
    data() {
        return {
            isface:false,//是否显示人脸照片
            /* 预警详情form表单 */
            warningDetailForm:{
                // scene:'动火作业-123123123123',//所属场景
                // level:'一级预警',//预警等级
                // type:'安全帽佩戴预警',//预警类型
                // time:'2021-10-22 17:23:23',//预警时间
                // warningImg:[],//预警图片
                // person:'王晓丽',//关联人员
                // lookLike:'98.23',//相似程度
                // faceImg:[],//人脸照片
                // status:'已处置',//处理状态
                // company:'小红门再生水厂',//所属单位
                // handlePerson:'魏云龙',//处理人员
                // noteTime:'2021-04-23 12:12:45',//记录时间
                // handleNote:'已经对为佩戴安全帽人员进行了教育提醒，目前已经佩戴了安全帽。',//处理记录
                // pictures:[]//图像上传
            },
            showPicker:false,//默认是否展示弹出层
            text:'预警详情',//顶部文本
        }
    },
    mounted() {
        //判断是否从工单跳转进来
        if(this.$route.query.name=="noteList"){
            this.text='工单已处置置记录'
        }
        if(sessionStorage.getItem('warningNoteId')){
            this.warningId=sessionStorage.getItem('warningNoteId')
        }
        this.init()
    },
    methods: {
        //详情加载
        init(){
            this.warningDetailForm={}
            getFunTwo('app/push/details/'+this.warningId).then((Response)=>{
                this.warningDetailForm=JSON.parse(JSON.stringify(Response.data))
                //处理数据
                if(Response.data.relevancePicture!=""){
                    this.isface=true
                    this.warningDetailForm.relevancePicture=[]
                    this.warningDetailForm.relevancePicture.push({url:Response.data.relevancePicture})
                }else{
                    this.isface=false
                }
                this.warningDetailForm.picture=[]
                this.warningDetailForm.picture.push({url:Response.data.picture})
                this.warningDetailForm.finishPicture=[]
                this.warningDetailForm.finishTime=this.util.timestampToTime(this.warningDetailForm.finishTime,'DT1',true)
                Response.data.finishPicture.forEach((item)=>{
                    this.warningDetailForm.finishPicture.push({url:item})
                })
                this.warningDetailForm.status=this.warningDetailForm.status=='finish'?'已处置':this.warningDetailForm.status=='error'?'误报退回':''
            })
        },
        /* 下拉框文本溢出动画效果 */
        checkScroll () {
            this.$nextTick(() => {
                // 获取选中元素
                let selectedItems = [...document.querySelectorAll('.van-picker-column__item--selected')]
                selectedItems.forEach(item => {
                let child = item.querySelector('.van-ellipsis')
                if (child.offsetWidth > item.offsetWidth) { // 判断child文字宽度
                    item.classList.add('scroll')
                } else {
                    item.classList.remove('scroll')
                }
                })
            })
        },
        //时间转换
        formatter(type, val) {
            if (type === 'month') {
                return `${val}月`;
            } else if (type === 'day') {
                return `${val}日`;
            }
                return val;
        },
        onFailed(errorInfo){
            this.$toast.fail('提交失败,请完善信息')
        },
        /* 问题提交 */
        onSubmit(value){
            var pictures=[];
            value.uploader.forEach((item) => {
                pictures.push(item.content)
            });
            var videos=[];
            value.uploader2.forEach((item) => {
                videos.push(item.content)
            });
            var obj={
                planId:this.planId?this.planId:this.id,
                planItemId:this.planItemId?this.planItemId:'',
                pictures:pictures,
                videos:videos,
                title:value['问题名称'],//问题名称
                address:value['问题位置'],//问题位置
                deptIds:this.ids,//责任单位
                context:value['问题描述'],//问题描述
                checkBasis:value['法律依据']//法律依据
            }
            this.$dialog.confirm({
                title: '提示',
                message: '确定提交检查问题？',
            }).then(()=>{
                this.$toast.loading({
                    message:'提交中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                    duration: 0
                })
                postFun('check/carry/trouble',obj).then((Response)=>{
                    this.$toast.clear()
                    this.$toast.success({
                        message:'提交成功',
                        duration: 2000
                    })
                    this.$router.push({
                        name:'problem',
                        query:{
                            pageName:'problemList'
                        }
                    })
                }).catch(()=>{
                    this.$toast.clear()
                    this.$toast.fail('提交失败,请稍后再试')
                })
            }).catch(()=>{

            })

        },
        /*  确认选择级联菜单的回显数据处理 */
        onConfirm(){
            //获取回显的部门值和部门id数组
            this.value=""
            this.ids=[]
            var valueList=this.$refs.picker.getValues()
            valueList.forEach((item)=>{
                console.log(item)
                this.ids.push(item.id)
                this.value+=item.text+' / '
            })
            this.showPicker = false;
        }
    }
}
</script>
<style lang="less" scoped>
    .card{
        width:90%;
        box-shadow: 0px 0px 10px 2px #F3F3F3;
        padding: 0.25rem;
        margin:0.4rem auto;
        background: white;
        border-radius: 4%;
    }
    .card div{
        font-size: 0.4rem;
    }
/deep/ .van-picker-column__item--selected {
/* 重写选中后的效果 */
.van-ellipsis {
    text-overflow: unset;
    overflow: visible;
}
/* 增加scroll类 */
&.scroll > .van-ellipsis {
    animation: move 4s linear infinite;
}
}
@keyframes move {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
/deep/ .van-field__label {
    width: 4.2em !important;
    color: #646566 !important;
}
.level /deep/ .van-field__control{
    color: red;
}
/deep/ .van-field__control:disabled{
    -webkit-text-fill-color:black
}
</style>
