<template>
  <basic-container>
    <!-- 上岗证台账 -->
    <avue-crud :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page" ref="crud"
      @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad"
      :span-method="spanMethod">
      <!-- <template #userName="{ row }">{{ row.jtPostHandle.personnel.userName }}</template>
      <template #deptName="{ row }">{{ row.jtPostHandle.dept.deptName }}</template>
      <template #station="{ row }">{{ row.jtPostHandle.station }}</template>
      <template #skillTitle="{ row }">{{ row.jtPostHandle.skillTitle }}</template>
      <template #userSex="{ row }">{{ row.jtPostHandle.personnel.userSex ? '男' : '女' }}</template>
      <template #education="{ row }">{{ row.jtPostHandle.education }}</template>
      <template #dataBirth="{ row }">{{ row.jtPostHandle.dataBirth }}</template> -->
      <template #menu-left>
        <el-button type="primary" icon="el-icon-plus">维护</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="handleDeletes">删除</el-button>
        <el-button type="success" icon="el-icon-upload" @click="handleImport">导入</el-button>
        <el-button type="primary" icon="el-icon-operation" @click="handleCertificate">批量发证</el-button>
        <el-button type="primary" icon="el-icon-setting" @click="handleIndate">设置有效期</el-button>
      </template>
      <template #menu="scope">
        <el-button type="text" @click="setCode(scope.row)">设置上岗证编号</el-button>
      </template>
    </avue-crud>
    <el-dialog append-to-body title="批量发证" v-model="ccieDialog" width="80%">
      <div style="display: flex;margin-bottom: 10px;">
        <el-button plain type="danger" @click="remove">删除选择行</el-button>
        <el-select style="width: 240px;margin: 0 10px;" v-model="selectValue" placeholder="请选择">
          <el-option v-for="item in ccieOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-date-picker v-model="dateNum" type="date" placeholder="选择日期" />
        <el-button type="primary" style="margin: 0 10px;">批量设置</el-button>
        <el-button type="primary">保存</el-button>
      </div>
      <el-table :data="selectionArr">
        <el-table-column type="selection"></el-table-column>
        <el-table-column align="center" label="上岗证日期" prop="wlTime"></el-table-column>
        <el-table-column align="center" label="适航日期" prop="seaTime"></el-table-column>
        <el-table-column align="center" label="宇航日期" prop="astrTime"></el-table-column>
        <el-table-column align="center" label="设备日期" prop="deviceTime"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog append-to-body title="设置有效期" v-model="indateDialog" width="80%">
      <div style="display: flex;margin-bottom: 10px;">
        <el-button plain type="danger" @click="remove">删除选择行</el-button>
        <el-select style="width: 240px;margin: 0 10px;" v-model="selectValue" placeholder="请选择">
          <el-option v-for="item in inDateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-date-picker v-model="dateNum" type="date" placeholder="选择日期" />
        <el-button type="primary" style="margin: 0 10px;">批量设置</el-button>
        <el-button type="primary">保存</el-button>
      </div>
      <el-table :data="inDateArr">
        <el-table-column type="selection"></el-table-column>
        <el-table-column align="center" label="上岗证日期" prop="wlTime"></el-table-column>
        <el-table-column align="center" label="上岗证有效期(年)" prop="wlTime"></el-table-column>
        <el-table-column align="center" label="适航日期" prop="seaTime"></el-table-column>
        <el-table-column align="center" label="适航有效期(年)" prop="seaTime"></el-table-column>
        <el-table-column align="center" label="宇航日期" prop="astrTime"></el-table-column>
        <el-table-column align="center" label="宇航有效期(年)" prop="astrTime"></el-table-column>
        <el-table-column align="center" label="设备日期" prop="deviceTime"></el-table-column>
        <el-table-column align="center" label="设备有效期(年)" prop="deviceTime"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog append-to-body title="设置上岗证编号" v-model="setDialog">
      <el-form :model="setForm" :rules="setRules">
        <el-form-item label="编号">
          <el-input placeholder="请输入编号" v-model="setForm.wlCode"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="setDialog = false">取 消</el-button>
          <el-button type="primary" @click="setDialog = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </basic-container>
