<template>
    <div class="container" v-loading="loading">

        <div class="left">

            <div class="order_info" v-if="orderData.faultTypeFormat">
                <div style="color: black;font-size: 18px;font-weight: bold;">维修工单</div>

                <div style="display: flex;margin-top: 30px;justify-content: space-between;align-items: center;">
                    <div class="order_number_container">
                        <div class="order_type">{{ orderData.faultTypeFormat }}</div>
                        <div class="order_number_text">故障编号 {{ orderData.orderNumber }}</div>
                    </div>

                    <div style="color: #999999;font-size: 14px;">报修时间：{{ orderData.creationTime }}</div>
                </div>

                <div class="order_description_container">
                    <div class="g-fx" style="align-items: center;">
                        <div style="color: black;font-weight: bold;font-size: 17px;">故障机构</div>
                        <div style="color: black;font-size: 14px;margin-left: 15px;">{{ orderData.groupName ?? '无' }}</div>
                    </div>

                    <div class="g-fx" style="margin-top: 25px;">
                        <div style="color: black;font-weight: bold;font-size: 17px;">故障描述</div>

                        <div class="g-fx" style="flex-direction: column;margin-left: 15px;width: 80%;">
                            <div style="color: black;font-size: 14px;margin-top: 3px;">{{ orderData.description ?? '无' }}
                            </div>

                            <div class="images_description_list">
                                <template v-for="(item, index) in orderData.images">
                                    <el-image class="image" :preview-src-list="orderData.images" :initial-index="index"
                                        :src="item" fit="cover" />
                                </template>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="person_list">

                    <div class="g-fx" style="align-items: center;">
                        <el-image class="avatar" :src="orderData.customer?.avatar" fit="cover"></el-image>
                        <div style="margin-left: 15px;">
                            <div style="font-weight: bold;font-size: 14px;">报修人 {{ orderData.customer?.trueName }}</div>
                            <div style="color: #999999;font-size: 14px;margin-top: 5px;">电话 {{
                                orderData.customer?.phoneNumber }}</div>
                        </div>
                    </div>


                    <div class="g-fx" style="align-items: center;margin-left: 70px;" v-if="orderData.assignTime">
                        <el-image class="avatar" :src="orderData.assigner?.avatar" fit="cover"></el-image>
                        <div style="margin-left: 15px;">
                            <div style="font-weight: bold;font-size: 14px;">派单人 {{ orderData.assigner?.trueName }}</div>
                            <div style="color: #999999;font-size: 14px;margin-top: 5px;">电话 {{
                                orderData.assigner?.phoneNumber }}</div>
                        </div>
                    </div>

                </div>

            </div>

            <!-- 维修报告 -->
            <div class="repair_report" v-if="orderData.repairer && !orderData.isCanSubmit">

                <div class="repair_report_content" v-if="orderData.report?.repairResult != null">
                    <span style="font-weight: bold;font-size: 16px;">维修报告</span>

                    <span style="margin-top: 10px;font-size: 14px;">故障原因：{{ orderData.report?.repairReason }}</span>
                    <span style="margin-top: 10px;font-size: 14px;">维修结果：{{ orderData.report?.repairResult }}</span>

                    <div class="images_description_list" v-if="orderData.report?.images?.length > 0">
                        <template v-for="(item, index) in orderData.report?.images">
                            <el-image class="image" :preview-src-list="orderData.report.images" :initial-index="index"
                                :src="item" fit="cover" />
                        </template>
                    </div>
                </div>


                <div style="display: flex;flex-direction: column;margin-top: 20px;" v-if="orderData.materials?.length > 0">

                    <span style="font-weight: bold;font-size: 16px;">更换部件</span>

                    <div class="material_list">
                        <template v-for="item in orderData.materials">
                            <div class="material_list_item">

                                <ElSpace>
                                    <img src="../../assets/img/work_order_unit.png" />
                                    <span style="font-size: 14px;">{{ item.name }}</span>
                                </ElSpace>

                                <ElSpace :size="80">

                                    <span style="font-size: 14px;">
                                        <span>所在机构 | {{ item.group }}</span>
                                        <span style="margin-left: 30px;">供应商 | {{ item.supplier }}</span>
                                    </span>

                                    <span style="color: #407B51;font-weight: bold;font-size: 14px;">数量：{{
                                        item.count }}</span>
                                </ElSpace>

                            </div>
                        </template>
                    </div>

                </div>

                <div class="person_list">
                    <div class="g-fx" style="align-items: center;">
                        <el-image class="avatar" :src="orderData.repairer?.avatar" fit="cover"></el-image>
                        <div style="margin-left: 15px;">
                            <div style="font-weight: bold;font-size: 14px;">维修人 {{ orderData.repairer?.trueName }}</div>
                            <div style="color: #999999;font-size: 14px;margin-top: 5px;">电话 {{
                                orderData.repairer?.phoneNumber }}</div>
                        </div>
                    </div>

                    <div class="g-fx" style="align-items: center;margin-left: 70px;" v-if="orderData.auditTime">
                        <el-image class="avatar" :src="orderData.auditor?.avatar" fit="cover"></el-image>
                        <div style="margin-left: 15px;">
                            <div style="font-weight: bold;font-size: 14px;">审核人 {{ orderData.auditor?.trueName }}</div>
                            <div style="color: #999999;font-size: 14px;margin-top: 5px;">电话 {{
                                orderData.auditor?.phoneNumber }}</div>
                        </div>
                    </div>
                </div>

                <img style="align-self: flex-end;" src="../../assets/img/work_detail_audit_complete.png"
                    v-if="orderData.auditTime" />

            </div>



            <!-- 派单 -->
            <div class="assign_order" v-if="orderData.isCanAssign">

                <div style="color: black;font-size: 18px;font-weight: bold;">派单</div>

                <div class="g-fx" style="align-items: center;margin-top: 35px;">
                    <div style="color: black;font-size: 14px;width: 90px;">故障机构</div>
                    <pro-select style="width: 200px;" v-model="selectDeviceGroup" placeholder="选择故障机构"
                        :options="deviceGroupArr" />

                </div>


                <div class="g-fx" style="align-items: center;margin-top: 35px;">
                    <div style="color: black;font-size: 14px;width: 90px;">维修人员</div>
                    <pro-select v-loading="repairerLoading" style="width: 200px;" v-model="selectRepairer"
                        placeholder="选择维修人员" :options="repairerArr" name="trueName" value="id" />
                </div>


                <div class="g-fx" style="margin-top: 30px;">
                    <div style="color:black;font-size: 14px;width: 90px;">故障描述</div>

                    <pro-input style="width: calc(100% - 90px);" rows="5" type="textarea" v-model="faultDescription"
                        placeholder="请输入故障描述"></pro-input>
                </div>


                <div class="g-fx" style="margin-top: 50px;align-items: center;justify-content: center;">
                    <pro-button style="width: 100px;height: 40px;" @click="markersCompleteFun"
                        v-loading="markersCompleteLoading">标记已完成</pro-button>
                    <pro-button style="width: 100px;height: 40px;margin-left: 50px;" type="primary" @click="assignOrderFun"
                        v-loading="assignOrderLoading">派单</pro-button>
                </div>

            </div>

            <!-- 接单 -->
            <div class="accept_order" v-if="orderData.isCanAccept">
                <div style="color: black;font-size: 18px;font-weight: bold;">接单</div>

                <pro-button style="width: 120px;height: 50px;margin-top: 40px;" type="primary"
                    v-loading="acceptOrderLoading" @click="acceptOrderFun">接单</pro-button>

                <div class="turn_down_accept_order_container">
                    <div style="font-size: 14px;font-weight: bold;">如无法接单，请输入原因</div>

                    <div class="g-fx" style="justify-content: space-between;">
                        <pro-input :maxlength="100" style="width: 80%;min-height: 45px;" placeholder="请输入拒绝原因"
                            v-model="turnDownAcceptOrderReason">
                        </pro-input>

                        <pro-button @click="turnDownAcceptOrder" v-loading="acceptOrderLoading">拒绝接单</pro-button>
                    </div>

                </div>

            </div>

            <!-- 提交维修信息 -->
            <div class="submit_repair" v-if="orderData.isCanSubmit">
                <div style="color: black;font-size: 18px;font-weight: bold;">填写维修单</div>

                <div class="g-fx" style="margin-top: 30px;align-items: center;">
                    <div>更换部件</div>
                    <pro-button style="margin-left: 20px;background: #F9FBFA;" v-loading="partsLoading"
                        @click="partsDialogVisible = true">
                        添加本次更换配件
                        <el-icon style="margin-left: 5px;" :size="17" color="#7FAA86">
                            <CirclePlus />
                        </el-icon>
                    </pro-button>
                </div>


                <div class="material_list" v-if="orderData.materials?.length > 0" v-loading="deletePartLoading">
                    <template v-for="item in orderData.materials">
                        <div class="material_list_item" v-loading="updatePartLoading">

                            <ElSpace>
                                <img src="../../assets/img/work_order_unit.png" style="user-select: none;" />
                                <span style="font-size: 14px;user-select: none;">{{ item.name }}</span>
                            </ElSpace>

                            <ElSpace :size="80">

                                <span style="font-size: 14px;user-select: none;">
                                    <span>所在机构 | {{ item.group }}</span>
                                    <span style="margin-left: 30px;">供应商 | {{ item.supplier }}</span>
                                </span>

                                <ElSpace :size="5">
                                    <el-icon :size="17" color="#407B51" style="cursor: pointer;"
                                        @click="partCountUpdate(-1, item)">
                                        <Remove />
                                    </el-icon>

                                    <span style="color: #407B51;font-weight: bold;font-size: 14px;user-select: none;">数量：{{
                                        item.count }}</span>

                                    <el-icon :size="17" color="#407B51" style="cursor: pointer;"
                                        @click="partCountUpdate(1, item)">
                                        <CirclePlus />
                                    </el-icon>
                                    <el-icon :size="17" color="red" style="cursor: pointer;">
                                        <RemoveFilled @click="deletePartRun(item.partId)" />
                                    </el-icon>

                                </ElSpace>

                            </ElSpace>

                        </div>
                    </template>
                </div>

                <div style="display: flex;margin-top: 40px;width: 100%;">
                    <div>维修报告</div>

                    <div class="fault_description">

                        <div class="g-fx" style="width: 100%;">
                            <span>故障描述</span>
                            <pro-input style="margin-left: 10px;width: 90%;" :maxlength="100" type="textarea"
                                placeholder="请输入故障描述" v-model="faultDescription">
                            </pro-input>
                        </div>

                        <div class="g-fx" style="width: 100%;">
                            <span>维修结果</span>
                            <pro-input style="margin-left: 10px;width: 90%;" :maxlength="100" type="textarea"
                                placeholder="请输入维修结果" v-model="repairResult">
                            </pro-input>
                        </div>

                        <el-upload style="margin-top: 20px;" accept=".jpg,.jpeg,.png" :limit="4" action="#"
                            list-type="picture-card" :file-list="fileList" :http-request="selectFile"
                            :on-remove="removeFile">
                            <div style="display: flex;flex-direction: column;align-items: center;">
                                <el-icon :size="20" color="#999999">
                                    <Camera />
                                </el-icon>
                                <span style="font-size: 10px;margin-top: 5px;color: #999999;">添加图片</span>
                            </div>
                        </el-upload>

                    </div>
                </div>

                <ElSpace style="align-self: flex-end;margin-top: 50px;" :size="20">
                    <pro-button style="width: 100px;height: 45px;" type="primary" @click="submitRepairReport">
                        提交维修单
                    </pro-button>

                    <pro-button style="width: 80px;height: 45px;">
                        反馈
                    </pro-button>
                </ElSpace>

            </div>

            <!-- 审核工单 -->
            <div class="audit_order" v-if="orderData.isCanAudit">
                <div style="color: black;font-size: 18px;font-weight: bold;">审核意见</div>

                <pro-button style="width: 120px;height: 50px;margin-top: 40px;" type="primary"
                    v-loading="acceptOrderLoading" @click="auditOrderFun(1)">通过</pro-button>

                <div class="turn_down_accept_order_container">
                    <div style="font-size: 14px;font-weight: bold;">如无法通过，请输入驳回原因</div>

                    <div class="g-fx" style="justify-content: space-between;">
                        <pro-input :maxlength="100" style="width: 80%;min-height: 45px;" placeholder="请输入拒绝原因"
                            v-model="turnDownAuditOrderReason">
                        </pro-input>

                        <pro-button @click="auditOrderFun(2)" v-loading="acceptOrderLoading">驳回</pro-button>
                    </div>

                </div>
            </div>

        </div>




        <div class="right" v-if="orderData.faultTypeFormat">

            <div class="device_info">
                <div class="device_name_title">设备信息</div>

                <div style="font-size: 16px;font-weight: bold;margin-top: 30px;">{{ orderData.device?.deviceName }}</div>

                <div class="line"></div>

                <div class="g-fx" style="justify-content: space-between;">
                    <div>
                        <div style="font-size: 14px;font-weight: bold;">设备编号</div>
                        <div style="font-size: 14px;color: #999999;margin-top: 10px;">{{ orderData.device?.productNo }}
                        </div>
                    </div>

                    <div>
                        <div style="font-size: 14px;font-weight: bold;">设备型号</div>
                        <div style="font-size: 14px;color: #999999;margin-top: 10px;">{{ orderData.device?.model }}</div>
                    </div>
                </div>

                <div style="background: #E7E9EA;height: 1px;margin: 30px 0;"></div>

                <div style="font-size: 14px;font-weight: bold;">所在位置</div>

                <div style="font-size: 14px;color: #999999;margin-top: 10px;">
                    {{ orderData.device?.workshop == null ? orderData.device?.companyName :
                        (orderData.device?.companyName + " " + orderData.device?.workshop) }}
                </div>

            </div>



            <div class="order_progress">
                <div style="font-size: 18px;font-weight: bold;">进度追踪</div>


                <div class="order_progress_list">

                    <template v-for="item in orderData.tracks">
                        <div class="g-fx" style="margin-left: 7px;">
                            <div style="display: flex;flex-direction: column;align-items: center;">
                                <div style="width: 13px;height: 13px;border: 2px solid #407B51;border-radius: 4px;"></div>
                                <div style="background: #ECECEC;min-height: 50px;width: 9px;height: 100%;"></div>
                            </div>

                            <div style="display: flex;flex-direction: column;margin-left: 20px;margin-bottom: 30px;">
                                <div style="font-size: 16px;font-weight: bold;">{{ item.node }}</div>
                                <div style="font-size: 14px;margin-top: 15px;">{{ item.userName + item.content }}</div>
                                <div style="font-size: 14px;color: #999999;margin-top: 15px;">{{ item.data +'&nbsp'+ item.time }}
                                </div>

                                <div class="order_progress_image_list" v-if="item.images.length > 0">
                                    <template v-for="(itwm2, index2) in item.images">
                                        <el-image class="image" style="width: 50px;height: 50px;"
                                            :preview-src-list="item.images" :initial-index="index2" :src="itwm2"
                                            fit="cover" />
                                    </template>
                                </div>

                            </div>
                        </div>
                    </template>

                    <div class="order_progress_end" v-if="orderData.tracks?.length > 0">
                        END
                    </div>

                </div>

            </div>

        </div>


    </div>


    <el-dialog title="添加配件" v-model="partsDialogVisible" width="60%" destroy-on-close @close="partsDialogVisible = false">

        <div style="display: flex;flex-direction: column;">

            <div class="parts_list">

                <div class="select_parts_list_group_list">
                    <template v-for="(group, groupIndex) in partsArr">
                        <div :class="['select_parts_list_group_item', groupIndex == selectGroupIndex ? 'active' : '']"
                            @click="selectPartsGroupClick(groupIndex)">
                            <div>{{ group.groupName }}</div>
                        </div>
                    </template>
                </div>

                <div class="select_parts_list_child_list">

                    <template v-for="(child, childIndex) in currentPartArr.parts">
                        <div :class="['select_parts_list_child_item', child.isChecked ? 'active' : '']"
                            @click="child.isChecked = !child.isChecked">
                            <div
                                style="display: flex;flex-direction: column;margin-top: 10px;margin-left: 10px;margin-bottom: 10px;">
                                <span style="font-size: 14px;font-weight: bold;"
                                    :style="{ color: child.isChecked ? '#3F794F' : '#000' }">{{ child.name }}</span>
                                <span style="font-size: 12px;margin-top: 10px;"
                                    :style="{ color: child.isChecked ? '#7DAC8A' : '#999' }">
                                    <div style="margin-top: 5px;">{{ child.model }}</div>
                                    <div style="margin-top: 5px;">{{ child.number }}</div>
                                    <div style="margin-top: 5px;">{{ child.supplier }}</div>
                                </span>
                            </div>

                            <div style="display: flex;flex-direction: column;margin-top: 10px;margin-right: 10px;">
                                <span style="font-size: 12px;"
                                    :style="{ color: child.isChecked ? '#3F794F' : '#000' }">备件数量</span>
                                <span style="align-self: flex-end;font-weight: bold;font-size: 18px;margin-top: 10px;"
                                    :style="{ color: child.isChecked ? '#3F794F' : '#000' }">{{ child.count }}</span>
                            </div>
                        </div>
                    </template>

                </div>

            </div>


            <ElSpace :size="30" style="align-self: flex-end;">
                <pro-button style="width: 100px;height: 45px;" type="primary" @click="resetSelectParts">
                    重置
                </pro-button>

                <pro-button v-loading="addPartLoading" style="width: 100px;height: 45px;" type="primary"
                    @click="selectPartsClick">
                    确定
                </pro-button>
            </ElSpace>

        </div>


    </el-dialog>
