/* eslint-disable vue/valid-v-for */
<template>
  <div class="app-warp">
    <div class="app-structure">
      <div class="app-search">
        <el-form :inline="true" :model="formInline" class="app-search-form">
          <div class="form-item">
            <label>审批批人:</label>
            <el-input v-model="formInline.user" placeholder="审批批人"/>
          </div>
          <div class="form-item">
            <label>审批批人:</label>
            <el-input v-model="formInline.user" placeholder="审批批人"/>
          </div>
          <div v-show="!searchFromCollapse" class="form-item">
            <label>审批批人:</label>
            <el-input v-model="formInline.user" placeholder="审批批人"/>
          </div>
          <div v-show="!searchFromCollapse" class="form-item">
            <label>审批批人:</label>
            <el-input v-model="formInline.user" placeholder="审批批人"/>
          </div>
          <div v-show="!searchFromCollapse" class="form-item">
            <label>审批批人:</label>
            <el-input v-model="formInline.user" placeholder="审批批人"/>
          </div>
          <div class="form-item text-right">
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button icon="el-icon-refresh">重置</el-button>
            <el-button v-if="searchFromCollapse==true" type="text" @click="searchFromCollapse = false">展开 <i class="el-icon-arrow-down"/></el-button>
            <el-button v-else type="text" @click="searchFromCollapse = true">合并 <i class="el-icon-arrow-up"/></el-button>
          </div>

        </el-form>
      </div>
      <div class="app-tools">
        <div class="app-function">
          <el-button type="primary" icon="el-icon-plus">新增</el-button>
          <el-button icon="el-icon-delete">批量删除</el-button>
        </div>
        <div class="app-minbtn">
          <span class="screening">
            <el-dropdown trigger="click">
              <el-button type="text" icon="el-icon-finished"/>
              <el-dropdown-menu slot="dropdown" style="margin-top:3px;">
                <div class="app-checkbox-group">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox v-for="item in headList" :key="item.prop" :label="item" style="display:block;" >{{ item.label }}</el-checkbox>

                  </el-checkbox-group>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </span>

          <el-button type="text" icon="el-icon-refresh-left"/>
          <el-button type="text" icon="el-icon-full-screen"/>
        </div>
      </div>
      <div class="app-statistical">
        <span>
          合计开班数：<i>60</i>
        </span>
        <span>
          培训结束班级数：<i>34</i>
        </span>
        <span>
          培训中班级数：<i>22</i>
        </span>
      </div>
      <div class="app-container">
        <el-table
          :data="tableData"
          :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
          border
          style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
            width="50"
            align="center"
          />

          <el-table-column v-for="item in checkList" :key="item.prop" :prop="item.prop" :label="item.label"/>
          <!-- <el-table-column
            prop="name"
            label="考核指标名称"
          />
          <el-table-column
            prop="dj"
            label="考核细则"
          />
          <el-table-column
            prop="fs"
            label="分值"
          />
          <el-table-column
            prop="fstype"
            label="分值类型"
          /> -->
          <el-table-column
            label="操作"
            width="300"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="dialogTableVisible = true">查看</el-button>
              <span class="app-divider"/>
              <el-button type="text" @click="dialogFormVisible = true">培训类型</el-button>
              <span class="app-divider"/>
              <el-button type="text" ><span class="color-red">删除</span></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-btn-group">
        <div>
          <!-- <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogFormVisible = true">新增</el-button> -->
        </div>
        <el-pagination
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          :total="100"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>

    <el-dialog :visible.sync="dialogFormVisible" title="培训类型" top="80px" width="840px">
      <el-form :model="form" class="appformwith">
        <div class="type_field_box">
          <div class="type_field_item">
            <div class="type_field_top">岗位类型</div>
            <div class="type_field_content type_pa">
              <div v-for="(item,i) in trainingList" :key="i" class="type_li">
                {{ item.NAME }}
              </div>
            </div>
          </div>
          <div class="type_field_item">
            <div class="type_field_top">岗位类型</div>
            <div class="type_field_content type_pa">

              <div v-for="(item,i) in postList" :key="i" class="type_li type_li_active">
                {{ item.NAME }}
              </div>
            </div>
          </div>
          <div class="type_field_item" style="width:320px">
            <div class="type_field_top">岗位类型</div>
            <div class="type_field_content m-scroll-style">

              <div class="type_field_search">
                <el-input
                  placeholder="请输入关键字进行过滤..."
                  prefix-icon="el-icon-search"
                  size="mini"/>
              </div>
              <el-tree
                v-loading="treeLoading"
                ref="tree"
                :data="industryTreeData"
                :props="defaultProps"
                :filter-node-method="filterNode"
                class="type_tree"
                @node-click="handleNodeClick"/>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogTableVisible" title="查看" top="80px" width="800px">
      <div>
        <el-table
          border
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="50"/>
          <el-table-column
            prop="date"
            label="考核指标名称"
          />
          <el-table-column
            prop="xz"
            label="考核细则"
            width="180"/>
          <el-table-column
            prop="address"
            label="分值"/>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      formInline: {
        user: '',
        region: ''
      },
      searchFromCollapse: true,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      tableData: [
        {
          name: '危险源分级管控',
          dj: '未开展危险源辨识及风险评价',
          fs: '-3',
          fstype: '减分'
        },
        {
          name: '危险源分级管控',
          dj: '未确定危险源监控等级',
          fs: '-1',
          fstype: '减分'
        },
        {
          name: '危险源分级管控',
          dj: '对危险源分别搭建，实行动态闭环管理。',
          fs: '1',
          fstype: '加分'
        },
        {
          name: '隐患整治',
          dj: '建立隐患档案，跟踪到位。',
          fs: '-2',
          fstype: '减分'
        },
        {
          name: '隐患整治',
          dj: '对排查的隐患整改落实不力',
          fs: '-2',
          fstype: '减分'
        },
        {
          name: '标准化管理',
          dj: '按照标准化管理要求，生产现场要求做到安全通道、照明、通风、降温、消防。',
          fs: '2.5',
          fstype: '加分'
        },
        {
          name: '标准化管理',
          dj: '对生产现场安全标志、标识粘贴醒目、规范。',
          fs: '1',
          fstype: '加分'
        },
        {
          name: '标准化管理',
          dj: '对生产现场安全标志、标识不按照但求设置的。',
          fs: '-1',
          fstype: '减分'
        },
        {
          name: '安全技能培训',
          dj: '未做有效的员工安全及鞥培训',
          fs: '-2',
          fstype: '减分'
        },
        {
          name: '安全技能培训',
          dj: '抽查员工应会不掌握的每一人',
          fs: '-1',
          fstype: '减分'
        }
      ],
      value: '',
      valuea: '',
      valueb: '',
      // 培训类型
      trainingList: [
        { NAME: '三岗人员' },
        { NAME: '全员培训' }
      ],
      // 岗位类型
      postList: [
        { NAME: '安全生产管理人员' },
        { NAME: '主要2' },
        { NAME: '主要3' },
        { NAME: '主要4' },
        { NAME: '主要5' }
      ],
      // 行业类型树
      treeLoading: false,
      industryTreeData: [],
      defaultProps: {
        children: 'nodes',
        label: 'NAME'
      },
      headList: [
        { prop: 'name', label: '名称' },
        { prop: 'dj', label: '考核细则' },
        { prop: 'fs', label: '分值' },
        { prop: 'fstype', label: '分值类型' }
      ],
      checkList: []
    }
  },
  created() {
    this.getTreeList()
    this.checkList = this.headList // 表头初始化选中
  },
  methods: {
    // 行业类型树
    getTreeList() {
      this.treeLoading = true
      requestFN(
        '/industrytype/getIndustryTree',
        { POSTTYPE_ID: '1' }
      ).then((data) => {
        this.treeLoading = false
        this.industryTreeData = data.zTreeNodes
      }).catch((e) => {
        this.treeLoading = false
      })
    },
    handleNodeClick(node, data, value) {
      // this.form.PARENT_ID = node.id
      // this.getList(node.id)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    }
  }
}
</script>

<style>

</style>
