<template>
  <div class="fourth">
    <el-card>
      <el-form :model="formData" size="mini" inline label-width="120px">
        <el-form-item label="请选择模版：">
          <el-cascader ref="refSubCat" v-model="formData.value" placeholder="请选择" :options="componentList" :props="{
            value: 'id',
            label: 'className',
            children: 'tentityType',
            expandTrigger: 'hover',
          }" :show-all-levels="false" @change="changeComponent"></el-cascader>
        </el-form-item>
        <el-button :loading="btnloading" type="success" size="mini" @click="submitAll">保存</el-button>
      </el-form>

      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="输入界面" name="interface">
          <interface-box ref="interface" :worderAll="worderAll" :componentForm="componentForm"
            :interfaceFormList="interfaceFormList" :formData="formData" @submit="submit">
          </interface-box>
        </el-tab-pane>
        <el-tab-pane label="查询表格" name="second">
          <previewTable-box ref="table" :worderAll="worderAll" :tableShow="tableShow" align="center">
          </previewTable-box>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import interfaceBox from "./components/interface";
  import previewTableBox from "./components/previewTable";
  import {
    message
  } from "@/utils/common";
  import {
    getEntity,
    getPrimaryKey,
    sumbitNew,
    getContent,
  } from "@/api/system-management/templateSetting";
  export default {
    data() {
      return {
        btnloading: false,
        // 界面表单列表
        interfaceFormList: [],
        worderAll: [], //字段下拉框
        contenId: "",
        // 组件属性表单
        componentForm: {
          prop: "",
          name: "",
          width: "",
          type: "1",
          nameEn: "",
          note: "",
          require: false,
        },
        //回显数据集合
        getDataAll: [],
        formData: {
          value: "",
          label: "",
          entityLevel: "",
        },
        selectTable: [],
        activeName: "interface",
        tableShow: true,
      };
    },
    components: {
      interfaceBox,
      previewTableBox,
    },
    computed: {
      componentList: {
        get() {
          return this.$store.state.templateSetting.componentList;
        },
        set(val) {
          this.$store.state.templateSetting.componentList = val;
        },
      },
    },
    mounted() {
      this.getInitSelectList();
    },
    methods: {
      getInitSelectList() {
        this.$store.dispatch('templateSetting/getAllTentityTypeManyByClass').then(res => {
          this.componentList.map((item) => {
            if (item.tentityType.length > 0) {
              item.tentityType.map((a) => {
                a.className = a.entityName;
                if (a.childTentityType.length > 0) {
                  a.tentityType = a.childTentityType;
                  a.tentityType.map((b) => {
                    b.className = b.entityName;
                    if (b.childTentityType.length > 0) {
                      b.tentityType = b.childTentityType;
                    } else {
                      b.tentityType = undefined;
                    }
                  });
                } else {
                  a.tentityType = undefined;
                }
              });
            } else {
              item.tentityType = undefined;
            }
          });
        })
      },
      handleClick(tab, event) {},
      async changeComponent(val) {
        this.tableShow = false;
        this.selectTable = [];
        this.interfaceFormList = [];
        this.$refs.table.tableData = [];
        this.$refs.interface.criteria = [];
        this.worderAll = [];
        this.formData.label = this.$refs["refSubCat"].getCheckedNodes()[0].label;
        let data = {
          entityId: val.slice(-1)[0],
        };
        getEntity(data).then((res) => {
          if (res.success) {
            this.worderAll = res.body.tentityStructList;
            this.worderAll.forEach((item) => {
              this.$set(item, "width", "150");
              if (item.columnClass === 4) {
                this.$set(item, "type", "datetime");
              } else if (item.columnClass === 5) {
                this.$set(item, "type", "datetimerange");
              } else {
                if (item.columnInputType === "1") {
                  this.$set(item, "type", "input");
                }
                if (item.columnInputType === "2") {
                  this.$set(item, "type", "select");
                }
                if (item.columnInputType === "3") {
                  this.$set(item, "type", "text");
                }
              }
            });
            this.componentForm.porp = "";
            this.tableShow = true;
          }
        });

        let params = {
          id: val.slice(-1)[0],
        };
        getPrimaryKey(params).then((res) => {
          this.formData.entityLevel = res.body.tentityType.length ?
            res.body.tentityType.entityLevel :
            "";
        });
        getContent(data).then((res) => {
          if (res.code === "100") {
            if (res.body.list.length) {
              this.contenId = res.body.list[0].id;
              let data = res.body.list[0];
              JSON.parse(data.interfaceShow).forEach((item, index) => {
                let info = {
                  id: index + 1,
                  type: item.ctype,
                  label: item.label,
                  prop: item.pid,
                  NameEn: item.label,
                  value: item.value,
                  note: item.note,
                  nameEn: item.fieldName,
                  require: item.require,
                };
                if (item.width === 8) {
                  info.width = "30%";
                }
                if (item.width === 12) {
                  info.width = "50%";
                }
                if (item.width === 24) {
                  info.width = "100%";
                }
                this.interfaceFormList.push(info);
              });
              this.$refs.interface.rowDrop();
              if (JSON.parse(data.tableShow).length) {
                JSON.parse(data.tableShow).forEach((item, index) => {
                  this.$set(item, "id", index + 1);
                  this.worderAll.forEach((ele) => {
                    if (ele.columnName === item.columnName) {
                      this.$refs.table.$refs.listPowerSupplyTab.toggleRowSelection(
                        ele,
                        true
                      );
                    }
                  });
                });
                this.$refs.table.tableData = JSON.parse(data.tableShow);
                this.$refs.table.rowDrop();
              }
              if (JSON.parse(data.interfaceQuery).length) {
                JSON.parse(data.interfaceQuery).forEach((item) => {
                  this.$refs.interface.criteria.push(item.pid);
                });
              }
            } else {
              this.contenId = 0;
            }
          }
        });
        this.$forceUpdate();
      },
      submitAll() {
        this.$refs.interface.submit();
      },
      submit(val) {
        if (!this.$refs.table.tableData.length) {
          message("warning", "未设置查询表格", 2000);
          return;
        }
        val.id = this.contenId;
        let Alllength = this.$refs.table.tableData.reduce(
          (sum, e) => sum + Number(e.width),
          0
        );
        this.$refs.table.tableData.forEach((item) => {
          this.$set(item, "AllLength", Alllength);
        });
        val.tableShow = JSON.stringify(this.$refs.table.tableData);
        val.interfaceShow = JSON.stringify(val.interfaceShow);
        val.interfaceQuery = JSON.stringify(val.interfaceQuery);
        this.btnloading = true;
        sumbitNew(val).then((res) => {
          this.btnloading = false;
          if (res.code === "100") {
            message("success", "保存成功", 2000);
          }
        }).catch(err => {
          this.btnloading = false;
        })
      },
    },
    created() {
      this.getInitSelectList();
    },
  };

</script>

<style lang="scss" scoped>
  .fourth {
    width: 100%;

    .el-form {
      width: 100%;

      .el-form-item {
        width: 30%;
        text-align: left;
      }
    }

    .el-tabs {
      margin: 5px 10px;

      ::v-deep .el-tabs__content {
        background: #fff;
        padding: 8px;
      }
    }
  }

</style>