</template>

<script setup lang="ts">

import {
    assignOrder, getAllGroups, getRepairerList,
    getWorkOrderDetail, markersComplete, submitRepair,
    acceptOrder, auditOrder, getDeviceParts,
    addPart, updatePart, deletePart
} from '@/api/workOrderCenter';
import { uploadImage } from '@/api/upload'
import { ElMessage, ElSpace } from 'element-plus';
import { compressImage } from '@/utils/imageUtils';

const props = defineProps({
    id: {
        type: Number,
        default: 0
    }
})


const partsDialogVisible = ref(false)
const selectRepairer: any = ref('')
const selectDeviceGroup: any = ref('')
const orderData: any = ref({})
const repairerArr: any = ref([])
const deviceGroupArr: any = ref([])
const faultDescription: any = ref('')
const repairResult: any = ref('')
const turnDownAcceptOrderReason: any = ref('')
const turnDownAuditOrderReason: any = ref('')
const acceptOrderAction = ref(1)
const auditOrderAction = ref(1)
const partsArr: any = ref([])
const selectGroupIndex = ref(0)
const currentPartArr: any = ref([])
const fileList: any = ref([])


const submitRepairReport = () => {
    if (faultDescription.value == '') {
        ElMessage.info('请输入故障描述')
        return
    }
    if (repairResult.value == '') {
        ElMessage.info('请输入维修结果')
        return
    }

    //提交维修结果
    submitRepairRun()
}

