<template>
  <div class="mainContainer">
    <!-- <div class="mainTitle">职业技能配置</div> -->
    <el-tabs>
      <el-tab-pane label="职业方向">

        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="name" label="名称" width="200"></el-table-column>
          <el-table-column prop="slug" label="别名" width="200"></el-table-column>
          <el-table-column prop="sort" label="排序" width="200"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="success" v-if="scope.row.children" @click="addDialogEvent(scope.row)">新增</el-button>
              <el-button size="mini" type="primary" v-else @click="editDialogEvent(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>
      <el-tab-pane label="技能标签配置">

        <el-table :data="skillData" style="width: 100%;margin-bottom: 20px;" row-key="id" border>
          
          <el-table-column prop="skills" width="50" type="expand">
            <template slot-scope="props">
              <el-button v-for="skill in props.row.skills" :key="skill.id" style="margin:6px 12px;" size="mini" type="primary"
                @click="editSkillEvent(skill)">{{skill.name}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="name" width="200" label="职业方向"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="addSkillEvent(scope.row)">新增</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>
    </el-tabs>
    

    <el-dialog title="编辑职业方向" :visible.sync="editDialog" width="500px">
      <el-form :model="form" :label-position="labelPosition" label-width="70px">
        <el-form-item label="名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="别名">
          <el-input v-model="form.slug" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.sort" autocomplete="off" placeholder="请输入数字"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="editDialog = false">取消</el-button>
        <el-button size="medium" type="primary" @click="formUpdate">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增职业方向" :visible.sync="addDialog" width="500px">
      <el-form :model="add_form" :label-position="labelPosition" label-width="70px">
        <el-form-item label="名称">
          <el-input v-model="add_form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="别名">
          <el-input v-model="add_form.slug" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="add_form.sort" autocomplete="off" placeholder="请输入数字"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="addDialog = false">取消</el-button>
        <el-button size="medium" type="primary" @click="formAdd">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="技能信息" :visible.sync="skillDialog" width="500px">
      <el-form :model="skill_form" :label-position="labelPosition" label-width="70px">
        <el-form-item label="技能名称">
          <el-input v-model="skill_form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="skillDialog = false">取消</el-button>
        <el-button size="medium" type="primary" @click="formSkill">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

  export default {
    data() {
      return {
        tableData: [],
        skillData: [],
        editDialog: false,
        addDialog: false,
        skillDialog: false,
        labelPosition: 'right',
        form: {
          direction_id: 0,
          name: '',
          slug: '',
          sort: ''
        },
        add_form: {
          occupation_id: 0,
          name: '',
          slug: '',
          sort: ''
        },
        skill_form: {
          parent_id: 0,
          skill_id: 0,
          name: ''
        },
      }
    },
    computed: {
      
    },
    mounted() {
      this.getTableData();
      this.getSkillData();
    },
    methods: {
      // 获取职业方向数据
      async getTableData() {

        let id = 1;
        let arr = [];
        let res = await this.$post("/api/admin/common/getDirectionMap");
        let list = res.data;
        for (const i of list) {
          let row = {
            id: id,
            data_id: i.occupation_id,
            name: i.occupation_name,
            slug: i.slug,
            sort: i.display_order,
            children: []
          }
          id++;
          if (i.directions) {
            for (const j of i.directions) {
              row.children.push({
                id:id,
                data_id: j.direction_id,
                parent_id: i.occupation_id,
                name: j.direction_name,
                slug: j.slug,
                sort: j.display_order
              });
              id++;
            }
          }
          arr.push(row);
        }

        this.tableData = arr;
      },

      // 获取技能数据
      async getSkillData() {

        let id = 1;
        let arr = [];
        let res = await this.$post("/api/admin/common/getSysSkill");
        let list = res.data;
        for (const i of list) {
          let row = {
            id: id,
            data_id: i.occupation_id,
            name: i.occupation_name,
            skills: []
          }
          id++;
          if (i.skills) {
            for (const j of i.skills) {
              row.skills.push({
                id:id,
                data_id: j.skill_id,
                name: j.skill_name,
              });
              id++;
            }
          }
          arr.push(row);
        }

        this.skillData = arr;
      },

      editDialogEvent(row) {
        let form = this.form;
        form.name = row.name;
        form.slug = row.slug;
        form.sort = row.sort;
        form.direction_id = row.data_id;
        this.editDialog = true;
      },

      addDialogEvent(row) {
        this.add_form.occupation_id = row.data_id;
        this.addDialog = true;
      },

      editSkillEvent(row) {
        let form = this.skill_form;
        form.parent_id = 0;
        form.skill_id = row.data_id;
        form.name = row.name;
        this.skillDialog = true;
      },

      addSkillEvent(row) {
        let form = this.skill_form;
        form.parent_id = row.data_id;
        form.skill_id = 0;
        form.name = '';
        this.skillDialog = true;
      },

      formUpdate() {
        this.$post("/api/admin/common/updateDirection", this.form).then(res => {
          if (res && res.status === 1) {
            this.getTableData();
            this.$message.success('更新成功')
            this.editDialog = false;
          }
        });
        
      },

      formAdd() {
        this.$post("/api/admin/common/addDirection", this.add_form).then(res => {
          if (res && res.status === 1) {
            this.getTableData();
            this.$message.success('添加成功')
            this.addDialog = false;
          }
        });
        
      },

      formSkill() {
        this.$post("/api/admin/common/editSkill", this.skill_form).then(res => {
          if (res && res.status === 1) {
            this.getSkillData();
            this.$message.success('设置成功')
            this.skillDialog = false;
          }
        });
        
      }
      

    }
  };
</script>