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

<template>
    <div>
        <LHeader v-bind:text="text"></LHeader>
        <van-form @submit="onSubmit" @failed="onFailed">
            <!-- <van-field
                v-model="problemName"
                name="问题名称"
                label="问题名称"
                placeholder="问题名称"
                :rules="[{ required: true, message: '请填写问题名称' }]"
            /> -->
            <van-field 
                v-model="problemDescribe"
                name="问题描述"
                label="问题描述"
                placeholder="问题描述"
                :rules="[{ required: true, message: '请填写问题描述' }]"
                :disabled="isFormwork"
                :required="!isFormwork?true:false"
                @input="numInput"
            />
            <van-field
                v-if="islay"
                v-model="checkBasis"
                name="法律依据"
                label="法律依据"
                placeholder="法律依据"
                :disabled="isFormwork"
            />
            <van-field
                v-model="problemPosition"
                name="问题位置"
                label="问题位置"
                placeholder="问题位置"
                :rules="[{ required: true, message: '请填写问题位置' }]"
                required
            />
            <van-field
                readonly
                clickable
                name="picker"
                :value="value"
                label="责任单位"
                :disabled="Isvalue"
                placeholder="请选择部门"
                @click="!Isvalue?showPicker = true:showPicker = false"
                :rules="[{ required: true, message: '请填写问题位置' }]"
            />
            <van-popup v-model="showPicker" position="bottom">
                <van-picker ref="apicker"
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
                    @change="checkScroll"
                />
                <!-- <van-area title="标题" :area-list="areaList" @confirm="onConfirm" /> -->
            </van-popup> 
            <van-field name="uploader" label="图像上传" >
                <template #input>
                    <van-uploader :before-read="beforeReadImage" multiple :max-count="5" upload-text="最多上传五个" v-model="uploaderImg" />
                </template>
            </van-field>
            <van-field name="uploader2" label="视频上传" >
                <template #input>
                    <van-uploader :before-read="beforeReadVideo" accept="video/*" multiple :max-count="5" upload-text="最多上传五个" v-model="uploaderVideo">
                    <template #preview-cover="{ file,content }">
                        <div v-if="file.type.indexOf('video') !== -1" >
                            <video muted autoplay :src="content" style="width:80px;height:80px;object-fit:cover;"></video>
                        </div>
                        <div v-else></div>
                    </template>
                </van-uploader>
                </template>
            </van-field>
            <div style="margin: 0.5rem">
                <van-button round block type="info" native-type="submit">提 交</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 } from '@/service/table'
export default {
    name: 'list',
    components: {
        "LHeader":LHeader,
        "tabBar":tabBar
    },
    data() {
        return {
            /* form表单 */
            videoList:[{name:'e'},{name:'ddd'}],
            videourl:'',//视频预览
            // problemName:'',//问题名称
            problemPosition:'',//问题位置
            value:'',//责任单位
            valueId:0,//责任单位id
            problemDescribe:'',//问题描述
            uploaderImg:[],//图像上传
            uploaderVideo:[],//视频上传
            checkBasis:'',//法律依据
            showPicker:false,//默认是否展示弹出层
            columns: [],//下拉数组
            text:'检查问题',//顶部文本
            jumpObj:{},//跳转对象
            id:'',//检查执行id
            ids:[],//下拉框选中值数组id
            planId:'',//不合格跳转进本页面所传列表id
            planItemId:'',//不合格跳转进本页面所传列id
            islay:false,//是否显示法律依据
            isFormwork:false,//决定是否从不合格跳转到本页面是否禁用检查名称，内容，法律依据
            Isvalue:false,//是否禁用责任单位
        }
    },
    mounted() {
        if(this.$route.query.id){
            this.id=this.$route.query.id
            var obj=JSON.parse(this.$route.query.obj)
        }
        if(sessionStorage.getItem('projectFlag')){
            this.Isvalue=sessionStorage.getItem('projectFlag')=='true'?true:false
        }
        if(sessionStorage.getItem('deptNameList')){
            this.value=JSON.parse(sessionStorage.getItem('deptNameList')).join('/')
        }
        if(sessionStorage.getItem('deptIdList')){
            this.ids=JSON.parse(sessionStorage.getItem('deptIdList'))
        }
        if(this.$route.query.name=='formwork'){
            // this.problemName=this.$route.query.checkitem,//检查项目
            this.problemDescribe=this.$route.query.checkContent,//检查内容
            this.checkBasis=this.$route.query.checkBasis//法规依据  
            this.isFormwork=true
            this.planId=this.$route.query.planId
            this.planItemId=this.$route.query.planItemId,
            this.islay=true
        }
        this.init()
    },
    methods: {
        /* 获取下拉树级联列表 */
        init(){
            getFun('check/dept/tree').then((Response)=>{
                this.columns=Response.data
            })
        },
        /* 下拉框文本溢出动画效果 */
        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')
                }
                })
            })
        },
        onFailed(errorInfo){
            this.$toast.fail('提交失败,请完善信息')
        },
        /* 问题提交 */
        onSubmit(value){
            if(value['问题描述'].length>500){
                this.$toast.fail('字数过长不得超过500')
                return
            }
            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(()=>{

            })
            
        },
        //监听字数
        numInput(value){
            if(value.length>500){
                this.$toast.fail('字数过长不得超过500')
            }
        },
        /*  确认选择级联菜单的回显数据处理 */
        onConfirm(){
            //获取回显的部门值和部门id数组
            this.value=""
            this.ids=[]
            var valueList=this.$refs.apicker.getValues()
            valueList.forEach((item)=>{
                console.log(item)
                this.ids.push(item.id)
                this.value+=item.text+' / '
            })
            this.showPicker = false;
        },
        beforeReadVideo(file) {
            console.log(file)
            if (file.type.indexOf('video')==-1) {
                this.$toast.fail('请上传视频！');
                return false;
            }
            return true;
        },
        beforeReadImage(file) {
            if (file.type.indexOf('image')==-1) {
                this.$toast.fail('请上传图片！');
                return false;
            }
            return true;
        },
    }
}
</script>
<style lang="less" scoped>
    .card{
        width:90%;
        box-shadow: 0px 0px 10px 2px #F3F3F3;
        padding: 0.25rem;
        margin:0.4rem auto;
        background: white;
    }
    .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 {
    color: #646566 !important;
}
</style>