const removeFile = (e) => {
    const index = imageParams.value.findIndex(item => item.fileToken == e.uid)
    if (index >= 0) {
        imageParams.value.splice(index, 1)
    }
}

const imageParams: any = ref([])

const selectFile = async (e) => {

    const file = e.file
    compressImage(file).then((res: any) => {
        const formData = new FormData();
        formData.append('file', res);
        formData.append('fileName', res.name);
        formData.append('fileType', res.type);
        formData.append('fileToken', file.uid);
        uploadRun(formData)
    })
}



var updatePartVar: any = ref({})
var updatePartCount = 0

const partCountUpdate = (type: number, item: any) => {
    updatePartVar = item
    if (type == 1) {//加
        updatePartCount = item.count + 1
        const params = {
            orderId: orderData.value.id,
            partId: item.partId,
            count: updatePartCount
        }
        updatePartRun(params)
    } else {//减
        if (item.count > 1) {
            updatePartCount = item.count - 1
            const params = {
                orderId: orderData.value.id,
                partId: item.partId,
                count: updatePartCount
            }
            updatePartRun(params)
        }
    }
}


const selectPartsGroupClick = (index) => {
    selectGroupIndex.value = index
    currentPartArr.value = partsArr.value[index]
}

const resetSelectParts = () => {
    partsArr.value.forEach(e => {
        e.parts.forEach(item => {
            item.isChecked = false
        })
    });
}

