<template>
  <div class="bbsl-common-page">
    <div class="bbsl-table-search">
      <el-form v-model="queryParam" :inline="true">
        <el-form-item label="名称：">
          <el-input
            v-model="querys[0].value"
            clearable
            maxlength="128"
            placeholder="请输入名称"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="人员类别：">
          <el-select
            v-model="querys[2].value"
            clearable
            placeholder="请选择人员类别"
          >
            <el-option
              v-for="item in jobPageList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="handleSearch"
            >搜索
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div ref="contentPanel" class="bbsl-table-content">
      <div ref="btnPanel" class="bbsl-btn-content">
        <el-button icon="el-icon-plus" type="success" @click="handleAdd"
          >新增
        </el-button>
        <el-popconfirm title="确定删除选中数据吗？" @confirm="handleDelete">
          <el-button
            slot="reference"
            :disabled="!multipleSelection.length"
            icon="el-icon-delete"
            style="margin-left: 10px"
            type="danger"
            >删除
          </el-button>
        </el-popconfirm>
        <el-upload
          ref="upload"
          :auto-upload="false"
          :file-list="fileList"
          :http-request="upLoadFile"
          :on-change="e => handleChange(e, fileList)"
          :show-file-list="false"
          accept="."
          action="no"
          class="avatar-uploader"
        >
          <el-button
            icon="el-icon-download"
            style="margin-right: 10px;"
            type="primary"
            >导入
          </el-button>
        </el-upload>
        <el-button icon="el-icon-upload2" type="warning" @click="exportFile"
          >导出
        </el-button>
        <el-button icon="el-icon-document" type="info">
          <a
            :href="this.portal + '/exam/equipment/sys/downModel'"
            target="_blank"
            >下载模板</a
          >
        </el-button>
      </div>
      <el-table
        ref="multipleSelection"
        v-loading="loading"
        :cell-style="{'text-align': 'center'}"
        :data="tableData"
        :header-cell-style="{'text-align': 'center'}"
        :max-height="tableMaxHeight"
        :style="{width: '100%'}"
        size="mini"
        @row-dblclick="handleDbClick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          fixed
          label="序号"
          type="index"
          width="55"
        ></el-table-column>
        <el-table-column
          label="名称"
          min-width="120"
          prop="name"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column min-width="120" prop="typeName" label="类型" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="120" prop="userTypeName" label="人员类别" show-overflow-tooltip>
				</el-table-column> -->
        <el-table-column
          label="创建时间"
          min-width="120"
          prop="createTime"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <el-pagination
        ref="paginationPanel"
        :current-page="queryParam.pageBean.page"
        :page-size="queryParam.pageBean.pageSize"
        :page-sizes="[20, 30, 40, 50]"
        :total="total"
        align="right"
        background
        class="bbsl-pagination"
        layout="prev, pager, next,total, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <equSysMenuDialog ref="formModal" @reload="reload"></equSysMenuDialog>
  </div>
</template>

<script>
import equSysMenu from '@/api/examination/equSysMenu.js'
import {TableMixin} from '@/mixins/tableMixin'
import equSysMenuDialog from './components/equSysMenuDialog.vue'

