<script setup lang="ts">
import { ref } from 'vue'
import PagingComponent from 'components/PagingComponent/index.vue'
import { useRouter } from 'vue-router'
import { getOrderListApi } from 'http/api/usercenter/seekorder'
import uploadComponent from 'components/uploadComponent/index.vue'
import previewImg from './previewImg/index.vue'
import { ElMessage } from 'element-plus'
import { useStore } from 'store/user'
const store = useStore()
import { mainStore } from 'store/main'
const store2 = mainStore()
/* 查询参数 */
const queryParams: any = ref({
    deviceName: '',
    orderStatus: '',
    czcompanyName: '',
    companyName: '',
    lowerBound: '',
    upperBound: '',
    pageSize: 10,
    pageNum: 1,
    startTime: '',
    endTime: '',
})
const time = ref([])
const router = useRouter()
const pageSize = 10
const pageNumber = 1
const total: any = ref(0)
const cardList = ref<any>([])
const status = 0
const statusList = [
    { id: '0', name: '未下单' },
    { id: '1', name: '已下单' },
    { id: '2', name: '待出库' },
    { id: '3', name: '已出库' },
    { id: '4', name: '租赁中' },
    { id: '5', name: '已退租' },
    { id: '5', name: '已完成' },
]
// 获取数据列表
// const getList = async () => {
//     const res: any = await getOrderListApi()
//     console.log('获取数据列表***', res)
//     tableData.value = res.rows
//     total.value = res.total
// }
/** 查询列表 */
const getList = async () => {
    if (time.value.length > 0) {
        console.log('time', time)
        queryParams.value.startTime = time.value[0]
        queryParams.value.endTime = time.value[1]
    } else {
        queryParams.value.startTime = undefined
        queryParams.value.endTime = undefined
    }
    const res: any = await getOrderListApi(queryParams.value)
    cardList.value = res.rows
    total.value = res.total
}

//订单详情
const handleViewOrder = (index: Number, row: any) => {
    router.push({
        name: 'orderManagementInfo',
        query: { orderStatusTemp: Number(row.orderStatus), idTemp: row.id },
    })
}

onMounted(() => {
    getList()
})

// 查询按钮
const queryTableList = () => {
    getList()
}

/* 退租按钮 */
const clickRentingTermination = () => {
    router.push({ name: 'rentinTermination' })
    console.log('退租')
}

/* 查看按钮 */
const clickPreviewDetails = (row: any) => {
    console.log('查看', row)
    router.push({
        name: 'orderDetails',
        query: {
            orderId: row.orderId,
        },
    })
}

/* 续租按钮 */
const clickRenewalOfLease = ({ row }: any) => {
    console.log('续租', row)
    router.push({
        name: 'renewalOfLease',
        query: {
            orderId: row.orderId,
        },
    })
}

/* 确认收货 */
const clickConfirmReceipt = (row: any) => {
    console.log('确认收货')
    router.push({
        name: 'orderDetails',
        query: {
            orderId: row.orderId,
            confirm: 'true',
        },
    })
}

const settleinTitle = ref('')
/* 编辑 **********/
const isEditDisabled = ref(false)
// 退租检修弹框显示隐藏
const dialogFormVisibleSettlein: any = ref(false)
const equipmentDeploymentParams: any = ref({
    /* 设备名称 */
    deviceName: '',
    deviceTypeList: [],
    deviceCount: 1,
    unitName: '',
    code: '',
    brand: '',
    typeId: '',
    companyId: '',
    productionDate: '',
    dayLeasePrice: '',
    person: '',
    personPhone: '',
    deviceWeight: '',
})

