<template>
    <div class="app-container">
        <el-form :model="maForm" ref="maForm" size="small" :rules="rules" label-width="120px" :disabled="isDetail">
            <el-row :gutter="20" class="cont-center" style="margin-bottom: 20px">
                <el-col :span="8" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '20px' }" style="min-width: 400px; overflow-y: auto">
                        <!-- card body -->
                      <!-- 分公司 -->
                      <el-form-item label="分公司" prop="impUnitName">
                        <el-select
                          v-model="maForm.impUnitName"
                          placeholder="请选择分公司"
                          clearable
                          filterable
                          style="width: 100%"
                          :disabled="isEdit"
                          @change="onImpUnitChange"
                        >
                          <el-option
                            v-for="item in impUnitOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>

                      <!-- 项目部 -->
                      <el-form-item label="项目部" prop="departName">
                        <el-select
                          v-model="maForm.departName"
                          placeholder="请选择项目部"
                          clearable
                          filterable
                          style="width: 100%"
                          :disabled="!maForm.impUnitName || isEdit"
                          @change="onDepartChange"
                        >
                          <el-option
                            v-for="item in departOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>

                      <!-- 工程 -->
                      <el-form-item label="报备丢失工程" prop="lossProId">
                        <el-select
                          v-model="maForm.lossProId"
                          placeholder="请选择工程"
                          clearable
                          filterable
                          style="width: 100%"
                          :disabled="!maForm.departName || isEdit || isDetail"
                          @change="onProjectChange"
                        >
                          <el-option
                            v-for="item in impProOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>

                      <!-- 单位（树结构） -->
                      <el-form-item label="报备丢失单位" prop="lossUnitId">
                        <treeselect
                          v-model="maForm.lossUnitId"
                          :disabled="!maForm.lossProId || isEdit || isDetail"
                          :options="uniteList"
                          :normalizer="normalizer"
                          :show-count="true"
                          style="width: 100%"
                          :disable-branch-nodes="true"
                          noChildrenText="没有数据了"
                          noOptionsText="没有数据"
                          noResultsText="没有搜索结果"
                          placeholder="请选择单位"
                          @select="uniteChange"
                        />
                      </el-form-item>


                      <el-form-item label="报备丢失人" prop="lossMan">
                            <el-input
                                v-model="maForm.lossMan"
                                placeholder="请输入报备丢失人"
                                clearable
                                maxlength="50"
                                style="width: 100%"
                                @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
                        <el-form-item label="联系电话" prop="lossPhone">
                            <el-input
                                v-model="maForm.lossPhone"
                                placeholder="请输入联系电话"
                                clearable
                                maxlength="11"
                                style="width: 100%"
                                @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
                    </el-card>
                </el-col>
                
                <el-col :span="12" :offset="0">
                    <el-form-item label="" prop="dirUrls">
                        <el-upload
                            :action="uploadUrl"
                            :file-list="maForm.dirUrls"
                            :show-file-list="true"
                            :auto-upload="true"
                            :headers="headers"
                            :key="uploadKey"
                            :limit="3"
                            list-type="picture-card"
                            accept=".png, .jpg, .jpeg, .pdf"
                            :before-upload="beforeUpload"
                            :on-change="handleChangeBusinessList"
                            :class="{ disabledFbs: uploadDisabled }"
                            :on-preview="picturePreviewFbs"
                            :on-remove="handleRemoveElectricianImgList"
                            :disabled="isDetail"
                        >
                            <!-- 文件格式下载，图片格式预览 -->
                            <div slot="file" slot-scope="{ file }">
                                <img
                                    class="el-upload-list__item-thumbnail"
                                    :src="file.url"
                                    alt=""
                                />
                                <!-- <div v-else class="picture-card-container">
                                    <img class="picture-card" :src="urlTemp" alt="" />
                                    <p class="file-name">{{ file.name }}</p>
                                </div> -->
                                <span class="el-upload-list__item-actions">
                                    <!-- <span
                                        v-if="updataIf(file)"
                                        class="el-upload-list__item-delete"
                                        @click="handleDownload(file)"
                                    >
                                        <i class="el-icon-download" />
                                    </span> -->
                                    <span class="el-upload-list__item-preview" @click="picturePreviewFbs(file)">
                                        <i class="el-icon-zoom-in" />
                                    </span>
                                    <span
                                        v-if="!isDetail"
                                        class="el-upload-list__item-delete"
                                        @click="handleRemoveElectricianImgList(file)"
                                    >
                                        <i class="el-icon-delete" />
                                    </span>
                                </span>
                            </div>
                            <i class="el-icon-plus avatar-uploader-icon">
                                <div style="font-size: 14px; margin-top: 10px">上传图片</div>
                            </i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="mb8">
                <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline>
                    <el-form-item label="物资类型" prop="maId">
                        <treeselect
                            v-model="queryParams.maId"
                            :options="materialTypeOpts"
                            :normalizer="normalizer2"
                            :show-count="true"
                            style="width: 100%"
                            :disable-branch-nodes="true"
                            noChildrenText="没有数据了"
                            noOptionsText="没有数据"
                            noResultsText="没有搜索结果"
                            placeholder="请选择物资类型"
                            @select="selectMaType"
                        />
                    </el-form-item>

                    <el-form-item label="规格型号" prop="typeId">
                        <el-select v-model="queryParams.typeId" placeholder="请选择规格型号" clearable filterable>
                            <el-option
                                v-for="item in typeModelNameOpts"
                                :key="item.typeId"
                                :label="item.name"
                                :value="item.typeId"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关键字" prop="keyWord">
                        <el-input
                            v-model="queryParams.keyWord"
                            placeholder="请输入关键字"
                            clearable
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>

                    <!-- 表单按钮 -->
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
                        <el-button
                            type="primary"
                            plain
                            icon="el-icon-plus"
                            size="mini"
                            @click="handleSave"
                            v-if="!isDetail"
                        >
                            {{ isEdit ? '保存' : '发起提交' }}
                        </el-button>
                        <el-button
                            type="primary"
                            plain
                            icon="el-icon-arrow-left"
                            size="mini"
                            @click="handleApplyRecord"
                        >
                            报备丢失记录查看
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-row>
        </el-form>

        <!-- 数据状态提示 -->
        <div class="data-status-info" style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
            <!-- 分页状态 -->
            <div style="padding: 8px 12px; background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px; color: #475569; font-size: 14px;">
                <i class="el-icon-info"></i>
                总共 <strong>{{ total }}</strong> 条数据，当前显示第 <strong>{{ queryParams.pageNum }}</strong> 页，每页 <strong>{{ queryParams.pageSize }}</strong> 条
            </div>

            <!-- 选中数量提示 -->
            <div v-if="multipleSelection.length > 0" style="padding: 8px 12px; background-color: #f0f9ff; border: 1px solid #bfdbfe; border-radius: 4px; color: #1e40af;">
                <i class="el-icon-info"></i>
                已选中 <strong>{{ multipleSelection.length }}</strong> 条数据
                <span style="margin-left: 10px; font-size: 12px; color: #64748b;">
