<script setup lang="ts">
import TableComponent from 'components/TableComponent/index.vue'
import FormComponent from 'components/FormComponent/index.vue'
import PagingComponent from 'components/PagingComponent/index.vue'
import UploadComponentNew from 'components/uploadComponentNew/index.vue'
import TitleTip from 'components/TitleTip/index.vue'
import uploadComponent from 'components/uploadComponent/index.vue'
import previewImg from './previewImg/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { ref } from 'vue'
import { useStore } from 'store/user'
const store = useStore()
import { mainStore } from 'store/main'
import { InfoFilled, UploadFilled } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
const store2 = mainStore()
const isViewForm = ref(false)

const isDisabled = ref(false)
const isMaStatus = ref(false)
const isAdd = ref(false)

const previewDialogVisible = ref(false)
const previewDialogImageUrl = ref('')
import {
    getEquipmentTypeApi, //装备类型
    getCompanyListApi, //所属公司
    getEquipmentListApi, //列表
    getDetailApi, //详情
    equipmentAddApi, //新增
    equipmentEditApi, //编辑
    insertDraftApi, //草稿（编辑）
    removeDeviceApi, //删除
    updateUpDownApi, //上下架
    downLoadTemplate, //模班下载
} from 'http/api/usercenter/goodsmang'

// 注册地址拼装
const AssemblyRegisterAddress: any = reactive([])
const deviceType: any = reactive([])

onMounted(() => {
    // 获取装备树
    getTypeTreeData()
    // 获取下拉
    getCompanyList()
    // 获取省级数据
    // store.getprovinceList()
    // 获取设备类型
    // store.getDeviceTypeList()
})
// 设备类型树
const deviceTypeTree: any = ref([])
const partTypeTreeProps: any = ref({
    children: 'children',
    label: 'name',
    multiple: false,
    value: 'id',
})
// 获取装备树
const getTypeTreeData = async () => {
    const res: any = await getEquipmentTypeApi()
    console.log('treeData==========', res)
    deviceTypeTree.value = res.data
}
//装备类目-change
const deviceTypeChange = (val: any) => {
    console.log(val)
    if (val.length > 0) {
        queryParams.value.typeId = val[3]
    } else {
        queryParams.value.typeId = ''
    }
}
//反显 树结构数据获取父
const getSelectId = (list: any, id: any) => {
    for (let i in list) {
        if (list[i].id == id) {
            //查询到就返回该数组对象的value
            return [list[i].id]
        }
        if (list[i].children) {
            let node: any = getSelectId(list[i].children, id)
            if (node !== undefined) {
                //查询到把父节把父节点加到数组前面
                node.unshift(list[i].id)
                return node
            }
        }
    }
}

/* 装备树选中数组 */
const deviceTypeList: any = ref([])
//日期周期
const dateRange: any = ref([])
/* 查询参数 */
const queryParams: any = ref({
    deviceName: '',
    code: '',
    maStatus: '',
    typeId: '',
    pageSize: 10,
    pageNum: 1,
    startTime: '',
    endTime: '',
})
const queryFormRef = ref<FormInstance>()
const total: any = ref(0)
const tableData: any = ref([])
/* 查询按钮 */
const queryTableList = () => {
    queryParams.value.pageNum = 1
    getList()
}
// 重置
const resetTableList = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    dateRange.value = []
    queryParams.value.startTime = ''
    queryParams.value.endTime = ''
    deviceTypeList.value = []
    queryParams.value.typeId = null
    queryTableList()
}
// 获取数据列表
const getList = async () => {
    console.log(queryParams.value.pageNum, '***9999', queryParams.value.pageSize)

    if (dateRange.value.length > 0) {
        queryParams.value.startTime = dateRange.value[0]
        queryParams.value.endTime = dateRange.value[1]
    }
    const res: any = await getEquipmentListApi(queryParams.value)
    console.log(res, '列表数据**--**')
    total.value = res.total
    tableData.value = res.rows.filter((item: any) => item !== null)
}
// 获取数据列表
getList()

//---列表按钮事件---
// 装备新增按钮
const equipmentDeployment = () => {
    isAdd.value = true
    settleinTitle.value = '新增装备'
    isMaStatus.value = false
    isViewForm.value = false
    isEditForm.value = false
    descriptionFormList.value = []
    descriptionFormList.value.push({
        newId: Date.now(),
        insurancePdfs: [],
        insuranceATempPdf: [],
        examinationPdfs: [],
        examinationTempPdf: [],
    })
    disabledForm.value = false
    isEditDisabled.value = true
    equipmentDeploymentParams.value = {
        deviceName: '',
        deviceTypeList: [],
        deviceCount: 1,
        unitName: '',
        code: '',
        brand: '',
        typeId: '',
        companyId: '',
        productionDate: '',
        dayLeasePrice: '',
        person: '',
        personPhone: '',
        deviceWeight: '',
        checkDate: '',
        checkCycle: '',
    }
    mainFileList.value = []
    detailsFileList.value = []
    insurancePdf.value = []
    examinationPdf.value = []

    //装备证书table
    ;(equipTableList.value = []),
        // 打开入驻弹框
        (dialogFormVisibleSettlein.value = true)
}
const isEditForm = ref(false)
const maId: any = ref('')
const warningDays: any = ref(0)
// 编辑按钮
const editRowInfo = (row: any) => {
    isAdd.value = false
    settleinTitle.value = '装备编辑'
    getDetailData(row)
    isMaStatus.value = true
    disabledForm.value = false
    isEditDisabled.value = true
    isViewForm.value = false
    isEditForm.value = true
}
/* 查看按钮 */
const previewRowInfo = (row: any) => {
    isAdd.value = false
    settleinTitle.value = '装备详情'
    getDetailData(row)
    disabledForm.value = true
    isEditDisabled.value = false
    isViewForm.value = true
    isEditForm.value = false
}
// 删除按钮
const deleteRowInfo = async (row: any) => {
    ElMessageBox.confirm('是否确定删除？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            return removeDeviceApi([row.maId])
        })
        .then((res) => {
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
                getList()
            }
        })
        .catch(() => {})
}
//获取详情接口
const getDetailData = async (row: any) => {
    await getTypeTreeData()
    const { data: res }: any = await getDetailApi(row.maId)
    const {
        deviceName,
        // deviceTypeList,
        deviceCount,
        unitName,
        code,
        brand,
        typeId,
        companyId,
        productionDate,
        dayLeasePrice,
        person,
        personPhone,
        deviceWeight,
        checkDate,
        checkCycle,
        mainFileList,
        detailsFileList,
        insurancePdf,
        examinationPdf,
        devInfoProperties,
        tableList,
        maintenanceAlarmDay,
    } = res

    Object.assign(addAndEditForm, {
        deviceName,
        deviceCount,
        unitName,
        code,
        brand,
        typeId,
        companyId,
        productionDate,
        dayLeasePrice,
        person,
        personPhone,
        deviceWeight,
        checkDate,
        checkCycle,
        mainFileList,
        detailsFileList,
        insurancePdf,
        examinationPdf,
        devInfoProperties,
        tableList,
        maintenanceAlarmDay,
    })

    if (settleinTitle.value == '装备编辑') {
        Object.assign(addAndEditForm, {
            maId: row.maId,
        })
    }

    descriptionFormList.value = []
    descriptionFormList.value.push({
        newId: Date.now(),
        insurancePdfs: [],
        insuranceATempPdf: [],
        examinationPdfs: [],
        examinationTempPdf: [],
    })
    descriptionFormList.value[0].insurancePdfs = insurancePdf
    descriptionFormList.value[0].examinationPdfs = examinationPdf
    options.value = []
    addAndEditForm.deviceTypeList = getSelectId(deviceTypeTree.value, addAndEditForm.typeId)
    warningDays.value = addAndEditForm.maintenanceAlarmDay
    // warningDays.value =  addAndEditForm.deviceTypeList[addAndEditForm.deviceTypeList.length-1].data.maintenanceAlarmDay
    //  warningDays.value = addAndEditForm.deviceTypeList.maintenanceAlarmDay
    propertyNames.value = addAndEditForm.devInfoProperties
    equipTableList.value = []
    if (isEditForm.value == true) {
        if (addAndEditForm.tableList != null) {
            addAndEditForm.tableList.forEach((item: any) => {
                equipTableList.value.push({
                    id: item.id,
                    identifyCode: item.identifyCode,
                    name2: item.insurancePdf[0]?.fileUrl,
                    checkMan: item.checkMan,
                    checkDate: item.checkDate,
                    nextCheckDate: item.nextCheckDate,
                    name6: item.examinationPdf[0]?.fileUrl,
                    insurancePdf: item.insurancePdf,
                    examinationPdf: item.examinationPdf,
                })
            })
        } else {
            equipTableList.value = [
                {
                    id: '',
                    identifyCode: '',
                    name2: '',
                    checkMan: '',
                    checkDate: '',
                    nextCheckDate: '',
                    name6: '',
                    insurancePdf: [],
                    examinationPdf: [],
                },
            ]
        }
    } else {
        if (addAndEditForm.tableList != null) {
            addAndEditForm.tableList.forEach((item: any) => {
                equipTableList.value.push({
                    id: item.id,
                    identifyCode: item.identifyCode,
                    name2: item.insurancePdf[0]?.fileUrl,
                    checkMan: item.checkMan,
                    checkDate: item.checkDate,
                    nextCheckDate: item.nextCheckDate,
                    name6: item.examinationPdf[0]?.fileUrl,
                    insurancePdf: item.insurancePdf,
                    examinationPdf: item.examinationPdf,
                })
            })
        } else {
            equipTableList.value = []
        }
    }
    console.log('tt23123', equipTableList.value)
    // addAndEditForm.deviceTypeList[0].data.propertyNames.forEach((item:any) =>{
    //     options.value.push({'label':item,'value':item})
    //  })
    dialogFormVisibleSettlein.value = true

    console.log(res, '详情接口')

    // console.log(row, '----row----')
    // maId.value = row.maId
    // const res: any = await getDetailApi(row.maId)
    // console.log(res, '----detail----')
    // equipmentDeploymentParams.value = res.data
    // equipmentDeploymentParams.value.companyId = Number(res.data.companyId)
    // mainFileList.value = res.data.mainFileList
    // detailsFileList.value = res.data.detailsFileList
    // insurancePdf.value = res.data.insurancePdf
    // examinationPdf.value = res.data.examinationPdf
    // //反显 装备树
    // equipmentDeploymentParams.value.deviceTypeList = getSelectId(
    //     deviceTypeTree.value,
    //     equipmentDeploymentParams.value.typeId,
    // )
    // dialogFormVisibleSettlein.value = true
    // equipmentDeploymentParams.value.cityId = String(equipmentDeploymentParams.value.cityId)
    // equipmentDeploymentParams.value.areaId = String(equipmentDeploymentParams.value.areaId)
    // equipmentDeploymentParams.value.provinceId = String(
    //     equipmentDeploymentParams.value.provinceId
    // )
    // equipmentDeploymentParams.value.leaseScope = String(
    //     equipmentDeploymentParams.value.leaseScope
    // )
    // equipmentDeploymentParams.value.groupId = Number(equipmentDeploymentParams.value.groupId)
    // equipmentDeploymentParams.value.typeId = Number(equipmentDeploymentParams.value.typeId)
    // store.getprovinceList()
    // store.getmarketList(row.provinceId)
    // store.getareaList(row.cityId)
    // store.getDeviceTypeList()
    // store.getDeviceTypeSonList(row.companyId)
    // store.getDeviceTypeSunList(row.groupId)
}

