<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form label-width="90px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="行业类型">
              <el-cascader :props="industry_type_list_rule" v-model="form.INDUSTRY_TYPE" :options="industry_type_list" clearable style="width: 100%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检查隐患类型" label-width="110px">
              <el-cascader :props="hidden_types_list_rule" v-model="form.HIDDEN_TYPES" :options="hidden_types_list" clearable style="width: 100%"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="隐患区域">
              <el-input v-model="form.RISK_UNIT_NAME" placeholder="搜索"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="隐患部位">
              <el-input v-model="form.HIDDEN_PART" placeholder="搜索"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="隐患描述">
              <el-input v-model="form.HIDDEN_DESCR" placeholder="搜索"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" >
            <el-form-item label-width="10px">
              <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
                搜索
              </el-button>
              <el-button v-waves class="filter-item" type="success" icon="el-icon-search" @click="resetting">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="varList"
      :row-key="getRowKey"
      :header-cell-style="{
        'font-weight': 'bold',
        'color': '#000'
      }"
      tooltip-effect="dark"
      border
      fit
      highlight-current-row
    >
      <el-table-column :reserve-selection="true" type="selection" width="55" align="center"/>
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="INDUSTRY_TYPE_FOUR_NAME" label="行业类型" />
      <el-table-column prop="HIDDEN_TYPES_NAME" label="检查隐患类型" >
        <template slot-scope="{row}">
          {{ (row.HIDDEN_TYPE_ONE_NAME?row.HIDDEN_TYPE_ONE_NAME:'') +
            (row.HIDDEN_TYPE_TWO_NAME? '-' + row.HIDDEN_TYPE_TWO_NAME:'') +
            (row.HIDDEN_TYPE_THREE_NAME?'-' + row.HIDDEN_TYPE_THREE_NAME:'')
          }}
        </template>
      </el-table-column>
      <el-table-column prop="RISK_UNIT_NAME" label="隐患区域名称(风险单元名称)" />
      <el-table-column prop="HIDDEN_PART" label="隐患部位" />
      <el-table-column prop="INSPECTION_BASIS" label="隐患描述" />
      <el-table-column prop="HIDDEN_DESCR" label="检查依据" />
      <el-table-column prop="RECTIFYDESCR" label="整改建议" />
      <el-table-column label="操作" align="center" width="250">
        <template slot-scope="{row}">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-button type="primary" icon="el-icon-video-camera" size="mini" @click="getInfo(row)">查看</el-button>
            </el-col>
            <el-col :span="8">
              <el-button v-show="edit" type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row)">编辑</el-button>
            </el-col>
            <el-col :span="8">
              <el-button v-show="del" type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row.HIDDEN_LIBRARY_ID)">删除</el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-btn-group">
      <div>
        <el-button v-show="false" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        <el-button v-show="false" type="danger" icon="el-icon-delete" plain @click="batchDel">删除</el-button>
      </div>
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
    <edit ref="edit" :title="title" href="edit" @beforeClose="getList"/>
    <info ref="info" :title="title"/>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves'