export default {
  name: 'equSysMenu',
  components: {
    equSysMenuDialog
  },
  mixins: [TableMixin],
  data() {
    return {
      search: '',
      parentId: null, //上级id
      url: {
        delete: '/exam/equipment/sys/'
      }, // 删除产品信息
      treeNode: {
        code: '',
        id: 0,
        name: '装备系统管理',
        type: 0,
        children: []
      },
      treeData: [
        {
          code: '',
          id: '0',
          name: '装备系统管理',
          type: 0,
          children: []
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      tableData: [],
      lxList: [], //类型
      jobPageList: [], //人员类别
      // 模拟数据
      querys: [
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'name',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'type',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'user_type_id',
          relation: 'AND',
          value: ''
        }
      ],
      portal: '',
      fileList: []
    }
  },
  created() {
    this.getTreen()
    this.getJobPage()
    this.portal = window.context.portal
    // this.zblxList = dictUtils.getDictItemsFromCache('zblx')
    // this.lxList = dictUtils.getDictItemsFromCache('lx')
  },
  mounted() {},
  methods: {
    //获取人员类别
    getJobPage() {
      equSysMenu.getJobPage(this.queryParam, res => {
        if (res.rows) {
          this.jobPageList = res.rows
          this.loadData(1)
        }
      })
    },
    // 获取list
    async loadData(page) {
      console.log(2)
      if (page) {
        this.queryParam.pageBean.page = page
      }

      this.loading = true
      this.tableData = []
      this.queryParam.querys = []
      this.queryParam.sorter = [
        {
          direction: 'DESC',
          property: 'createTime'
        }
      ]
      if (this.querys[0].value) {
        this.queryParam.querys.push(this.querys[0])
      }
      if (this.querys[1].value) {
        this.queryParam.querys.push(this.querys[1])
      }
      if (this.querys[2].value) {
        this.queryParam.querys.push(this.querys[2])
      }
      await equSysMenu.getEqeSys(this.queryParam, res => {
        this.total = res.total
        this.tableData = res.rows
        // this.tableData.forEach(item => {
        // 	this.jobPageList.forEach(ee => {
        // 		if (item.userTypeId == ee.id) {
        // 			item['userTypeName'] = ee.name
        // 		}
        // 	})
        // 	this.lxList.forEach(ee => {
        // 		if (item.type == ee.value) {
        // 			item['typeName'] = ee.name
        // 		}
        // 	})
        // })
        this.$set(this.tableData)
        this.loading = false
      })
    },

    relatedJobs(val) {
      this.$refs.relatedJobs.add(val)
    },
    append(data, type) {
      this.$refs.formModal.add()
    },
    upDateinfo(data, type) {
      this.$refs.formModal.edit(data)
    },
    // 删除装备系统类型
    remove(item) {
      this.$confirm('确定删除选中数据？', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning'
      })
        .then(() => {
          equSysMenu.deleteOneEqeSys(item.id).then(res => {
            if (res.data.state) {
              this.$notify({
                type: 'success',
                message: '删除成功',
                duration: 2000
              })
              this.getTreen()
              this.loadData(1)
            }
          })
        })
        .catch(action => {
          this.$notify({
            type: 'info',
            message: action === 'cancel' ? '已取消删除' : '停留在当前页面'
          })
        })
    },
    reload() {
      this.treeData = [
        {
          code: '',
          id: '0',
          name: '装备系统管理',
          type: 0,
          children: []
        }
      ]
      this.$set(this.treeData)
      this.getTreen()
      this.loadData()
    },
    handleAdd() {
      this.$refs.formModal.add(this.parentId)
    },
    // 重置
    clearQuerys() {
      this.querys[0].value = ''
      this.loadData(1)
    },

    // 获取树
    getTreen() {
      equSysMenu.geteqTree(
        {
          id: '0'
        },
        res => {
          this.treeData[0].children = res.value
          this.$set(this.treeData)
        }
      )
    },

    // 点击树查看数据
    handleNodeClick(data) {
      this.parentId = data.id
      if (data.id == 0) {
        this.querys[1].value = ''
        this.loadData(1)
      } else {
        this.querys[1].value = this.parentId
        this.loadData(1)
      }
    },
    searchName() {
      let querys = {
        name: ''
      }
      querys.name = this.search
      equSysMenu.geteqTree(querys, res => {
        this.treeData[0].children = res.value
        this.$set(this.treeData)
      })
    },
    //导入
    handleChange(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
      if (
        file.raw.name.split('.')[1] == 'xlsx' ||
        file.raw.name.split('.')[1] == 'xls' ||
        file.raw.name.split('.')[1] == 'xlsm'
      ) {
        this.upLoadFile(file.raw)
      } else {
        this.$message.warning('请上传xls,xlsx,xlsm格式文件！')
        fileList.splice(0)
      }
    },
    //自定义上传方法（覆盖默认上传行为）
    upLoadFile(file) {
      let formData = new FormData()
      formData.append('file', file)
      equSysMenu.importExcel(formData, res => {
        if (res.state) {
          this.$notify({
            type: 'success',
            message: '导入成功',
            duration: 2000
          })
          this.loadData(1)()
        } else {
          this.$notify({
            type: 'error',
            message: res.message,
            duration: 2000,
            offset: 80
          })
          this.loadData(1)
        }
      })
    },
    exportFile() {
      equSysMenu.export(
        {
          querys: this.querys,
          pageBean: {
            pageSize: -1
          }
        },
        res => {
          if (res) {
          }
        }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.type-tag {
  margin: 0 2px;
}

.common-tree-container {
  height: calc(100% - 70px);
  margin-top: 0.52083vw;
  padding: 1.04167vw 1.04167vw;
  background-color: #fff;
  position: relative;
  overflow-y: auto;
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow: 0px 0px 0.625vw 0 rgba(92, 102, 83, 0.2);
}

a {
  text-decoration: none;
  color: #ffffff;
}

.title {
  width: 100%;
  margin-bottom: 10px;

  i {
    color: #1289fe;
    font-size: 25px;
  }

  span {
    font-size: 25px;
  }
}

::v-deep .el-tree {
  border: none;
}

.avatar-uploader {
  display: inline-block;
  margin-left: 10px;
}

::v-deep .el-tree-node__content {
  padding: 5px 0;
}
</style>