const ids: any = ref([])
const handleSelectionChange = (selection: any) => {
    ids.value = selection.map((item: any) => item.maId)
}
// 上下架（批量）
const handleUpdateUpDown = (row: any, maStatus: any) => {
    ElMessageBox.confirm('是否确定操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            let maIds = []
            if (!row) {
                maIds = ids.value
            } else {
                maIds.push(row.maId)
            }
            if (maIds.length == 0) {
                ElMessage({ type: 'error', message: '请选择要操作的数据' })
                return
            }
            return updateUpDownApi({ maIds, maStatus })
        })
        .then((res) => {
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: '操作成功',
                })
                getList()
            }
        })
        .catch(() => {})
}

/*
        ----装备弹窗-----
    */
/* 查看 */
const disabledForm = ref(false)
/* 编辑 */
const isEditDisabled = ref(false)
/* 入驻框的标题 */
const settleinTitle = ref('')
//所属公司
const companyDataList: any = ref([])
/*
 *  商品入驻弹框参数
 */
const equipmentDeploymentParams: any = ref({
    deviceName: '',
    deviceTypeList: [],
    deviceCount: 1,
    unitName: '',
    code: '',
    brand: '',
    typeId: '',
    companyId: '',
    productionDate: '',
    dayLeasePrice: '',
    person: '',
    personPhone: '',
    deviceWeight: '',
    checkDate: '',
    checkCycle: '',
})
//编码类型禁止修改数目
const countDisabled = ref(false)
//装备类目-change
const dialogTypeCascader = ref()
//装备类目-change
const dialogTypeChange = async () => {
    options.value = []
    const deviceTypeList = dialogTypeCascader.value.getCheckedNodes()
    // console.log(deviceTypeList)
    // equipmentDeploymentParams.value.unitName = deviceTypeList[0].data.unitName
    // equipmentDeploymentParams.value.dayLeasePrice = deviceTypeList[0].data.leasePrice
    // isDisabled.value = true
    // let manageType = deviceTypeList[0].data.manageType
    // if (manageType == '1') {
    //     //数量
    //     equipmentDeploymentParams.value.deviceCount = 1
    //     countDisabled.value = false
    // } else if (manageType == '0') {
    //     //编码
    //     equipmentDeploymentParams.value.deviceCount = 1
    //     countDisabled.value = true
    // }
    console.log('deviceTypeList', deviceTypeList[0].data.name)
    warningDays.value = deviceTypeList[0].data.maintenanceAlarmDay
    if (deviceTypeList[0].data.maTypeProperties == null) {
        propertyNames.value = []
    } else {
        propertyNames.value = []
        deviceTypeList[0].data.maTypeProperties.forEach((item: any) => {
            propertyNames.value.push({ propertyName: item.propertyName, propertyValue: '' })
        })
        // propertyNames.value = deviceTypeList[0].data.maTypeProperties
        deviceTypeList[0].data.maTypeProperties.forEach((item: any) => {
            options.value.push({ label: item.propertyName, value: item.propertyName })
        })
        console.log(propertyNames.value)
    }
    // propertyNames.value = deviceTypeList[0].data.propertyNames
    isDisabled.value = true
    addAndEditForm.unitName = deviceTypeList[0].data.unitName
    addAndEditForm.dayLeasePrice = deviceTypeList[0].data.leasePrice
    addAndEditFormRef.value.clearValidate(['unitName', 'dayLeasePrice'])
    equipTableList.value = []
    equipTableList.value.push({
        id: '',
        identifyCode: '',
        name2: '',
        checkMan: '',
        checkDate: '',
        nextCheckDate: '',
        name6: '',
        insurancePdf: [],
        examinationPdf: [],
    })
}