const selectPartsClick = () => {
    const arr: any = []
    partsArr.value.forEach(group => {
        group.parts.forEach(child => {
            if (child.isChecked) {
                child.groupName = group.groupName
                arr.push(child)
            }
        })
    })
    if (arr.length == 0) {
        ElMessage.info('请至少选择一个配件')
        return
    }

    const params = {
        orderId: orderData.value.id,
        materials: arr.map(e => {
            return {
                partId: e.id,
                count: 1
            }
        })
    }
    addPartRun(params)
}

const markersCompleteFun = () => {
    if (faultDescription.value == '') {
        ElMessage.info('请输入故障描述')
        return
    }
    markersCompleteRun()
}


//1通过2拒绝
const auditOrderFun = (type: number) => {
    auditOrderAction.value = type
    if (type == 2) {
        if (turnDownAuditOrderReason.value == '') {
            ElMessage.info('请输入驳回原因')
            return
        }
    }
    var message = ''
    if (type == 2) {
        message = '该操作将要驳回此次的维修工单，是否确定?'
    } else {
        message = '该操作将要审核通过此次的维修工单，是否确定?'
    }
    inquireDialog(message, () => {
        auditOrderRun()
    }, '工单审核')

}


const assignOrderFun = () => {

    if (selectDeviceGroup.value == '') {
        ElMessage.info('请选择要报修的设备机构')
        return
    }
    if (selectRepairer.value == '') {
        ElMessage.info('请选择维修人员')
        return
    }
    if (faultDescription.value == '') {
        ElMessage.info('请输入故障描述')
        return
    }
    inquireDialog('该操作将要进行派单，是否确定?', () => {
        assignOrderRun()
    }, '派单')

}


