<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * 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
                :disabled="true"
                v-model="warningForm.gradeName"
                name="所属场景"
                label="所属场景"
                placeholder="所属场景"
                :rules="[{ required: true, message: '请填写所属场景' }]"
            />
            <van-field
                :disabled="true"
                v-model="warningForm.gradeType"
                name="预警等级"
                label="预警等级"
                placeholder="预警等级"
                :rules="[{ required: true, message: '请填写预警等级' }]"
            />
            <van-field
                v-model="warningForm.orderType"
                name="预警类型"
                label="预警类型"
                placeholder="预警类型"
                :disabled="true"
                :rules="[{ required: true, message: '请填写预警类型' }]"
            />
            <van-field
                readonly
                clickable
                :disabled="true"
                name="picker"
                :value="util.timestampToTime(warningForm.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" :disabled="true" label="预警图片" >
                <template #input>
                    <van-uploader :show-upload="false"  :deletable="false" v-model="warningForm.picture" />
                </template>
            </van-field>
        </div>
        <div class="card">
            <van-field
                v-model="warningForm.relevanceUser"
                name="关联人员"
                :disabled="true"
                label="关联人员"
                placeholder="关联人员"
                :rules="[{ required: true, message: '请填写关联人员' }]"
            />
            <van-field
                v-model="warningForm.relevanceDegree"
                name="相似程度"
                :disabled="true"
                label="相似程度"
                placeholder="相似程度"
                :rules="[{ required: true, message: '请填写相似程度' }]"
            />
            <van-field name="uploader" :disabled="true" label="人脸照片" >
               <template #input>
                    <van-uploader  v-if="isface" :deletable="false" :show-upload="false"  v-model="warningForm.relevancePicture">
                        <template #preview-cover="{ url }">
                            <div>
                                <img  muted autoplay :src="url" style="width:80px;height:80px;object-fit:cover;"/>
                            </div>
                        </template>
                    </van-uploader>
                </template>
            </van-field>
        </div>
        <div class="card">
             <van-field name="radio" label="处理结果" >
                <template #input>
                    <van-radio-group v-model="commitForm.result" direction="horizontal">
                    <van-radio name="finish">正常处置</van-radio>
                    <van-radio name="error">误报退回</van-radio>
                    </van-radio-group>
                </template>
                <!-- v-model="warningForm.result"
                name="处理结果"
                label="处理结果"
                placeholder="处理结果"
                :rules="[{ required: true, message: '请填写处理结果' }]" -->

            </van-field>
        </div>
        <div class="card"  v-if="commitForm.result=='finish'">
             <van-field
                v-model="commitForm.handleNote"
                name="处理记录"
                label="处理记录"
                type="textarea"
                placeholder="处理记录"
                :rules="[{ required: true, message: '请填写处理记录' }]"
            />
            <van-field name="uploader2" label="照片上传">
                <template #input>
                    <van-uploader :max-count="5"
                        upload-text="最多上传五个" v-model="commitForm.pictures" />
                </template>
            </van-field>
        </div>
            <div style="margin: 0.5rem" v-show="commitForm.result=='finish'">
                <van-button round block type="info" @click="onSubmit('handle')">一键处置</van-button>
            </div>
            <div style="margin: 0.5rem">
                <van-button round block type="info" native-type="submit" @click="onSubmit('commit')">提交</van-button>
            </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,putFunTwo} from '@/service/table'
import { setUserInfo ,getUserInfo,} from '@/utils/userInfo'
export default {
    name: 'list',
    components: {
        "LHeader":LHeader,
        // "tabBar":tabBar
    },
    data() {
        return {
            /* 预警处理form表单 */
            warningForm:{
                // scene:'有限空间作业-123123123123',//所属场景
                // level:'一级预警',//预警等级
                // type:'安全帽佩戴预警',//预警类型
                // time:'2021-10-22 17:23:23',//预警时间
                // warningImg:[],//预警图片
                // person:'王晓丽',//关联人员
                // lookLike:'98.23',//相似程度
                // faceImg:[],//人脸照片
            },
            commitForm:{
                result:'finish',//预警结果
                handleNote:'',//处理记录
                pictures:[]//图像上传
            },
            isface:false,//是否显示人脸照片
            userId:'',//用户登录ID
            warningId:'',//预警处理id
            showPicker:false,//默认是否展示弹出层
            text:'预警处理',//顶部文本
        }
    },
    mounted() {
        if(sessionStorage.getItem('warningId')){
            this.warningId=sessionStorage.getItem('warningId')
        }
        if(getUserInfo())
        this.userId=getUserInfo().userId
        this.init()
    },
    methods: {
        //请求预警处理详情接口
        init(){
            this.warningForm={}
            getFunTwo('app/push/details/'+this.warningId).then((Response)=>{
                this.warningForm=JSON.parse(JSON.stringify(Response.data))
                //处理图片数据
                if(Response.data.relevancePicture!=""){
                    this.isface=true
                    this.warningForm.relevancePicture=[]
                    this.warningForm.relevancePicture.push({url:Response.data.relevancePicture})
                }else{
                    this.isface=false
                }
                this.warningForm.picture=[]
                this.warningForm.picture.push({url:Response.data.picture})
            })

        },
        /* 下拉框文本溢出动画效果 */
        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 obj={}
            if(value=='handle'){
                obj={
                    id:this.warningId,
                    finishUserId:this.userId,
                    finishContent:'已处置',
                    finishPictures:[],
                    status:this.commitForm.result
                }
            }else if(value=='commit'){
                var pictures=[]
                this.commitForm.pictures.forEach((item)=>{
                    if(item.content){
                        pictures.push(item.content)
                    }
                })
                obj={
                    id:this.warningId,
                    finishUserId:this.userId,
                    finishContent:this.commitForm.handleNote,
                    finishPictures:pictures,
                    status:this.commitForm.result
                }
            }
            // var pictures=[];
            // // value.uploader.forEach((item) => {
            // //     pictures.push(item.content)
            // // });
            // var videos=[];
            // // value.uploader2.forEach((item) => {
            // //     videos.push(item.content)
            // // });
            this.$dialog.confirm({
                title: '提示',
                message: '确定提交检查问题？',
            }).then(()=>{
                this.$toast.loading({
                    message:'提交中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                    duration: 0
                })
                putFunTwo('app/push',obj).then((Response)=>{
                    this.$toast.clear()
                    this.$toast.success({
                        message:'提交成功',
                        duration: 2000
                    })
                    this.$router.push('/message-center')
                }).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;
        // line-height: 0.8rem;
    }
/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>
