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

<template>
    <div>
        <LHeader v-bind:text="text"></LHeader>
        <van-form @submit="onSubmit" @failed="onFailed">
            <van-field
                v-model="editObj.context"
                name="问题描述"
                label="问题描述"
                placeholder="问题描述"
                :rules="[{ required: true, message: '请填写问题描述' }]"
            />
            <van-field
                v-model="editObj.checkBasis"
                name="判定依据"
                label="判定依据"
                placeholder="判定依据"
                :disabled="true"
            />
            <van-field
                v-model="editObj.address"
                name="问题位置"
                label="问题位置"
                placeholder="问题位置"
                :rules="[{ required: true, message: '请填写问题位置' }]"
            />
            <van-field
                readonly
                clickable
                name="picker"
                :value="editObj.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 name="uploader" label="图像上传" >
                <template #input>
                    <van-uploader :before-read="beforeReadImage"  multiple :max-count="5" upload-text="最多上传五个" v-model="editObj.pictures" />
                </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="editObj.videos" >
                    <template #preview-cover="{ file,content ,url}">
                        <div v-if="file?file.type.indexOf('video') !== -1:''" >
                            <video muted autoplay :src="content" style="width:80px;height:80px;object-fit:cover;"></video>
                        </div>
                        <div v-else>
                            <video muted autoplay :src="url" style="width:80px;height:80px;object-fit:cover;"></video>
                        </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表单 */
            editObj:{},
            value:'',//责任单位
            showPicker:false,//默认是否展示弹出层
            columns: [],//下拉数组
            text:'问题编辑',//顶部文本
            ids:[],//下拉框选中值数组id
        }
    },
    mounted() {
        if(this.$route.query.name=='note'){
            this.editObj=JSON.parse(this.$route.query.obj)
            var pictures=[]
            var videos=[]
            this.editObj.pictures.forEach((item)=>{
                pictures.push({url:item})
            })
            this.editObj.videos.forEach((item)=>{
                videos.push({url:item})
            })
            
            this.editObj={
                id:this.editObj.id,//问题ID
                address:this.editObj.address,//问题位置
                value:this.editObj.deptNames.join('/'),//责任单位
                context:this.editObj.context,//问题描述
                checkBasis:this.editObj.checkBasis,//法律依据
                pictures:pictures,//图片
                videos:videos,//视频
                deptIds:this.editObj.deptIds//责任单位IDS
            }
            this.ids=this.editObj.deptIds
        }
        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){
            console.log(value)
            var pictures=[];
            value.uploader.forEach((item) => {
                if(item.content){pictures.push(item.content)}
                else if(item.url){pictures.push(item.url)}
            });
            var videos=[];
            value.uploader2.forEach((item) => {
                if(item.content){videos.push(item.content)}
                else if(item.url){videos.push(item.url)}
            });
            var obj={
                id:this.editObj.id,//列表ID
                pictures:pictures,//图片
                videos:videos,//视频
                address:value['问题位置'],//问题位置
                deptIds:this.ids,//责任单位
                context:value['问题描述'],//问题描述
                checkBasis:value['法律依据']//法律依据
            }
            console.log(obj)
            this.$dialog.confirm({
                title: '提示',
                message: '确定提交检查问题？',
            }).then(()=>{
                this.$toast.loading({
                    message:'提交中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                    duration: 0
                })
                postFun('check/carry/trouble/update',obj).then((Response)=>{
                    this.$toast.clear()
                    this.$toast.success({
                        message:'提交成功',
                        duration: 2000
                    })
                    this.$router.push({
                        name:'note',
                        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)=>{
                this.ids.push(item.id)
                this.editObj.value+=item.text+' / '
            })
            this.showPicker = false;
        },
        beforeReadVideo(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%); }
}
</style>