const acceptOrderFun = () => {


    inquireDialog('该操作将要进行接单，是否确定?', () => {
        acceptOrderAction.value = 1
        acceptOrderRun()
    }, '接单')
}


const turnDownAcceptOrder = () => {
    if (turnDownAcceptOrderReason.value == '') {
        ElMessage.info('请输入拒绝接单原因')
        return
    }

    inquireDialog('该操作将要进行拒绝接单，是否确定?', () => {
        acceptOrderAction.value = 2
        acceptOrderRun()
    }, '拒单')

}


const { run: submitRepairRun, loading: submitRepairLoading } = useRequest(
    () => submitRepair({
        orderId: orderData.value.id,
        repairReason: faultDescription.value,
        repairResult: repairResult.value,
        images: imageParams.value
    }),
    {
        manual: true,
        onSuccess: (data: any) => {
            if (data === true) {
                ElMessage.success('操作成功')
                run()
            } else {
                ElMessage.error('操作失败')
            }
        }
    }
)

const { run: deletePartRun, loading: deletePartLoading } = useRequest(
    (partId) => deletePart({
        orderId: orderData.value.id,
        partId: partId
    }),
    {
        manual: true,
        onSuccess: (data: any) => {
            partsDialogVisible.value = false
            if (data === true) {
                run()
            } else {
                ElMessage.error('操作失败')
            }
        }
    }
)


