<template>
  <div class="pomentWrap">
    <el-row :gutter="5" type="flex" justify="space-around">
      <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="4">
        <el-row class="topBar">
          <el-col>
            <el-form :inline="true">
              <el-form-item>
                <el-button plain type="primary" @click="addFun()">
                  <i class="el-icon-plus"></i> 新增子级
                </el-button>
              </el-form-item>
              <el-form-item>
                <el-button plain type="danger" @click="delFun()">
                  <i class="el-icon-delete"></i> 删除
                </el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-tree
          :data="treeData"
          :props="treeProps"
          ref="Tree"
          node-key="id"
          :highlight-current="true"
          default-expand-all
          @node-click="nodeClick"
        >
          <template slot-scope="{node, data}">
            <span>
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="'#' + iconArrClass[Number(data.type) - 1]" />
              </svg>
              {{node.label}}
            </span>
          </template>
        </el-tree>
      </el-col>
      <el-col :xs="12" :sm="12" :md="20" :lg="18" :xl="20" class="topBar">
        <div class="formBoxK">
          <div class="tit">
            <i class="el-icon el-icon-edit"></i>
            字典{{title}}
          </div>
          <el-form ref="editForm" :model="editForm" :rules="rules" label-width="5em">
            <el-form-item label="字典码" prop="type">
              <el-radio-group v-model="editForm.type">
                <el-radio :label="'1'">目录节点</el-radio>
                <el-radio :label="'2'">数据字典值</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input v-model="editForm.name"></el-input>
            </el-form-item>
            <el-form-item label="代码" prop="code">
              <el-input v-model="editForm.code"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description">
              <el-input v-model="editForm.description" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="editForm.remarks" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input v-model="editForm.sort" type="number"></el-input>
            </el-form-item>
            <div class="cent">
              <el-button type="success" @click="confirmFun('editForm')" v-if="title != ''">确定{{title}}</el-button>
              <el-button @click="cancelAdd()" v-if="title == '新增'">取消新增</el-button>
            </div>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import METHOD from "@/utils/methods";
@Component({
  components: {}
})
export default class SystemCode extends Vue {
  //编辑
  @Provide() editForm: any = {};
  @Provide() rules: any = {
    name: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    code: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    type: [{ required: true, trigger: "blur", message: "该项为必填项！" }]
  };
  @Provide() title: string = "";
  /*
  树 
  */
  @Provide() iconArrClass: any = ["icon-bumenqun", "icon-bumen1"];
  @Provide() treeData: any = [];
  @Provide() treeProps: Object = {
    children: "childList",
    label: "name"
  };
  @Provide() treeCheckedObj: any = { id: "" };
  getTreeData() {
    let that = this;
    METHOD.axiosGet(that, `/systemConfig/getSystemCodeTree`, function(
      res: any
    ) {
      if (res.code == 0) {
        let arr = [];
        arr.push(res.data);
        that.treeData = [...arr];
      }
    });
  }

  addFun() {
    let that = this;
    if (!that.treeCheckedObj.id) {
      that.$message.warning("请选择父级节点！");
      return;
    }
    if (that.treeCheckedObj.type == 2) {
      that.$message.warning("类型“数据字典值”下面无法新增子级！");
      return;
    }
    that.title = "新增";
    that.editForm = {};
    that.editForm.parentId = that.treeCheckedObj.id;
  }
  delFun() {
    let that = this;
    if (!that.treeCheckedObj.id) {
      that.$message.warning("请选择要删除的节点！");
      return;
    }
    if ( that.treeCheckedObj.id == 0 ) {
      that.$message.warning("顶级节点不可删除！");
      return;
    }
    METHOD.deleteFun(
      that,
      `/systemConfig/delSystemCodeById/${that.treeCheckedObj.id}`,
      function() {
        that.getTreeData();
        that.initPage();
      }
    );
  }
  nodeClick(data: any, node: any, target: any) {
    let that = this;
    that.treeCheckedObj = node.data;
    that.editForm = Object.assign({}, that.treeCheckedObj);
    that.title = "编辑";
  }
  confirmFun(formName: any) {
    let that = this,
      param = Object.assign({}, that.editForm);
    (that as any).$refs[formName].validate((valid: boolean) => {
      if (valid) {
        METHOD.axiosPost(
          that,
          `/systemConfig/addOrEditSystemCode`,
          param,
          function(res: any) {
            if (res.code == 0) {
              (that as any).$emit("dialogFun");
              (that as any).$message({
                message: "操作成功！",
                type: "success"
              });
              that.getTreeData(); //刷新树
              that.initPage();
            }
          }
        );
      } else {
        return false;
      }
    });
  }
  initPage() {//页面初始状态
    let that = this;
    that.editForm = {};
    that.title = "";
    that.treeCheckedObj = [];
  }
  cancelAdd() {
    this.title = "编辑";
    this.editForm = Object.assign({}, this.treeCheckedObj);
  }
  created() {
    let that = this;
    that.getTreeData();
  }
}
</script>
<style lang="scss">
@import "@/utils/public.scss";

</style>