<template>
  <div id="divCreGraphContainer">
    <el-dialog
      title="新建系统图"
      :visible="isVisible"
      :show-close="false"
      v-loading.fullscreen.lock="fullscreenLoading"
    >
      <div class="createConContainer">
        <div>系统图名称*</div>
        <div class="createCdCon">
          <el-input v-model="createGraphName" placeholder="请输入"></el-input>
        </div>

        <div class="createCdTitle">项目*</div>
        <div class="createCdCon">
          <el-select
            v-model="selProject"
            value-key="id"
            placeholder="请选择项目"
            @change="selProjectChange"
          >
            <el-option
              v-for="item in projects"
              :key="item.id"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>

        <div class="createCdTitle">系统实例*</div>
        <div class="createCdCon">
          <el-cascader
            placeholder="请选择系统图实例"
            :options="systemInsArr"
            :props="{ expandTrigger: 'hover' }"
            @change="instanceChange"
            ref="instanceCascader"
          ></el-cascader>
        </div>

        <div class="createCdTitle">系统图模板*</div>
        <div class="createCdCon">
          <el-cascader
            placeholder="请选择系统图模板"
            :options="systemTemplateArr"
            :props="{ expandTrigger: 'hover' }"
            @change="templateChange"
            ref="sysTemplateCascader"
          ></el-cascader>
        </div>

        <div class="createFoot">
          <el-button @click="cancelCreate">取消</el-button>
          <el-button type="primary" @click="newOkEvent">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { sysGraphController } from "@/controller/sysGraphController";
import { logicConfig } from "@/logicConfig";
import { Message } from "element-ui";

export default {
  props: ["isVisible"],
  data() {
    return {
      fullscreenLoading: false,
      //系统图名称，用于新建时绑定输入框
      createGraphName: "",
      //选择的项目，用于新建时绑定选择框
      selProject: {},
      //系统实例列表
      systemInsArr: [],
      //选择的系统实例 {label:'',code:'',value:'即ID'}
      selSystemIns: {},
      //系统图模板列表
      systemTemplateArr: [],
      //选择的系统图模板 {label:'',code:'',value:'即ID'}
      selSystemTemplate: {},
      //选择的系统类型 {label:'',code:'',value:'即ID'}
      selSysType: {},
      //选择的系统图类型 {label:'',code:'',value:'即ID'}
      selSysGraphType: {},
    };
  },
  computed: {
    ...mapState(["projects"]),
  },
  methods: {
    //取消创建
    cancelCreate: function () {
      window.close();
    },
    //选择项目后要查询该项目下的专业、系统类型、系统实例
    selProjectChange: async function () {
      this.fullscreenLoading = true;
      this.systemInsArr = [];
      try {
        this.systemInsArr = await sysGraphController.getSysInstanceByProject(
          this.selProject.id,
          this.selProject.groupCode
        );
      } catch (error) {
        console.error(error);
      }
      this.fullscreenLoading = false;
    },
    //系统实例选择事件
    instanceChange: async function () {
      this.fullscreenLoading = true;
      try {
        //选择的系统实例节点
        var insNode = this.$refs.instanceCascader.getCheckedNodes()[0];
        //系统类型节点
        var typeNode = insNode.parent;

        this.selSystemIns = insNode.data;
        this.selSysType = typeNode.data;

        //查询系统类型下的系统模版
        var templateArr = await sysGraphController.getTemplateBySysTypeCode(
          this.selSysType.code
        );
        this.systemTemplateArr = templateArr;
      } catch (error) {
        console.error(error);
      }
      this.fullscreenLoading = false;
    },
    //模版选择事件
    templateChange: function () {
      //选择的系统图模板节点
      var templateNode = this.$refs.sysTemplateCascader.getCheckedNodes()[0];
      //系统图类型节点
      var graphTypeNode = templateNode.parent;

      this.selSystemTemplate = templateNode.data;
      this.selSysGraphType = graphTypeNode.data;
    },
    //新增按钮事件
    newOkEvent: async function () {
      this.fullscreenLoading = true;
      try {
        var _paramObj = {
          name: this.createGraphName,
          //系统图类型编码
          type: this.selSysGraphType.code,
          //模板ID
          templateId: this.selSystemTemplate.value,
          //系统类型编码
          system: this.selSysType.code,
          //系统实例ID
          systemId: this.selSystemIns.value,
          projectId: this.selProject.id,
          groupCode: this.selProject.groupCode,
        };

        //新增系统图
        var createResult = await sysGraphController.createSysGraph(_paramObj);
        switch (createResult.result) {
          case logicConfig.resultObj.failure:
            Message.error("新增失败，原因：" + createResult.reason);
            break;
          case logicConfig.resultObj.success:
            this.$emit("created", createResult.data);
            break;
        }
      } catch (error) {
        Message.error("新增失败，执行异常");
        console.error(error);
      }
      this.fullscreenLoading = false;
    },
  },
  created() {},

  mounted() {},
  components: {},
};
</script>

<style>
#divCreGraphContainer .createCdTitle {
  margin-top: 16px;
}

#divCreGraphContainer .createCdCon {
  margin-top: 8px;
  width: 360px;
}

#divCreGraphContainer .createCdCon .el-select {
  width: 100%;
}

#divCreGraphContainer .createConContainer {
  margin-left: 80px;
}

#divCreGraphContainer .createFoot {
  float: right;
  margin-right: 73px;
  margin-top: 80px;
}

#divCreGraphContainer .el-dialog {
  width: 560px;
  height: 520px;
}
</style>