//获取所属公司下拉数据
const getCompanyList = async () => {
    const res: any = await getCompanyListApi()
    console.log(res, '列表数据**--**-----------')
    companyDataList.value = res.data
}
// 装备弹框显示隐藏
const dialogFormVisibleSettlein: any = ref(false)
const ruleFormRef: any = ref(null)
//表单校验规则
const equipRules = ref({
    deviceName: [
        {
            required: true,
            message: '请输入装备名称',
            trigger: 'blur',
        },
    ],
    deviceTypeList: [
        {
            required: true,
            message: '请选择装备类目',
            trigger: 'change',
        },
    ],
    deviceCount: [
        {
            required: true,
            message: '请输入装备数量',
            trigger: 'blur',
        },
    ],
    unitName: [
        {
            required: true,
            message: '装备单位不可为空',
            trigger: 'blur',
        },
    ],
    brand: [
        {
            required: true,
            message: '请输入装备品牌',
            trigger: 'blur',
        },
    ],
    code: [
        {
            required: true,
            message: '请输入装备编号',
            trigger: 'change',
        },
    ],
    companyId: [
        {
            required: true,
            message: '请选择所属公司',
            trigger: 'change',
        },
    ],
    productionDate: [
        {
            required: true,
            message: '请选择出厂日期',
            trigger: 'change',
        },
    ],
    dayLeasePrice: [
        {
            required: true,
            message: '请输入日租金',
            trigger: 'blur',
        },
    ],
    person: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
    checkDate: [{ required: true, message: '校验日期不能为空', trigger: 'blur' }],
    checkCycle: [{ required: true, message: '校验周期不能为空', trigger: 'blur' }],
    personPhone: [
        { required: true, message: '联系电话不能为空', trigger: 'blur' },
        {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
        },
    ],
    mainFileList: [{ required: true, message: '请上传主展示图', trigger: 'change' }],
    detailsFileList: [{ required: true, message: '请上传详情展示图', trigger: 'change' }],

    // deviceWeight: [
    //     //
    //     { required: true, message: '整机重量不能为空', trigger: 'blur' },
    // ],
})

const getProertyNameRules = (item: any) => {
    if (item.mustHave == 1) {
        return [{ required: true, message: '请输入属性描述', trigger: 'blur' }]
    } else {
        return []
    }
}

const getProertyValueRules = (item: any) => {
    if (item.mustHave == 1) {
        return [{ required: true, message: '请输入属性值', trigger: 'blur' }]
    } else {
        return []
    }
}

const descriptionRules = ref({
    identifyCode: [{ required: true, message: '请填写装备唯一标识符', trigger: 'blur' }],
    insurancePdfs: [{ required: true, message: '请上传合格证', trigger: 'change' }],
    examinationPdfs: [{ required: true, message: '请上传检测证明', trigger: 'change' }],
})
// 弹框保存提交
const submitBtn = async () => {
    submitFun(isEditForm.value ? 3 : 1)
    // ruleFormRef.value.validate(async (valid: any) => {
    //     if (valid) {
    //         if (
    //             equipmentDeploymentParams.value.deviceTypeList &&
    //             equipmentDeploymentParams.value.deviceTypeList.length > 0
    //         ) {
    //             equipmentDeploymentParams.value.typeId =
    //                 equipmentDeploymentParams.value.deviceTypeList[3]
    //         } else {
    //             equipmentDeploymentParams.value.typeId = ''
    //         }
    //         if (mainFileList.value.length == 0 || mainFileList.value.length > 6) {
    //             ElMessage({ type: 'error', message: '主展示图不得少于1张，不得多于6张' })
    //             return
    //         }
    //         if (detailsFileList.value.length == 0 || detailsFileList.value.length > 6) {
    //             ElMessage({ type: 'error', message: '详情展示图不得少于1张，不得多于6张' })
    //             return
    //         }
    //         let param = {
    //             ...equipmentDeploymentParams.value,
    //             mainFileList: mainFileList.value, //主展示
    //             detailsFileList: detailsFileList.value, //详情展示
    //             insurancePdf: insurancePdf.value, //合格证
    //             examinationPdf: examinationPdf.value, //检测证明
    //         }
    //         param.maStatus == 0 ? (param.maStatus = 1) : param.maStatus
    //         if (
    //             equipmentDeploymentParams.value.maId &&
    //             equipmentDeploymentParams.value.maId != ''
    //         ) {
    //             const res: any = await equipmentEditApi(param)
    //             if (res.code === 200) {
    //                 ElMessage({
    //                     type: 'success',
    //                     message: '保存成功',
    //                 })
    //                 dialogFormVisibleSettlein.value = false
    //                 getList()
    //             }
    //         } else {
    //             const res: any = await equipmentAddApi(param)
    //             if (res.code === 200) {
    //                 ElMessage({
    //                     type: 'success',
    //                     message: '保存成功',
    //                 })
    //                 dialogFormVisibleSettlein.value = false
    //                 getList()
    //             }
    //         }
    //     }
    // })
}
const submitFun = (type: any) => {
    //  type 1 提交(新增时) 2 存草稿(新增时) 3 编辑时的提交 4 编辑时存草稿
    // addAndEditForm.mainFileList = [
    //     ...addAndEditForm.mainFileList,
    //     ...addAndEditForm.mainFileTempList,
    // ]
    // addAndEditForm.detailsFileList = [
    //     ...addAndEditForm.detailsFileList,
    //     ...addAndEditForm.detailsFileTempList,
    // ]
    if (isAdd.value) {
        addAndEditForm.mainFileList = Array.from(
            new Set([...addAndEditForm.mainFileList, ...addAndEditForm.mainFileTempList]),
        )
        addAndEditForm.detailsFileList = Array.from(
            new Set([...addAndEditForm.detailsFileList, ...addAndEditForm.detailsFileTempList]),
        )
    }

    addAndEditFormRef.value.validate(async (valid: any) => {
        if (valid) {
            let isDescription = false
            // addAndEditForm.identifyCode = []
            descriptionFormList.value.forEach((e: any, index: number) => {
                e.insurancePdfs = [...e.insurancePdfs, ...e.insuranceATempPdf]
                e.examinationPdfs = [...e.examinationPdfs, ...e.examinationTempPdf]

                if (type == 3 || type == 4) {
                    // addAndEditForm.identifyCode = e.identifyCode
                    addAndEditForm.insurancePdf = e.insurancePdfs.map((e: any) => {
                        return { fileNam: e.fileName, fileUrl: e.fileUrl }
                    })
                    addAndEditForm.examinationPdf = e.examinationPdfs.map((e: any) => {
                        return { fileNam: e.fileName, fileUrl: e.fileUrl }
                    })
                } else {
                    addAndEditForm.insurancePdfs[index] = e.insurancePdfs
                    addAndEditForm.examinationPdfs[index] = e.examinationPdfs
                    // addAndEditForm.identifyCode.push(e.identifyCode)
                }
            })

            // for (let index = 0; index < descriptionFormList.value.length; index++) {
            //     try {
            //         const result = await new Promise((resolve) => {
            //             descriptionFormRefList.value[index].validate((res: any) => {
            //                 resolve(res)
            //             })
            //         })

            //         if (!result) {
            //             isDescription = true
            //             throw new Error('表单校验失败')
            //         }
            //     } catch (error) {}
            // }
            addAndEditForm.tableList = equipTableList.value
            for (let i = 0; i < addAndEditForm.tableList.length; i++) {
                const row = addAndEditForm.tableList[i]
                for (const key in row) {
                    if (
                        row.hasOwnProperty(key) &&
                        (row[key] === null || row[key] === '' || row[key]?.length === 0) &&
                        key !== 'name2' &&
                        key !== 'name6' &&
                        key !== 'id'
                    ) {
                        if (key == 'identifyCode') {
                            ElMessage({
                                type: 'error',
                                message: `第 ${i + 1} 行的 ${'唯一标识符'} 字段不能为空`,
                            })
                        } else if (key == 'checkMan') {
                            ElMessage({
                                type: 'error',
                                message: `第 ${i + 1} 行的 ${'检修人'} 字段不能为空`,
                            })
                        } else if (key == 'checkDate') {
                            ElMessage({
                                type: 'error',
                                message: `第 ${i + 1} 行的 ${'检修日期'} 字段不能为空`,
                            })
                        } else if (key == 'nextCheckDate') {
                            ElMessage({
                                type: 'error',
                                message: `第 ${i + 1} 行的 ${'下次检修日期'} 字段不能为空`,
                            })
                        } else if (key == 'insurancePdf') {
                            ElMessage({
                                type: 'error',
                                message: `请上传第 ${i + 1} 行的合格证`,
                            })
                        } else {
                            ElMessage({
                                type: 'error',
                                message: `请上传第 ${i + 1} 行的检测证明`,
                            })
                        }
                        return // 如果有任何字段为空，直接返回，不进行提交
                    }
                }
            }
            if (isDescription) return
            addAndEditForm.mainFileList = Array.from(
                new Set([...addAndEditForm.mainFileList, ...addAndEditForm.mainFileTempList]),
            )
            console.log(
                '🚀 ~ submitFun ~ addAndEditForm.mainFileList:',
                addAndEditForm.mainFileList,
            )
            addAndEditForm.detailsFileList = Array.from(
                new Set([...addAndEditForm.detailsFileList, ...addAndEditForm.detailsFileTempList]),
            )
            console.log(
                '🚀 ~ submitFun ~ addAndEditForm.detailsFileList:',
                addAndEditForm.detailsFileList,
            )

            addAndEditForm.devInfoProperties = propertyNames.value
            addAndEditForm.typeId =
                addAndEditForm.deviceTypeList[addAndEditForm.deviceTypeList.length - 1]

            let SEND_FUN_API: any = null
            if (type == 1) {
                SEND_FUN_API = equipmentAddApi
                addAndEditForm.maStatus = 1
            }
            if (type == 2) {
                SEND_FUN_API = equipmentAddApi
                addAndEditForm.maStatus = 0
            }
            if (type == 3) {
                SEND_FUN_API = equipmentEditApi
                addAndEditForm.maStatus = 1
            }
            if (type == 4) {
                SEND_FUN_API = equipmentEditApi
                addAndEditForm.maStatus = 0
            }
            let res = null
            try {
                res = await SEND_FUN_API(addAndEditForm)
                if (res.code === 200) {
                    ElMessage({
                        type: 'success',
                        message: '保存成功',
                        duration: 1000,
                    })
                    propertyNames.value = []
                    dialogFormVisibleSettlein.value = false
                    getList()
                }
            } catch (error) {
                console.log('error', error)
            }

            // 组装参数
        } else {
            console.log('校验失败')
        }
    })
}
//草稿
const saveTemp = async () => {
    submitFun(isMaStatus.value ? 4 : 2)
    if (true) return
}