</template>

<script>
export default {
  data() {
    return {
      ccieDialog: false,
      indateDialog:false,
      selectValue: '',
      dateNum: '',
      loading: false,
      setDialog:false,
      setForm:{},
      setRules:{},
      data: [],
      inDateArr:[],
      form: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      ccieOptions: [
        {
          value: 1,
          label: '上岗证日期'
        },
        {
          value: 2,
          label: '适航日期'
        },
        {
          value: 3,
          label: '宇航日期'
        },
        {
          value: 4,
          label: '设备日期'
        }
      ],
      inDateOptions:[
        {
          value: 1,
          label: '上岗证有效期'
        },
        {
          value: 2,
          label: '适航有效期'
        },
        {
          value: 3,
          label: '宇航有效期'
        },
        {
          value: 4,
          label: '设备有效期'
        }
      ],
      selectionList: [],
      spanArr: [
        {
          prop: 'userName',
          span: []
        },
        {prop: 'deptName',span: []},
        {prop: 'station',span: []},
        {prop: 'skillTitle',span: []},
        {prop: 'userSex',span: []},
        {prop: 'education',span: []},
        {prop: 'dataBirth',span: []},
        {prop: 'wlCode',span: []},
        {prop: 'toNewJobDueDate',span: []},
        {prop: 'wlTime',span: []},
        {prop: 'wlLifespan',span: []},
        {prop: 'wlDueDate',span: []},
        {prop: 'seaTime',span: []},
        {prop: 'seaLifespan',span: []},
        {prop: 'seaDueDate',span: []},
        {prop: 'astrTime',span: []},
        {prop: 'astrLifespan',span: []},
        {prop: 'astrdueDate',span: []},
      ],
      option: {
        columnSort: true,
        tip: false,
        height: 'auto',
        align: 'center',
        calcHeight: 32,
        simplePage: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: false,
        selection: true,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        delBtnIcon: ' ',
        addBtn: false,
        labelWidth: 120,
        searchLabelWidth: 120,
        menu: true,
        menuWidth: 200,
        dialogWidth: 600,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: true,
        gridBtn: false,
        searchShowBtn: false,
        showOverflowTooltip: true,
        column: [
          {
            label: '姓名',
            prop: 'userName',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: true,
            rules: [
              {
                required: true,
                message: '请输入姓名',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '所属班组',
            prop: 'deptName',
            type: 'select',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: true,
            rules: [
              {
                required: true,
                message: '请输入所属班组',
                trigger: 'blur',
              },
            ],
            props: {
              label: 'deptName',
              value: 'deptId'
            },
            dicData: [
              {
                "appLink": null,
                "createTime": "2022-08-31",
                "deleted": false,
                "deptCode": "001",
                "deptId": 1,
                "deptName": "MES开发部",
                "deptType": 1,
                "deptTypeTitle": "厂",
                "keyValue": 1,
                "memo": null,
                "orders": "00",
                "parentDeptId": null,
                "parentPath": null,
                "ucDeptId": null,
                "updateTime": "2022-08-31 16:32:46"
              },
              {
                "appLink": null,
                "createTime": "2023-02-06",
                "deleted": false,
                "deptCode": "3400",
                "deptId": 41,
                "deptName": "热表分厂",
                "deptType": 1,
                "deptTypeTitle": "厂",
                "keyValue": 41,
                "memo": null,
                "orders": "1",
                "parentDeptId": null,
                "parentPath": null,
                "ucDeptId": null,
                "updateTime": "2023-02-06 10:25:08"
              },
              {
                "appLink": null,
                "createTime": "2023-02-06",
                "deleted": false,
                "deptCode": "01",
                "deptId": 42,
                "deptName": "化学镀镍",
                "deptType": 1,
                "deptTypeTitle": "厂",
                "keyValue": 42,
                "memo": null,
                "orders": "1",
                "parentDeptId": 41,
                "parentPath": null,
                "ucDeptId": null,
                "updateTime": "2023-02-06 10:26:13"
              },
            ]
          },
          {
            label: '所属岗位',
            prop: 'station',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: true,
            rules: [
              {
                required: true,
                message: '请输入所属岗位',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '技能等级',
            prop: 'skillTitle',
            type: 'select',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: true,
            rules: [
              {
                required: true,
                message: '请输入技能等级',
                trigger: 'blur',
              },
            ],
            dicData: [
              {
                value: 1,
                label: '中级'
              }, {
                value: 2,
                label: '高级'
              }, {
                value: 3,
                label: '技师'
              }
            ]
          },
          {
            label: '性别',
            prop: 'userSex',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入性别',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '最高学历',
            prop: 'education',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入最高学历',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '出生年月',
            prop: 'dataBirth',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入出生年月',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '上岗证编号',
            prop: 'wlCode',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: true,
            rules: [
              {
                required: true,
                message: '请输入上岗证编号',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '从事本岗位或工种时间',
            prop: 'toNewJobDueDate',
            span: 24,
            width: 200,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入从事本岗位或工种时间',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '上岗证日期',
            prop: 'wlTime',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入上岗证日期',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '上岗证有效期(年)',
            prop: 'wlLifespan',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入上岗证有效期(年)',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '到期日期',
            prop: 'wlDueDate',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入到期日期',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '适航日期',
            prop: 'seaTime',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入适航日期',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '适航有效期(年)',
            prop: 'seaLifespan',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入适航有效期(年)',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '到期日期',
            prop: 'seaDueDate',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入到期日期',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '宇航日期',
            prop: 'astrTime',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入宇航日期',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '宇航有效期',
            prop: 'astrLifespan',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入宇航有效期',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '到期日期',
            prop: 'astrdueDate',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入到期日期',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '设备型号',
            prop: 'deviceModel',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入设备型号',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '设备名称',
            prop: 'deviceName',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入设备名称',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '设备时间',
            prop: 'deviceTime',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入设备时间',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '设备有效期',
            prop: 'deviceLifespan',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入设备有效期',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '到期日期',
            prop: 'deviceDueDate',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入到期日期',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '状态',
            prop: 'wlStatusTitle',
            type: 'select',
            span: 24,
            width: 150,
            labelWidth: 140,
            overflow: true,
            fixed: 'right',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入状态',
                trigger: 'blur',
              },
            ],
            dicData: [
              {
                value: 1,
                label: '正常'
              }, {
                value: 2,
                label: '过期'
              }, {
                value: 3,
                label: '离职'
              }
            ]
          },
        ]
      },
    }
  },
  mounted() {
    this.rowSort()
    this.rowCalc();
  },
  methods: {
    rowCalc() {
      this.spanArr.forEach((ele, index) => {
        let parent
        if (index !== 0) parent = this.spanArr[ele.parent || index - 1].span
        ele.span = this.rowSpan(ele.prop, parent)
      })
    },
    rowSort(list) {
      let propList = this.spanArr.map(ele => ele.prop)
      this.spanArr.forEach((ele, index) => {
        let key = ele.prop
        this.data = this.data.sort((a, b) => {
          let flag = true;
          for (let i = 0; i < index; i++) {
            let prop = this.spanArr[i].prop
            flag = flag && a[prop] == b[prop]
          }
          if (flag) {
            if (a[key] < b[key]) { return 1; }
            else if (a[key] > b[key]) { return -1; }
            return 0;
          }
          return 0;
        })
      })
    },
    rowSpan(key, parent) {
      let list = [];
      let position = 0;
      this.data.forEach((item, index) => {
        if (index === 0) {
          list.push(1)
          let position = 0;
        } else {
          if (this.data[index][key] === this.data[index - 1][key]) {
            if (parent && parent[index] !== 0) {
              list.push(1)
              position = index
            } else {
              list[position] += 1;
              list.push(0)
            }
          } else {
            list.push(1)
            position = index
          }
        }
      })
      return list
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      for (let i = 0; i < this.spanArr.length; i++) {
        const ele = this.spanArr[i]
        if (column.property == ele.prop) {
          const _row = ele.span[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
    },
    setCode(){
      this.setDialog = true
    },
    // 批量发证
    handleCertificate() {
      this.ccieDialog = true
    },
    // 有效期
    handleIndate(){
      this.indateDialog = true
    },
    // 多选
    selectionChange(val) {
      this.selectionList = val
    },
    // 批量删除
    handleDeletes() {
      if (this.selectionList.length == 0) {
        this.$message.error('请至少选择一条数据')
      } else {

      }
    },
    // 导入
    handleImport() {

    },
    onLoad() {
      this.data = [
        {
          id: 1,
          userName: "张三",
          // jtPostHandle: {
          //   personnel: {
              userName: "张三",
              userSex: "男",
            // },
            // dept: {
              deptName: "班组一",
            // },
            station: '试验员',
            skillTitle: '初级',
            education: '本科',
            dataBirth: '1992-11-20',
          // },
          wlCode: '0010', toNewJobDueDate: '2年', wlTime: '2023-10-28', wlLifespan: '2年', wlDueDate: '2025-10-28',
          seaTime: '2023-10-11', seaLifespan: '3年', seaDueDate: '2026-10-11', astrTime: '2023-10-31', astrLifespan: '3年',
          astrdueDate: '2026-10-31', deviceTime: '2023-10-11', deviceLifespan: '3年', deviceDueDate: '2026-10-11',
          wlStatusTitle: '过期',deviceModel:'型号一',deviceName:'设备名称一'
        },
        {
          id: 1,
          userName: "张三",
          // jtPostHandle: {
            // personnel: {
              userName: "张三",
              userSex: "男",
            // },
            // dept: {
              deptName: "班组一",
            // },
            station: '试验员',
            skillTitle: '初级',
            education: '本科',
            dataBirth: '1992-11-20',
          // },
          wlCode: '0010', toNewJobDueDate: '2年', wlTime: '2023-10-28', wlLifespan: '2年', wlDueDate: '2025-10-28',
          seaTime: '2023-10-11', seaLifespan: '3年', seaDueDate: '2026-10-11', astrTime: '2023-10-31', astrLifespan: '3年',
          astrdueDate: '2026-10-31', deviceTime: '2023-10-11', deviceLifespan: '3年', deviceDueDate: '2026-10-11',
          wlStatusTitle: '过期',deviceModel:'型号一',deviceName:'设备名称一'
        },
        {
          id: 1,
          userName: "张三",
          // jtPostHandle: {
          //   personnel: {
              userName: "张三",
              userSex: "男",
            // },
            // dept: {
              deptName: "班组一",
            // },
            station: '试验员',
            skillTitle: '初级',
            education: '本科',
            dataBirth: '1992-11-20',
          // },
          wlCode: '0020', toNewJobDueDate: '2年', wlTime: '2023-10-31', wlLifespan: '2年', wlDueDate: '2025-10-31',
          seaTime: '2023-10-11', seaLifespan: '3年', seaDueDate: '2026-10-11', astrTime: '2023-10-31', astrLifespan: '3年',
          astrdueDate: '2026-10-31', deviceTime: '2023-10-11', deviceLifespan: '3年', deviceDueDate: '2026-10-11',
          wlStatusTitle: '过期',deviceModel:'型号一',deviceName:'设备名称一'
        },
        {
          id: 2,
          userName: "李四",
          // jtPostHandle: {
          //   personnel: {
              userName: "李四",
              userSex: "男",
            // },
            // dept: {
              deptName: "班组一",
            // },
            station: '试验员',
            skillTitle: '初级',
            education: '本科',
            dataBirth: '1992-11-20',
          // },
          wlCode: '0030', toNewJobDueDate: '2年', wlTime: '2023-10-31', wlLifespan: '2年', wlDueDate: '2025-10-31',
          seaTime: '2023-10-11', seaLifespan: '3年', seaDueDate: '2026-10-11', astrTime: '2023-10-31', astrLifespan: '3年',
          astrdueDate: '2026-10-31', deviceTime: '2023-10-11', deviceLifespan: '3年', deviceDueDate: '2026-10-11',
          wlStatusTitle: '过期',deviceModel:'型号一',deviceName:'设备名称一'
        },
      ]
      this.page.total = this.data.length
    }
  }
}
</script>

<style></style>