const { run: updatePartRun, loading: updatePartLoading } = useRequest((params) => updatePart(params),
    {
        manual: true,
        onSuccess: (data: any) => {
            partsDialogVisible.value = false
            if (data === true) {
                const a = orderData.value.materials.find(e => updatePartVar.partId == e.partId)
                a.count = updatePartCount
            } else {
                ElMessage.error('操作失败')
            }
        }
    }
)


const { run: addPartRun, loading: addPartLoading } = useRequest((params) => addPart(params),
    {
        manual: true,
        onSuccess: (data: any) => {
            partsDialogVisible.value = false
            if (data === true) {
                ElMessage.success('添加成功')
                run()
            } else {
                ElMessage.error('操作失败')
            }
        }
    }
)

const { run: auditOrderRun, loading: auditOrderLoading } = useRequest(
    () => auditOrder({
        orderId: orderData.value.id,
        action: auditOrderAction.value,
        reason: turnDownAuditOrderReason.value
    }),
    {
        manual: true,
        onSuccess: (data: any) => {
            if (data === true) {
                ElMessage.success('操作成功')
                run()
            } else {
                ElMessage.error('操作失败')
            }
        }
    }
)



const { run: acceptOrderRun, loading: acceptOrderLoading } = useRequest(
    () => acceptOrder({
        orderId: orderData.value.id,
        action: acceptOrderAction.value,
        reason: turnDownAcceptOrderReason.value
    }),
    {
        manual: true,
        onSuccess: (data: any) => {
            if (data === true) {
                ElMessage.success('操作成功')
                run()
            } else {
                ElMessage.error('操作失败')
            }
        }
    }
)


