<template>
  <div class="app-container">
    <el-radio-group v-model="tabPosition" style="margin: 5px">
      <el-radio-button label="first">物资柜位置</el-radio-button>
      <el-radio-button label="second">物资柜列表</el-radio-button>
    </el-radio-group>
    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      "
      v-show="tabPosition == 'first'"
    >

      <!-- 缩放容器 -->
      <div
        ref="mapContainer"
        :style="{
          transform: `scale(${scaleFactor})`,
          transformOrigin: 'top left',
          width: '1250px',
          height: '700px',
          position: 'relative',
        }"
      >

        <img
          style="width: 100%; height: 100%"
          src="@/assets/images/marsBg.png"
          alt=""
        />

        <img
          v-for="(cabinet, index) in TicketListPage"
          :key="cabinet.cabinetId"
          :style="{
            width: '35px',
            height: '35px',
            position: 'absolute',
            cursor: 'pointer',
            // 图标垂直居中
            top: `${deptXLGCenter.top - 53}px`,
            // 图标水平居中，动态计算偏移
            left: `${
              deptXLGCenter.left -
              (TicketListPage.length * 35 + (TicketListPage.length - 1) * 5) /
                2 +
              index * 40
            }px`,
          }"
          :src="require(`@/assets/images/${imageMap[cabinet.status]}.jpg`)"
          alt=""
          @click="handleCabinetClick(cabinet)"
        />

        <!-- deptCCO 区域的图标 -->
        <!--        <img-->
        <!--          v-for="(cabinet, index) in COCOTicketListPage"-->
        <!--          :key="cabinet.cabinetId"-->
        <!--          :style="{-->
        <!--            width: '35px',-->
        <!--            height: '35px',-->
        <!--            position: 'absolute',-->
        <!--            cursor: 'pointer',-->
        <!--            // 图标垂直居中-->
        <!--            top: `${deptCCOCenter.top - 53}px`,-->
        <!--            // 图标水平居中，动态计算偏移-->
        <!--            left: `${-->
        <!--              deptCCOCenter.left - -->
        <!--              (COCOTicketListPage.length * 35 +-->
        <!--                (COCOTicketListPage.length - 1) * 5) /-->
        <!--                2 +-->
        <!--              index * 40-->
        <!--            }px`,-->
        <!--          }"-->
        <!--          :src="require('@/assets/images/table_map2.jpg')"-->
        <!--          alt=""-->
        <!--          @click="handleCabinetClick(cabinet)"-->
        <!--        />-->
        <div class="deptXLG">LD</div>
        <!--        <div class="deptCCO">CCO</div>-->
        <img style="width: 40px;height: 40px;position: absolute;top:2%;right: -4%" src="@/assets/images/警告.png" alt=""
             @click="showExTable"
        >
        <div v-if="exceptionTableVisible"
             style="width: 430px;height: 300px;position: absolute;top:2%;right:0;background: white "
        >
          <div style="display: flex">
            <img src="@/assets/images/警告2.png" style="width: 20px;height: 20px;margin: 10px" alt="">
            <span style="margin: 10px">异常信息</span>
          </div>

          <el-table :data="exceptionTable">
            <el-table-column label="物资柜" prop="loanFromName"></el-table-column>
            <el-table-column label="异常类型" prop="exceptionType"></el-table-column>
            <el-table-column label="异常信息" prop="status"></el-table-column>
          </el-table>
        </div>


      </div>
    </div>
    <!-- 物资列表 -->
    <div v-if="tabPosition == 'second'" class="CabinetListcon">
      <div class="left">
        <!-- 岗位树 -->
        <div class="deptTree">
          <div class="head-container">
            <el-input
              v-model="queryParams.workstationName"
              placeholder="请输入区域名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
              @clear="handleClear"
            />
          </div>
          <div class="head-container">
            <el-tree
              :data="workstationOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="treeData"
              node-key="id"
              default-expand-all
              @node-click="handleNodeClick"
              highlight-current
            />
          </div>
        </div>
      </div>
      <div class="right">
        <el-row>
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="100px"
          >
            <el-form-item label="物资柜编号" prop="cabinetId">
              <el-input
                v-model="queryParams.cabinetId"
                placeholder="请输入物资柜编号"
                clearable
                oninput="value=value.replace(/[^\d.]/g,'')"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="物资柜名称" prop="cabinetName">
              <el-input
                v-model="queryParams.cabinetName"
                placeholder="请输入物资柜名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <!--            <el-form-item label="物资柜状态" prop="status">-->
            <!--              <el-select v-model="queryParams.status" placeholder="物资柜状态">-->
            <!--                <el-option-->
            <!--                  v-for="dict in dict.type.cabinet_status"-->
            <!--                  :key="dict.value"-->
            <!--                  :label="dict.label"-->
            <!--                  :value="dict.value"-->
            <!--                />-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->
            <el-form-item>
              <el-button
                v-no-more-click
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
              >搜索
              </el-button
              >
              <el-button
                v-no-more-click
                icon="el-icon-refresh"
                size="mini"
                @click="resetQuery"
              >重置
              </el-button
              >
            </el-form-item>
          </el-form>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              v-no-more-click
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['iscs:cabinet:add']"
            >新增
            </el-button>
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <el-table
          v-loading="loading"
          :data="CabinetList"
          @selection-change="handleSelectionChange"
        >
          <!--          <el-table-column type="selection" width="55" align="center"/>-->
          <el-table-column label="物资柜编号" align="center" prop="cabinetId">
          </el-table-column>
          <el-table-column label="物资柜名称" prop="cabinetName" width="150"/>
          <el-table-column label="物资柜图片" prop="cabinetPicture" width="100">
            <template slot-scope="scope">
              <div class="img-box" v-if="scope.row.cabinetPicture">
                <el-image
                  style="width: 75px; height: 75px"
                  :preview-teleported="true"
                  class="images"
                  :hide-on-click-modal="true"
                  :src="scope.row.cabinetPicture"
                  :zoom-rate="1.2"
                  :preview-src-list="[scope.row.cabinetPicture]"
                  :initial-index="1"
                  fit="cover"
                >
                </el-image>
                <i class="el-icon-zoom-in" id="eyeicon"></i>
              </div>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="物资柜状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.cabinet_status"
                :value="scope.row.status"
              />
            </template>
          </el-table-column>
          <el-table-column label="异常类型" prop="exReason" width="100">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.exception_reason"
                :value="scope.row.exReason"
              />
            </template>
          </el-table-column>
          <el-table-column label="物资柜详情" align="center">
            <template slot-scope="scope">
              <el-button
                v-no-more-click
                size="mini"
                type="text"
                @click="handleLook(scope.row)"
              >查看
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                v-no-more-click
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['iscs:cabinet:edit']"
              >修改
              </el-button>
              <el-button
                v-no-more-click
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['iscs:cabinet:remove']"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.current"
          :limit.sync="queryParams.size"
          @pagination="getList"
        />
      </div>
    </div>
    <!-- 添加或修改物资柜对话框 -->
    <el-dialog :visible.sync="open" width="510px" append-to-body>
      <div slot="title" class="dialog-title">
        <i></i>
        <span class="title">{{ title }}</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="物资柜编码" prop="cabinetCode">
          <el-input
            v-model="form.cabinetCode"
            placeholder="请输入物资柜编码"
            style="width: 200px; margin-right: 10px"
          />
          <el-switch
            v-model="autoGenFlag"
            active-color="#13ce66"
            active-text="自动生成"
            @change="handleAutoGenChange(autoGenFlag)"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="物资柜名称" prop="cabinetName">
          <el-input
            style="width: 348px"
            v-model="form.cabinetName"
            placeholder="请输入物资柜名称"
          />
        </el-form-item>
        <el-form-item label="所属区域" prop="workstationId">
          <treeselect
            style="width: 348px"
            v-model="form.workstationId"
            :options="marsOptions"
            :normalizer="Marsnormalizer"
            placeholder="选择所属区域"
          />
        </el-form-item>
        <el-form-item label="物资柜图片" prop="cabinetPicture">
          <ImageUploadSingle
            :limit="1"
            :value="form.cabinetPicture"
            :fileSize="5"
            @onUploaded="handleIconUplaoded"
            @onRemoved="handleIconRemoved"
          ></ImageUploadSingle>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入内容"
            style="width: 348px"
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button
          v-no-more-click
          type="primary"
          @click="cancel"
          v-if="optType == 'view'"
        >返回
        </el-button>
        <el-button v-no-more-click type="primary" @click="submitForm" v-else
        >确 定
        </el-button>
        <el-button v-no-more-click @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  getMaterialsCabinet,
  addMaterialsCabinet,
  updateMaterialsCabinet,
  deleteMaterialsCabinet,
  selectMaterialsCabinetById
} from '@/api/mes/material/lockers.js'

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { genCode } from '@/api/system/autocode/rule'
import { listMarsDept } from '@/api/system/marsdept'
import { listLoto } from '@/api/mes/lotoStation/lotoStation'
import { listMaterials } from '@/api/mes/material/information'
import { MaterialsLoanExceptionPage } from '@/api/mes/material/exception'

