<!-- 知识点分类 -->
<template>
  <div class="app-container knowledgePointManagement">
    <div class="page-container knowledgePointManagementPage">
      <div class="page-form-title-box">
        <el-form :model="queryParams" class="form-box" ref="queryForm"
                 :inline="true" style="width:100%;">
          <el-form-item label="" prop="id">
            <el-cascader
              v-model="queryParams.id"
              :options="options"
              :props="{
                emitPath:false,
                checkStrictly: true,
                value: 'id',
                label: 'knowledgePointName',
                children: 'children',
              }"
              :show-all-levels="false"
              filterable
              placeholder="请选择知识点"
            ></el-cascader>
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
          <p class="page-submit-common-style-button"
             style="float: right;"
             @click="tableButton(1)"
             v-hasPermiRouter="['exam:elKnowledgePoint:add']"
          >添加</p>
          <p class="page-save-common-style-button"
             style="float: right;margin-right:10px;"
             @click="tableButton(2)"
             v-hasPermiRouter="['exam:elKnowledgePoint:batchAdd']"
          >批量添加</p>
          <el-form-item style="float: right;"
                        v-hasPermiRouter="['exam:elKnowledgePoint:importData']">
            <import-component :importConfig="importConfig"></import-component>
          </el-form-item>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box"
                  row-key="id"
                  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                  default-expand-all
                  border :data="dataList">
          <el-table-column label="知识点" prop="knowledgePointName" inline  show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="label-name-check">{{scope.row.knowledgePointName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="编码" prop="knowledgePointCode" width="200" show-overflow-tooltip/>
          <el-table-column label="创建时间" prop="createTime" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" show-overflow-tooltip v-if="tableButtonType">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   v-if="scope.row.parentId == 0"
                   @click="tableButton(3,scope.row)"
                   v-hasPermiRouter="['exam:elKnowledgePoint:add']"
                >下级</p>
                <p class="table-button-p"
                   @click="tableButton(4,scope.row)"
                   v-hasPermiRouter="['exam:elKnowledgePoint:edit']"
                >编辑</p>
                <p class="table-button-p"
                   @click="tableButton(5,scope.row)"
                   v-hasPermiRouter="['exam:elKnowledgePoint:del']"
                >删除</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog class="savePending-dialog"
               :modal-append-to-body="false"
               :close-on-click-modal="false" :close-on-press-escape="false"
               :title="dialogTitle"
               :visible.sync="dialogType"
               v-if="dialogType"
               width="560px"
               append-to-body>
      <div style="min-height:60px;overflow: hidden">
        <div>
          <el-form :model="dialogData" ref="dialogForm" :rules="dialogRules">
            <el-form-item label="" prop="knowledgePointName" label-width="0">
              <el-input
                v-if="dialogStatus==1"
                maxLength="30"
                v-model="dialogData.knowledgePointName"
                placeholder="请输入知识点名称"
                style="width: 520px"
              />
              <el-input
                type="textarea"
                v-if="dialogStatus==2"
                :autosize="{ minRows: 10, maxRows: 10}"
                placeholder="请输入原因"
                maxLength="100"
                resize="none"
                style="width: 520px"
                v-model="dialogData.knowledgePointName">
              </el-input>
            </el-form-item>
            <div style="padding:0 20px;font-size:14px;line-height:30px;color:#999;">
              <p>知识点层级用”-"隔开，根知识点无需”-"，每行一个知识点，格式示例如下：</p>
              <p>通识安全</p>
              <p>-应急</p>
              <p>-其他</p>
            </div>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="dialogCancel">取消</p>
        <p class="dialog-footer-button-primary" @click="dialogSubmit">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import addPage from "./addPage.vue";
  import { examElKnowledgePointTreeList,examElKnowledgePointEdit,
    examElKnowledgePointAdd,examElKnowledgePointBatchAdd,examElKnowledgePointDel } from "@/api/safetyEducationExaminationNew/index";
  import importComponent from "@/components/importComponent/importComponent.vue";
  export default {
    name: 'index',
    components: {
      importComponent,
    },
    data () {
      return {
        tableButtonType:this.hasPermiDom(['exam:elKnowledgePoint:add','exam:elKnowledgePoint:edit','exam:elKnowledgePoint:del',]),
        //下拉列表数据
        options:[],
        cascaderProps: {
          checkStrictly: true, // 核心：允许选择任意一级
          lazy: true,
          lazyLoad: this.lazyLoad,
          value: 'id',
          label: 'knowledgePointName',
          emitPath: true // 保持默认，返回完整路径数组
        },
        //查询条件
        queryParams:{
          id:null,
        },
        //列表数据
        dataList:[],
        //组件传参
        importConfig:{
          upLoadApi:'/exam/elKnowledgePoint/importData',                //上传接口地址
          downloadApi:'/exam/elKnowledgePoint/importTemplate',          //下载模板接口地址
          downloadCustomKey:null,                                     //下载模板自定义参数KEY(非必填)
          downloadCustomValue:null,                                   //下载模板自定义参数VALUE(非必填)
          loseApi:'/exam/elKnowledgePoint/importErrorData',             //失败报表接口地址
          loseCustomKey:null,                                         //失败报表自定义参数KEY(非必填)
          loseCustomValue:null,                                       //失败报表自定义参数VALUE(非必填)
          fileName:'知识点导入模板',                                       //下载模板命名
        },
        // 弹窗相关
        dialogType:false,
        dialogStatus:1,
        dialogId:null,
        dialogTitle:'',
        dialogData: {
          knowledgePointName:'',
        },
        dialogRules:{
          knowledgePointName: [
            { required: true, message: "请输入知识点名称", trigger: "blur" }
          ],
        }
      }
    },
    created () {

    },
    mounted () {
      this.examElKnowledgePointTreeList();
      this.getList();
    },
    methods: {
      //查询按钮
      handleQuery(){
        this.getList();
      },
      //重置按钮
      resetQuery(){
        this.$set(this,'queryParams',{
          id:null,
        });
        this.getList();
      },
      //获取数据列表
      getList(){

        let obj = JSON.parse(JSON.stringify(this.queryParams))
        examElKnowledgePointTreeList(obj).then(response => {

          const list = response.data || [];
          this.formatTreeData(list);
          this.$set(this,'dataList',list);
        });
      },
      examElKnowledgePointTreeList(){
        examElKnowledgePointTreeList({}).then(response => {
          const list = response.data || [];
          this.formatTreeData(list);
          this.$set(this, 'options', list);
        });
      },
      //操作按钮
      tableButton(type,row){
        console.log('row',row)
        let self = this;
        if(type == 1){
          //添加
          this.$set(this.dialogData,'knowledgePointName','');
          this.$set(this,'dialogStatus','1');
          this.$set(this,'dialogId',null);
          this.$set(this,'dialogTitle','添加知识点');
          this.$set(this,'dialogType',true);
        }else if(type == 2){
          //批量添加
          this.$set(this.dialogData,'knowledgePointName','');
          this.$set(this,'dialogStatus','2');
          this.$set(this,'dialogTitle','批量添加知识点');
          this.$set(this,'dialogType',true);
        }else if(type == 3){
          //子项添加
          this.$set(this.dialogData,'knowledgePointName','');
          this.$set(this,'dialogStatus','1');
          this.$set(this,'dialogId',row.id);
          this.$set(this,'dialogTitle',row.knowledgePointName+' 下添加知识点');
          this.$set(this,'dialogType',true);
        }else if(type == 4){
          //编辑
          this.$set(this,'dialogData', {
            id:row.id,
            knowledgePointName:row.knowledgePointName,
          });
          this.$set(this,'dialogStatus','1');
          this.$set(this,'dialogTitle','编辑知识点');
          this.$set(this,'dialogType',true);
        }else if(type == 5){
          //删除
          this.$confirm('是否确认删除?', "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
            console.log(111)
            examElKnowledgePointDel({id:row.id}).then(response => {
              self.msgSuccess(response.message)
              self.getList();
            });
          }).catch(() => {});
        }else if(type == 6){
          //返回并刷新
          this.$set(this,'pageType',1);
          this.getList();
        }
      },
      //提交按钮
      dialogSubmit(){
        this.$refs["dialogForm"].validate(valid => {
          if (valid) {
            if(this.dialogData.id){
              //编辑
              this.examElKnowledgePointEdit();
            }else{
              //新增
              if(this.dialogStatus == 1){
                //单体添加
                if(this.dialogId){
                  //子级添加
                  this.examElKnowledgePointAdd(this.dialogId);
                }else {
                  //父级添加
                  this.examElKnowledgePointAdd();
                }
              }else if(this.dialogStatus == 2){
                //批量添加
                this.examElKnowledgePointBatchAdd();
              }
            }
          }
        })
      },
      //添加
      examElKnowledgePointAdd(parentId){
        let obj = {
          knowledgePointName:this.dialogData.knowledgePointName,
          parentId:parentId?parentId:'',
        };
        examElKnowledgePointAdd(obj).then( response => {
          this.msgSuccess(response.message);
          this.$set(this,'dialogType',false);
          this.resetQuery();
        });
      },
      //编辑
      examElKnowledgePointEdit(){
        let obj = {
          id:this.dialogData.id,
          knowledgePointName:this.dialogData.knowledgePointName,
        };
        examElKnowledgePointEdit(obj).then( response => {
          this.msgSuccess(response.message);
          this.$set(this,'dialogType',false);
          this.resetQuery();
        });
      },
      //编辑
      examElKnowledgePointBatchAdd(){
        let obj = {
          knowledgePointText:this.dialogData.knowledgePointName,
        };
        examElKnowledgePointBatchAdd(obj).then( response => {
          this.msgSuccess(response.message);
          this.$set(this,'dialogType',false);
          this.resetQuery();
        });
      },
      //关闭按钮
      dialogCancel(){
        this.$set(this,'dialogType',false);
      },
    },
  }
</script>
<style scoped lang="scss">
  .knowledgePointManagement{
    .knowledgePointManagementPage{
      ::v-deep .el-table__indent{
        padding:0!important;
      }
      ::v-deep .el-table_1_column_1 .cell{
        padding-left:60px;
      }
      ::v-deep .label-name-check{
        padding-left:60px;
      }
      ::v-deep .el-table__expand-icon{
        font-size: 28px;
        position: absolute;
        left: 24px;
      }
    }
  }
</style>
