<template>
    <div class="app-container" >
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="100px"
        >
            <el-form-item label="机具名称" prop="typeName">
                <el-input
                    v-model="queryParams.typeName"
                    placeholder="请输入机具名称"
                    clearable
                    :maxlength="20"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="规格型号" prop="type">
                <el-input
                    v-model="queryParams.type"
                    placeholder="请输入规格型号"
                    clearable
                    :maxlength="20"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item label="修试审核状态" prop="taskStatus">
                <el-select
                    v-model="queryParams.taskStatus"
                    placeholder="请选择修试审核状态"
                    clearable
                    filterable
                    style="width: 240px"
                >
                    <el-option label="待审核" value="0" />
                    <el-option label="已通过" value="1" />
                    <el-option label="维修驳回" value="2" />
                    <el-option label="报废驳回" value="3" />
                </el-select>
            </el-form-item>

            <el-form-item label="维修时间">
                <el-date-picker
                    v-model="dateRange"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" :disabled="multiple" @click="handleAll"
                    >批量审核</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    >导出</el-button
                >
            </el-col>

            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" width="55" align="center" :selectable="selectable" />
            <el-table-column
                label="序号"
                align="center"
                width="80"
                type="index"
                :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
            >
                <!-- <template slot-scope="scope">
                    <span>{{
                        (queryParams.pageNum - 1) * 10 + scope.$index + 1
                    }}</span>
                </template> -->
            </el-table-column>
            <el-table-column label="机具名称" align="center" prop="typeName" show-overflow-tooltip width="150px"/>
            <el-table-column label="规格型号" align="center" prop="type" show-overflow-tooltip width="150px"/>
            <el-table-column label="机具编号" align="center" prop="maCode" show-overflow-tooltip width="120px"/>
            <el-table-column label="维修总数" align="center" prop="repairNum" show-overflow-tooltip />
            <el-table-column label="维修合格数量" align="center" prop="repairedNum" show-overflow-tooltip />
            <el-table-column label="报废数量" align="center" prop="scrapNum" show-overflow-tooltip />
            <el-table-column
                label="维修类型"
                align="center"
                prop="repairType"
                :show-overflow-tooltip="true"
                >
                <template slot-scope="scope">
                    <span v-if="scope.row.repairType == 1">内部维修</span>
                    <span v-if="scope.row.repairType == 2">返厂维修</span>
                    <span v-if="scope.row.repairType == 3">预报废</span>
                </template>
            </el-table-column>
            <el-table-column label="维修人" align="center" prop="repairer" show-overflow-tooltip />
            <el-table-column label="维修时间" align="center" prop="createTime" show-overflow-tooltip width="100px"/>
            <el-table-column label="审核状态" align="center" prop="taskStatus" show-overflow-tooltip >
                <template slot-scope="scope">
                    <span v-if="scope.row.taskStatus === 1">
                        <el-tag type="success">
                            已通过
                        </el-tag>
                    </span>
                    <span v-if="scope.row.taskStatus === 0">
                        <el-tag type="warning">
                            待审核
                        </el-tag>
                    </span>
                    <span v-if="scope.row.taskStatus === 2">
                        <el-tag type="danger">
                            维修驳回
                        </el-tag>
                    </span>
                    <span v-if="scope.row.taskStatus === 3">
                        <el-tag type="danger">
                            报废驳回
                        </el-tag>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="不通过原因" align="center" prop="remark" show-overflow-tooltip width="120px"/>
            <el-table-column label="操作" align="center" width="250px"  fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-zoom-in" @click="handleSee(scope.row, 'see')"
                        >查看</el-button
                    >
                    <!--  -->
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-circle-check"
                        :disabled="scope.row.taskStatus !== 0"
                        @click="handleUpdate(scope.row, 'update')"
                        >审核</el-button
                    >
                    <el-button size="mini" type="text" icon="el-icon-document" @click="openUpkeep(scope.row)"
                        >保养记录表</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

         <!-- 内部维修查看框 -->
        <el-dialog
            :visible.sync="repairViewNB"
            v-if="repairViewNB"
            width="60%"
            :title="repairTitle"
            append-to-body
        >
            <el-table
                v-loading="loading"
                :data="repairListNB"
                border
            >
                <el-table-column
                    label="序号"
                    align="center"
                    width="50"
                    type="index"
                >
                </el-table-column>
                <el-table-column
                    label="配件数量"
                    align="center"
                    prop="partNum"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="费用（元）"
                    align="center"
                    prop="partPrice"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="技术鉴定"
                    align="center"
                    prop="repairRemark"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="更换下的配件"
                    align="center"
                    prop="partChange"
                    width="200"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="更换的配件数量"
                    align="center"
                    prop="partChangeNum"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="附件"
                    align="center"
                    prop="fileList"
                    :show-overflow-tooltip="true"
                    >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            v-if="scope.row.fileList.length > 0"
                            @click="handleViewFile(scope.row)"
                        >
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-dialog>

        <!-- 返厂维修查看框 -->
        <el-dialog
            :visible.sync="repairViewFC"
            v-if="repairViewFC"
            width="60%"
            :title="repairTitle"
            append-to-body
        >
            <el-table
                v-loading="loading"
                :data="repairListFC"
                border
            >
                <el-table-column
                    label="序号"
                    align="center"
                    width="50"
                    type="index"
                >
                </el-table-column>
                <el-table-column
                    label="配件名称"
                    align="center"
                    prop="partName"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="配件数量"
                    align="center"
                    prop="partNum"
                    :show-overflow-tooltip="true"
                />
                 <el-table-column
                    label="技术鉴定"
                    align="center"
                    prop="repairRemark"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="附件"
                    align="center"
                    prop="fileList"
                    :show-overflow-tooltip="true"
                    >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            v-if="scope.row.fileList.length > 0"
                            @click="handleViewFile(scope.row)"
                        >
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-dialog>

        <!-- 待报废维修查看框 -->
        <el-dialog
            :visible.sync="repairViewBF"
            v-if="repairViewBF"
            width="60%"
            :title="repairTitle"
            append-to-body
        >
            <el-table
                v-loading="loading"
                :data="repairListBF"
                border
            >
                <el-table-column
                    label="序号"
                    align="center"
                    width="50"
                    type="index"
                >
                </el-table-column>
                <el-table-column
                    label="报废原因"
                    align="center"
                    prop="scrapReason"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="损坏原因"
                    align="center"
                    prop="scrapType"
                    :show-overflow-tooltip="true"
                    >
                    <template slot-scope="scope">
                        <span v-if="scope.row.scrapType == 0">自然损坏</span>
                        <span v-if="scope.row.scrapType == 1">人为损坏</span>
                    </template>
                </el-table-column>
               <el-table-column
                    label="技术鉴定"
                    align="center"
                    prop="repairRemark"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="附件"
                    align="center"
                    prop="fileList"
                    :show-overflow-tooltip="true"
                    >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            v-if="scope.row.fileList.length > 0"
                            @click="handleViewFile(scope.row)"
                        >
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-dialog>

        <el-dialog
            :visible.sync="fileDialogVisible"
            title="附件列表"
            width="60%"
            append-to-body
        >
            <el-table :data="currentFileList" border>
                <el-table-column label="文件名称" prop="fileName"  align="center"/>
                <el-table-column label="文件路径" prop="fileUrl" align="center"/>
                <el-table-column label="操作" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            @click="picturePreview(scope.row)"
                        >
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <!-- 图片查看弹窗 -->
        <el-dialog :visible.sync="dialogVisible" width="600px" height="600px" >
            <img width="100%" height="500px" :src="dialogImageUrl"  />
        </el-dialog>
       

        <el-dialog
            :visible.sync="openOne"
            :title="title"
            append-to-body
            :before-close="closeOpenOne"
            width="400px"
        >
          <el-form ref="form" :model="form"  label-width="100px">
            <el-form-item label="审核结果：">
                    <el-radio-group v-model="form.checkResultText">
                            <el-radio label="通过">通过</el-radio>
                            <el-radio label="驳回">驳回</el-radio>
                    </el-radio-group>
            </el-form-item>
            <!-- 不通过原因输入框，当选择不通过时显示 -->
            <el-form-item v-if="form.checkResultText === '驳回'" label="驳回原因：" prop="remark">
                <el-input
                    type="textarea"
                    v-model="form.remark"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    show-word-limit
                    maxlength="100"
                ></el-input>
            </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="submitOpenOneFeturn">取消</el-button>
                <el-button type="primary" @click="submitOpenOneForm()">提交</el-button>
            </div>
        </el-dialog>

        <!-- 维修记录表 -->
        <el-dialog title="维修记录表" :visible.sync="upkeepVisible" width="46%">
            <vue-easy-print tableShow ref="printRef">
                <div style="padding: 0 30px">
                    <h2 style="text-align: center; font-size: 33px">重庆市送变电工程有限公司</h2>
                    <h3 style="text-align: center; font-size: 28px">设备维修保养记录表</h3>
                    <div
                        style="
                            border: 1px solid #000;
                            min-height: 820px;
                            line-height: 1.9;
                            font-size: 20px;
                            position: relative;
                            box-sizing: border-box;
                            width: 100%;
                        "
                    >
                        <!-- 第一行 -->
                        <div style="display: flex; border-bottom: 1px solid #000">
                            <div style="text-align: center; border-right: 1px solid #000; width: 25%">设备名称</div>
                            <div style="text-align: center; border-right: 1px solid #000; width: 29%">型号/厂家</div>
                            <!-- <div style="text-align: center; border-right: 1px solid #000; width: 18%">编号</div> -->
                            <div style="text-align: center; border-right: 1px solid #000; width: 10%">数量</div>
                            <div style="text-align: center; border-right: 1px solid #000; width: 18%">主修人</div>
                            <div style="text-align: center; width: 18%">验收人</div>
                        </div>
                        <!-- 第二行 -->
                        <div style="display: flex; border-bottom: 1px solid #000">
                            <div style="text-align: center; border-right: 1px solid #000; width: 25%">{{
                                upkeepObj.type || '-'
                            }}</div>
                            <div style="text-align: center; border-right: 1px solid #000; width: 29%">{{
                                upkeepObj.typeName
                            }}</div>
                            <!-- <div
                                style="
                                    text-align: center;
                                    border-right: 1px solid #000;
                                    width: calc(18%);
                                    white-space: pre-wrap;
                                    word-break: break-word;
                                "
                                ><span style="margin: 0 5px; font-size: 15px">{{ upkeepObj.maCode }}</span></div
                            > -->
                            <div style="text-align: center; border-right: 1px solid #000; width: 10%">{{
                                upkeepObj.repairedNum
                            }}</div>
                            <div style="text-align: center; border-right: 1px solid #000; width: 18%">{{
                                upkeepObj.createBy
                            }}</div>
                            <div style="text-align: center; width: 18%">{{ upkeepObj.checkMan }}</div>
                        </div>
                        <!-- 第三行 -->
                        <div style="display: flex; border-bottom: 1px solid #000">
                            <div style="padding-left: 10px; border-right: 1px solid #000; width: 25%">使用单位</div>
                            <div style="padding-left: 10px">{{ upkeepObj.unitName }}-{{ upkeepObj.projectName }}</div>
                        </div>
                        <!-- 第四行 -->
                        <div style="width: 100%; min-height: 200px; border-bottom: 1px solid #000; padding-left: 10px"
                            >设备维修前情况: <span>{{ upkeepObj.repairRemark }}</span>
                        </div>
                        <!-- 第五行 -->
                        <div style="width: 100%; min-height: 200px; border-bottom: 1px solid #000; padding-left: 10px"
                            >技术鉴定情况:
                            <span v-for="item in upkeepObj.records" :key="item.repairRemark"
                                >{{ item.repairRemark ? item.repairRemark + ', ' : '' }}
                            </span>
                        </div>
                        <!-- 第六行 -->
                        <div style="width: 100%; min-height: 200px; padding-left: 10px"
                            >维修处理情况:
                            <span v-for="item in upkeepObj.records" :key="item.repairContent"
                                >{{ item.repairContent ? '更换' + item.repairContent + ', ' : '' }}
                            </span>
                        </div>
                        <div
                            style="
                                width: 100%;
                                border-top: 1px solid #000;
                                padding-left: 10px;
                                position: absolute;
                                bottom: 20px;
                                left: 0;
                            "
                            >验收情况: {{ upkeepObj.taskStatus }}
                        </div>
                    </div>
                    <div style="text-align: end; font-size: 20px; margin: 20px 50px 50px 0">
                        <span>{{ getTime(upkeepObj.auditTime) }}</span>
                    </div>
                </div>
            </vue-easy-print>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="print">打 印</el-button>
                <el-button @click="upkeepVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getRepairAuditListApi,
    addDetailsAuditApi,
    getRepairRecord,
    getPartRecord,
    getQuestListApiNew,
    addDetailsAuditApiNew,
} from '@/api/repairTest/testExamine'
import { getRepairPartListView } from '@/api/repairTest/repair'
import { getProjectList } from '@/api/claimAndRefund/receive'
import {
    getUnitInfoSelectApi,
    getProjectSelectApi,
    getDicSelectApi,
    listPartTypeApi,
    getMaTypeSelectApi,
    getMaintenanceRecordsApi,
} from '@/api/repairTest/repair'
import selectTree from '../repair/selectTree.vue'
import Tree from '@/views/repairTest/repair/tree.vue'
import vueEasyPrint from 'vue-easy-print'
export default {
    name: 'RepairTest/testExamine',
    components: { Tree, selectTree, vueEasyPrint },
    dicts: ['sys_normal_disable'],
    data() {
        return {
            uploadUrl: process.env.VUE_APP_BASE_API + '/system/sys/file/upload', // 上传的图片服务器地址
            headers: {
                Authorization: 'Bearer ' + localStorage.getItem('token'),
            },
            checkResultOne: false,
            defaultData: null,
            selectionList: [],
            unitInfoSelectList: [],
            projectSelectList: [],
            dicSelectList: [],
            dialogList: [],
            deptList: [],
            deptTypeList: [],
            rowObj: {},
            fullscreenLoading: false,
            openOne: false,
            openTwo: false,
            openThree: false,
            openFour: false,
            openTextOne: '',
            openTextTwo: '',
            openTextThree: '',
            type: '',
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            dialogIds: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 非单个禁用
            dialogSingle: true,
            // 非多个禁用
            dialogMultiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            dialogTotal: 0,
            // 字典表格数据
            typeList: [],
            // 弹出层标题
            title: '',
            dialogTitle: '',
            // 是否显示弹出层
            open: false,
            // 日期范围
            dateRange: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                type: '',
                typeName: '',
                taskStatus: '',
            },
            dialogQueryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            // 表单参数
            form: {
                checkResultText: '通过',
                remark: '',
            },

            repairId: '',
            openRepairRecord: false,
            repairRecordList: [],
            repairRecordParams: {
                pageNum: 1,
                pageSize: 10,
            },
            repairRecordTotal: 0,
            openPartRecord: false,
            partRecordList: [],
            partRecordParams: {
                pageNum: 1,
                pageSize: 10,
            },
            partRecordTotal: 0,
            upkeepVisible: false, // 维修记录表
            upkeepObj: {},
            isTaskStatus: '',

            repairViewNB: false,
            repairViewFC: false,
            repairViewBF: false,
            repairTitleTwo: '',
            repairListNB: [],
            repairListFC: [],
            repairListBF: [],
            repairTitle: '查看',

            checkResultText: '通过',
            reviewCount: 1,

            fileDialogVisible: false, // 控制文件弹窗显示状态
            currentFileList: [], // 存储当前要显示的文件列表
            //图片查看弹窗
            dialogImageUrl: "",
            dialogVisible: false,
        }
    },
    created() {
        this.getList()
    },

    methods: {
        /** 查询字典类型列表 */
        getList() {
            this.loading = true
            getQuestListApiNew(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
                this.typeList = response.rows
                this.total = response.total
                this.loading = false
            })
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = []
            this.queryParams.typeName = ''
            this.queryParams.type = ''
            this.queryParams.taskStatus = ''
            this.resetForm('queryForm')
            this.handleQuery()
        },
        selectable(row) {
            if (row.taskStatus == 0) {
                return true
            } else {
                return false
            }
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.selectionList = selection
            this.ids = selection.map((item) => item.parentId)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        handleSee(row, type) {
            this.dialogTitle = '查看'
            this.rowObj = row
            if(row.repairType == 1){
                //内部维修
                this.repairViewNB = true;
                let params = {
                    id: row.parentId,
                    repairType: row.repairType,
                }
                getRepairPartListView(params).then((res) => {
                if (res.code == 200) {
                    this.repairListNB = res.rows
                }
                })
            }else if(row.repairType == 2){
                //返厂维修
                this.repairViewFC = true; 
                let params = {
                    id: row.parentId,
                    repairType: row.repairType,
                }
                getRepairPartListView(params).then((res) => {
                if (res.code == 200) {
                    this.repairListFC = res.rows
                }
                })
            }else{
                //待报废
                this.repairViewBF = true;
                let params = {
                    id: row.parentId,
                    repairType: row.repairType,
                }
                getRepairPartListView(params).then((res) => {
                if (res.code == 200) {
                    this.repairListBF = res.rows
                }
                })
            }
        },
        /** 审核按钮操作 */
        handleUpdate(row, type) {
            this.reviewCount = 1
            this.rowObj = row
            this.openOne = true
        },
        //批量审核
        handleAll(){
            if(this.selectionList.length == 0){
                this.$message({
                    type:'warning',
                    message: '请选择要审核的数据'
                }) 
            }else{
                this.reviewCount = 2
                this.openOne = true
            }
        },

        closeOpenOne() {
            this.openOne = false
            this.form.checkResultText = '通过'
            this.form.remark = ''
            this.getList()
        },


        submitOpenOneForm() {
            let parentIdList = [];
            if(this.reviewCount == 1){
            parentIdList.push(this.rowObj.parentId)   
            }else{
            parentIdList = this.ids
            }

            const params = {
                checkResult: this.form.checkResultText,
                remark: this.form.remark,
                parentIdList: parentIdList,
            };

            // 弹出确认对话框
            this.$confirm('确定要提交审批吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 用户点击确定，执行提交操作
                addDetailsAuditApiNew(params)
                    .then((res) => {
                        // 关闭对话框，设置提示信息，刷新列表
                        this.openOne = false;
                        const message = this.form.checkResultText === '通过' ? '审批通过，提交成功！' : '审批驳回，提交成功！';
                        this.$message({
                            type: 'success',
                            message: message
                        });
                        this.form.checkResultText = '通过'
                        this.form.remark = ''
                        this.getList();
                    })
                    .catch(() => {
                        // 错误处理
                        this.$message.error('提交失败，请稍后重试');
                    });
            }).catch(() => {
                // 用户点击取消，给出提示
                this.$message.info('已取消提交');
            });
        },

        submitOpenOneFeturn() {
            this.form.checkResultText = '通过'
            this.form.remark = ''
            this.openOne = false
        },
        //维修记录
        repairRecord(row) {
            this.repairRecordParams.pageNum = 1
            this.repairRecordParams.pageSize = 10
            this.repairId = row.repairId
            console.log(this.repairId, 'repairId')
            this.getRepairRecordList()
        },
        getRepairRecordList() {
            let params = {
                repairId: this.repairId,
                pageNum: this.repairRecordParams.pageNum,
                pageSize: this.repairRecordParams.pageSize,
            }
            getRepairRecord(params)
                .then((res) => {
                    this.repairRecordList = res.rows
                    this.repairRecordTotal = res.total
                    this.openRepairRecord = true
                    this.title = '维修记录'
                })
                .catch(() => {})
        },

        handleViewFile(row) {
            this.currentFileList = row.fileList; // 将当前行的文件列表赋值给 currentFileList
            this.fileDialogVisible = true; // 显示文件弹窗
        },

        //图片查看
        picturePreview(file) {
            this.dialogImageUrl = this.uploadUrl + file.fileUrl;
            const parts = file.fileName.split(".");
            const extension = parts.pop();
            if (extension === 'doc' || extension === 'DOC' || extension === 'docx' || extension === 'DOCX' || extension === 'pdf' || extension === 'PDF') {
                const windowName = file.fileName;
                window.open(file.fileUrl, windowName);
            } else {
                this.dialogVisible = true;
            }
        },


        /** 导出按钮操作 */
        handleExport() {
            this.download(
                'material/details/export',
                {
                    ...this.queryParams,
                },
                `试验检验单_${new Date().getTime()}.xlsx`,
            )
        },
        // 维修记录表-打印
        print() {
            this.$nextTick(() => {
                this.$refs.printRef.print()
            })
        },
        // 维修记录表
        openUpkeep(row) {
            console.log('🚀 ~ openUpkeep ~ row:', row)
            this.upkeepVisible = true
            if (row.taskStatus == 47) {
                // this.upkeepObj.taskStatus = '合格'
                this.isTaskStatus = '合格'
            } else {
                this.isTaskStatus = ''
            }
            this.getUpkeepList(row.taskId)
        },
        // 获取保养记录表数据
        async getUpkeepList(taskId) {
            try {
                const res = await getMaintenanceRecordsApi({ taskId })
                console.log('🚀 ~ getUpkeepList ~ res:', res)
                this.upkeepObj = { ...res.data, taskStatus: this.isTaskStatus }
            } catch (error) {
                console.log('🚀 ~ getUpkeepList ~ error:', error)
                this.upkeepObj = {}
            }
        },
        handlePreview(file) {
            console.log('🚀 ~ handlePreview ~ file:', file)
            if (file.response) {
                window.open(process.env.VUE_APP_BASE_API + '/system'+ file.response.data.fileUrl)
            } else {
                window.open(process.env.VUE_APP_BASE_API + '/system'+ file.fileUrl)
            }
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
                    files.length + fileList.length
                } 个文件`,
            )
        },
        beforeUpload(file) {
            const isLtMB = file.size / 1024 / 1024 < 20
            if (!isLtMB) {
                this.$message.error('上传文件大小不能超过 20MB!')
            }
            return isLtMB
        },
        beforeRemove(file, fileList) {
            console.log('🚀 ~ beforeRemove ~ this.type:', this.type)
            if (this.type == 'see') return false

            return this.$confirm("是否确定移除该文件？")
        },
        handleSuccess(res, file, fileList, row) {
            console.log('🚀 ~ handleSuccess ~ res:', res)
            console.log('🚀 ~ handleSuccess ~ file:', file)
            console.log('🚀 ~ handleSuccess ~ fileList:', fileList)
            console.log('🚀 ~ handleSuccess ~ row:', row)

            if (res.code == 200) {
                if (!row.fileList) {
                    row.fileList = []
                }
                row.fileList.push({
                    typeId: row.typeId,
                    maId: row.maId,
                    fileName: res.data.fileName,
                    fileUrl: res.data.fileUrl,
                })
            }
            console.log('🚀 ~ row.fileList=fileList.map ~ row.fileList:', row.fileList)
        },
        // 转换时间格式 2025-02-11 14:52:27 --> 2025 年 2 月 11 日
        getTime(time) {
            if (!time) return ''
            let date = new Date(time)
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            let hour = date.getHours()
            let minute = date.getMinutes()
            let second = date.getSeconds()
            return `${year} 年 ${month} 月 ${day} 日`
        },
    },
}
</script>
<style lang="scss" scoped>
.submit_box {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .submit_box_title {
        display: flex;
        flex-direction: column;
        margin-left: 15px;

        :first-child {
            font-size: 14px;
            font-weight: 600;
        }

        :last-child {
            margin-top: 6px;
            font-size: 12px;
        }
    }
}

.submit_box_two {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-left: 40%;

    .submit_box_title {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        font-size: 18px;
        font-weight: 600;
    }
}

::v-deep.el-table .fixed-width .el-button--mini {
    width: 70px !important;
    margin-bottom: 6px;
}

.dialog-footer-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.submit_box_openFour {
    display: flex;
    justify-content: center;
    align-content: center;
    font-size: 18px;
}
</style>