/* 关闭按钮 */
const closeDialogBtn = () => {
    // ruleFormRef.value.resetFields()
    propertyNames.value = []
    // 获取装备树
    getTypeTreeData()
    dialogFormVisibleSettlein.value = false
}
/* 关闭对话框 */
const handleClose = (done: () => void) => {
    // ruleFormRef.value.resetFields()
    done()
    propertyNames.value = []
    dialogFormVisibleSettlein.value = false
}

/* 检测信息图片地址 */
const successResultCallBackFnjc = (val: any) => {
    equipmentDeploymentParams.value.detectionList = []
    equipmentDeploymentParams.value.detectionList.push(val.msg)
    equipmentDeploymentParams.value.fileList.push({
        dicId: '28',
        fileUrl: val.msg,
    })
}
/* 保险信息图片地址 */
const successResultCallBackFnbs = (val: any) => {
    equipmentDeploymentParams.value.insureList = []
    equipmentDeploymentParams.value.insureList.push(val.msg)
    equipmentDeploymentParams.value.fileList.push({
        dicId: '29',
        fileUrl: val.msg,
    })
}
/* 设备图片信息地址 */
const successResultCallBackFnDevicePic = (val: any) => {
    equipmentDeploymentParams.value.picList = []
    equipmentDeploymentParams.value.picList.push(val.msg)
    if (!equipmentDeploymentParams.value.picUrl) {
        equipmentDeploymentParams.value.picUrl = val.msg
    }
    equipmentDeploymentParams.value.fileList.push({
        dicId: '20',
        fileUrl: val.msg,
    })
}

const mainFileList: any = ref([]) //主展示
const detailsFileList: any = ref([]) //详情展示
const maTypeProperties: any = ref([]) //属性
const insurancePdf: any = ref([]) //合格证
const examinationPdf: any = ref([]) //检测证明
//图片查看弹窗
const dialogVisible: any = ref(false)
const dialogImageUrl = ref('')
//上传地址+header
const imgUploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
const actionUrl = ref(imgUploadUrl)
const headerInfo = reactive({
    Authorization: 'Bearer ' + store2.token,
})
// 文件上传前处理-上传大小
const beforeUpload = (file: any) => {
    if (file.size / 1024 / 1024 > 2) {
        ElMessage({
            type: 'error',
            message: '上传文件大小不能超过5M!',
        })
        // this.$message.error({ message: `上传文件大小不能超过5M!`,});
        return false
    }
}
// 文件上传失败
const uploadError = () => {
    ElMessage({
        type: 'error',
        message: '上传文件失败!',
    })
    // this.$message.error({message: `上传文件失败!`});
}
// 文件上传成功处理
const handleFileSuccess = (response: any) => {
    if (response.code == 200) {
        let obj = {
            modelId: maId.value,
            fileName: response.data.name.split('/')[4],
            fileUrl: response.data.url,
        }
        console.log(obj)
        mainFileList.value.push(obj)
        ElMessage({
            type: 'success',
            message: '上传成功！',
        })
        console.log(mainFileList.value)
    }
}
// 文件上传成功处理
const handleFileSuccess2 = (response: any) => {
    if (response.code == 200) {
        let obj = {
            modelId: maId.value,
            fileName: response.data.name.split('/')[4],
            fileUrl: response.data.url,
        }
        console.log(obj)
        detailsFileList.value.push(obj)
        ElMessage({
            type: 'success',
            message: '上传成功！',
        })
        console.log(detailsFileList.value)
    }
}
// 文件上传成功处理
const handleFileSuccess3 = (response: any) => {
    if (response.code == 200) {
        let obj = {
            modelId: maId.value,
            fileName: response.data.name.split('/')[4],
            fileUrl: response.data.url,
        }
        console.log(obj)
        insurancePdf.value.push(obj)
        ElMessage({
            type: 'success',
            message: '上传成功！',
        })
        console.log(insurancePdf.value)
    }
}
// 文件上传成功处理
const handleFileSuccess4 = (response: any) => {
    if (response.code == 200) {
        let obj = {
            modelId: maId.value,
            fileName: response.data.name.split('/')[4],
            fileUrl: response.data.url,
        }
        console.log(obj)
        examinationPdf.value.push(obj)
        ElMessage({
            type: 'success',
            message: '上传成功！',
        })
        console.log(examinationPdf.value)
    }
}
//文件下载
const handleDownload = (file: any) => {
    const windowName = file.name
    window.open(file.fileUrl, windowName)
}
//文件查看
const picturePreview = (file: any) => {
    dialogImageUrl.value = file.fileUrl
    dialogVisible.value = true
}
//文件查看
const handleRemove = (list: any, index: Number) => {
    list.splice(index, 1)
}

const onTempDownLoad = () => {
    ElMessageBox.confirm('是否确定下载', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            return downLoadTemplate()
        })
        .catch(() => {})
}
const onBatchUpload = () => {
    console.log('下载')
}

const onAddDescription = () => {
    const newId = Date.now()
    descriptionFormList.value.push({
        newId,
        insurancePdfs: [],
        insuranceATempPdf: [],
        examinationPdfs: [],
        examinationTempPdf: [],
    })
}