const mainFileList: any = ref([]) //检测文件1
const detailsFileList: any = ref([]) //检测文件2
//图片查看弹窗
const dialogVisible: any = ref(false)
const dialogImageUrl = ref('')
//上传
const upload: any = ref({
    // 设置上传的请求头部
    headers: { Authorization: 'Bearer ' + store2.token },
    // 上传的地址
    url: import.meta.env.VITE_API_URL + '/file/upload',
})
// 文件上传前处理-上传大小
const beforeUpload = (file: any) => {
    if (file.size / 1024 / 1024 > 2) {
        ElMessage({
            type: 'error',
            message: '上传文件大小不能超过2M!',
        })
        // this.$message.error({ message: `上传文件大小不能超过2M!`,});
        return false
    }
}
// 文件上传失败
const uploadError = () => {
    ElMessage({
        type: 'error',
        message: '上传文件失败!',
    })
    // this.$message.error({message: `上传文件失败!`});
}
// 文件上传成功处理
const handleFileSuccess = (response: any) => {
    if (response.code == 200) {
        let obj = {
            // modelId:this.maId,
            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:this.maId,
            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 handleViewBack = () => {
        settleinTitle.value = '退租检修'
        isEditDisabled.value = true
        equipmentDeploymentParams.value = {
            /* 企业Id */
            // ownCo: mainStore().userInfo.companyId,
            /* 租赁范围 */
            leaseScope: '',
            /* 设备所在地 */
            location: '',
            /* 省 */
            provinceId: '',
            /* 市 */
            cityId: '',
            /* 区 */
            areaId: '',
            /* 设备所在地 省 */
            addressEconomize: '',
            /* 设备所在地 市 */
            addressProvince: '',
            /* 设备所在地 区 */
            addressArea: '',
            /* 设备类型 */
            typeId: '',
            /* 设备类型大类 */
            deviceType: '',
            /* 设备类型子类 */
            deviceTypeSon: '',
            /* 设备类型小类*/
            deviceTypeSun: '',
            /* 设备品牌 */
            brand: '',
            /* 设备型号 */
            modelName: '',
            /* 出场日期 */
            productionDate: '',
            /* 工作小时数 */
            workingHours: '',
            /* 整机序列号 */
            serialNumber: '',
            /* 月租金 */
            monthLeasePrice: '',
            /* 日租金 */
            dayLeasePrice: '',
            /* 是否提供机手 */
            isOperator: '',
            /* 机手月费用 */
            jsMonthPrice: '',
            /* 机手日费用 */
            jsDayPrice: '',
            /* 详细说明 */
            description: '',
            /* 设备主图片 */
            picUrl: '',
            /* 检测信息 ，保险信息*/
            fileList: [],
            /* 设备状态 */
            maStatus: 15,
            detectionList: [],
            insureList: [],
            picList: []
        }
        // 打开退组检修弹框
        dialogFormVisibleSettlein.value = true
    }
const handleViewBack = () => {
    settleinTitle.value = '退租检修'
    isEditDisabled.value = true
    equipmentDeploymentParams.value = {
        /* 企业Id */
        // ownCo: mainStore().userInfo.companyId,
        /* 租赁范围 */
        leaseScope: '',
        /* 设备所在地 */
        location: '',
        /* 省 */
        provinceId: '',
        /* 市 */
        cityId: '',
        /* 区 */
        areaId: '',
        /* 设备所在地 省 */
        addressEconomize: '',
        /* 设备所在地 市 */
        addressProvince: '',
        /* 设备所在地 区 */
        addressArea: '',
        /* 设备类型 */
        typeId: '',
        /* 设备类型大类 */
        deviceType: '',
        /* 设备类型子类 */
        deviceTypeSon: '',
        /* 设备类型小类*/
        deviceTypeSun: '',
        /* 设备品牌 */
        brand: '',
        /* 设备型号 */
        modelName: '',
        /* 出场日期 */
        productionDate: '',
        /* 工作小时数 */
        workingHours: '',
        /* 整机序列号 */
        serialNumber: '',
        /* 月租金 */
        monthLeasePrice: '',
        /* 日租金 */
        dayLeasePrice: '',
        /* 是否提供机手 */
        isOperator: '',
        /* 机手月费用 */
        jsMonthPrice: '',
        /* 机手日费用 */
        jsDayPrice: '',
        /* 详细说明 */
        description: '',
        /* 设备主图片 */
        picUrl: '',
        /* 检测信息 ，保险信息*/
        fileList: [],
        /* 设备状态 */
        maStatus: 15,
        detectionList: [],
        insureList: [],
        picList: [],
    }

const settlemoneyTitle = ref('')
const moneyParams1: any = ref({
    /* 设备名称 */
    deviceName: '',
    deviceTypeList: [],
    deviceCount: 1,
    unitName: '',
})
const moneyParams2: any = ref({
    /* 设备名称 */
    deviceName: '',
    deviceTypeList: [],
    deviceCount: 1,
    unitName: '',
})
const moneyParams3: any = ref({
    /* 设备名称 */
    deviceName: '',
    deviceTypeList: [],
    deviceCount: 1,
    unitName: '',
})
const tableData: any = ref([
   {
    name1:'测试1',
    name2:'测试1-1',
    name3:'测试1-2',
    jy1:'外观1-1',
    jy2:'故障1-2',
    jy3:'外观1-2',
    jy4:'故障1-2',
    jy5:'外观1-3',
    jy6:'故障1-3',
    jy7:'',
    jy8:'',
    remark:'备注1',
   },
    {
    name1:'测试2',
    name2:'测试2-1',
    name3:'测试2-2',
    jy1:'外观2-1',
    jy2:'故障2-2',
    jy3:'外观2-2',
    jy4:'故障2-2',
    jy5:'外观2-3',
    jy6:'故障2-3',
    jy7:'',
    jy8:'',
    remark:'备注2',
   }
])

const partItems1: any = ref([{}])
const partItems2: any = ref([{}])
const partItems3: any = ref([{}])
// 费用结算弹框显示隐藏
const dialogFormVisibleSettlemoney: any = ref(false)
//费用结算
    const handleViewMoney = () => {
        settlemoneyTitle.value = '费用结算'
        moneyParams1.value = {
            /* 设备状态 */
            maStatus: 15,
            detectionList: [],
            insureList: [],
            picList: []
        }
        moneyParams2.value = {
            /* 设备状态 */
            maStatus: 15,
            detectionList: [],
            insureList: [],
            picList: []
        }
        moneyParams3.value = {
            /* 设备状态 */
            maStatus: 15,
            detectionList: [],
            insureList: [],
            picList: []
        }
        // 打开退组检修弹框
        dialogFormVisibleSettlemoney.value = true
    }

    //维修费用
 const  addPartItem1=()=> {
      partItems1.value.push({ partType: "", num: "", isCharge: "" });
    }
 const  removePartItem1 =(index:number)=> {
      if (partItems1.value.length > 1) {
        partItems1.value.splice(index, 1);
      }
    }

    //报废费用
 const  addPartItem2=()=> {
      partItems2.value.push({ partType: "", num: "", isCharge: "" });
    }
 const  removePartItem2 =(index:number)=> {
      if (partItems2.value.length > 1) {
        partItems2.value.splice(index, 1);
      }
    }

        //报废费用 修改


         //报废费用 修改

          //报废费用 修改
           //报废费用 修改
 const  addPartItem3=()=> {
      partItems3.value.push({ partType: "", num: "", isCharge: "" });
    }
 const  removePartItem3 =(index:number)=> {
      if (partItems3.value.length > 1) {
        partItems3.value.splice(index, 1);
      }
    }
</script>

<template>
    <!-- 订单管理 -->
    <div class="container">
        <el-form :model="queryParams" :inline="true" size="default" label-width="0">
            <el-row>
                <el-col :span="6">
                    <el-form-item prop="deviceName">
                        <el-input
                            style="width: 100%"
                            v-model.trim="queryParams.deviceName"
                            clearable
                            placeholder="请输入装备名称"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="orderStatus">
                        <el-select
                            v-model="queryParams.orderStatus"
                            placeholder="请选择订单状态"
                            style="width: 100%"
                            clearable
                        >
                            <el-option
                                v-for="item in statusList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="dateRange">
                        <el-date-picker
                            v-model="time"
                            type="daterange"
                            unlink-panels
                            range-separator="-"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item prop="czcompanyName">
                        <el-input
                            v-model.trim="queryParams.czcompanyName"
                            clearable
                            maxlength="20"
                            placeholder="出租单位"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="6">
                    <el-form-item prop="companyName">
                        <el-input
                            v-model.trim="queryParams.companyName"
                            clearable
                            maxlength="20"
                            placeholder="承租单位"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-input
                        v-model.trim="queryParams.lowerBound"
                        placeholder="租金/元"
                        clearable
                        maxlength="20"
                        style="width: 45%"
                    />
                    <span style="display: inline-block; width: 5%; text-align: center"> - </span>
                    <el-input
                        v-model.trim="queryParams.upperBound"
                        placeholder="租金/元"
                        clearable
                        maxlength="20"
                        style="width: 45%"
                    />
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <el-button type="primary" @click="queryTableList">查询</el-button>
                        <el-button @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <el-form-item label="装备名称：" prop="deviceName">
                <el-input v-model.trim="queryParams.deviceName" style="width: 160px" clearable />
            </el-form-item>
            <el-form-item prop="dateRange">
                <el-date-picker
                    v-model="time"
                    type="daterange"
                    unlink-panels
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    style="width: 180px"
                />
            </el-form-item>
            <el-form-item label="订单状态" prop="orderStatus">
                <el-select
                    v-model="queryParams.orderStatus"
                    placeholder="请选择订单状态"
                    style="width: 120px"
                    clearable
                >
                    <el-option
                        v-for="item in statusList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="出租单位：" prop="czcompanyName">
                <el-input
                    v-model.trim="queryParams.czcompanyName"
                    clearable
                    maxlength="20"
                    style="width: 160px"
                />
            </el-form-item>
            <el-form-item label="承租单位：" prop="companyName">
                <el-input
                    v-model.trim="queryParams.companyName"
                    clearable
                    maxlength="20"
                    style="width: 160px"
                />
            </el-form-item>
            <el-form-item prop="lowerBound">
                <span
                    style="
                        display: flex;
                        justify-content: center;
                        width: 20px;
                        text-align: center;
                        margin-left: 25px;
                    "
                    >——</span
                >
            </el-form-item>
            <el-form-item prop="upperBound"> </el-form-item> -->
        </el-form>

        <div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
            <el-row style="border-bottom: 1px solid #ccc">
                <el-col :span="1">
                    <div style="text-align: center">
                        <el-checkbox
                            v-model="item.isChecked"
                            @change="onChangeCompany($event, index, item)"
                        >
                        </el-checkbox>
                    </div>
                </el-col>
                <el-col :span="22">
                    <el-row>
                        <el-col :span="6">
                            <div
                                class="item"
                                style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
                            >
                                <span>订单编号:</span>
                                {{ item.code }}
                            </div>
                        </el-col>
                        <el-col :span="7">
                            <div
                                class="item"
                                style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
                            >
                                <span>下单时间:</span>
                                {{ item.orderTime }}
                            </div>
                        </el-col>
                        <el-col :span="7">
                            <div
                                class="item"
                                style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
                            >
                                <span>装备所属公司:</span>
                                {{ item.czcompanyName }}
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div style="flex-shrink: 0; margin-bottom: 1px; font-size: 7px">
                                <el-button
                                    v-if="status == 0"
                                    class="item"
                                    type="primary"
                                    size="small"
                                    >出库</el-button
                                >
                                <el-button
                                    v-if="status == 0"
                                    class="item"
                                    type="primary"
                                    size="small"
                                    >驳回</el-button
                                >
                            </div>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6">
                            <div
                                class="item"
                                style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
                            >
                                <span>出租方电话:</span>
                                {{ item.personPhone }}
                            </div>
                        </el-col>
                        <el-col :span="7">
                            <div
                                class="item"
                                style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
                            >
                                <span>承租方电话:</span>
                                {{ item.phoneNumber }}
                            </div>
                        </el-col>
                        <el-col :span="7">
                            <div
                                class="item"
                                style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
                            >
                                <span>承租方地址:</span>
                                {{ item.companyName }}
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>

            <el-row class="cart-list" v-for="(goods, j) in item.detailsList" :key="j">
                <el-col :span="1">
                    <div style="text-align: center">
                        <el-checkbox v-model="goods.isChecked" @change="onChangeGoods(index)">
                        </el-checkbox>
                    </div>
                </el-col>
                <el-col :span="9" class="goods-info">
                    <el-col :span="7">
                        <img :src="goods.url" alt="" />
                    </el-col>
                    <div class="goods-code">
                        <div style="font-size: 10px; font-weight: bold">{{ goods.deviceName }}</div>
                        <div>租期：{{ goods.days }}{{ ' ' + '天' }}</div>
                        <div>租金：{{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}</div>
                        <div>数量：{{ goods.num }}{{ ' ' + '台' }}</div>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
                        总费用
                    </div>
                    <div class="red-font">{{ goods.costs }}</div>
                </el-col>
                <el-col :span="6">
                    <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">租期</div>
                    <div style="color: black; font-weight: bold">
                        {{ goods.rentBeginTime }}
                    </div>
                    <div style="margin-top: 3px; margin-bottom: 3px">{{ '至' }}</div>
                    <div style="color: black; font-weight: bold">{{ goods.rentEndTime }}</div>
                </el-col>
                <el-col :span="2">
                    <div
                        v-if="goods.orderStatus == '0'"
                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
                    >
                        {{ '未下单' }}
                    </div>
                    <div
                        v-if="goods.orderStatus == '1'"
                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
                    >
                        {{ '已下单' }}
                    </div>
                    <div
                        v-if="goods.orderStatus == '2'"
                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
                    >
                        {{ '待出库' }}
                    </div>
                    <div
                        v-if="goods.orderStatus == '3'"
                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
                    >
                        {{ '待收货' }}
                    </div>
                    <div
                        v-if="goods.orderStatus == '4'"
                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
                    >
                        {{ '租赁中' }}
                    </div>
                    <div
                        v-if="goods.orderStatus == '5'"
                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
                    >
                        {{ '已退租' }}
                    </div>
                    <div
                        v-if="goods.orderStatus == '6'"
                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
                    >
                        {{ '已完成' }}
                    </div>
                </el-col>
                <el-col :span="3">
                    <div>
                        <el-button
                            @click="handleViewOrder(j, item.detailsList[j])"
                            type="text"
                            size="mini"
                            style="color: #blue; font-weight: bold"
                        >
                            订单详情
                        </el-button>
                        <el-button
                            @click="handleViewOrder(j)"
                            type="text"
                            size="mini"
                            style="color: #blue; font-weight: bold"
                        >
                            租赁协议
                        </el-button>
                        <el-button
                            @click="handleViewBack(j)"
                            type="text"
                            size="mini"
                            style="color: #blue; font-weight: bold"
                        >
                            退租检修
                        </el-button>
                        <el-button
                            @click="handleViewMoney(j)"
                            type="text"
                            size="mini"
                            style="color: #blue; font-weight: bold"
                        >
                            费用结算
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <PagingComponent
            @getList="getList"
            :pageSize="pageSize"
            :pageNumber="pageNumber"
            :total="total"
        />

        <!-- 退租检修弹框 -->
        <el-dialog
            v-model="dialogFormVisibleSettlein"
            :title="settleinTitle"
            width="60%"
            align-center
            :close-on-click-modal="false"
        >
            <div style="height: 80px">
                <div
                    class="info"
                    style="margin-top: 5px; margin-bottom: 8px; display: flex; flex-wrap: wrap"
                >
                    <div
                        class="item"
                        style="
                            width: 30%;
                            flex-shrink: 0;
                            margin-bottom: 5px;
                            font-size: 16px;
                            margin-left: 40px;
                        "
                    >
                        <span>订单编号：10000212135656</span>
                    </div>

                    <div
                        class="item"
                        style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
                    >
                        <span>装备套数：2套</span>
                    </div>

                    <div
                        class="item"
                        style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
                    >
                        <span>退租时间：2024-10-10 10:00:00</span>
                    </div>
                </div>
                <div
                    class="item"
                    style="
                        width: 30%;
                        flex-shrink: 0;
                        margin-bottom: 12px;
                        font-size: 16px;
                        margin-left: 80px;
                    "
                >
                    <span>装备名称：挖掘机</span>
                </div>

                <div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
                    <div
                        class="item"
                        style="
                            width: 30%;
                            flex-shrink: 0;
                            margin-bottom: 5px;
                            font-size: 16px;
                            margin-left: 80px;
                        "
                    >
                        <span>装备编码：10000212135656</span>
                    </div>
                    <div
                        class="item"
                        style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
                    >
                        <span>型号：ZJO9777466</span>
                    </div>

                    <div
                        class="item"
                        style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
                    >
                        <span>数量：3</span>
                    </div>
                </div>
            </div>
            <div class="title">
                <span class="title-sign"></span>
                <span class="title-text">外观检测</span>
            </div>
            <el-form label-width="160" ref="ruleFormRef" :model="equipmentDeploymentParams">
                <el-row>
                    <el-form-item label="是否合格：" prop="pass">
                        <el-select
                            v-model="equipmentDeploymentParams.pass"
                            placeholder="请选择是否合格"
                            clearable
                            style="width: 350px"
                        >
                            <el-option label="是" value="0"></el-option>
                            <el-option label="否" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="费用：" prop="fy">
                        <el-input
                            v-model="equipmentDeploymentParams.fy"
                            placeholder="请输入设备数量"
                            clearable
                            maxlength="20"
                            style="width: 350px"
                        />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="备注：" prop="remark1">
                        <el-input
                            placeholder="请输入"
                            autocomplete="off"
                            style="width: 860px"
                            maxlength="50"
                            v-model="equipmentDeploymentParams.remark1"
                            clearable
                        />
                    </el-form-item>
                </el-row>
            </el-form>
            <div class="uploadBox">
                <div class="labelBox">
                    <div style="margin-left: 40px">
                        <span style="font-size: 14px">检验文件: </span>
                    </div>
                    <div style="margin-left: 20px">
                        <el-upload
                            ref="upload"
                            :limit="6"
                            :headers="upload.headers"
                            :action="upload.url"
                            :show-file-list="false"
                            accept=".png, .jpg, .jpeg"
                            :on-success="handleFileSuccess"
                            :auto-upload="true"
                            :before-upload="beforeUpload"
                            :on-error="uploadError"
                        >
                            <el-button icon="el-icon-folder-add">上传文件</el-button>
                        </el-upload>
                    </div>
                    <div style="color: #999; font-size: 12px; margin-left: 20px">
                        支持格式：.jpg .png，单个文件大小不能超过2M
                    </div>
                </div>
                <div class="imgsBox">
                    <div class="imgItem" v-for="(item, index) in mainFileList" :key="index">
                        <img class="picture-card" :src="item.fileUrl" alt="" />
                        <div class="icon-list">
                            <span class="imgItem__icon hide" @click="handleDownload(item)">
                                <i class="el-icon-download" />
                            </span>
                            <span class="imgItem__icon hide" @click="picturePreview(item)">
                                <i class="el-icon-zoom-in" />
                            </span>
                            <span
                                class="imgItem__icon hide"
                                @click="handleRemove(mainFileList, index)"
                            >
                                <i class="el-icon-delete" />
                            </span>
                        </div>
                        <p class="file-name">{{ item.fileName }}</p>
                    </div>
                </div>
                <div class="tipBox">*注:图片排序为平台展示顺序，不得少于1张，不得多于6张</div>
            </div>
            <div class="title">
                <span class="title-sign"></span>
                <span class="title-text">维修内容</span>
            </div>
            <el-form label-width="160" ref="ruleFormRef" :model="equipmentDeploymentParams">
                <el-row>
                    <el-form-item label="是否合格：" prop="pass2">
                        <el-select
                            v-model="equipmentDeploymentParams.pass2"
                            placeholder="请选择是否合格"
                            clearable
                            style="width: 350px"
                        >
                            <el-option label="是" value="0"></el-option>
                            <el-option label="否" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="费用：" prop="fy2">
                        <el-input
                            v-model="equipmentDeploymentParams.fy2"
                            placeholder="请输入设备数量"
                            clearable
                            maxlength="20"
                            style="width: 350px"
                        />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="备注：" prop="remark2">
                        <el-input
                            placeholder="请输入"
                            autocomplete="off"
                            style="width: 860px"
                            maxlength="50"
                            v-model="equipmentDeploymentParams.remark2"
                            clearable
                        />
                    </el-form-item>
                </el-row>
            </el-form>
            <div class="uploadBox">
                <div class="labelBox">
                    <div style="margin-left: 40px">
                        <span style="font-size: 14px">检验文件: </span>
                    </div>
                    <div style="margin-left: 20px">
                        <el-upload
                            ref="upload2"
                            :limit="6"
                            :headers="upload.headers"
                            :action="upload.url"
                            :show-file-list="false"
                            accept=".png, .jpg, .jpeg"
                            :on-success="handleFileSuccess2"
                            :auto-upload="true"
                            :before-upload="beforeUpload"
                            :on-error="uploadError"
                        >
                            <el-button icon="el-icon-folder-add">上传文件</el-button>
                        </el-upload>
                    </div>
                    <div style="color: #999; font-size: 12px; margin-left: 20px">
                        支持格式：.jpg .png，单个文件大小不能超过2M
                    </div>
                </div>
                <div class="imgsBox">
                    <div class="imgItem" v-for="(item, index) in detailsFileList" :key="index">
                        <img class="picture-card" :src="item.fileUrl" alt="" />
                        <div class="icon-list">
                            <span class="imgItem__icon hide" @click="handleDownload(item)">
                                <i class="el-icon-download" />
                            </span>
                            <span class="imgItem__icon hide" @click="picturePreview(item)">
                                <i class="el-icon-zoom-in" />
                            </span>
                            <span
                                class="imgItem__icon hide"
                                @click="handleRemove(detailsFileList, index)"
                            >
                                <i class="el-icon-delete" />
                            </span>
                        </div>
                        <p class="file-name">{{ item.fileName }}</p>
                    </div>
                </div>
                <div class="tipBox">*注:图片排序为平台展示顺序，不得少于1张，不得多于6张</div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
                    <el-button @click="submitBtn" type="success"> 保存 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <!-- 费用结算弹框 -->
    <el-dialog
        v-model="dialogFormVisibleSettlemoney"
        :title="settlemoneyTitle"
        width="60%"
        align-center
        :close-on-click-modal="false"
    >
        <div style="height: 80px">
            <div
                class="info"
                style="margin-top: 5px; margin-bottom: 8px; display: flex; flex-wrap: wrap"
            >
                <div
                    class="item"
                    style="
                        width: 30%;
                        flex-shrink: 0;
                        margin-bottom: 5px;
                        font-size: 16px;
                        margin-left: 40px;
                    "
                >
                    <span>订单编号：10000212135656</span>
                </div>

                <div
                    class="item"
                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
                >
                    <span>装备套数：2套</span>
                </div>

                <div
                    class="item"
                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
                >
                    <span>退租时间：2024-10-10 10:00:00</span>
                </div>
            </div>
            <div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
                <div
                    class="item"
                    style="
                        width: 30%;
                        flex-shrink: 0;
                        margin-bottom: 5px;
                        font-size: 16px;
                        margin-left: 40px;
                    "
                >
                    <span>结算单位：安徽送变电公司</span>
                </div>
                <div
                    class="item"
                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
                >
                    <span>租赁天数：30{{ '/天' }}</span>
                </div>

                <div
                    class="item"
                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
                >
                    <span>租赁费用(元)：1800</span>
                </div>
            </div>
            <div class="title">
                <span class="title-sign"></span>
                <span class="title-text">退租检测信息</span>
            </div>
        </div>
        <!-- 表格 -->
        <el-table
            :data="tableData"
            class="table"
            style="margin-left: 50px; width: 1100px"
            row-key="id"
            show-overflow-tooltip
            :header-cell-style="{ background: 'white', color: 'black' }"
        >
            <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
            <el-table-column align="center" prop="name1" label="机具名称" />
            <el-table-column align="center" prop="name2" label="规格型号" />
            <el-table-column align="center" prop="name3" label="装备编码" />
            <el-table-column align="center" prop="typeName" label="检验内容">
                <el-table-column label="外观检验" align="center" prop="jy1" />
                <el-table-column label="故障检验" align="center" prop="jy2" />
            </el-table-column>
            <el-table-column align="center" prop="typeName" label="维修内容">
                <el-table-column label="外观检验" align="center" prop="jy3" />
                <el-table-column label="故障检验" align="center" prop="jy4" />
            </el-table-column>
            <el-table-column align="center" prop="typeName" label="金额">
                <el-table-column label="外观检验" align="center" prop="jy5" />
                <el-table-column label="故障检验" align="center" prop="jy6" />
            </el-table-column>
            <el-table-column align="center" prop="typeName" label="附件">
                <el-table-column label="外观检验" align="center" prop="jy7" />
                <el-table-column label="故障检验" align="center" prop="jy8" />
            </el-table-column>
            <el-table-column align="center" label="备注" prop="remark" width="80px">
            </el-table-column>
        </el-table>
        <div class="title">
            <span class="title-sign"></span>
            <span class="title-text">费用结算</span>
        </div>
        <div>
            <span style="color: #ff9900; margin-left: 100px">● </span>
            <span class="title-text">维修费用</span>
        </div>
        <el-form label-width="240" ref="ruleFormRef2" :model="moneyParams1">
            <div v-for="(item, index) in partItems1" :key="index" class="dynamic-item">
                <div
                    style="
                        margin-top: 10px;
                        margin-left: 180px;
                        margin-bottom: 5px;
                        font-size: 18px;
                    "
                >
                    设备：{{ index + 1 }}
                </div>
                <el-row>
                    <el-form-item label="关联装备" prop="partType">
                        <el-select
                            v-model="item.device"
                            placeholder="请选择"
                            clearable
                            style="width: 300px"
                        >
                            <el-option label="设备1" value="0"></el-option>
                            <el-option label="设备2" value="1"></el-option>
                            <el-option label="设备3" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="维修数量" prop="partNum">
                        <el-input
                            v-model="item.partNum"
                            placeholder="请输入"
                            maxlength="20"
                            style="width: 300px"
                        >
                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="维修费用" prop="partNum">
                        <el-input
                            v-model="item.partNum"
                            placeholder="请输入"
                            maxlength="20"
                            style="width: 300px"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="维修类型" prop="isCharge">
                        <el-select
                            v-model="item.isCharge"
                            placeholder="请选择"
                            filterable
                            clearable
                            style="width: 300px"
                        >
                            <el-option label="维修类型1" value="0"></el-option>
                            <el-option label="维修类型2" value="1"></el-option>
                            <el-option label="维修类型3" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <div style="margin-left: 130px">
                        <el-button @click="addPartItem1" type="success"> 增加维修设备</el-button>
                        <el-button @click="removePartItem1(index)" v-if="index != 0" type="danger">
                            删除维修设备</el-button
                        >
                    </div>
                </el-row>
            </div>
        </el-form>

        <div style="margin-top: 10px">
            <span style="color: #ff9900; margin-left: 100px">● </span>
            <span class="title-text">报废费用</span>
        </div>
        <el-form label-width="240" ref="ruleFormRef3" :model="moneyParams2">
            <div v-for="(item, index) in partItems2" :key="index" class="dynamic-item">
                <div
                    style="
                        margin-top: 10px;
                        margin-left: 180px;
                        margin-bottom: 5px;
                        font-size: 18px;
                    "
                >
                    设备：{{ index + 1 }}
                </div>
                <el-row>
                    <el-form-item label="关联装备" prop="partType">
                        <el-select
                            v-model="item.device"
                            placeholder="请选择"
                            clearable
                            style="width: 300px"
                        >
                            <el-option label="设备1" value="0"></el-option>
                            <el-option label="设备2" value="1"></el-option>
                            <el-option label="设备3" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="报废数量" prop="partNum">
                        <el-input
                            v-model="item.partNum"
                            placeholder="请输入"
                            maxlength="20"
                            style="width: 300px"
                        >
                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="报废费用" prop="partNum">
                        <el-input
                            v-model="item.partNum"
                            placeholder="请输入"
                            maxlength="20"
                            style="width: 300px"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="报废原因" prop="isCharge">
                        <el-input
                            v-model="item.isCharg"
                            placeholder="请输入"
                            maxlength="20"
                            style="width: 300px"
                        >
                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <div style="margin-left: 130px">
                        <el-button @click="addPartItem2" type="success"> 增加报废设备</el-button>
                        <el-button @click="removePartItem2(index)" v-if="index != 0" type="danger">
                            删除报废设备</el-button
                        >
                    </div>
                </el-row>
            </div>
        </el-form>

        <div style="margin-top: 10px">
            <span style="color: #ff9900; margin-left: 100px">● </span>
            <span class="title-text">丢失费用</span>
        </div>
        <el-form label-width="240" ref="ruleFormRef4" :model="moneyParams3">
            <div v-for="(item, index) in partItems3" :key="index" class="dynamic-item">
                <div
                    style="
                        margin-top: 10px;
                        margin-left: 180px;
                        margin-bottom: 5px;
                        font-size: 18px;
                    "
                >
                    设备：{{ index + 1 }}
                </div>
                <el-row>
                    <el-form-item label="关联装备" prop="partType">
                        <el-select
                            v-model="item.device"
                            placeholder="请选择"
                            clearable
                            style="width: 300px"
                        >
                            <el-option label="设备1" value="0"></el-option>
                            <el-option label="设备2" value="1"></el-option>
                            <el-option label="设备3" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="丢失数量" prop="partNum">
                        <el-input
                            v-model="item.partNum"
                            placeholder="请输入"
                            maxlength="20"
                            style="width: 300px"
                        >
                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="丢失费用" prop="partNum">
                        <el-input
                            v-model="item.partNum"
                            placeholder="请输入"
                            maxlength="20"
                            style="width: 300px"
                        >
                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <div style="margin-left: 130px">
                        <el-button @click="addPartItem3" type="success"> 增加丢失设备</el-button>
                        <el-button @click="removePartItem3(index)" v-if="index != 0" type="danger">
                            删除丢失设备</el-button
                        >
                    </div>
                </el-row>
            </div>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
                <el-button @click="submitBtn" type="success"> 保存 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
.logo {
    padding: 15px 0;
    display: flex;
    margin-left: 80px;
}
.title {
    margin: 10px;
    margin-left: 20px;
    display: flex;
    align-items: center;
}
.title-sign {
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #409eff;
    margin-left: 45px;
}
.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: auto;
    height: auto;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    margin-left: 20px;

    .imgItem {
        width: 160px;
        height: 160px;
        margin-right: 40px;
        border: 1px dashed #bbb;
        position: relative;
        .picture-card {
            width: 160px;
            height: 160px;
        }
        .icon-list {
            width: 60px;
            height: 20px;
            position: absolute;
            top: 70px;
            left: 40px;
            display: flex;
            align-items: center;
        }
        .imgItem__icon {
            margin: 0 5px;
        }
        .file-name {
            font-size: 10px;
        }
    }

    .hide {
        display: none;
    }
    .imgItem:hover .hide {
        display: block;
    }
}
.tipBox {
    color: red;
    font-size: 12px;
    margin-left: 20px;
}
.container {
    // width: 800px;
    // margin: 0 auto;
    // padding: 10px;
    background: #eeeff6;
    font-size: 14px;

    .cart-title {
        margin-top: 10px;
        padding: 10px 0;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .cart-title div:first-child {
        width: 5px;
        height: 20px;
        background-color: #4fabfe;
    }

    .cart-th {
        margin: 15px 0;
        div {
            text-align: center;
        }
    }

    .cart-tbody {
        background: #fff;
        padding: 8px 12px;
        margin: 10px;

        .cart-user-info {
            display: flex;
            align-items: center;
            font-size: 13px;

            .code,
            .orderTime {
                padding: 3px 18px;
                border: 1px solid #ccc;
            }

            .czcompanyName {
                margin-left: 20px;
                border-right: none;
            }
        }

        .cart-list {
            margin: 15px 0;
            display: flex;
            align-items: center;
            font-size: 13px;
            div {
                text-align: center;
            }

            .goods-info {
                display: flex;
                align-content: center;

                img {
                    width: 140px;
                    height: 80px;
                }

                .goods-code {
                    margin-left: 70px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    div {
                        text-align: left;
                    }
                }
            }

            .lease-date {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 12px;
            }

            .red-font {
                color: #ff4800;
                font-weight: bold;
            }
        }
    }

    .protocol-handle {
        background: #fff;
        padding: 8px 12px;
        margin: 10px;
        font-size: 13px;

        .checkbox-container a {
            color: #ff4800;
            text-decoration: underline;
        }
    }
}

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