<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * 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="problemPosition"
                name="问题位置"
                label="问题位置"
                placeholder="问题位置"
                :rules="[{ required: true, message: '请填写问题位置' }]"
            />
            <van-field
                readonly
                clickable
                name="picker"
                :value="value"
                label="责任单位"
                placeholder="请选择部门"
                @click="showPicker = true"
                :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
                v-model="problemDescribe"
                name="问题描述"
                label="问题描述"
                placeholder="问题描述"
                :rules="[{ required: true, message: '请填写问题描述' }]"
            />
            <van-field
                v-if="islay"
                v-model="checkBasis"
                name="法律依据"
                label="法律依据"
                placeholder="法律依据"
                :rules="[{ required: true, message: '请填写法律依据' }]"
            />
            <van-field name="uploader" label="图像上传" :rules="[{ required: true, message: '请上传图像' }]">
                <template #input>
                    <van-uploader multiple :max-count="5" upload-text="最多上传五个" v-model="uploaderImg" />
                </template>
            </van-field>
            <van-field name="uploader2" label="视频上传" :rules="[{ required: true, message: '请上传视频' }]">
                <template #input>
                    <van-uploader multiple :max-count="5" upload-text="最多上传五个" v-model="uploaderVideo" />
                </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表单 */
            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,//是否显示法律依据
        }
    },
    mounted() {
        if(this.$route.query.id){
            this.id=this.$route.query.id
        }
        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.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){
            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.apicker.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;
    }
    .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%); }
}
</style>