const addAndEditForm = reactive<any>({
    deviceName: '',
    deviceTypeList: [],
    deviceCount: 1,
    unitName: '',
    code: '',
    brand: '',
    typeId: '',
    companyId: '',
    productionDate: '',
    dayLeasePrice: '',
    person: '',
    personPhone: '',
    deviceWeight: '',
    checkDate: '',
    checkCycle: '',
    mainFileList: [],
    detailsFileList: [],
    mainFileTempList: [],
    detailsFileTempList: [],
    insurancePdf: [],
    examinationPdf: [],
    insurancePdfs: [],
    examinationPdfs: [],
    devInfoProperties: [],
    tableList: [],
})
// const addAndEditFormTemp = reactive<any>()
const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
const addAndEditFormRef = ref()
// 装备描述表单
const descriptionFormList = ref<any>([
    {
        newId: Date.now(),
        insurancePdfs: [],
        insuranceATempPdf: [],
        examinationPdfs: [],
        examinationTempPdf: [],
    },
])
const descriptionFormRefList = ref<any>([])
// 移除
const onDeleteDescription = (index: number) => {
    descriptionFormList.value.splice(index, 1)
    descriptionFormRefList.value.splice(index, 1)
}

const onMainFileChange = (fileList: any) => {
    addAndEditForm.mainFileTempList = []
    const fileListTemp = fileList.map((e: any) => {
        return {
            fileName: e.name,
            fileUrl: e.url,
        }
    })
    addAndEditFormRef.value.clearValidate('mainFileList')
    addAndEditForm.mainFileTempList.push(...fileListTemp)
}
const onDetailsFileChange = (fileList: any) => {
    addAndEditForm.detailsFileTempList = []
    const fileListTemp = fileList.map((e: any) => {
        return {
            fileName: e.name,
            fileUrl: e.url,
        }
    })
    addAndEditFormRef.value.clearValidate('detailsFileList')
    addAndEditForm.detailsFileTempList.push(...fileListTemp)
}

const onInsurancePdfChange = (fileList: any, index: number) => {
    descriptionFormList.value[index].insuranceATempPdf = []
    const fileListTemp = fileList.map((e: any) => {
        return {
            fileName: e.name,
            fileUrl: e.url,
        }
    })
    descriptionFormRefList.value[index].clearValidate('insurancePdf')
    descriptionFormList.value[index].insuranceATempPdf.push(...fileListTemp)
}
const onExaminationPdfChange = (fileList: any, index: number) => {
    descriptionFormList.value[index].examinationTempPdf = []
    const fileListTemp = fileList.map((e: any) => {
        return {
            fileName: e.name,
            fileUrl: e.url,
        }
    })
    descriptionFormRefList.value[index].clearValidate('examinationPdf')
    descriptionFormList.value[index].examinationTempPdf.push(...fileListTemp)
}

const onFileChangeEquip = (fileList: any, row: any, index: number, type: number) => {
    if (type == 1) {
        equipTableList.value[index].insurancePdf = []
    } else {
        equipTableList.value[index].examinationPdf = []
    }
    const fileListTemp = fileList.map((e: any) => {
        return {
            fileName: e.name,
            fileUrl: e.url,
        }
    })
    console.log('11111', fileListTemp[0].fileUrl)
    if (type == 1) {
        equipTableList.value[index].name2 = fileListTemp[0].fileUrl
        equipTableList.value[index].insurancePdf.push(fileListTemp[0])
    } else {
        equipTableList.value[index].name6 = fileListTemp[0].fileUrl
        equipTableList.value[index].examinationPdf.push(fileListTemp[0])
    }
}

// const onDeleteImgInDetails = () => {}

const onDeleteImgInMain = (index: any) => {
    addAndEditForm.mainFileList.splice(index, 1)
}
const onDeleteImgInDetails = (index: any) => {
    addAndEditForm.detailsFileList.splice(index, 1)
}
const onDeleteImgInsurancePdf = (j: any, index: any) => {
    descriptionFormList.value[j].insurancePdfs.splice(index, 1)
}
const onDeleteImgExaminationPdf = (j: any, index: any) => {
    descriptionFormList.value[j].examinationPdfs.splice(index, 1)
}

const onDialogClose = () => {
    addAndEditFormRef.value.resetFields()
    Object.assign(addAndEditForm, {
        deviceName: '',
        deviceTypeList: [],
        deviceCount: 1,
        unitName: '',
        code: '',
        brand: '',
        typeId: '',
        companyId: '',
        productionDate: '',
        dayLeasePrice: '',
        person: '',
        personPhone: '',
        deviceWeight: '',
        checkDate: '',
        checkCycle: '',
        mainFileList: [],
        detailsFileList: [],
        mainFileTempList: [],
        detailsFileTempList: [],
        insurancePdf: [],
        examinationPdf: [],
        insurancePdfs: [],
        examinationPdfs: [],
    })
}
const propertyNames = ref<any>([])
const propertyNamesTwo = ref<any>([])
const options = ref<any>([])

const onPreviewImg = (fileUrl: any) => {
    previewDialogImageUrl.value = fileUrl
    previewDialogVisible.value = true
}
// 计算所有装备
const chunkedItems = computed(() => {
    let result = []
    for (let i = 0; i < propertyNames.value.length; i += 2) {
        result.push(propertyNames.value.slice(i, i + 2))
    }
    return result
})

const equipTableList = ref<any>([])

const handleAddBack = () => {
    let obj = {
        identifyCode: '',
        name2: '',
        checkMan: '',
        checkDate: '',
        nextCheckDate: '',
        name6: '',
        insurancePdf: [],
        examinationPdf: [],
    }
    equipTableList.value.push(obj)
}
const handleDeleteBack = (index: number) => {
    equipTableList.value.splice(index, 1)
}

const fileListEquip = ref<any>([])

const viewCertificate = (url: string) => {
    window.open(url, '_blank')
}
const changeDate = (row: any, index: number) => {
    console.log('3333', row)
    const currentDate = new Date(row.checkDate)
    console.log('1111', currentDate)
    console.log('🚀 ~ 告警时间 ~ warningDays.value:', warningDays.value)
    currentDate.setDate(currentDate.getDate() + Number(warningDays.value))
    equipTableList.value[index].nextCheckDate = dayjs(currentDate).format('YYYY-MM-DD')
    // equipTableList.value = [...equipTableList.value];
}
</script>