<!--                    (当前页: {{ equipmentList.filter(row => row.isActive).length }} 条, 全部: {{ selectedDataArray.length }} 条)-->
                </span>
                <el-button type="text" size="mini" style="margin-left: 10px; color: #ef4444;" @click="clearCrossPageSelection">
                    清空选择
                </el-button>
            </div>
        </div>

        <el-table
            v-loading="loading"
            ref="equipmentList"
            :data="equipmentList"
            :row-key="getRowKey"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center" :selectable="checkSelectable" />
            <el-table-column align="center" label="序号" width="55">
                <template slot-scope="scope">
                    {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column
                v-for="(column, index) in tableColumns"
                :key="column.prop"
                :label="column.label"
                :prop="column.prop"
                align="center"
                show-overflow-tooltip
            >
                <template v-slot="scope" v-if="column.prop == 'lossNum'">
                    <el-input-number
                        v-model="scope.row.lossNum"
                        controls-position="right"
                         style="width: 100%"
                        :disabled="isDetail || !scope.row.isActive"
                        :min="1"
                        :max="1"
                        @change="lossNumChange(scope.row)"
                    ></el-input-number>
                </template>
                <template v-slot="{ row }" v-else-if="column.prop == 'remark'">
                    <span style="color: #ef4444;">{{ overdue(row) ? '' : '超检验周期' }}</span>
                </template>
            </el-table-column>

            <!-- <el-table-column label="操作" align="center" v-if="!isDetail">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-delete" style="color: red" @click="handleDelete(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="dialogVisible" width="600px" height="600px">
            <img width="100%" height="500px" :src="dialogImageUrl" />
        </el-dialog>
    </div>

</template>

<script>
import { getMaTypeOpt } from '@/api/ma/base'
import {
  getListProject,
  getListUnite,
  getAgreement,
  getUnitProDepList,
  getProjectList,
  getDepartNameList
} from '@/api/lease/apply'
import { downloadFile, downloadFileData } from '@/utils/download'
import { getUseringLoseData, receiveLoseSubmitTwo, receiveLoseEdit, getLoseDetail, getEquipmentLoseThreeTypes } from '@/api/business/index'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getToken } from '@/utils/auth'
import Pagination from '@/components/Pagination'
import {getImpUnitListApi} from "@/api/materialsStation";

export default {
    name: 'LoseHandling',
    dicts: ['purchase_task_status'],
    components: { Treeselect, Pagination },
    data() {
        return {
            id: '',
            isEdit: false, // 是否编辑
            isDetail: false, // 是否查看
            // 遮罩层
            loading: false,
            loadingTwo: false,
            // 选中数组
            multipleSelection: [],
            // 回显选中数据
            multipleSelectionTemp: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            selectTreeProps: {
                children: 'children',
                label: 'name',
                // multiple: false,
                value: 'id'
                // multiple: true,
            },
            //租赁单位
            uniteList: [],
            lessUniteList: [],
            //租赁工程
            projectList: [],
            leaseProjectList: [],
            // 物资类型
            materialTypeOpts: [],
            // 类型规格
            typeModelNameOpts: [],
            // 表格数据
            equipmentList: [],
            // 表头
            tableColumns: [
                { label: '报备丢失数量', prop: 'lossNum' },
                { label: '类型名称', prop: 'typeName' },
                { label: '规格型号', prop: 'typeModelName' },
                { label: '设备编码', prop: 'maCode' },
                { label: '计量单位', prop: 'unitName' },
                { label: '在用数量', prop: 'useNum' },
                { label: '待报备丢失数量', prop: 'waitTransNum' },
                { label: '可申请数量', prop:'transNum' },
                { label: '领料人', prop: 'leasePerson' },
                { label: '领料日期', prop: 'startTime' },
                { label: '备注', prop: 'remark' },
            ],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            rowData: {},
            unitId: null,
            projectId: null,
            // 查询参数
            queryParams: {
                pageNum: 1, // 当前页码
                pageSize: 20, // 每页显示数量
                maId: undefined, // 物资类型
                typeId: '', // 类型规格
                keyWord: ''
            },
            // 前端分页数据
            allData: [], // 存储所有数据
            // 跨页勾选数据专用数组
            selectedDataArray: [], // 专门存储所有选中的完整数据
            // 防止事件循环的标志位
            isRestoringSelection: false, // 正在恢复选中状态时为true
            maForm: {
                impUnitName: '', // 分公司
                departName: '', // 项目部
                lossUnitId: undefined,
                lossProId: undefined,
                lossProName: '', // 报备丢失工程
                lossMan: '', // 报备丢失人
                lossPhone: '', // 联系电话
                agreementId: '', // 报备丢失协议id
                agreementCode: '', // 报备丢失协议编号
                dirUrls: [] // 附件
            },
            // 表单参数
            form: {},
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            // 表单校验
            rules: {
              impUnitName: [
                {
                  required: true,
                  message: '请选择分公司',
                  trigger: 'blur'
                }
              ],
              departName: [
                {
                  required: true,
                  message: '请选择项目部',
                  trigger: 'blur'
                }
              ],
                lossUnitId: [
                    {
                        required: true,
                        message: '请选择报备丢失单位',
                        trigger: 'blur'
                    }
                ],
                lossProId: [
                    {
                        required: true,
                        message: '请选择报备丢失工程',
                        trigger: 'blur'
                    }
                ],
                lossMan: [
                    {
                        required: true,
                        message: '请输入报备丢失人',
                        trigger: 'blur'
                    }
                ],
                lossPhone: [
                    { required: true, message: '联系电话不能为空', trigger: 'blur' },
                    {
                        pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
                        message: '请输入正确的手机号码',
                        trigger: 'blur'
                    }
                ],
                dirUrls: [
                    {
                        required: true, // 是否分包商(是：合同编号必填)
                        message: '请上传图片',
                        trigger: 'change'
                    }
                ]
            },
            urlTemp: '',
            delBusinessFileIdList: [],
            //图片查看弹窗
            dialogImageUrl: '',
            dialogVisible: false,
            uploadKey: Date.now(),
            uploadUrl: process.env.VUE_APP_BASE_API + '/file/upload', // 上传的图片服务器地址
            headers: { Authorization: 'Bearer ' + getToken() },
            impUnitOptions: [], // 分公司下拉选项
            departOptions: [],//项目部下拉
            impProOptions: [],//报备丢失工程下拉
        }
    },
    computed: {
        //图片上传1张后，隐藏上传框
        uploadDisabled() {
            return this.maForm.dirUrls && this.maForm.dirUrls.length == 3
        }
    },
    created() {
        // 初始化标志位
        this.isRestoringSelection = false

        if (this.$route.query.type == 'edit') {
            this.isEdit = true
            this.isDetail = false
            this.id = this.$route.query.id
            const obj = Object.assign({}, this.$route, { title: '报备丢失编辑' })
            this.$tab.updatePage(obj)
        } else if (this.$route.query.type == 'detail') {
            this.isEdit = false
            this.isDetail = true
            this.id = this.$route.query.id
            const obj = Object.assign({}, this.$route, { title: '报备丢失详情' })
            this.$tab.updatePage(obj)
        } else {
            this.isEdit = false
            this.isDetail = false
            this.id = ''
            const obj = Object.assign({}, this.$route, { title: '报备丢失申请' })
            this.$tab.updatePage(obj)
        }

        if (this.isEdit || this.isDetail) {
            console.log('isEdit', this.isEdit)
            this.getTaskInfo()
        } else {
          this.getImpUnitOptions()
        }
        console.log(this.$store, 'this.$store.getters')
        console.log(this.$route.query, 'this.$route.query')
    },
    watch: {
        // this.maForm.agreementId 变化时执行
        'maForm.agreementId': {
            handler: function (val, oldVal) {
                if (val && val !== oldVal) {
                    this.getMaTypeOpt()
                    // 协议变化时清空数据
                    this.allData = []
                    this.clearCrossPageSelection()
                    this.queryParams.pageNum = 1
                }
            },
            deep: true
        }
    },
    methods: {
      /** 获取分公司下拉 */
      async getImpUnitOptions() {
        try {
          const res = await getImpUnitListApi()
          this.impUnitOptions = res.data.map(item => ({
            label: item.impUnitName,
            value: item.impUnitName
          }))
          if (this.impUnitOptions.length === 1) {
            this.maForm.impUnitName = this.impUnitOptions[0].value
            await this.onImpUnitChange(this.maForm.impUnitName)
          }
        } catch (e) {
          console.error('获取分公司下拉失败:', e)
        }
      },

      /** 分公司变化 */
      async onImpUnitChange(value) {
        this.maForm.departName = ''
        this.maForm.lossProId = ''
        this.maForm.lossUnitId = undefined
        this.departOptions = []
        this.impProOptions = []
        this.uniteList = []

        if (!value) return
        const res = await getDepartNameList({ impUnitName: value })
        this.departOptions = res.data.map(item => ({
          label: item.departName,
          value: item.departName
        }))
        if (this.departOptions.length === 1) {
          this.maForm.departName = this.departOptions[0].value
          await this.onDepartChange(this.maForm.departName)
        }
      },

      /** 项目部变化 */
      async onDepartChange(value) {
        this.maForm.lossProId = ''
        this.maForm.lossUnitId = undefined
        this.impProOptions = []
        this.uniteList = []

        if (!value) return
        const res = await getProjectList({ departName: value })
        this.impProOptions = res.data.map(item => ({
          label: item.proName,
          value: item.proId
        }))
        if (this.impProOptions.length === 1) {
          this.maForm.lossProId = this.impProOptions[0].value
          await this.onProjectChange(this.maForm.lossProId)
        }
      },

      /** 工程变化 */
      async onProjectChange(value) {
        // 每次工程变化都先清空
        this.maForm.lossUnitId = undefined
        this.uniteList = []
        // 没选工程就直接返回
        if (!value) return
        try {
          let edit =true;
          if (this.isEdit){
            edit=false
          }
          const res = await getUnitProDepList({ projectId: value, enableFilter: edit })
          this.uniteList = res.data || []

          // 自动选中唯一叶子节点
          const leafNodes = []
          const findLeaf = nodes => {
            nodes.forEach(n => {
              if (!n.children || n.children.length === 0) {
                leafNodes.push(n)
              } else {
                findLeaf(n.children)
              }
            })
          }
          findLeaf(this.uniteList)
          if (leafNodes.length === 1) {
            this.maForm.lossUnitId = leafNodes[0].id || leafNodes[0].value
            await this.getAgreementId()
          }
        } catch (e) {
          console.error('获取单位列表失败:', e)
        }
      },

        // 查询
        handleQuery() {
            // 重置分页到第一页
            this.queryParams.pageNum = 1
            // 清空缓存数据，强制重新获取
            this.allData = []
            this.getList()
        },
        // 重置
        handleReset() {
            this.$refs.queryForm.resetFields()
            // 重置分页
            this.queryParams.pageNum = 1
            // 清空缓存数据，强制重新获取
            this.allData = []
            // 清空跨页选中状态
            this.clearCrossPageSelection()
            this.getList()
        },

        // 清空跨页选中状态
        clearCrossPageSelection() {
            console.log('=== 清空所有选中状态 ===')

            // 清空数据
            this.selectedDataArray = []
            this.multipleSelection = []

            // 清空当前页表格的选中样式
            if (this.$refs.equipmentList) {
                // 设置标志位防止触发selection-change事件
                this.isRestoringSelection = true
                this.$refs.equipmentList.clearSelection()

                // 清空当前页数据的isActive状态
                this.equipmentList.forEach(item => {
                    item.isActive = false
                    if (!this.isEdit && !this.isDetail) {
                        item.lossNum = undefined
                    }
                })

                // 重置标志位
                this.$nextTick(() => {
                    this.isRestoringSelection = false
                    console.log('清空选中状态完成')
                })
            } else {
                this.isRestoringSelection = false // 重置标志位
            }
        },

        // 清空所有状态
        clearAllStates() {
            this.allData = []
            this.equipmentList = []
            this.total = 0
            this.clearCrossPageSelection()
            this.queryParams.pageNum = 1
        },
        // 获取列表
        async getList() {
            this.loading = true
            try {
                // 只在第一次查询或者查询条件变化时重新获取数据
                const needRefreshData = this.queryParams.pageNum === 1 || this.allData.length === 0

                if (needRefreshData) {
                    const params = {
                        agreementId: this.maForm.agreementId,
                        maId: this.queryParams.maId,
                        typeId: this.queryParams.typeId,
                        keyWord: this.queryParams.keyWord
                        // 不传递分页参数，获取全量数据
                    }
                    const res = await getUseringLoseData(params)
                    console.log('🚀 ~ 获取列表 ~ res:', res)

                    // 存储全量数据
                    if (res.data && res.data.records) {
                        this.allData = res.data.records
                    } else if (Array.isArray(res.data)) {
                        this.allData = res.data
                    } else {
                        this.allData = []
                    }
                }

                // 前端分页处理
                this.total = this.allData.length
                const startIndex = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
                const endIndex = startIndex + this.queryParams.pageSize

                // 设置标志位，防止更新equipmentList时触发selection-change事件
                this.isRestoringSelection = true
                this.equipmentList = this.allData.slice(startIndex, endIndex)

                console.log(`🚀 ~ 分页信息 ~ 总数据:${this.total}, 当前页:${this.queryParams.pageNum}, 每页:${this.queryParams.pageSize}, 当前页数据:${this.equipmentList.length}`)

                // 编辑模式下的回显数据处理（只在第一次加载时执行）
                if ((this.isEdit || this.isDetail) && this.multipleSelectionTemp.length > 0 && needRefreshData) {
                    console.log('编辑模式初始化选中数据:', this.multipleSelectionTemp.length)
                    // 将编辑数据添加到选中数据数组中
                    this.selectedDataArray = [...this.multipleSelectionTemp.map(row => ({
                        ...row,
                        isActive: true
                    }))]
                    this.updateCrossPageSelection()
                    console.log('编辑模式回显选中数据已添加到selectedDataArray:', this.selectedDataArray.length)
                }

                // 恢复当前页的勾选状态
                this.$nextTick(() => {
                    this.restoreCurrentPageSelection()
                })
            } catch (error) {
                console.log('🚀 ~ 获取列表 ~ error:', error)
                this.allData = []
                this.equipmentList = []
                this.total = 0
            } finally {
                this.loading = false
            }
        },
        // 获取物资类型
        async getMaTypeOpt() {
            try {
                const params = {
                    agreementId: this.maForm.agreementId
                }
                console.log('🚀 ~ getMaTypeOpt ~ params:', params)
                const res = await getEquipmentLoseThreeTypes(params)
                console.log('🚀 ~ getMaTypeOpt ~ res:', res)
                this.materialTypeOpts = res.data
            } catch (error) {
                console.log('🚀 ~ getMaTypeOpt ~ error:', error)
            }
        },
        // 获取规格型号
        async getTypeModelNameOpt(type) {
            try {
                const params = {
                    typeId: type.typeId
                }
                const res = await getMaTypeOpt(params)
                console.log('🚀 ~ getTypeModelNameOpt ~ res:', res)
                this.typeModelNameOpts = res.data
            } catch (error) {
                console.log('🚀 ~ getTypeModelNameOpt ~ error:', error)
            }
        },
        // 获取协议id
        async getAgreementId() {
            try {
                const params = {
                    unitId: this.maForm.lossUnitId,
                    projectId: this.maForm.lossProId
                }
                const res = await getAgreement(params)
                console.log('🚀 ~ getAgreementId ~ res:', res)
                this.maForm.agreementId = res.data.agreementId
                this.maForm.agreementCode = res.data.agreementCode
                // 协议变化时清空缓存数据和选中状态
                this.allData = []
                this.clearCrossPageSelection()
                this.queryParams.pageNum = 1
                this.getList()
            } catch (error) {
                console.log('🚀 ~ getAgreementId ~ error:', error)
            }
        },
        // 查看领料记录
        handleApplyRecord() {
            this.$router.push({ path: '/business/businessHandlingRecord/loseHandlingRecord' })
        },
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children
            }
            return {
                id: node.id,
                label: node.name,
                children: node.children
            }
        },
        normalizer2(node) {
            if (node.children && !node.children.length) {
                delete node.children
            }
            return {
                id: node.typeId,
                label: node.typeName,
                children: node.children
            }
        },
        selectMaType(val) {
            console.log('val', val)
            this.queryParams.typeModelName = ''
            this.typeModelNameOpts = []
            this.getTypeModelNameOpt(val)
        },
        uniteChange(val) {
            // setTimeout(() => {
            //     getListProject({ unitId: this.maForm.lossUnitId,enableFilter: true }).then(response => {
            //         this.projectList = response.data
            //         this.maForm.lossProId = null
            //     })
            // }, 500)
            setTimeout(() => {
                this.getAgreementId()
            }, 500);
        },
        projectChange(val) {
            setTimeout(() => {
                getListUnite({enableFilter: true}).then(response => {
                    this.uniteList = response.data
                })
                this.getAgreementId()
            }, 500)
        },


        //获取任务详情--- 编辑回显数据
        async getTaskInfo() {
            const loading = this.$loading()
            try {
                const res = await getLoseDetail({ id: this.id })
                console.log('🚀 ~ getTaskInfo ~ res:', res)
                this.maForm = res.data.lossAssignInfo
                this.maForm.impUnitName=res.data.lossAssignInfo.lossImpUnitName
                this.maForm.departName=res.data.lossAssignInfo.lossDepartName
                this.multipleSelectionTemp = res.data.lossAssignDetails
                //查询工程和单位
                if (this.maForm.departName){
                  const res = await getProjectList({ departName: this.maForm.departName })
                  this.impProOptions = res.data.map(item => ({
                    label: item.proName,
                    value: item.proId
                  }))
                  // if (this.impProOptions.length === 1) {
                  //   this.maForm.lossProId = this.impProOptions[0].value
                    await this.onProjectChange(this.maForm.lossProId)
                  // }
                }
                await this.getList()
                console.log('🚀 ~ getTaskInfo ~ this.equipmentList:', this.equipmentList)
                loading.close()
            } catch (error) {
                console.log('🚀 ~ error:', error)
                loading.close()
            }
        },
        checkSelectable(row) {
            if(row.transNum==0 && !this.isEdit){
                return false
            }else{
                return true
            }
        },
      overdue(row) {
        if (!row.nextCheckTime) return true // 如果没有时间，不禁用
        const now = new Date()
        const nextCheckTime = new Date(row.nextCheckTime)
        return nextCheckTime >= now // 如果时间未到，允许选中；否则禁用
      },

        // 多选框选中数据
        handleSelectionChange(currentPageSelectedRows) {
            // 如果正在恢复选中状态，忽略此事件
            if (this.isRestoringSelection) {
                console.log('正在恢复选中状态，忽略selection-change事件')
                console.trace('忽略selection-change的调用栈:')
                return
            }

            console.log('=== handleSelectionChange 开始 ===')
            console.trace('handleSelectionChange调用栈:')
            console.log('当前页选中数据:', currentPageSelectedRows)
            console.log('选中前全局数据数量:', this.selectedDataArray.length)
            console.log('当前页码:', this.queryParams.pageNum)

            // 获取当前页所有数据的rowKey
            const currentPageRowKeys = this.equipmentList.map(item => this.getRowKey(item))

            // 从selectedDataArray中移除属于当前页的数据（不影响其他页面的数据）
            const beforeCount = this.selectedDataArray.length
            this.selectedDataArray = this.selectedDataArray.filter(item =>
                !currentPageRowKeys.includes(this.getRowKey(item))
            )
            const afterCount = this.selectedDataArray.length
            console.log(`移除当前页数据：${beforeCount} -> ${afterCount}，移除了 ${beforeCount - afterCount} 条`)

            // 添加当前页新选中的数据到数组中
            currentPageSelectedRows.forEach(row => {
                const completeRow = {
                    ...row,
                    lossNum: row.lossNum || row.transNum,
                    isActive: true
                }
                this.selectedDataArray.push(completeRow)
            })
            console.log(`添加当前页选中数据：${currentPageSelectedRows.length} 条`)

            // 更新当前页的isActive状态
            this.equipmentList.forEach(item => {
                const isSelected = currentPageSelectedRows.some(selectedRow => this.getRowKey(selectedRow) === this.getRowKey(item))
                item.isActive = isSelected
                if (isSelected && !item.lossNum && item.transNum) {
                    item.lossNum = item.transNum
                } else if (!isSelected && !this.isEdit && !this.isDetail) {
                    item.lossNum = undefined
                }
            })

            // 更新multipleSelection
            this.multipleSelection = [...this.selectedDataArray]

            console.log('选中后全局数据数量:', this.selectedDataArray.length)
            console.log('当前页选中rowKey列表:', currentPageSelectedRows.map(row => this.getRowKey(row)))
            console.log('全局选中rowKey列表:', this.selectedDataArray.map(row => this.getRowKey(row)))
            console.log('=== handleSelectionChange 结束 ===')
            console.log('')
        },

        // 数量变更
        lossNumChange(row) {
            // if (row.unitValue == 1) {
            //     row.lossNum = Number(String(row.lossNum).replace(/[^\d.]/g, ''))
            // } else {
            //     row.lossNum = Number(String(row.lossNum).replace(/[^\d]/g, ''))
            // }
            if (row.lossNum > row.transNum) {
                this.$message.error('报备丢失数量不能大于可申请数量')
                this.$nextTick(() => {
                    row.lossNum = 1
                })
            }
            // 如果行被选中，同步更新跨页选中数据数组
            const rowKey = this.getRowKey(row)
            const selectedIndex = this.selectedDataArray.findIndex(item => this.getRowKey(item) === rowKey)

            if (selectedIndex !== -1) {
                // 更新数组中对应的数据
                this.selectedDataArray[selectedIndex] = {
                    ...this.selectedDataArray[selectedIndex],
                    ...row,
                    lossNum: row.lossNum,
                    isActive: true
                }
                // 同步更新multipleSelection
                this.multipleSelection = [...this.selectedDataArray]
                console.log('数量变更后跨页选中总数:', this.selectedDataArray.length)
            }
        },

        // 获取行的唯一标识
        getRowKey(row) {
            // 使用最核心的字段确保唯一性，避免编辑数据和实际数据的字段差异
            const key = `${row.typeId || row.id || 'unknown'}_${row.maCode || ''}_${row.typeModelName || ''}`
            // 在调试模式下记录 rowKey 生成
            // console.log('生成rowKey:', key, 'for:', row.typeModelName)
            return key
        },

        // 恢复当前页的勾选状态
        restoreCurrentPageSelection() {
            // 如果标志位未设置，则设置它
            if (!this.isRestoringSelection) {
                this.isRestoringSelection = true
            }

            this.$nextTick(() => {
                if (!this.$refs.equipmentList) {
                    this.isRestoringSelection = false // 确保标志位重置
                    return
                }

                console.log('=== 开始恢复选中状态 ===')
                console.log('标志位状态:', this.isRestoringSelection)
                console.log('全局选中数量:', this.selectedDataArray.length)
                console.log('当前页数据数量:', this.equipmentList.length)
                console.log('当前页码:', this.queryParams.pageNum)
                console.log('是否编辑模式:', this.isEdit || this.isDetail)
                if (this.selectedDataArray.length > 0) {
                    console.log('全局选中数据的前3个rowKey:', this.selectedDataArray.slice(0, 3).map(item => this.getRowKey(item)))
                    console.log('当前页数据的前3个rowKey:', this.equipmentList.slice(0, 3).map(item => this.getRowKey(item)))
                }

                try {
                    // 先清除所有选中状态（此时标志位已设置）
                    this.$refs.equipmentList.clearSelection()

                    // 遍历当前页数据，检查是否在选中数组中
                    let matchedCount = 0
                    this.equipmentList.forEach(row => {
                        const rowKey = this.getRowKey(row)
                        // 在选中数组中查找对应的数据
                        const selectedData = this.selectedDataArray.find(item => this.getRowKey(item) === rowKey)

                        if (selectedData) {
                            matchedCount++
                            // 恢复保存的数据
                            row.lossNum = selectedData.lossNum
                            row.isActive = true
                            // 恢复表格选中状态
                            this.$refs.equipmentList.toggleRowSelection(row, true)
                            console.log(`恢复选中: ${rowKey}`)
                        } else {
                            row.isActive = false
                            if (!this.isEdit && !this.isDetail) {
                                row.lossNum = undefined
                            }
                        }
                    })
                    console.log(`当前页匹配到 ${matchedCount} 条选中数据`)

                    // 如果是编辑模式且匹配数量为0，显示详细的调试信息
                    if ((this.isEdit || this.isDetail) && matchedCount === 0 && this.selectedDataArray.length > 0) {
                        console.warn('编辑模式下当前页没有匹配到任何选中数据，检查rowKey匹配:')
                        console.log('当前页所有rowKey:', this.equipmentList.map(item => this.getRowKey(item)))
                        console.log('全局选中所有rowKey:', this.selectedDataArray.map(item => this.getRowKey(item)))
                    }

                    const restoredCount = this.equipmentList.filter(row => row.isActive).length
                    console.log('恢复选中状态完成，当前页选中数量:', this.$refs.equipmentList.selection?.length || 0)
                    console.log('恢复选中状态完成，当前页isActive数量:', restoredCount)
                    console.log('全局选中数量:', this.selectedDataArray.length)
                    console.log('当前页应该恢复的rowKey:', this.equipmentList.filter(row => {
                        const rowKey = this.getRowKey(row)
                        return this.selectedDataArray.some(item => this.getRowKey(item) === rowKey)
                    }).map(row => this.getRowKey(row)))
                    console.log('=== 恢复选中状态结束 ===')
                    console.log('')
                } catch (error) {
                    console.error('恢复选中状态时出错:', error)
                } finally {
                    // 无论如何都要清除标志位
                    this.isRestoringSelection = false
                    console.log('标志位已重置为:', this.isRestoringSelection)
                }
            })
        },

        // 更新跨页选中状态
        updateCrossPageSelection() {
            // 直接使用选中数据数组
            this.multipleSelection = [...this.selectedDataArray]
        },
        /** 保存按钮操作 */
        handleSave() {
            // 确保使用最新的跨页选中数据
            this.updateCrossPageSelection()
            console.log('=== 保存操作开始 ===')
            console.log('maForm', this.maForm)
            console.log('selectedDataArray:', this.selectedDataArray)
            console.log('multipleSelection:', this.multipleSelection)
            console.log('选中数据总数:', this.selectedDataArray.length)
            console.log('=====================')

            if (this.selectedDataArray.length > 0) {
                this.$refs['maForm'].validate(valid => {
                    if (valid) {
                        this.$modal.confirm('是否确认提交').then(async () => {
                            const isPass = this.multipleSelection.every(item => {
                                return item.lossNum
                            })
                            if (!isPass) {
                                this.$message.error('请填写报备丢失数量且不能为0')
                                return
                            }

                            const loading = this.$loading()
                            try {
                                const params = {
                                    lossAssignInfo: this.maForm,
                                    lossAssignDetails: this.multipleSelection
                                }
                                let fileList = []
                                console.log('params2222222222', params)
                                if (params.lossAssignInfo.dirUrls.length > 0) {
                                    fileList = params.lossAssignInfo.dirUrls.map(e => {
                                        if(e.response && e.response.code===200){
                                            return {
                                                name: e.response.data.name,
                                                url: e.response.data.url,
                                                type: e.response.data.url.substring(
                                                    e.response.data.url.lastIndexOf('.') + 1
                                                )
                                            }
                                        }else{
                                            return {
                                                name: null,
                                                url: e.url,
                                            }
                                        }
                                    })

                                }

                                params.lossAssignInfo.dirUrls = fileList

                                if (this.isEdit) {
                                    delete params.lossAssignInfo.directApplyDetails
                                    console.log('🚀 ~ this.$modal.confirm ~ params:', params)
                                    const res = await receiveLoseEdit(params)
                                    console.log('🚀 ~ handleSave ~ res:', res)
                                } else {
                                    const res = await receiveLoseSubmitTwo(params)
                                    console.log('🚀 ~ handleSave ~ res:', res)
                                }
                                this.$message.success('操作成功')
                                this.$refs['maForm'].resetFields()
                                // 清空所有状态
                                this.clearAllStates()
                                this.delBusinessFileIdList = []
                                loading.close()
                            } catch (error) {
                                console.log('🚀 ~ handleSave ~ error:', error)
                                loading.close()
                            }
                        })
                    }
                })
            } else {
                this.$modal.msgError('请先选择报备丢失数据')
            }
        },
        // 上传图片
        handleChangeBusinessList(file, fileList) {
            console.log("iiiiiiiiiiiiiiiiii",file)
            console.log("ppppppppp",fileList)
            const fileListTemp = fileList.filter(item => {
                return item.uid != file.uid
            })
            const parts = file.name?.split('.')
            const extension = parts?.pop().toLowerCase()
            if (fileList.length > 3) {
                this.$message.warning('最多上传3张附件')
                fileList = fileList.filter(item => {
                    return item.uid != file.uid
                })
            } else if (!(extension === 'png' || extension === 'jpg' || extension === 'jpeg' || extension === 'pdf')) {
                this.$message.warning('文件格式不正确')
                fileList = fileList.filter(item => {
                    return item.uid != file.uid
                })
            } else if (file.size > 1024 * 1024 * 10) {
                this.$message.warning('文件大小不能超过10Mb')
                fileList = fileList.filter(item => {
                    return item.uid != file.uid
                })
            } else if (file.name.length > 40) {
                this.$message.warning('文件名长度不能超过40个字符')
                fileList = fileList.filter(item => {
                    return item.uid != file.uid
                })
            } else if (fileListTemp.some(item => item.name === file.name)) {
                this.$message.warning('文件名重复')
                fileList = fileList.filter(item => {
                    return item.uid != file.uid
                })
            }
            fileList.forEach(file => {
                if (extension === 'pdf') {
                    this.urlTemp = require('@/assets/file.png')
                }
            })
            this.maForm.dirUrls = fileList
            console.log('🚀 ~ handleChangeBusinessList ~ this.dirUrls:', this.dirUrls)
            // 手动触发表单验证
            this.$refs.maForm.validateField('dirUrls')
        },
        // 判断文件类型
        isImage(file) {
            this.urlTemp = require('@/assets/file.png')
            if (this.updataIf(file)) {
                return false
            } else {
                return true
            }
        },
        // 判断文件类型,图片预览，文件下载
        updataIf(e) {
            if (e.fileName) {
                const parts = e.fileName?.split('.')
                const extension = parts?.pop().toLowerCase()
                if (extension === 'png' || extension === 'jpeg' || extension === 'jpg') {
                    return false
                } else {
                    return true
                }
            } else {
                const parts = e.url?.split('.')
                const extension = parts?.pop().toLowerCase()
                if (extension === 'png' || extension === 'jpeg' || extension === 'jpg') {
                    return false
                } else {
                    return true
                }
            }
        },
        beforeUpload(file) {
            const validExtensions = ['.png', '.jpg', '.jpeg', '.pdf'];
            const fileName = file.name.toLowerCase();
            const hasValidExtension = validExtensions.some(ext => fileName.endsWith(ext));

            if (!hasValidExtension) {
                this.$message.error('仅支持上传 .png, .jpg, .jpeg, .pdf 格式的文件');
                return false;
            }

            // 检查文件大小是否超过 10MB
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isLt10M) {
                this.$message.error('文件大小不能超过 10MB');
                return false;
            }

            // 检查文件名长度是否超过 40 个字符
            if (file.name.length > 40) {
                this.$message.error('文件名长度不能超过 40 个字符');
                return false;
            }

            return true;
        },
        //上传组件-图片查看
        picturePreviewFbs(file) {
            console.log("xxxxxxxxxxxx",file)
            this.dialogImageUrl =file.response ? file.response.data.url : file.url.replaceAll('#', '%23')
            console.log("zzzzzzzzzz",this.dialogImageUrl)
            // const parts = file.name ? file.name:file.url.split('.')
            // console.log("yyyyyyyyy",parts)
            // const extension = parts?.pop()
            // if (extension === 'pdf') {
            //     const windowName = file.name ? file.name : file.url
            //     window.open(file.url, windowName)
            // } else {
                this.dialogVisible = true
            // }
        },
        //上传组件-图片删除
        handleRemoveElectricianImgList(file, fileList) {
            let sum = 0
            this.maForm.dirUrls.forEach((item, index) => {
                if (item.uid == file.uid) {
                    sum = index
                }
            })
            this.maForm.dirUrls.splice(sum, 1)
            if (file.status == 'success') {
                this.delBusinessFileIdList.push(file.url)
            }
            console.log('delBusinessFileIdList', this.delBusinessFileIdList)
        },
        handleDownload(file) {
            console.log(file)
            if (file.status === 'ready') {
                downloadFile({
                    fileName: file.name ? file.name : file.url,
                    fileData: file.raw,
                    fileType: 'application/vnd.ms-excel;charset=utf-8'
                })
            } else if (file.status === 'success') {
                downloadFileData({ fileName: file.url, fileUrl: file.url })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
//隐藏图片上传框的css
::v-deep .disabledFbs {
    .el-upload--picture-card {
        display: none;
        width: 100px;
        height: 100px;
    }
}
::v-deep .el-upload--picture-card {
    width: 100px;
    height: 100px;
}

::v-deep .el-upload-list__item {
    margin-bottom: 20px;
    overflow: unset !important;
    width: 103px;
    height: 103px;
}
::v-deep .el-upload-list__item-actions {
    overflow: unset !important;
    width: 100px;
    height: 100px;
}

.popper-select {
    .el-cascader-panel .el-scrollbar .el-checkbox {
        display: none;
    }

    .el-cascader-panel .el-scrollbar:nth-child(4) .el-checkbox {
        display: block !important;
    }
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

.el-icon-arrow-down.is-reverse {
    transform: rotateZ(180deg);
}

// .el-tree {
//   max-height: 300px;
//   overflow-y: auto;
// }

::v-deep .highlight-text {
  background-color: #ffd04b;
  color: #000;
}

::v-deep .el-input-group__append {
    padding: 0;
    .el-button {
        padding: 0 10px;
        border: none;
        height: 100%;
        &:first-child {
            border-right: 1px solid #dcdfe6;
        }
        &[disabled] {
            color: #c0c4cc;
        }
    }
}

.type-select-dropdown {
    .el-select-dropdown__wrap {
        max-height: 400px !important;
    }

    .el-select-dropdown__item {
        height: auto;
        padding: 8px 20px;
        white-space: normal;
        word-break: break-all;
    }
}

.el-input-group__append {
    padding: 0;
    .el-button {
        padding: 0 10px;
        border: none;
        height: 100%;
        &:first-child {
            border-right: 1px solid #dcdfe6;
        }
        &[disabled] {
            color: #c0c4cc;
        }
    }
}

.el-upload-list__item-thumbnail {
    /* height: 145px !important; */
    width: 100px;
    height: 100px;
}

.picture-card-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.picture-card {
    width: 100%;
    height: 100%;
    object-fit: cover;
    justify-content: center;

    // border: 1px solid  #ddd;
    // border-radius: 4px;
}

.file-name {
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: -35px;
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #333;
    z-index: 999999;
}

.file-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
}

// 居中
.cont-center {
    display: flex;
    justify-content: left;
    align-items: center;
}

// 数据状态提示样式
.data-status-info {
    font-size: 14px;

    @media (max-width: 768px) {
        flex-direction: column;
        gap: 10px;
        align-items: stretch !important;
    }

    strong {
        font-weight: 600;
    }

    .el-button--text {
        padding: 0;
        margin-left: 15px;

        &:hover {
            color: #dc2626 !important;
        }
    }

    .el-icon-info {
        margin-right: 5px;
        font-size: 16px;
    }
}
::v-deep .vue-treeselect__single-value {
    position: inherit !important;
    white-space: pre-wrap !important;
}
</style>