export default {
  name: 'Team',
  components: {
    Treeselect
  },
  dicts: ['material_status', 'cabinet_status', 'exception_reason'],
  data() {
    return {
      //自动生成编码
      autoGenFlag: false,
      optType: undefined,
      tabPosition: 'first', //顶部切换
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      codes: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 班组表格数据
      CabinetList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      createTime: '',
      queryParams: {
        current: 1,
        size: 10,
        workstationName: undefined,
        workstationId: undefined,
        cabinetId: null,
        cabinetName: null,
        status: null
      },
      // queryParamsList: {
      //   current: 1,
      //   size: 10,
      //   cabinetId: null,
      //   cabinetName: null,
      //   status: null,
      // },
      imageMap: {
        0: 'table_map2', //正常
        1: 'table_map1', //使用中
        2: 'table_map3' //异常
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        cabinetCode: [
          { required: true, message: '物资柜编码不能为空', trigger: 'blur' }
        ],
        cabinetName: [
          { required: true, message: '物资柜名称不能为空', trigger: 'blur' }
        ]
      },
      marsOptions: [], //岗位
      TicketListPage: [], //R&R岗位
      COCOTicketListPage: [], //CCO岗位
      scaleFactor: 1, // 缩放比例，初始值为1
      deptXLGPosition: {
        left: 500,
        top: 260,
        width: 65,
        height: 25
      },
      deptCCOPosition: {
        left: 670,
        top: 480,
        width: 65,
        height: 25
      },
      exceptionTableVisible: false,//地图显示异常物资柜具体信息
      exceptionTable: [],//地图异常数据table数据
      workstationOptions: [], //岗位
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  computed: {
    deptXLGCenter() {
      return {
        left: this.deptXLGPosition.left + this.deptXLGPosition.width / 2,
        top: this.deptXLGPosition.top + this.deptXLGPosition.height / 2
      }
    },
    deptCCOCenter() {
      return {
        left: this.deptCCOPosition.left + this.deptCCOPosition.width / 2,
        top: this.deptCCOPosition.top + this.deptCCOPosition.height / 2
      }
    }
  },
  watch: {
    'queryParams.workstationId': function(newVal, oldVal) {
      if (newVal) {
        const data = {
          current: 1,
          size: -1,
          workstationId: this.queryParams.workstationId
        }
        getMaterialsCabinet(data).then((response) => {
          this.CabinetList = response.data.records
        })
      }
    },
    tabPosition: function(newVal, oldVal) {
      if (newVal) {
        this.getList()
      }
    }
  },
  created() {
    this.getList()
    this.getOtherList()
    this.getExpection()
  },

  methods: {
    // 显示异常的物资柜信息
    showExTable() {
      this.exceptionTableVisible = !this.exceptionTableVisible
    },
    /** 查询物资柜信息列表 */
    getList() {
      this.loading = true
      getMaterialsCabinet(this.queryParams).then((response) => {
        this.CabinetList = response.data.records
        console.log(response, '所有物资柜')
        this.total = response.data.total
        this.loading = false
      })

    },

    getExpection() {
      // 调用 listMaterials 接口获取所有物资的信息
      listMaterials({ pages: 1, size: -1 }).then(response => {
        const materialsData = response.data.records || []
        // 处理损坏、过期的物资
        const damagedOrExpiredMaterials = materialsData.filter(material => material.status === '1' || material.status === '2')

        const damagedOrExpiredCabinets = Array.from(new Set(damagedOrExpiredMaterials.map(material => material.cabinetName)))
        console.log(damagedOrExpiredMaterials, 'damagedOrExpiredMaterials')
        // 处理归还异常的物资
        const misplacedMaterials = materialsData.filter(material => material.status === '3')
        const misplacedCabinets = Array.from(new Set(misplacedMaterials.map(material => material.cabinetName)))
        console.log(misplacedCabinets, 'misplacedCabinets')
        // 整合归还异常的柜子信息
        const misplacedCabinetDetails = misplacedCabinets.map(cabinet => ({
          loanFromName: cabinet,
          exceptionType: '物资放错柜子',
          status: `${misplacedMaterials.filter(material => material.cabinetName === cabinet).length}件物资放错`
        }))

        // 整合损坏、过期的柜子信息
        const damagedOrExpiredCabinetDetails = damagedOrExpiredCabinets.map(cabinet => ({
          loanFromName: cabinet,
          exceptionType: '物资放过期损坏',
          status: `${damagedOrExpiredMaterials.filter(material => material.cabinetName === cabinet).length}件物资过期或损坏`
        }))

        // 调用 MaterialsLoanExceptionPage 接口获取柜门未关闭的数据
        return MaterialsLoanExceptionPage({
          pages: 1,
          size: -1,
          exceptionType: 1, // 1表示柜门未关
          status: 0 // 0表示未处理
        }).then(response1 => {
          const unClosedCabinets = response1.data.records || []

          if (unClosedCabinets) {
            // 整合柜门未关闭的柜子信息
            const unClosedCabinetDetails = unClosedCabinets.map(cabinet => ({
              loanFromName: cabinet.loanFromName,
              exceptionType: '超时未关柜门',
              status: `柜门超过${this.calculateTimeDifference(cabinet.occurTime)}未关`
            }))
            // 合并所有结果
            const result = [
              ...misplacedCabinetDetails,
              ...damagedOrExpiredCabinetDetails,
              ...unClosedCabinetDetails
            ]
            const resultData = result.filter((item) => {
              return item.loanFromName !== null
            })
            this.exceptionTable = resultData

          } else {
            // 合并所有结果
            const result = [
              ...misplacedCabinetDetails,
              ...damagedOrExpiredCabinetDetails
            ]
            const resultData = result.filter((item) => {
              return item.loanFromName !== null
            })
            this.exceptionTable = resultData

          }

        })
      }).catch(error => {
        console.error('Error fetching data:', error)
      })

    },
    //辅助函数计算超时时间
    calculateTimeDifference(occurTime) {
      if (!occurTime) return '未知';

      // 将时间字符串转换为 Date 对象
      const occurDate = new Date(occurTime);
      if (isNaN(occurDate.getTime())) {
        console.error('Invalid date format:', occurTime);
        return '未知';
      }

      const currentTime = new Date().getTime();
      const timeDifference = (currentTime - occurDate.getTime()) / (1000 * 60); // 转换为分钟

      if (timeDifference < 1) {
        return `${(timeDifference * 60).toFixed(0)}秒`;
      } else if (timeDifference < 60) {
        return `${timeDifference.toFixed(1)}分钟`;
      } else {
        const hours = Math.floor(timeDifference / 60);
        const minutes = (timeDifference % 60).toFixed(0);
        return `${hours}小时${minutes}分钟`;
      }
    },
    getOtherList() {
      const data = {
        pasge: 1,
        size: -1
      }
      getMaterialsCabinet(data).then((response) => {
        console.log(response, '所有物资柜')
        this.TicketListPage = response.data.records.filter((item) => {
          return item.workstationId == '6'
        })
        this.COCOTicketListPage = response.data.records.filter((item) => {
          return item.workstationId == '7'
        })
        this.total = response.data.total
        this.loading = false
      })
      listMarsDept(data).then((response) => {
        // 新增岗位单选
        const data = response.data.records.filter((item) => {
          return item.parentId == '0'
        })
        this.marsOptions = this.handleTree(data, 'workstationId', 'parentId')
        // mars岗位树数据
        this.workstationOptions = this.transformToTree(data)
        // 使用递归函数查找匹配的节点
        const selectedTreeNode = this.findNodeById(
          this.workstationOptions,
          this.queryParams.workstationId
        )
        // 调用 handleNodeClick 方法
        if (selectedTreeNode) {
          this.handleNodeClick(selectedTreeNode)
        } else {
          console.log('未找到匹配的节点')
        }
      })
    },
    // mars岗位树点击事件
    handleNodeClick(data) {
      this.queryParams.workstationId = data.id //这里给查询传递参数
      this.queryParams.workstationName = data.label //这里给回显框显示中文
    },
    /** 转换mars岗位树数据为树形结构 */
    transformToTree(records) {
      const recordMap = {} // 创建一个 Map 以存储所有记录
      const tree = [] // 最终返回的树形结构

      // 初始化所有记录到 Map
      records.forEach((record) => {
        recordMap[record.workstationId] = {
          id: record.workstationId,
          label: record.workstationName,
          children: []
        }
      })

      // 遍历记录并构建树
      records.forEach((record) => {
        const parentId = record.parentId

        if (parentId === '0') {
          // 如果是顶层节点，直接添加到树中
          tree.push(recordMap[record.workstationId])
        } else if (recordMap[parentId]) {
          // 如果有父节点，则将当前节点加入父节点的 children 中
          recordMap[parentId].children.push(recordMap[record.workstationId])
        }
      })

      return tree
    },
    // mars岗位数深层次遍历
    findNodeById(nodes, targetId) {
      for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i]
        if (node.id === targetId) {
          return node
        }
        if (node.children && node.children.length > 0) {
          const foundNode = this.findNodeById(node.children, targetId)
          if (foundNode) {
            return foundNode
          }
        }
      }
      return null
    },
    /** 转换mars岗位数据结构 */
    Marsnormalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.workstationId,
        label: node.workstationName,
        children: node.children
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 岗位查询 清除事件
    handleClear() {
      this.queryParams.workstationId = ''
      this.queryParams.workstationName = ''
      this.getList()
    },

    // 物资柜跳转详情
    handleCabinetClick(cabinet) {
      this.$router.push({
        path: '/mes/material/lockers/DetailsIndex',
        query: {
          cabinetId: cabinet.cabinetId,
          cabinetName: cabinet.cabinetName
        }
      })
      console.log(cabinet, '地图跳转详情拿到的')
    },
    // 物资柜列表跳转详情
    handleLook(row) {
      this.$router.push({
        path: '/mes/material/lockers/DetailsIndex',
        query: { cabinetId: row.cabinetId, cabinetName: row.cabinetName }
      })
      console.log('列表详情')
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        cabinetCode: '',
        cabinetName: '',
        workstationId: '',
        remark: '',
        cabinetPicture: ''
      }

      this.resetForm('form')
      this.autoGenFlag = false
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.current = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.createTime = ''
      this.queryParams.cabinetCode = null
      this.queryParams.cabinetName = null
      this.queryParams.cabinetId = null
      this.queryParams.status = null
      this.resetForm('queryForm')

      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.cabinetId)
      this.codes = selection.map((item) => item.cabinetCode)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.form.workstationId = null
      this.title = '新增物资柜信息'
      this.optType = 'add'
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      selectMaterialsCabinetById(row.cabinetId).then((response) => {
        this.form = response.data
        this.open = true
        this.title = '修改物资柜信息'
        this.optType = 'edit'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.cabinetId != null) {
            updateMaterialsCabinet(this.form).then((response) => {
              console.log(response, '修改返回')
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addMaterialsCabinet(this.form).then((response) => {
              console.log(response, '新增返回')
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const cabinetIds = row.cabinetId || this.ids
      const cabinetCodes = row.cabinetCode || this.codes
      this.$modal
        .confirm('是否确认删除所选数据项？')
        .then(function() {
          return deleteMaterialsCabinet(cabinetIds)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {
        })
    },
    //图标上传成功
    handleIconUplaoded(imgUrl) {
      this.form.cabinetPicture = imgUrl[0].url
    },
    // 图标移除
    handleIconRemoved(imgUrl) {
      this.form.cabinetPicture = null
    },
    //自动生成编码
    handleAutoGenChange(autoGenFlag) {
      if (autoGenFlag) {
        genCode('MATERIALS_CABINET').then((response) => {
          this.form.cabinetCode = response
        })
      } else {
        this.form.cabinetCode = null
      }
    }
  }
}
</script>
<style lang="scss" src="@/assets/styles/dialog-title.scss" scoped>
</style>
<style scoped lang="scss">
.deptXLG {
  position: absolute;
  width: 65px;
  height: 25px;
  left: 500px;
  top: 260px;
  background: #70b26f;
  line-height: 25px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}

.deptCCO {
  position: absolute;
  width: 65px;
  height: 25px;
  left: 670px;
  top: 480px;
  background: #70b26f;
  line-height: 25px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}

//图片放大
.img-box {
  width: 75px;
  height: 75px;
  position: relative;

  #eyeicon {
    display: none;
  }
}

.img-box:hover {
  background: #000;

  .images {
    opacity: 0.6;
  }

  #eyeicon {
    display: block;
    position: absolute;
    top: 40%;
    left: 40%;
    z-index: 100;
    color: white;
    pointer-events: none;
  }
}

.el-input-width {
  width: 380px !important;
}

.app-container {
  width: 100%;
  height: 100%;
  // background: green;
  .CabinetListcon {
    width: 100%;
    height: 100%;
    display: flex;
    // background: pink;
    .left {
      width: 15%;
      height: 100%;
      margin-right: 10px;
      // background: rgb(175, 214, 175);
      .deptTree {
        width: 100%;
        height: 90%;
        // background: rgb(199, 252, 247);
      }
    }

    .right {
      width: 83%;
      height: 100%;
      // background: yellow;
    }
  }
}
</style>
