<template>
    <div>
        <!-- 需求提报页面 -->
        <div v-for="(item, index) in addForm" :key="item">
            <div style="
              width: 98%;
              height: 30px;
              line-height: 30px;
              padding-left: 5px;
              border-left: 5px solid #000;
              font-size: 18px;
              font-weight: 550;
              color: #000;
              margin: 0px 0 20px;
            " v-show="addForm.length > 1">
                填报{{ index + 1 }}
            </div>
            <avue-form :option="item.formOption" :model="item.form" :ref="`form${index}`"
                :upload-after="(res, done, loading, column) => { uploadAfter(res, done, loading, column, index) }"
                :upload-before="(res, done, loading, column) => uploadBefore(res, done, loading, column, index)">
                <template slot-scope="{disabled,size}" slot="deviceName">
                    <!-- <el-select v-model="item.form.deviceName" placeholder="请选择设备"
                        @change="(value) => { changeDevice(value, item) }">
                        <el-option v-for="item in deviceList" :key="item.id" :value="item.id"
                            :label="item.name"></el-option>
                    </el-select> -->
                    <el-input placeholder="请输入设备名称" v-model="item.form.deviceName"></el-input>
                </template>
                <template slot-scope="{disabled,size}" slot="faultPosition">
                    <!-- <SelectTree disabled v-model="item.form.faultPosition" :tree-options="treeOptions"
                        :default-value="item.form.faultPosition.node"
                        @onNodeSelectEvent="handleNodeSelectEvent($event)"></SelectTree> -->
                    <el-input placeholder="请输入故障位置" v-model="item.form.faultPosition"></el-input>
                </template>
                <template slot-scope="{disabled,size}" slot="faultType">
                    <!-- <el-select v-model="item.form.faultType" placeholder="请选择专业类型" disabled>
                        <el-option v-for="item in typeList" :key="item.id" :value="item.id"
                            :label="item.name"></el-option>
                    </el-select> -->
                    <el-input placeholder="请输入专业类型" v-model="item.form.faultType"></el-input>
                </template>
                <template slot-scope="{disabled,size}" slot="faultDescribe">
                    <el-input type="textarea" :rows="2" placeholder="请输入故障现象描述" v-model="item.form.faultDescribe"
                        @blur="(event) => { changeDescribe(event, index) }">
                    </el-input>
                </template>
                <template slot-scope="{disabled,type}" slot="informant">
                    <el-select v-model="item.form.informant" placeholder="请选择关联实验室" @change="(val) => changeLab(val,index)">
                        <el-option v-for="item in labData" :key="item.id" :label="item.deptName +  '(' + item.phone + ')'" :value="item.id"></el-option>
                    </el-select>
                </template>
                <template slot-scope="{disabled,size}" slot="imgUrl">
                    <el-upload action="/api/blade-resource/oss/endpoint/put-file" list-type="picture-card" :headers="headers"
                        :on-success="handleSuccess(index)" :on-remove="handleRemove(index)" multiple :before-upload="beforeAvatarUpload(index)"
                        accept=".jpeg,.jpg,.png,.pdf" :file-list="item.form.imgList">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </template>
                <template slot-scope="{size}" slot="menuForm" v-if="index == addForm.length - 1">
                    <el-button @click="handleAdd" v-show="title == '需求填报'">新 增</el-button>
                    <el-button @click="handleCancel">取 消</el-button>
                    <el-button @click="handleSave" v-show="title == '需求填报'">保 存</el-button>
                    <el-button type="primary" @click="handleConfirm(index)">提 交</el-button>
                </template>
            </avue-form>

        </div>

    </div>
</template>