const { run: repairerRun, loading: repairerLoading } = useRequest(
    () => getRepairerList({
        deviceId: orderData.value.device.id,
        faultType: orderData.value.faultType
    }),
    {
        manual: true,
        onSuccess: (data: any) => {
            repairerArr.value = data
        }
    }
)

const { run: partsRun, loading: partsLoading } = useRequest(
    () => getDeviceParts({
        deviceId: orderData.value.device.id
    }),
    {
        manual: true,
        onSuccess: (data: any) => {
            data.forEach(e => {
                e.parts.forEach(item => {
                    item.isChecked = false
                })
            });
            partsArr.value = data
            if (data.length > 0) {
                currentPartArr.value = data[0]
            }
        }
    }
)

const { run: deviceGroupRun } = useRequest(
    () => getAllGroups({ deviceId: orderData.value.device.id }),
    {
        manual: true,
        onSuccess: (data: any) => {
            deviceGroupArr.value = data
            const a = data.find((item) => item.name == orderData.value.groupName)
            selectDeviceGroup.value = a?.value ?? ''
        }
    }
)

const { run: assignOrderRun, loading: assignOrderLoading } = useRequest(
    () => assignOrder({
        orderId: orderData.value.id,
        repairerId: selectRepairer.value,
        description: faultDescription.value,
        groupId: selectDeviceGroup.value
    }),
    {
        manual: true,
        onSuccess: (data: any) => {
            ElMessage.success('派单成功')
            run()
        }
    }
)


const { run: markersCompleteRun, loading: markersCompleteLoading } = useRequest(
    () => markersComplete({
        orderId: orderData.value.id,
        remark: faultDescription.value,
    }),
    {
        manual: true,
        onSuccess: (data: any) => {
            ElMessage.success('标记已完成')
            run()
        }
    }
)


const { run, loading } = useRequest(
    () => getWorkOrderDetail({ orderId: props.id }),
    {
        manual: true,
        onSuccess: (data: any) => {
            orderData.value = data
            if (data.isCanAssign) {//可以派单
                faultDescription.value = data.description
                repairerRun()
                deviceGroupRun()
            }
        }
    }
)


const { run: uploadRun, loading: uploadLoading } = useRequest(
    (file) => uploadImage(file),
    {
        manual: true,
        onSuccess: (data: any) => {
            imageParams.value.push(data)
            console.log(data)
        }
    }
)


watch(
    () => [props.id, partsDialogVisible.value],
    () => {
        if (!orderData.value.id) {
            run()
        }
        if (partsDialogVisible.value) {
            if (partsArr.value.length == 0) {
                partsRun()
            }
        }
    }
)


</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 20px;
}

.left {
    width: 70%;
    min-width: 500px;
    display: flex;
    flex-direction: column;
}

.right {
    min-width: 100px;
    margin-left: 20px;
    width: calc(30% - 20px);
    display: flex;
    flex-direction: column;
}


.device_info {
    width: 100%;
    background: #FFFFFF;
    border-radius: 10px;
    display: flex;
    padding: 30px;
    flex-direction: column;

    .device_name_title {
        color: white;
        background: #407B51;
        padding: 7px 10px;
        width: fit-content;
        border-radius: 5px;
        font-weight: bold;
        font-style: italic;
        font-size: 18px;
        font-family: YouSheBiaoTiHei;
    }
}

