<template>
  <el-dialog :visible.sync="dialogFormVisible" :before-close="close" title="培训类型" top="80px" width="1040px" append-to-body>
    <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="form.TRAINTYPE == item.TRAININGTYPE_ID ? 'type_li_active' : ''"
              class="type_li"
              @click="checkTrain(item)">
              {{ 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="form.POSTTYPE == item.POSTTYPE_ID ? 'type_li_active' : ''"
              class="type_li"
              @click="checkPost(item)">
              {{ 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
                v-model="filterText"
                placeholder="请输入关键字进行过滤..."
                prefix-icon="el-icon-search"
                size="mini"
                clearable/>
            </div>
            <el-tree
              v-loading="treeLoading"
              ref="tree"
              :data="industryTreeData"
              :props="industryProps"
              :filter-node-method="filterNode"
              :highlight-current="true"
              class="type_tree"
              @node-click="handleNodeClick"/>
          </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 trainLevelList"
              :key="i"
              :class="form.TRAINLEVEL == item.TRAINLEVEL_ID ? 'type_li_active' : ''"
              class="type_li"
              @click="checkTrainLevel(item)">
              {{ item.NAME }}
            </div>
          </div>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="selectIndustry">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { requestFN } from '@/utils/request'
export default {
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        TRAINTYPE: '',
        TRAINTYPE_NAME: '',
        POSTTYPE: '',
        POSTTYPE_NAME: '',
        TRAINLEVEL: '',
        TRAINLEVEL_NAME: '',
        INDUSTRY_END_ID: '',
        INDUSTRY_END_ID_NAME: '',
        trainAllName: ''
      },
      treeLoading: false,
      trainingList: [],
      postList: [],
      filterText: '',
      industryTreeData: [],
      industryProps: {
        children: 'nodes',
        label: 'NAME'
      },
      trainLevelList: []
    }
  },
  created() {
    this.getTrainingList()
    this.getTreeList()
  },
  methods: {
    getTrainingList() {
      requestFN(
        '/trainingtype/listAll',
        {}
      ).then((data) => {
        this.trainingList = data.varList
      }).catch((e) => {
      })
    },
    getPostList(TRAININGTYPE_ID) {
      requestFN(
        '/posttype/listAll',
        { TRAININGTYPE_ID }
      ).then((data) => {
        this.postList = data.varList
      }).catch((e) => {
      })
    },
    getTreeList() {
      this.treeLoading = true
      requestFN(
        '/industrytype/getIndustryTree'
      ).then((data) => {
        this.treeLoading = false
        this.industryTreeData = data.zTreeNodes
      }).catch((e) => {
        this.treeLoading = false
      })
    },
    getTrainLevelList(TRAININGTYPE_ID) {
      requestFN(
        '/trainleveltype/listAll',
        { TRAININGTYPE_ID }
      ).then((data) => {
        this.trainLevelList = data.varList
      }).catch((e) => {
      })
    },
    checkTrain(item) {
      this.form.TRAINTYPE = item.TRAININGTYPE_ID
      this.form.TRAINTYPE_NAME = item.NAME
      this.form.POSTTYPE = ''
      this.form.POSTTYPE_NAME = ''
      this.form.INDUSTRY_END_ID = ''
      this.form.INDUSTRY_END_ID_NAME = ''
      this.form.TRAINLEVEL = ''
      this.form.TRAINLEVEL_NAME = ''
      this.getPostList(item.TRAININGTYPE_ID)
      this.getTrainLevelList(item.TRAININGTYPE_ID)
    },
    checkPost(item) {
      this.form.POSTTYPE = item.POSTTYPE_ID
      this.form.POSTTYPE_NAME = item.NAME
      this.form.INDUSTRY_END_ID = ''
      this.form.INDUSTRY_END_ID_NAME = ''
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleNodeClick(node, data, value) {
      if (data.isLeaf) { // 判断是否根节点
        this.form.INDUSTRY_END_ID = node.INDUSTRYTYPE_ID
        this.form.INDUSTRY_END_ID_NAME = node.NAME
      }
    },
    checkTrainLevel(item) {
      this.form.TRAINLEVEL = item.TRAINLEVEL_ID
      this.form.TRAINLEVEL_NAME = item.NAME
    },
    selectIndustry() {
      const pn = this.form.POSTTYPE_NAME ? '-' + this.form.POSTTYPE_NAME : ''
      const iname = this.form.INDUSTRY_END_ID_NAME ? '-' + this.form.INDUSTRY_END_ID_NAME : ''
      const tlName = this.form.TRAINLEVEL_NAME ? '-' + this.form.TRAINLEVEL_NAME : ''
      this.form.trainAllName = this.form.TRAINTYPE_NAME + pn + iname + tlName
      this.$nextTick(() => {
        this.$emit('confirm', this.form)
        this.close()
      })
    },
    close() {
      this.$emit('update:dialogFormVisible', false)
    }
  }
}
</script>

<style scoped>

</style>