<script>
import website from '@/config/website';
import {getToken, removeToken, removeRefreshToken} from '@/util/auth';
import SelectTree from '../../components/selectTree/tree.vue'
import { getDeviceList } from '@/api/device/device'
import { getChildList } from '@/api/system/dictbiz'
import { saveData, editData, saveDraft,serviceSave,serviceDraft,getAllUser } from '@/api/operation/hand'
import { nextTick } from 'vue';
import Compressor from 'compressorjs';
import { mapGetters } from "vuex";
export default {
    name: 'requestSub',
    props: {
        title: String,
        form: Object,
    },
    components: {
        SelectTree
    },
    data() {
        return {
            typeList: [],
            imgList: [],
            treeOptions: [],
            deviceList: [],
            uploadUrl: '/api/blade-resource/oss/endpoint/put-file',
            isShow: false,
            addForm: [],
            editId: '',
            headers:{

            },
            labData:[],
        }
    },
    mounted() {
        this.getLabData()
        this.headers = {
            "Authorization":`Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`,
            'Blade-Auth':'bearer ' + getToken(),
            'Blade-Requested-With':'BladeHttpRequest'
        }
        console.log('this.userInfo.role_id',this.userInfo.role_id)
        if ((this.title == '编辑' && JSON.stringify(this.form) != '{}') || JSON.stringify(this.form) != '{}') {
            this.editId = this.form.id
            for (let key in this.form) {
                this.addForm = [
                    {
                        form: {
                            imgList: this.form.picAttaches && this.form.picAttaches.length != 0 ? this.form.picAttaches.map(item => { return { name: item.originalName, url: item.link } }) : [],
                            // faultPosition: { node: this.deviceList.find(item => item.id == this.form.deviceName).position, data: {} },
                            faultPosition: this.form.faultLocation,
                            deviceName: this.form.deviceName,
                            faultType: this.form.faultType,
                            faultDescribe: this.form.faultDescribe,
                            videoAttaches: this.form.videoAttaches,
                            picAttaches: this.form.picAttaches,
                        },
                        formOption: {
                            emptyBtn: false,
                            submitBtn: false,
                            menuPosition: 'right',
                            column: [
                                {
                                    label: "关联实验室",
                                    labelWidth: 120,
                                    span: 24,
                                    prop: "informant",
                                    type: "select",
                                    formslot: true,
                                    display:this.userInfo.role_id == '1839536982874193922' ? true : false
                                },
                                {
                                    label: "故障现象描述",
                                    labelWidth: 120,
                                    span: 24,
                                    prop: "faultDescribe",
                                    type: "textarea",
                                    minRows: 3,
                                    maxRows: 5,
                                    formslot: true,
                                    rules: [{
                                        required: true,
                                        message: "请输入故障现象描述",
                                        trigger: "blur"
                                    }]
                                },
                                {
                                    label: "设备名称",
                                    labelWidth: 120,
                                    span: 24,
                                    prop: "deviceName",
                                    // type: "select",
                                    formslot: true
                                },
                                {
                                    label: "故障位置",
                                    labelWidth: 120,
                                    prop: "faultPosition",
                                    type: "tree",
                                    span: 24,
                                    formslot: true,
                                },
                                {
                                    label: "故障专业类型",
                                    labelWidth: 120,
                                    span: 24,
                                    prop: "faultType",
                                    type: "select",
                                    formslot: true,
                                },

                                {
                                    label: "故障视频",
                                    labelWidth: 120,
                                    prop: "errorVideo",
                                    type: "upload",
                                    propsHttp: {
                                        res: "data",
                                        url: "link",
                                        name: "name",
                                        // home: "https://www.w3school.com.cn",
                                    },
                                    value: this.form.videoAttaches && this.form.videoAttaches.length != 0 ? this.form.videoAttaches[0].link : '',
                                    fileType: "video", //img/video/audio
                                    listType: "picture-card",
                                    accept: '.mp4',
                                    span: 24,
                                    // formslot:true,
                                    action: '/api/blade-resource/oss/endpoint/put-file',
                                    rules: [{
                                        required: false,
                                        message: "请输入故障现象描述",
                                        trigger: "blur"
                                    }]
                                },
                                {
                                    label: "故障图片",
                                    labelWidth: 120,
                                    span: 24,
                                    prop: "imgUrl",
                                    listType: "picture-card",
                                    type: "upload",
                                    propsHttp: {
                                        res: "data",
                                        url: "link",
                                        name: "name",
                                        // home: "https://www.w3school.com.cn",
                                    },
                                    // value:this.form.picAttaches,
                                    formslot: true,
                                    accept: '.jpg,.jpeg,.png',
                                    fileType: "img", //img/video/audio
                                    action: '/api/blade-resource/oss/endpoint/put-file',
                                },
                            ],
                        },
                    },
                ]
            }
        } else {
            this.addForm = [
                {
                    form: {
                        imgList: [],
                        // faultPosition: { node: undefined, data: {} },
                        faultPosition: '',
                        deviceName: '',
                        faultType: '',
                        faultDescribe: '',
                        videoAttaches: [],
                        picAttaches: [],
                    },
                    formOption: {
                        emptyBtn: false,
                        submitBtn: false,
                        menuPosition: 'right',
                        column: [
                            {
                                label: "关联实验室",
                                labelWidth: 120,
                                span: 24,
                                prop: "informant",
                                type: "select",
                                formslot: true,
                                display:this.userInfo.role_id == '1839536982874193922' ? true : false
                            },
                            {
                                label: "故障现象描述",
                                labelWidth: 120,
                                span: 24,
                                prop: "faultDescribe",
                                type: "textarea",
                                minRows: 3,
                                maxRows: 5,
                                formslot: true,
                                rules: [{
                                    required: true,
                                    message: "请输入故障现象描述",
                                    trigger: "blur"
                                }]
                            },
                            {
                                label: "设备名称",
                                labelWidth: 120,
                                span: 24,
                                prop: "deviceName",
                                type: "select",
                                formslot: true
                            },
                            {
                                label: "故障位置",
                                labelWidth: 120,
                                prop: "faultPosition",
                                type: "tree",
                                span: 24,
                                formslot: true,
                            },
                            {
                                label: "故障专业类型",
                                labelWidth: 120,
                                span: 24,
                                prop: "faultType",
                                type: "select",
                                formslot: true,
                            },

                            {
                                label: "故障视频",
                                labelWidth: 120,
                                prop: "errorVideo",
                                type: "upload",
                                propsHttp: {
                                    res: "data",
                                    url: "link",
                                    name: "name",
                                    // home: "https://www.w3school.com.cn",
                                },
                                fileType: "video", //img/video/audio
                                listType: "picture-card",
                                accept: '.mp4',
                                span: 24,
                                // formslot:true,
                                action: '/api/blade-resource/oss/endpoint/put-file',
                            },
                            {
                                label: "故障图片",
                                labelWidth: 120,
                                span: 24,
                                prop: "imgUrl",
                                listType: "picture-card",
                                type: "upload",
                                propsHttp: {
                                    res: "data",
                                    url: "link",
                                    name: "name",
                                    // home: "https://www.w3school.com.cn",
                                },
                                // value:this.form.picAttaches,
                                formslot: true,
                                accept: '.jpg,.jpeg,.png',
                                fileType: "img", //img/video/audio
                                action: '/api/blade-resource/oss/endpoint/put-file',
                            },
                        ],
                    },
                },
            ]
        }
        console.log('addForm------------->',this.addForm)
        this.$forceUpdate()
       
    },
    computed: {
        ...mapGetters(["userInfo", "permission", "systemTime"]),
    },
    watch: {
        form(newVal, oldVal) {
            let arr = JSON.parse(JSON.stringify(this.addForm))
            if ((this.title == '编辑' && JSON.stringify(this.form) != '{}') || JSON.stringify(this.form) != '{}') {
                this.editId = this.form.id
                for (let key in this.form) {
                    this.addForm = [
                        {
                            form: {
                                imgList: this.form.picAttaches && this.form.picAttaches.length != 0 ? this.form.picAttaches.map(item => { return { name: item.originalName, url: item.link } }) : [],
                                // faultPosition: { node: this.deviceList.find(item => item.id == this.form.deviceName).position, data: {} },
                                faultPosition: this.form.faultLocation,
                                deviceName: this.form.deviceName,
                                // faultType: this.deviceList.find(item => item.id == this.form.deviceName).type, 
                                faultType: this.form.faultType, 
                                faultDescribe: this.form.faultDescribe,
                                videoAttaches: this.form.videoAttaches,
                                picAttaches: this.form.picAttaches,
                            },
                            formOption: {
                                emptyBtn: false,
                                submitBtn: false,
                                menuPosition: 'right',
                                column: [
                                    {
                                        label: "关联实验室",
                                        labelWidth: 120,
                                        span: 24,
                                        prop: "informant",
                                        type: "select",
                                        formslot: true,
                                        display:this.userInfo.role_id == '1839536982874193922' ? true : false
                                    },
                                    {
                                        label: "故障现象描述",
                                        labelWidth: 120,
                                        span: 24,
                                        prop: "faultDescribe",
                                        type: "textarea",
                                        minRows: 3,
                                        maxRows: 5,
                                        formslot: true,
                                        rules: [{
                                            required: true,
                                            message: "请输入故障现象描述",
                                            trigger: "blur"
                                        }]
                                    },
                                    {
                                        label: "设备名称",
                                        labelWidth: 120,
                                        span: 24,
                                        prop: "deviceName",
                                        type: "select",
                                        formslot: true
                                    },
                                    {
                                        label: "故障位置",
                                        labelWidth: 120,
                                        prop: "faultPosition",
                                        type: "tree",
                                        span: 24,
                                        formslot: true,
                                    },
                                    {
                                        label: "故障专业类型",
                                        labelWidth: 120,
                                        span: 24,
                                        prop: "faultType",
                                        type: "select",
                                        formslot: true,
                                    },

                                    {
                                        label: "故障视频",
                                        labelWidth: 120,
                                        prop: "errorVideo",
                                        type: "upload",
                                        propsHttp: {
                                            res: "data",
                                            url: "link",
                                            name: "name",
                                            // home: "https://www.w3school.com.cn",
                                        },
                                        value: this.form.videoAttaches && this.form.videoAttaches.length != 0 ? this.form.videoAttaches[0].link : '',
                                        fileType: "video", //img/video/audio
                                        listType: "picture-card",
                                        accept: '.mp4',
                                        span: 24,
                                        // formslot:true,
                                        action: '/api/blade-resource/oss/endpoint/put-file',
                                    },
                                    {
                                        label: "故障图片",
                                        labelWidth: 120,
                                        span: 24,
                                        prop: "imgUrl",
                                        listType: "picture-card",
                                        type: "upload",
                                        propsHttp: {
                                            res: "data",
                                            url: "link",
                                            name: "name",
                                            // home: "https://www.w3school.com.cn",
                                        },
                                        // value:this.form.picAttaches,
                                        formslot: true,
                                        accept: '.jpg,.jpeg,.png',
                                        fileType: "img", //img/video/audio
                                        action: '/api/blade-resource/oss/endpoint/put-file',
                                    },
                                ],
                            },
                        },
                    ]
                }
            } else {
                this.addForm = [
                    {
                        form: {
                            imgList: [],
                            faultPosition: '',
                            deviceName: '',
                            faultType: '',
                            faultDescribe: '',
                            videoAttaches: [],
                            picAttaches: [],
                        },
                        formOption: {
                            emptyBtn: false,
                            submitBtn: false,
                            menuPosition: 'right',
                            column: [
                                {
                                    label: "关联实验室",
                                    labelWidth: 120,
                                    span: 24,
                                    prop: "informant",
                                    type: "select",
                                    formslot: true,
                                    display:this.userInfo.role_id == '1839536982874193922' ? true : false
                                },
                                {
                                    label: "故障现象描述",
                                    labelWidth: 120,
                                    span: 24,
                                    prop: "faultDescribe",
                                    type: "textarea",
                                    minRows: 3,
                                    maxRows: 5,
                                    formslot: true,
                                    rules: [{
                                        required: true,
                                        message: "请输入故障现象描述",
                                        trigger: "blur"
                                    }]
                                },
                                {
                                    label: "设备名称",
                                    labelWidth: 120,
                                    span: 24,
                                    prop: "deviceName",
                                    type: "select",
                                    formslot: true
                                },
                                {
                                    label: "故障位置",
                                    labelWidth: 120,
                                    prop: "faultPosition",
                                    type: "tree",
                                    span: 24,
                                    formslot: true,
                                },
                                {
                                    label: "故障专业类型",
                                    labelWidth: 120,
                                    span: 24,
                                    prop: "faultType",
                                    type: "select",
                                    formslot: true,
                                },
                                {
                                    label: "故障视频",
                                    labelWidth: 120,
                                    prop: "errorVideo",
                                    type: "upload",
                                    propsHttp: {
                                        res: "data",
                                        url: "link",
                                        name: "name",
                                        // home: "https://www.w3school.com.cn",
                                    },
                                    fileType: "video", //img/video/audio
                                    listType: "picture-card",
                                    accept: '.mp4',
                                    span: 24,
                                    // formslot:true,
                                    action: '/api/blade-resource/oss/endpoint/put-file',
                                },
                                {
                                    label: "故障图片",
                                    labelWidth: 120,
                                    span: 24,
                                    prop: "imgUrl",
                                    listType: "picture-card",
                                    type: "upload",
                                    propsHttp: {
                                        res: "data",
                                        url: "link",
                                        name: "name",
                                        // home: "https://www.w3school.com.cn",
                                    },
                                    // value:this.form.picAttaches,
                                    formslot: true,
                                    accept: '.jpg,.jpeg,.png',
                                    fileType: "img", //img/video/audio
                                    action: '/api/blade-resource/oss/endpoint/put-file',
                                },
                            ],
                        },
                    },
                ]
            }
        }
    },

    methods: {
        getLabData(){
            getAllUser().then(res =>{
                console.log()
                this.labData = res.data.data
            })
            // this.labData = [
            //     {
            //         id: "1859474667806449666",
            //         createUser: "-1",
            //         createDept: "-1",
            //         createTime: "2024-11-21 13:51:23",
            //         updateUser: "1123598821738675201",
            //         updateTime: "2024-12-05 15:35:54",
            //         status: 1,
            //         isDeleted: 0,
            //         tenantId: "000000",
            //         code: "",
            //         userType: 1,
            //         account: "17852327323",
            //         name: "靳娜",
            //         realName: "靳娜",
            //         avatar: "",
            //         email: "",
            //         phone: "17852327323",
            //         birthday: "",
            //         sex: -1,
            //         roleId: "1846419477876510721",
            //         deptId: "1862052949173280770",
            //         deptName: "山东烁今实验室",
            //         postId: "1839605322925801474",
            //         address: "山东省青岛市崂山区仙霞岭路33号",
            //         addressLon: "120.48031277706768",
            //         addressLat: "36.11160956229114",
            //         isMaintenanceClient: -1,
            //         tenantName: "管理组",
            //         userTypeName: "WEB",
            //         roleName: "实验室管理员",
            //         postName: "领导",
            //         sexName: "性别",
            //         userExt: ""
            //     }
            // ]
        },
        // 切换实验室
        changeLab(val,index){
            console.log('val----------->',val)
            console.log('index----------->',index)
            this.addForm[index].form = {
                ...this.addForm[index].form,
                informant:val,
                informantPhone:this.labData.find(item => item.id == val).phone,
                reportUnit:this.labData.find(item => item.id == val).deptId,
                createDept:this.labData.find(item => item.id == val).createDept,
            }
        },
        // 选择设备
        changeDevice(value, row) {
            console.log('value---------->', value)
            console.log('row---------->', row)
            row.form.faultPosition.node = this.deviceList.find(item => item.id == value).position
            row.form.faultType = this.deviceList.find(item => item.id == value).type
            row.formOption.column.find(item => item.prop == 'faultPosition').value = row.form.faultPosition
            console.log('val------------>', row.formOption.column.find(item => item.prop == "faultPosition"))
        },
        uploadAfter(res, done, loading, column, flag) {
            console.log('res =============>', res)
            console.log('flag =============>', flag)
            if (column.label == '故障图片') {
                this.addForm[flag].form.picAttaches.push(
                    {
                        link: res.link,            //--文件url
                        name: res.originalName             //--文件名称
                    }
                )
                done()
            } else if (column.label == '故障视频') {
                this.addForm[flag].form.errorVideo = res.link
                this.addForm[flag].form.videoAttaches.push({
                        link: res.link,            //--文件url
                        name: res.originalName             //--文件名称
                    })
                done()
            }

        },
        async uploadBefore(file, done, loading, column, flag){
            console.log('file =============>', file)
            console.log('flag =============>', flag)
            console.log('addForm----------------->',this.addForm[flag].form)
            console.log('this.addForm[flag].videoAttaches.length + this.addForm[flag].picAttaches.length <= 3',this.addForm[flag].form.videoAttaches.length + this.addForm[flag].form.picAttaches.length)
            if(this.addForm[flag].form.videoAttaches && this.addForm[flag].form.picAttaches && this.addForm[flag].form.videoAttaches.length + this.addForm[flag].form.picAttaches.length < 3){
               if(file.size > 1024 * 1024 * 50){
                this.$message.error('故障视频最大上传50M,请压缩后再上传')
                loading()
               }else{
                done(file)
               }
            }else{
                this.$message.error('故障视频与故障图片最多可上传3个')
                loading()
            }
        },
        // 附件上传成功
        handleSuccess(index) {
            return (response, file, fileList) => {
                console.log('inex---------------->', index)
                console.log('response------------------>', response)
                console.log('file------------------>', file)
                console.log('fileList------------------>', fileList)
                this.addForm[index].form.picAttaches.push(
                    {
                        link: response.data.link,            //--文件url
                        name: response.data.originalName             //--文件名称
                    }
                )
            }
        },
        beforeAvatarUpload(index){
            return (file) =>{
                console.log('file------>',file)
                if(this.addForm[index].form.videoAttaches && this.addForm[index].form.picAttaches && this.addForm[index].form.videoAttaches.length + this.addForm[index].form.picAttaches.length < 3){
                    const isLt3M = file.size 
                    console.log('isLt2M==============>',isLt3M)
                    if(isLt3M >  1024 * 1024 * 3){
                        const r = confirm(
                            `您上传的图片大小超过3Mb,是否进行压缩上传？(此操作会降低图片质量)`
                        )
                        console.log('r=========>',r)
                        if(r){
                            const _this = this
                            return new Promise((resolve, reject) => {
                                const image = new Image()
                                let resultBlob = ''
                                image.src = URL.createObjectURL(file)
                                image.onload = () => {
                                    // 调用方法获取blob格式，方法写在下边
                                    resultBlob = _this.compressUpload(image, file)
                                    const fs = new File([resultBlob], file.name, {
                                        type: file.type,
                                        width:200,
                                        height:200
                                    })
                                    console.log('fs============>',fs)
                                    if (fs.size  > 1024 * 1024 * 3) {
                                        // this.commonZipPic(fs)
                                        this.$message.warning('压缩后图片仍大于3Mb，请您手动压缩')
                                        reject()
                                    }
                                    resolve(fs)
                                }
                                image.onerror = () => {
                                    reject()
                                }
                            })
                        }else{
                            this.$message.warning('您上传的图片大小超过3Mb,请手动压缩后在上传')
                            return false
                        }
                    }else{
                        return true
                    }
                }else{
                    this.$message.error('故障视频与故障图片最多可上传3个')
                    return false
                }
            }
        },
        /* 图片压缩方法-canvas压缩 */
        compressUpload(image, file) {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            // const initSize = image.src.length
            const { width } = image
            const { height } = image
            canvas.width = width
            canvas.height = height
            ctx.fillRect(0, 0, canvas.width, canvas.height)
            ctx.drawImage(image, 0, 0, width / 10, height / 10)
            // 进行最小压缩0.1
            const compressData = canvas.toDataURL(file.type || 'image/jpeg', 0.1)
            // 压缩后调用方法进行base64转Blob，方法写在下边
            const blobImg = this.dataURItoBlob(compressData)
            return blobImg
        }, 
        /* base64转Blob对象 */
        dataURItoBlob(data) {
            let byteString
            if (data.split(',')[0].indexOf('base64') >= 0) {
                byteString = atob(data.split(',')[1])
            } else {
                byteString = unescape(data.split(',')[1])
            }
            const mimeString = data.split(',')[0].split(':')[1].split(';')[0]
            const ia = new Uint8Array(byteString.length)
            for (let i = 0; i < byteString.length; i += 1) {
                ia[i] = byteString.charCodeAt(i)
            }
            return new Blob([ia], { type: mimeString })
        },
        // 上传视频文件压缩后再上传
        uploadCompressVideo(file) {
            console.log('file===================>',file)
            if (file) {
                let filename = file.name;
                let filetype = file.type;
 
                const videoUrl = ffmpeg.getObjectURL(file);
                // const video = document.getElementById('video');
                // video.src = videoUrl;
                // return ffmpeg.squeezVideo().then((videoObj) => {
                    // const {width, height} = videoObj;
                    return ffmpeg.squeezVideo(file, filename, 'mp4', '200', '200', this.msg);
                // })
            }
        },
        // 附件删除
        handleRemove(index) {
            return (file, fileList) =>{
                this.imgList = []
                this.fileList = []
                fileList.map(item => {
                    this.fileList.push({ name: item.name, link: item.response ? item.response.data.link : item.url })
                    this.imgList.push({ name: item.name, url: item.response ? item.response.data.link : item.url })
                })
                this.addForm[index].form.picAttaches = fileList
            }
        },
        changeDescribe(event, index) {
            console.log('event.target.value------------>', event.target.value)
            if (event.target.value != '') {
                console.log('index----------->', index)
                console.log(this.addForm[index])
                if (this.addForm[index].form.faultDescribe != '') {
                    nextTick(() => {
                        this.$refs[`form${index}`][0].clearValidate()
                    })
                }
            }
        },
        // 点击新增按钮
        handleAdd() {
            let count = 0
            this.addForm.forEach((formItem, index) => {
                this.$refs[`form${index}`][0].validate((valid) => {
                    if (valid) {
                        console.log(`表单项${index}验证通过`);
                        // 执行提交操作
                    } else {
                        console.log(`表单项${index}验证失败`);
                        if (this.addForm[index].form.faultDescribe != '') {
                            count++
                            this.$refs[`form${index}`][0].clearValidate()
                            if(count == this.addForm.length){
                                this.addForm.push({
                                form: {
                                    faultPosition: '',
                                    deviceName: "",
                                    faultType: "",
                                    faultDescribe: "",
                                    errorVideo: "",
                                    picAttaches: [],
                                },
                                formOption: {
                                    emptyBtn: false,
                                    submitBtn: false,
                                    menuPosition: 'right',
                                    column: [
                                        {
                                            label: "关联实验室",
                                            labelWidth: 120,
                                            span: 24,
                                            prop: "informant",
                                            type: "select",
                                            formslot: true,
                                            display:this.userInfo.role_id == '1839536982874193922' ? true : false
                                        },
                                        {
                                            label: "故障现象描述",
                                            labelWidth: 120,
                                            span: 24,
                                            prop: "faultDescribe",
                                            type: "textarea",
                                            minRows: 3,
                                            maxRows: 5,
                                            formslot: true,
                                            rules: [{
                                                required: true,
                                                message: "请输入故障现象描述",
                                                trigger: "blur"
                                            }]
                                        },
                                        {
                                            label: "设备名称",
                                            labelWidth: 120,
                                            span: 24,
                                            prop: "deviceName",
                                            type: "select",
                                            formslot: true
                                        },
                                        {
                                            label: "故障位置",
                                            labelWidth: 120,
                                            prop: "faultPosition",
                                            type: "tree",
                                            span: 24,
                                            formslot: true,
                                        },
                                        {
                                            label: "故障专业类型",
                                            labelWidth: 120,
                                            span: 24,
                                            prop: "faultType",
                                            type: "select",
                                            formslot: true,
                                        },
                                        {
                                            label: "故障视频",
                                            labelWidth: 120,
                                            prop: "errorVideo",
                                            type: "upload",
                                            propsHttp: {
                                                res: "data",
                                                url: "link",
                                                name: "name",
                                                // home: "https://www.w3school.com.cn",
                                            },
                                            fileType: "video", //img/video/audio
                                            listType: "picture-card",
                                            accept: '.mp4',
                                            span: 24,
                                            // formslot:true,
                                            action: '/api/blade-resource/oss/endpoint/put-file',
                                        },
                                        {
                                            label: "故障图片",
                                            labelWidth: 120,
                                            span: 24,
                                            prop: "imgUrl",
                                            listType: "picture-card",
                                            type: "upload",
                                            propsHttp: {
                                                res: "data",
                                                url: "link",
                                                name: "name",
                                                // home: "https://www.w3school.com.cn",
                                            },
                                            // value:this.form.picAttaches,
                                            accept: '.jpg,.jpeg,.png',
                                            fileType: "img", //img/video/audio
                                            action: '/api/blade-resource/oss/endpoint/put-file',
                                        },
                                    ],
                                },
                            });

                            }
                            
                            
                        }
                    }
                });
            });
        },
        // 点击取消按钮
        handleCancel() {
            this.dialogVisible = false;
            this.addForm = [
                {
                    form: {
                        imgList: [],
                        faultPosition: { node: undefined, data: {} },
                        deviceName: '',
                        faultType: '',
                        faultDescribe: '',
                        videoAttaches: [],
                        picAttaches: [],
                    },
                    formOption: {
                        emptyBtn: false,
                        submitBtn: false,
                        menuPosition: 'right',
                        column: [
                            {
                                label: "故障现象描述",
                                labelWidth: 120,
                                span: 24,
                                prop: "faultDescribe",
                                type: "textarea",
                                minRows: 3,
                                maxRows: 5,
                                formslot: true,
                                rules: [{
                                    required: true,
                                    message: "请输入故障现象描述",
                                    trigger: "blur"
                                }]
                            },
                            {
                                label: "设备名称",
                                labelWidth: 120,
                                span: 24,
                                prop: "deviceName",
                                type: "select",
                                formslot: true
                            },
                            {
                                label: "故障位置",
                                labelWidth: 120,
                                prop: "faultPosition",
                                type: "tree",
                                span: 24,
                                formslot: true,
                            },
                            {
                                label: "故障专业类型",
                                labelWidth: 120,
                                span: 24,
                                prop: "faultType",
                                type: "select",
                                formslot: true,
                            },
                            {
                                label: "故障视频",
                                labelWidth: 120,
                                prop: "errorVideo",
                                type: "upload",
                                propsHttp: {
                                    res: "data",
                                    url: "link",
                                    name: "name",
                                    // home: "https://www.w3school.com.cn",
                                },
                                fileType: "video", //img/video/audio
                                listType: "picture-card",
                                accept: '.mp4',
                                span: 24,
                                // formslot:true,
                                action: '/api/blade-resource/oss/endpoint/put-file',
                            },
                            {
                                label: "故障图片",
                                labelWidth: 120,
                                span: 24,
                                prop: "imgUrl",
                                listType: "picture-card",
                                type: "upload",
                                propsHttp: {
                                    res: "data",
                                    url: "link",
                                    name: "name",
                                    // home: "https://www.w3school.com.cn",
                                },
                                // value:this.form.picAttaches,
                                formslot: true,
                                accept: '.jpg,.jpeg,.png',
                                fileType: "img", //img/video/audio
                                action: '/api/blade-resource/oss/endpoint/put-file',
                            },
                        ],
                    },
                },
            ]
            this.$emit('close')
        },
        // 点击保存按钮
        handleSave() {
            console.log('addFrom----------->', this.addForm)
            let count = 0
            this.addForm.forEach((formItem, index) => {
                console.log('form------------>', this.$refs[`form${index}`])
                this.$refs[`form${index}`][0].validate((valid) => {
                    if (valid) {
                        console.log(`表单项${index}验证通过`);
                        // 执行提交操作
                    } else {
                        console.log(`表单项${index}验证失败`);
                        if(this.userInfo.role_id == '1839536982874193922'){
                            //客服角色
                            if (this.addForm[index].form.faultDescribe != '' && this.addForm[index].form.informant != ''){
                                count++
                                this.$refs[`form${index}`][0].clearValidate()
                                if(count == this.addForm.length){
                                    let data = []
                                    this.addForm.map(item => {
                                        data.push({
                                            faultLocation: item.form.faultPosition.node,
                                            deviceName: item.form.deviceName,
                                            faultType: item.form.faultType,
                                            videoAttaches: item.form.videoAttaches,
                                            picAttaches: item.form.picAttaches,
                                            faultDescribe: item.form.faultDescribe,
                                            createDept:item.form.createDept,
                                            informant:item.form.informant,
                                            informantPhone:item.form.informantPhone,
                                            reportUnit:item.form.reportUnit,
                                        })
                                    })
                                    console.log('data============>', data)
                                    serviceDraft(data).then(res => {
                                        if (res.data.code == 200) {
                                            this.$message.success('保存成功')
                                            this.$emit('close')
                                        }
                                    })
                                    this.$emit('close')
                                }
                            }
                        }else{
                            if (this.addForm[index].form.faultDescribe != '') {
                                count++
                                this.$refs[`form${index}`][0].clearValidate()
                                if(count == this.addForm.length){
                                    let data = []
                                    this.addForm.map(item => {
                                        data.push({
                                            faultLocation: item.form.faultPosition.node,
                                            deviceName: item.form.deviceName,
                                            faultType: item.form.faultType,
                                            videoAttaches: item.form.videoAttaches,
                                            picAttaches: item.form.picAttaches,
                                            faultDescribe: item.form.faultDescribe,
                                        })
                                    })
                                    console.log('data============>', data)
                                    saveDraft(data).then(res => {
                                        if (res.data.code == 200) {
                                            this.$message.success('保存成功')
                                            this.$emit('close')
                                        }
                                    })
                                    this.$emit('close')
                                }
                                
                                
                            }
                        }
                    }
                });
            });

            
        },
        // 点击确定按钮
        handleConfirm(index) {
            let count = 0
            this.addForm.forEach((formItem, index) => {
                this.$refs[`form${index}`][0].validate((valid) => {
                    if (valid) {
                        console.log(`表单项${index}验证通过`);
                        // 执行提交操作
                    } else {
                        console.log(`表单项${index}验证失败`);
                        if(this.userInfo.role_id == '1839536982874193922'){
                            //客服角色
                            if (this.addForm[index].form.faultDescribe != '' && this.addForm[index].form.informant != '') {
                                count++
                                this.$refs[`form${index}`][0].clearValidate()
                                if(count == this.addForm.length){
                                    let data = []
                                    this.addForm.map(item => {
                                        data.push({
                                            id: this.editId ? this.editId : null,
                                            faultLocation: item.form.faultPosition,
                                            deviceName: item.form.deviceName,
                                            faultType: item.form.faultType,
                                            videoAttaches: item.form.videoAttaches,
                                            picAttaches: item.form.picAttaches,
                                            faultDescribe: item.form.faultDescribe,
                                            submitType: 1,
                                            createDept:item.form.createDept,
                                            informant:item.form.informant,
                                            informantPhone:item.form.informantPhone,
                                            reportUnit:item.form.reportUnit,
                                        })
                                    })
                                    if(data.videoAttaches && data.picAttaches && data.videoAttaches.length + data.picAttaches.length > 3){
                                        this.$message.error('故障视频与故障图片最多可上传3个')
                                    }else if (data.videoAttaches && !data.picAttaches && data.videoAttaches.length > 3){
                                        this.$message.error('故障视频与故障图片最多可上传3个')
                                    }else if (!data.videoAttaches && data.picAttaches && data.picAttaches.length > 3){
                                        this.$message.error('故障视频与故障图片最多可上传3个')
                                    }else{
                                        console.log('data===========>',data)
                                        serviceSave(data).then(res =>{
                                            console.log('res------------------->', res)
                                            if (res.data.code == 200) {
                                                this.$message.success('新增成功')
                                                this.$emit('close')
                                            }
                                        })
                                    }
                                }
                            }
                        }else{
                            if (this.addForm[index].form.faultDescribe != '') {
                                count++
                                this.$refs[`form${index}`][0].clearValidate()
                                if(count == this.addForm.length){
                                    let data = []
                                    this.addForm.map(item => {
                                        data.push({
                                            id: this.editId ? this.editId : null,
                                            faultLocation: item.form.faultPosition,
                                            deviceName: item.form.deviceName,
                                            faultType: item.form.faultType,
                                            videoAttaches: item.form.videoAttaches,
                                            picAttaches: item.form.picAttaches,
                                            faultDescribe: item.form.faultDescribe,
                                            submitType: 1
                                        })
                                    })
                                    console.log('data---------->',data)
                                    if(data.videoAttaches && data.picAttaches && data.videoAttaches.length + data.picAttaches.length > 3){
                                        this.$message.error('故障视频与故障图片最多可上传3个')
                                    }else if (data.videoAttaches && !data.picAttaches && data.videoAttaches.length > 3){
                                        this.$message.error('故障视频与故障图片最多可上传3个')
                                    }else if (!data.videoAttaches && data.picAttaches && data.picAttaches.length > 3){
                                        this.$message.error('故障视频与故障图片最多可上传3个')
                                    }else{
                                        saveData(data).then(res => {
                                            console.log('res------------------->', res)
                                            if (res.data.code == 200) {
                                                this.$message.success('新增成功')
                                                this.$emit('close')
                                            }
                                        })
                                    }
                                }
                                
                                
                            }
                        }
                    }
                });
            });

        },
    }
}
</script>

<style></style>