.line {
    height: 4px;
    margin-top: 20px;
    margin-bottom: 30px;
    background: linear-gradient(90deg, #407B51, #C5D7CA);
}


.order_info {
    background: #FFFFFF;
    border-radius: 10px;
    display: flex;
    padding: 20px;
    flex-direction: column;
}

.order_number_container {
    display: flex;
    border: 1px solid #407B51;
    width: fit-content;
    align-items: center;
}

.order_type {
    min-width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding-right: 15px;
    background-color: #407B51;
    color: white;
    font-size: 14px;
    font-weight: bold;
    clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
}

.order_number_text {
    color: #407B51;
    margin-left: 15px;
    margin-right: 20px;
    font-weight: bold;
    font-size: 14px;
}

.order_description_container {
    background: #F7F7F7;
    border-radius: 10px;
    padding: 30px 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

.images_description_list {
    width: 100%;
    display: grid;
    gap: 10px;
    margin-top: 20px;
    grid-template-columns: repeat(10, 1fr);
}

.image {
    width: 100px;
    height: 100px;
    cursor: pointer;
    border-radius: 5px;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.person_list {
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.repair_report {
    margin-top: 20px;
    background: #FFFFFF;
    border-radius: 10px;
    display: flex;
    padding: 30px 20px;
    flex-direction: column;
}

.repair_report_content {
    background: #F7F7F7;
    border-radius: 10px;
    display: flex;
    padding: 30px 20px;
    flex-direction: column;
}


.assign_order {
    margin-top: 20px;
    background: #FFFFFF;
    border-radius: 10px;
    display: flex;
    padding: 30px 20px;
    flex-direction: column;
    margin-bottom: 100px;
}

.accept_order {
    width: 100%;
    margin-top: 20px;
    background: #FFFFFF;
    border-radius: 10px;
    display: flex;
    padding: 30px 20px;
    flex-direction: column;
    margin-bottom: 100px;
}

.submit_repair {
    width: 100%;
    margin-top: 20px;
    background: #FFFFFF;
    border-radius: 10px;
    display: flex;
    padding: 30px 20px;
    flex-direction: column;
    margin-bottom: 100px;
}

.turn_down_accept_order_container {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 100px;
    margin-top: 30px;
    background: #FFFFFF;
    border: 1px solid #E7E9EA;
    border-radius: 10px;

    :deep(.el-input) {
        .el-input__wrapper {
            border: none !important;
            box-shadow: none !important;
            padding: 0px; //前边边距去掉
        }
    }
}




.order_progress {
    margin-top: 20px;
    background: #FFFFFF;
    border-radius: 10px;
    display: flex;
    padding: 30px 20px;
    flex-direction: column;
}

.order_progress_list {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}

.order_progress_image_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 15px;
}

.order_progress_end {
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #CCCCCC;
    border-radius: 7px;
    color: white;
    font-size: 10px;
}


.material_list {
    border: 1px solid #E7E9EA;
    display: flex;
    border-radius: 5px;
    flex-direction: column;
    margin-top: 20px;

    .material_list_item:last-child {
        border-bottom: none
    }

    .material_list_item {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #E7E9EA;
    }
}


.audit_order {
    width: 100%;
    margin-top: 20px;
    background: #FFFFFF;
    border-radius: 10px;
    display: flex;
    padding: 30px 20px;
    flex-direction: column;
    margin-bottom: 100px;
}

.parts_list {
    display: flex;
    flex-direction: column;
}

.select_parts_list_group_list {
    display: flex;
    width: fit-content;
    border: 1px solid #E7E9EA;
}

.select_parts_list_group_item {
    min-width: 100px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    cursor: pointer;


    &.active {
        border: 1px solid #3F794F;
    }
}

.select_parts_list_child_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.select_parts_list_child_item {
    display: flex;
    border: 1px solid #E7E9EA;
    cursor: pointer;
    border-radius: 5px;
    justify-content: space-between;
    min-height: 70px;
    background: white;

    &.active {
        border: 1px solid #3F794F;
        background: #F5FBF8;
    }

}

.fault_description {
    border: 1px solid #E7E9EA;
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
    width: 90%;
    margin-left: 20px;

    :deep(.el-textarea) {
        .el-textarea__inner {
            border: none !important;
            box-shadow: none !important;
            padding: 0px; //前边边距去掉
            resize: none
        }
    }
}
</style>