<template>
    <div class="app-container-content">
        <!-- 样式修改 -->
        <!-- 商品管理 -->
        <el-form
            :model="queryParams"
            ref="queryFormRef"
            :inline="true"
            size="default"
            label-width="0"
        >
            <!-- 表单搜索 -->
            <el-row>
                <el-col :span="6">
                    <el-form-item prop="deviceName">
                        <el-input
                            v-model.trim="queryParams.deviceName"
                            style="width: 100%"
                            clearable
                            placeholder="请输入装备名称"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="code">
                        <el-input
                            v-model.trim="queryParams.code"
                            style="width: 100%"
                            clearable
                            placeholder="请输入装备编号"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="maStatus">
                        <el-select
                            style="width: 100%"
                            v-model="queryParams.maStatus"
                            clearable
                            placeholder="请选择装备状态"
                        >
                            <el-option label="草稿状态" value="0"></el-option>
                            <el-option label="上架" value="2"></el-option>
                            <el-option label="下架" value="1"></el-option>
                            <el-option label="在租" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="deviceTypeList">
                        <el-cascader
                            v-model="deviceTypeList"
                            :options="deviceTypeTree"
                            :props="partTypeTreeProps"
                            filterable
                            clearable
                            style="width: 100%"
                            placeholder="请选择装备类目"
                            ref="deviceTypeCascader"
                            @change="deviceTypeChange"
                        ></el-cascader>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="6">
                    <el-form-item prop="dateRange">
                        <el-date-picker
                            style="width: 100%"
                            v-model="dateRange"
                            type="datetimerange"
                            value-format="YYYY-MM-DD"
                            range-separator="至"
                            start-placeholder="更新开始日期"
                            end-placeholder="更新结束日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item>
                        <el-button class="primary-lease" type="primary" @click="queryTableList"
                            >查询</el-button
                        >
                        <el-button
                            class="primary-lease"
                            type="primary"
                            @click="resetTableList(queryFormRef)"
                            >重置</el-button
                        >
                        <el-button class="primary-lease" type="primary" @click="equipmentDeployment"
                            >装备新增</el-button
                        >
                        <el-button
                            class="primary-lease"
                            type="primary"
                            @click="handleUpdateUpDown(null, 2)"
                            >批量上架</el-button
                        >
                        <el-button
                            class="primary-lease"
                            type="primary"
                            @click="handleUpdateUpDown(null, 1)"
                            >批量下架</el-button
                        >
                        <!-- <el-button class="primary-lease" type="primary" @click="onTempDownLoad()"
                        >模板下载</el-button
                    >
                    <el-button class="primary-lease" type="primary" @click="onBatchUpload()"
                        >批量上传</el-button  
                    > -->
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <!-- 表格 -->
        <el-table
            :data="tableData"
            style="width: auto"
            row-key="maId"
            show-overflow-tooltip
            :header-cell-style="{ background: '#00a288', color: '#fff' }"
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                type="selection"
                width="55"
                align="center"
                :selectable="
                (row:any) => {
                 return row.maStatus != 0
                }
            "
            />
            <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
            <el-table-column align="center" label="装备名称">
                <template #default="{ row }">
                    {{ `${row.deviceName}` }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="code" label="装备编号" />
            <el-table-column align="center" prop="typeName" label="装备类目">
                <template #default="{ row }">
                    <span
                        >{{ row.firstName }} <span v-show="row.firstName">></span>
                        {{ row.secondName }}<span v-show="row.secondName">></span
                        >{{ row.thirdName }}</span
                    >
                </template>
            </el-table-column>
            <el-table-column align="center" prop="typeName" label="装备型号" />
            <el-table-column align="center" prop="updateTime" label="更新时间" />
            <el-table-column align="center" label="装备状态">
                <template #default="{ row }">
                    <el-tag v-if="row.maStatus == 0" size="small" type="info">草稿状态</el-tag>
                    <el-tag v-if="row.maStatus == 1" size="small" type="warning">待上架</el-tag>
                    <el-tag v-if="row.maStatus == 2" size="small" type="success">上架</el-tag>
                    <el-tag v-if="row.maStatus == 3" size="small" type="danger">在租</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="操作" min-width="160px" align="center">
                <template #default="{ row }">
                    <el-button type="primary" size="small" @click="previewRowInfo(row)"
                        >查看</el-button
                    >
                    <el-button
                        v-if="row.maStatus == 0 || row.maStatus == 1"
                        size="small"
                        type="primary"
                        @click="editRowInfo(row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        v-if="row.maStatus == 2"
                        size="small"
                        type="primary"
                        @click="handleUpdateUpDown(row, 1)"
                    >
                        下架
                    </el-button>
                    <el-button
                        v-if="row.maStatus == 1"
                        size="small"
                        type="primary"
                        @click="handleUpdateUpDown(row, 2)"
                    >
                        上架
                    </el-button>
                    <el-button
                        v-if="row.maStatus == 0 || row.maStatus == 1"
                        size="small"
                        type="danger"
                        @click="deleteRowInfo(row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <PagingComponent
            @getListChange="getList"
            v-model:pageSize="queryParams.pageSize"
            v-model:currentPage="queryParams.pageNum"
            :total="total"
        />

        <!-- 装备弹框 -->
        <el-dialog
            v-model="dialogFormVisibleSettlein"
            :title="settleinTitle"
            width="65%"
            destroy-on-close
            class="centered-dialog"
            :close-on-click-modal="false"
            :before-close="handleClose"
            @close="onDialogClose"
        >
            <el-row
                :gutter="20"
                class="mb8"
                style="display: flex; justify-content: flex-end; align-items: center"
            >
                <el-button type="primary" class="primary-lease" @click="closeDialogBtn">
                    关闭
                </el-button>
                <el-button
                    type="primary"
                    class="primary-lease"
                    @click="saveTemp"
                    v-if="
                        (!equipmentDeploymentParams.maStatus ||
                            equipmentDeploymentParams.maStatus == 0) &&
                        !isViewForm
                    "
                >
                    保存草稿
                </el-button>
                <el-button
                    type="primary"
                    class="primary-lease"
                    @click="submitBtn"
                    v-if="!disabledForm || isEditDisabled"
                >
                    提交
                </el-button>
            </el-row>

            <!-- <div class="title">
            <span class="title-sign"></span>
            <span class="title-text">基本信息</span>
        </div> -->
            <TitleTip :titleText="`基本信息`" />
            <el-form
                label-width="180px"
                ref="addAndEditFormRef"
                label-position="right"
                :model="addAndEditForm"
                :rules="equipRules"
                :disabled="disabledForm"
            >
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="装备名称：" prop="deviceName">
                            <el-input
                                autocomplete="off"
                                maxlength="30"
                                v-model="addAndEditForm.deviceName"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="装备类目：" prop="deviceTypeList">
                            <el-cascader
                                v-model="addAndEditForm.deviceTypeList"
                                :show-all-levels="true"
                                :options="deviceTypeTree"
                                :props="partTypeTreeProps"
                                filterable
                                clearable
                                collapse-tags
                                placeholder="请选择装备类目"
                                ref="dialogTypeCascader"
                                @change="dialogTypeChange"
                                style="width: 100%"
                            ></el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="装备单位：" prop="unitName">
                            <el-input
                                autocomplete="off"
                                maxlength="20"
                                v-model="addAndEditForm.unitName"
                                clearable
                                :disabled="isDisabled || isEditForm"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="装备品牌" prop="brand">
                            <el-input
                                v-model="addAndEditForm.brand"
                                autocomplete="off"
                                maxlength="20"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="出厂日期：" prop="productionDate">
                            <el-date-picker
                                v-model="addAndEditForm.productionDate"
                                placeholder="请选择出厂日期"
                                value-format="YYYY-MM-DD"
                                type="date"
                                style="width: 100%"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="租赁价格(天/元)：" prop="dayLeasePrice">
                            <el-input
                                @input="
                                    (v) => (addAndEditForm.dayLeasePrice = v.replace(/[^\d.]/g, ''))
                                "
                                v-model="addAndEditForm.dayLeasePrice"
                                placeholder="请输入租赁价格"
                                clearable
                                maxlength="20"
                                :disabled="isDisabled || isEditForm"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="联系人：" prop="person">
                            <el-input
                                v-model="addAndEditForm.person"
                                placeholder="请输入联系人"
                                clearable
                                maxlength="20"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话：" prop="personPhone">
                            <el-input
                                v-model="addAndEditForm.personPhone"
                                placeholder="请输入联系电话"
                                clearable
                                maxlength="20"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="校验日期：" prop="checkDate">
                            <el-date-picker
                                v-model="addAndEditForm.checkDate"
                                placeholder="请选择校验日期"
                                value-format="YYYY-MM-DD"
                                type="date"
                                style="width: 100%"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="校验周期：" prop="checkCycle">
                            <el-input
                                @input="
                                    (v) => (addAndEditForm.checkCycle = v.replace(/[^\d.]/g, ''))
                                "
                                v-model="addAndEditForm.checkCycle"
                                placeholder="请输入校验周期（数字）"
                                clearable
                                maxlength="20"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="整机重量(KG)：">
                            <el-input
                                @input="
                                    (v) => (addAndEditForm.deviceWeight = v.replace(/[^\d.]/g, ''))
                                "
                                v-model="addAndEditForm.deviceWeight"
                                placeholder="请输入整机重量"
                                clearable
                                maxlength="20"
                                style="width: 350px"
                            />
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <div>
                    <el-row
                        v-for="(item, index) in chunkedItems"
                        :key="index"
                        :model="item"
                        class="dynamic-item"
                        :gutter="20"
                        style="display: flex; margin-top: 10px; justify-content: left"
                    >
                        <el-col v-for="(itemTemp, indexTemp) in item" :key="indexTemp" :span="12">
                            <el-form-item :label="itemTemp.propertyName + '：'">
                                <el-input
                                    v-model="itemTemp.propertyValue"
                                    placeholder="请输入"
                                    maxlength="20"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>

                <TitleTip :titleText="`装备图片`" />
                <el-row :gutter="20" v-if="!isViewForm">
                    <el-col :span="24">
                        <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
                            支持格式：.jpg、.png 单个文件大小不能超过5M
                            <div class="tipBox">
                                *注:图片排序为平台展示顺序，不得少于1张，不得多于6张，建议使用图片比例1:1
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item
                            style="font-weight: bold"
                            label="主展示图："
                            prop="mainFileList"
                        >
                            <div
                                class="img-list"
                                v-if="addAndEditForm.mainFileList.length > 0 && !isAdd"
                            >
                                <div
                                    v-for="(j, i) in addAndEditForm.mainFileList"
                                    :key="j.fileUrl"
                                    class="img-items"
                                >
                                    <img :src="j.fileUrl" alt="" />

                                    <div class="mask-img">
                                        <div>
                                            <el-icon
                                                class="delete-icon"
                                                @click="onDeleteImgInMain(i)"
                                                v-if="!isViewForm"
                                            >
                                                <DeleteFilled />
                                            </el-icon>
                                            <el-icon
                                                class="delete-icon"
                                                style="margin-left: 10px"
                                                @click="onPreviewImg(j.fileUrl)"
                                            >
                                                <ZoomIn />
                                            </el-icon>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <UploadComponentNew
                                v-if="!isViewForm"
                                :maxSize="5"
                                :max-limit="6"
                                width="100px"
                                height="100px"
                                :actionUrl="uploadUrl"
                                :autoUpload="true"
                                :multiple="true"
                                :minLimit="addAndEditForm.mainFileList.length"
                                listType="picture-card"
                                :acceptTypeList="['.jpg', '.png']"
                                @onFileChange="onMainFileChange"
                            >
                                <template v-slot:default>
                                    <el-icon size="42" color="#aaa"><Plus /></el-icon>
                                </template>
                            </UploadComponentNew>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" v-if="!isViewForm">
                    <el-col :span="24">
                        <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
                            支持格式：.jpg、.png 单个文件大小不能超过5M
                            <div class="tipBox">
                                *注:图片排序为平台展示顺序，不得少于1张，不得多于6张，建议使用图片比例16:9
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item
                            style="font-weight: bold"
                            label="详情页展示图："
                            prop="detailsFileList"
                        >
                            <div
                                class="img-list"
                                v-if="addAndEditForm.detailsFileList.length > 0 && !isAdd"
                            >
                                <div
                                    v-for="(j, i) in addAndEditForm.detailsFileList"
                                    :key="j.fileUrl"
                                    class="img-items"
                                >
                                    <img :src="j.fileUrl" alt="" />

                                    <div class="mask-img">
                                        <div>
                                            <el-icon
                                                class="delete-icon"
                                                @click="onDeleteImgInDetails(i)"
                                                v-if="!isViewForm"
                                            >
                                                <DeleteFilled />
                                            </el-icon>
                                            <el-icon
                                                class="delete-icon"
                                                style="margin-left: 10px"
                                                @click="onPreviewImg(j.fileUrl)"
                                            >
                                                <ZoomIn />
                                            </el-icon>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <UploadComponentNew
                                v-if="!isViewForm"
                                :maxSize="5"
                                :max-limit="6"
                                width="100px"
                                height="100px"
                                :actionUrl="uploadUrl"
                                :autoUpload="true"
                                :multiple="true"
                                :minLimit="addAndEditForm.detailsFileList.length"
                                listType="picture-card"
                                :acceptTypeList="['.jpg', '.png']"
                                @onFileChange="onDetailsFileChange"
                            >
                                <template v-slot:default>
                                    <el-icon size="42" color="#aaa"><Plus /></el-icon>
                                </template>
                            </UploadComponentNew>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div style="display: flex; align-items: center">
                    <TitleTip :titleText="`装备证书`" />
                    <el-button
                        size="mini"
                        type="primary"
                        @click="handleAddBack"
                        style="margin-left: 20px; margin-top: 20px"
                        :disabled="!addAndEditForm.deviceTypeList"
                        v-if="settleinTitle == '新增装备'"
                        >添加</el-button
                    >
                </div>
                <!-- <el-row :gutter="20" v-if="!isEditForm && !isViewForm">
                    <el-col :span="24">
                        <el-button class="primary-lease" type="primary" @click="onAddDescription">
                            添加装备证书
                        </el-button>
                    </el-col>
                </el-row> -->
            </el-form>

            <!-- <el-form
                label-width="140px"
                label-position="right"
                :rules="descriptionRules"
                v-for="(item, index) in descriptionFormList"
                :ref="
                ($event:any) => {
                    descriptionFormRefList[index] = $event
                }
            "
                :model="item"
                :key="item.newId"
            >
                <el-row :gutter="20" style="margin-top: 12px">
                    <el-col :span="12">
                        <el-form-item
                            style="font-weight: bold"
                            label="装备唯一标识符："
                            prop="identifyCode"
                        >
                            <el-input
                                v-model="item.identifyCode"
                                placeholder="请输入"
                                maxlength="20"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" v-if="!isViewForm">
                    <el-col :span="24">
                        <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
                            支持格式：.jpg、.png 单个文件大小不能超过5M
                        </el-form-item>
                    </el-col>
                </el-row> -->
            <!-- <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item
                            style="font-weight: bold"
                            label="合格证："
                            prop="insurancePdfs"
                        >
                            <div class="img-list" v-if="addAndEditForm.detailsFileList.length > 0">
                                <div
                                    v-for="(j, i) in item.insurancePdfs"
                                    :key="j.fileUrl"
                                    class="img-items"
                                >
                                    <img :src="j.fileUrl" alt="" />

                                    <div class="mask-img" v-if="!isViewForm">
                                        <div>
                                            <el-icon
                                                class="delete-icon"
                                                @click="onDeleteImgInMain(i)"
                                            >
                                                <DeleteFilled />
                                            </el-icon>
                                            <el-icon
                                                class="delete-icon"
                                                style="margin-left: 10px"
                                                @click="onPreviewImg(j.fileUrl)"
                                            >
                                                <ZoomIn />
                                            </el-icon>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <UploadComponentNew
                                v-if="!isViewForm"
                                :actionUrl="uploadUrl"
                                :maxSize="5"
                                :max-limit="4"
                                width="100px"
                                height="100px"
                                :currentIndex="index"
                                :autoUpload="true"
                                :multiple="true"
                                :minLimit="item.insurancePdfs.length"
                                listType="picture-card"
                                :acceptTypeList="['.jpg', '.png']"
                                @onFileChange="onInsurancePdfChange"
                            >
                                <template v-slot:default>
                                    <el-icon size="42" color="#aaa"><Plus /></el-icon>
                                </template>
                            </UploadComponentNew>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" v-if="!isViewForm">
                    <el-col :span="24">
                        <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
                            支持格式：.jpg、.png 单个文件大小不能超过5M,
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row
                    :gutter="20"
                    :style="
                        index != descriptionFormList.length - 1
                            ? 'border-bottom: 1px solid #ccc'
                            : ''
                    "
                >
                    <el-col :span="20">
                        <el-form-item
                            style="font-weight: bold"
                            label="检测证明："
                            prop="examinationPdfs"
                        >
                            <div class="img-list" v-if="addAndEditForm.detailsFileList.length > 0">
                                <div
                                    v-for="(j, i) in item.examinationPdfs"
                                    :key="j.fileUrl"
                                    class="img-items"
                                >
                                    <img :src="j.fileUrl" alt="" />

                                    <div class="mask-img" v-if="!isViewForm">
                                        <div>
                                            <el-icon
                                                class="delete-icon"
                                                @click="onDeleteImgInMain(i)"
                                            >
                                                <DeleteFilled />
                                            </el-icon>
                                            <el-icon
                                                class="delete-icon"
                                                style="margin-left: 10px"
                                                @click="onPreviewImg(j.fileUrl)"
                                            >
                                                <ZoomIn />
                                            </el-icon>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <UploadComponentNew
                                v-if="!isViewForm"
                                :actionUrl="uploadUrl"
                                :maxSize="5"
                                :max-limit="4"
                                width="100px"
                                height="100px"
                                :autoUpload="true"
                                :multiple="true"
                                :minLimit="item.examinationPdfs.length"
                                :currentIndex="index"
                                listType="picture-card"
                                :acceptTypeList="['.jpg', '.png']"
                                @onFileChange="onExaminationPdfChange"
                            >
                                <template v-slot:default>
                                    <el-icon size="42" color="#aaa"><Plus /></el-icon>
                                </template>
                            </UploadComponentNew>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" v-if="index != 0">
                        <el-button
                            size="small"
                            type="danger"
                            class="primary-lease"
                            @click="onDeleteDescription(index)"
                        >
                            移除
                        </el-button>
                    </el-col>
                </el-row> -->
            <!-- </el-form> -->
            <el-table :data="equipTableList" width="100%" height="450px">
                <el-table-column label="序号" type="index" width="55" align="center" />
                <el-table-column
                    label="唯一标识符"
                    prop="identifyCode"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                    <template #default="{ row, $index }">
                        <el-input
                            v-model="row.identifyCode"
                            style="width: 100%"
                            placeholder="请输入唯一标识符"
                            maxlength="20"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="合格证"
                    prop="name2"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                    <template #default="{ row, $index }">
                        <div v-if="row.name2 == ''">
                            <UploadComponentNew
                                :maxSize="10"
                                :max-limit="1"
                                width="100%"
                                height="100%"
                                :multiple="true"
                                :autoUpload="true"
                                :actionUrl="uploadUrl"
                                :minLimit="row.insurancePdf.length"
                                listType="text"
                                :justifyContent="`flex-start`"
                                :acceptTypeList="['.jpg', '.png']"
                                @onFileChange="
                                    (fileList) => onFileChangeEquip(fileList, row, $index, 1)
                                "
                            >
                                <div
                                    style="
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                    "
                                >
                                    <el-button
                                        type="text"
                                        style="color: #00a288; text-decoration: underline"
                                        >上传</el-button
                                    >
                                </div>
                            </UploadComponentNew>
                            <!-- <el-button size="mini" type="primary" @click="uploadTestReport(row)">上传</el-button> -->
                        </div>
                        <div v-else>
                            <el-button
                                type="text"
                                style="color: #00a288; text-decoration: underline"
                                @click="viewCertificate(row.insurancePdf[0].fileUrl)"
                                >查看</el-button
                            >
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="检修人"
                    prop="checkMan"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                    <template #default="{ row, $index }">
                        <el-input
                            v-model="row.checkMan"
                            controls-position="right"
                            style="width: 100%"
                            placeholder="请输入检修人"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="检修时间"
                    prop="checkDate"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                    <template #default="{ row, $index }">
                        <el-date-picker
                            v-model="row.checkDate"
                            value-format="YYYY-MM-DD"
                            type="date"
                            placeholder="请选择"
                            @change="changeDate(row, $index)"
                            style="width: 100%"
                        ></el-date-picker>
                    </template>
                </el-table-column>

                <el-table-column
                    label="下次检测时间"
                    prop="nextCheckDate"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                    <template #default="{ row, $index }">
                        <el-date-picker
                            v-model="row.nextCheckDate"
                            value-format="YYYY-MM-DD"
                            type="date"
                            placeholder="请选择"
                            style="width: 100%"
                        ></el-date-picker>
                    </template>
                </el-table-column>

                <el-table-column
                    label="检测证明"
                    prop="name6"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                    <template #default="{ row, $index }">
                        <div v-if="row.name6 == ''">
                            <UploadComponentNew
                                :maxSize="10"
                                :max-limit="1"
                                width="100%"
                                height="100%"
                                :multiple="true"
                                :autoUpload="true"
                                :actionUrl="uploadUrl"
                                :minLimit="row.examinationPdf.length"
                                listType="text"
                                :justifyContent="`flex-start`"
                                :acceptTypeList="['.jpg', '.png']"
                                @onFileChange="
                                    (fileList) => onFileChangeEquip(fileList, row, $index, 2)
                                "
                            >
                                <div
                                    style="
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                    "
                                >
                                    <el-button
                                        type="text"
                                        style="color: #00a288; text-decoration: underline"
                                        >上传</el-button
                                    >
                                </div>
                            </UploadComponentNew>
                            <!-- <el-button size="mini" type="primary" @click="uploadTestReport(row)">上传</el-button> -->
                        </div>
                        <div v-else>
                            <el-button
                                type="text"
                                style="color: #00a288; text-decoration: underline"
                                @click="viewCertificate(row.examinationPdf[0].fileUrl)"
                                >查看</el-button
                            >
                        </div>
                    </template>
                </el-table-column>

                <el-table-column
                    label="操作"
                    align="center"
                    width="150px"
                    v-if="settleinTitle == '新增装备'"
                >
                    <template #default="{ row, $index }">
                        <div
                            style="
                                width: 100%;
                                height: 40px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            "
                        >
                            <el-button
                                size="mini"
                                type="danger"
                                @click="handleDeleteBack($index)"
                                v-show="$index != 0"
                                >删除</el-button
                            >
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <!-- 图片查看弹窗 -->
        <el-dialog center width="60%" destroy-on-close v-model="previewDialogVisible">
            <el-image
                style="width: 100%; height: 50%"
                :src="previewDialogImageUrl"
                fit="cover"
                :z-index="9999999999"
            />
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.el-form {
    // margin: 15px 0;
}

.title {
    margin: 10px;
    margin-left: 20px;
    display: flex;
    align-items: center;
}
.title-sign {
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #00a288;
}
.title-text {
    font-weight: 700;
    margin-left: 10px;
}

.uploadBox {
    margin: 20px 40px;
}
.labelBox {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.imgsBox {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 30px;
    margin-left: 20px;

    .imgItem {
        width: 150px;
        height: 150px;
        margin-right: 20px;
        margin-bottom: 30px;
        border: 1px dashed #bbb;
        position: relative;
        .picture-card {
            width: 150px;
            height: 150px;
        }
        .icon-list {
            width: 60px;
            height: 20px;
            position: absolute;
            top: 70px;
            left: 30px;
            display: flex;
            align-items: center;
        }
        .imgItem__icon {
            margin: 0 5px;
            cursor: pointer;
        }
        .file-name {
            font-size: 10px;
            width: 100%;
            word-break: break-all;
        }
    }

    .hide {
        display: none;
    }
    .imgItem:hover .hide {
        display: block;
    }
}
.tipBox {
    color: red;
    font-size: 12px;
    margin-left: 20px;
}

:deep.el-form--inline .el-form-item {
    margin-right: 6px;
    width: 95%;
}

:deep.upload-tip .el-form-item__label {
    color: transparent;
}

.img-list {
    display: flex;
    align-items: center;

    .img-items {
        width: 100px;
        height: 100px;
        margin-right: 8px;
        position: relative;

        img {
            width: 100%;
            height: 100%;
        }

        .mask-img {
            visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #000;
            opacity: 0.5;
            display: flex;
            align-items: center;
            justify-content: center;

            .delete-icon {
                font-size: 20px;
                cursor: pointer;
                z-index: 9;
                color: #fff;
            }
        }
    }
    .img-items:hover .mask-img {
        visibility: visible;
    }
}

.centered-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
}

// :deep(.el-dialog) {
//     margin: 0 !important;
//     display: flex;
//     flex-direction: column;
//     max-height: 90%;
//     max-width: 90%;
// }

// :deep(.el-dialog__body) {
//     flex: 1;
//     overflow: auto;
// }

// .dialog-content {
//     padding: 20px;
// }

.app-container-content {
    :deep(.el-dialog) {
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-height: 100vh !important;
        .el-dialog__body {
            flex: 1;
            overflow-y: scroll !important;
            .el-table__header-wrapper .el-checkbox {
                display: none !important;
            }
        }
        .dialog-content {
            padding: 20px;
        }
    }
}
</style>