import edit from './edit.vue'
import info from './info.vue'
import Info from '../../../onlinexxks/stage/exam/components/info.vue'
export default {
  components: { Info, edit, Pagination, info },
  directives: { waves },
  data() {
    return {
      listLoading: true,
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      KEYWORDS: '',
      varList: [],
      title: '新增',
      form: {
        INDUSTRY_TYPE: [],
        HIDDEN_TYPES: [],
        RISK_UNIT_NAME: '',
        HIDDEN_PART: '',
        HIDDEN_DESCR: '',
        STATUS: '1'
      },
      industry_type_list_rule: {
        value: 'DICTIONARIES_ID',
        label: 'NAME',
        children: 'children',
        lazy: true,
        lazyLoad(node, resolve) {
          if (!node.value) return
          requestFN(
            'dictionaries/getLevels', { DICTIONARIES_ID: node.value }
          ).then((data) => {
            resolve(data.list)
          }).catch((e) => {
            console.log(e)
          })
        }
      },
      hidden_types_list_rule: {
        value: 'DICTIONARIES_ID',
        label: 'NAME',
        children: 'children',
        lazy: true,
        lazyLoad(node, resolve) {
          if (!node.value) return
          requestFN(
            'dictionaries/getLevels', { DICTIONARIES_ID: node.value }
          ).then((data) => {
            resolve(data.list)
          }).catch((e) => {
            console.log(e)
          })
        }
      },
      industry_type_list: [],
      hidden_types_list: []
    }
  },
  created() {
    this.getList()
    this.getDict()
  },
  methods: {
    getRowKey(row) {
      return row.HIDDEN_LIBRARY_ID
    },
    getQuery() {
      this.getList()
    },
    getList() {
      this.listLoading = true
      if (this.form.INDUSTRY_TYPE && this.form.INDUSTRY_TYPE.length === 4) {
        this.form.INDUSTRY_TYPE_FOUR = this.form.INDUSTRY_TYPE[3]
      }
      this.form.INDUSTRY_TYPE_FOUR = this.form.INDUSTRY_TYPE[3]
      this.form.HIDDEN_TYPE_ONE = this.form.HIDDEN_TYPES[0] ? this.form.HIDDEN_TYPES[0] : ''
      this.form.HIDDEN_TYPE_TWO = this.form.HIDDEN_TYPES[1] ? this.form.HIDDEN_TYPES[1] : ''
      this.form.HIDDEN_TYPE_THREE = this.form.HIDDEN_TYPES[2] ? this.form.HIDDEN_TYPES[2] : ''
      requestFN(
        '/hiddenLibrary/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        this.form
      ).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        this.total = data.page.totalResult
        this.hasButton()
      }).catch((e) => {
        this.listLoading = false
      })
    },
    handleAdd() {
      this.$refs.edit.init()
      this.title = '新增'
    },
    handleEdit(row) {
      this.$refs.edit.init(row)
      this.title = '编辑'
    },
    handleDelete(id) {
      this.$confirm('确定要删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/hiddenLibrary/delete',
          { HIDDEN_LIBRARY_ID: id }
        ).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.listQuery.page = 1
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    batchDel() {
      const _selectData = this.$refs.multipleTable.selection
      if (_selectData == null || _selectData.length == 0) {
        this.$message({
          message: '请选中要删除的项...',
          type: 'error'
        })
        return false
      }
      const ids = _selectData.map((item, index) => {
        return item.HIDDENLIBRARY_ID
      }).join(',')

      this.$confirm('确定要删除选中的数据吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/hiddenLibrary/deleteAll',
          {
            DATA_IDS: ids
          }
        ).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.listQuery.page = 1
          this.$refs.multipleTable.clearSelection()
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    hasButton: function() {
      var keys = 'hiddenLibrary:add,hiddenLibrary:del,hiddenLibrary:edit,toExcel'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.hiddenLibraryfhadminadd		// 新增权限
        this.del = data.hiddenLibraryfhadmindel		// 删除权限
        this.edit = data.hiddenLibraryfhadminedit	// 修改权限
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getDict: function() {
      requestFN(
        'dictionaries/getLevels', { DICTIONARIES_ID: 'f2598ba72e864eadabf0ca4b664d26b9' }
      ).then((data) => {
        this.industry_type_list = data.list
      }).catch((e) => {
        this.loading = false
      })
      requestFN(
        '/dictionaries/getLevels', { DICTIONARIES_ID: 'b4a7325f96af40808ec64c85c162933d' }
      ).then((data) => {
        this.hidden_types_list = data.list
      }).catch((e) => { console.log(e) })
    },
    getInfo(e) {
      this.$refs.info.init(e)
      this.title = '详情'
    },
    resetting() {
      this.form = {
        INDUSTRY_TYPE: [],
        HIDDEN_TYPES: [],
        RISK_UNIT_NAME: '',
        HIDDEN_PART: '',
        HIDDEN_DESCR: '',
        STATUS: '1'
      }
      this.getList()
    },
    addToLibrary() {
      this.$confirm('确定是将这些数据添加到正式库中', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.$refs.multipleTable.selection && this.$refs.multipleTable.selection.length === 0) {
          this.$message({
            type: 'info',
            message: '请选择数据'
          })
          return
        }

        this.listLoading = true
        requestFN(
          '/hiddenLibrary/addToLibrary', { ids: JSON.stringify(this.$refs.multipleTable.selection) }
        ).then((data) => {
          this.listLoading = false
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消添加'
        })
      })
    }
  }
}

</script>
