<template>
  <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="200px">
    <el-row>
      <el-col :span="12">
        <el-form-item prop="tplCategory">
          <span slot="label">生成模板</span>
          <el-select v-model="info.tplCategory" @change="tplSelectChange">
            <el-option label="单表（crud）" value="crud" />
            <el-option label="树表（crud）" value="tree" />
            <el-option label="主子表（一对一）" value="subone" />
            <el-option label="主子表（一对多）" value="sub" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="cacheServiceType">
          <span slot="label">缓存服务方式</span>
          <el-select v-model="info.cacheServiceType">
            <el-option
              v-for="(label, value) in dict.cacheServiceType"
              :key="value"
              :label="label"
              :value="value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="cacheServiceType">
          <span slot="label">分表方式</span>
          <el-select v-model="info.dividedTableType">
            <el-option
              v-for="(label, value) in dict.dividedTableType"
              :key="value"
              :label="label"
              :value="value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="genFeign">
          <span slot="label">是否生成Feign</span>
             <el-select v-model="info.genFeign">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
      </el-col>

      <!-- <el-col :span="12">
        <el-form-item prop="feignAppName">
          <span slot="label">
            feign应用工程名
            <el-tooltip
              content="生成feign接口，消费应用工程名称如（workflow-platform）"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.feignAppName" />
        </el-form-item>
      </el-col> -->

      <!-- <el-col :span="12">
        <el-form-item prop="genApi">
          <span slot="label">是否生成对外api</span>
          <el-select v-model="info.genApi">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
      </el-col> -->

      <el-col :span="12">
        <el-form-item prop="isGenExport">
          <span slot="label"
            >是否生成导入导出
            <el-tooltip content="生成前端导入导出功能" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
           <el-select v-model="info.isGenExport">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>

        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="isShowControl">
          <span slot="label"
            >request Mapping方式
            <el-tooltip
              content="是否显示的生成Controller Mapping"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>

          <el-select v-model="info.isShowControl">
             <el-option label="RequestForm" value="0" />
            <el-option label="RequestJsonBody" value="2" />
          </el-select>

        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="detailShow">
          <span slot="label"
            >详细页面生成方式
            <el-tooltip
              content="生成vue详细页面"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>

          <el-select v-model="info.detailShow">
             <el-option label="独立页面" value="0" />

            <el-option label="弹出窗口" value="1" />

            <el-option label="抽屉" value="2" />
          </el-select>

        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="packageName">
          <span slot="label">
            生成包路径
            <el-tooltip
              content="生成在哪个java包下，例如 com.mortals.xhx.module"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.packageName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="moduleName">
          <span slot="label">
            生成模块名
            <el-tooltip content="可理解为子系统名，例如 system" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.moduleName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="businessName">
          <span slot="label">
            生成业务名
            <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.businessName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="functionName">
          <span slot="label">
            生成功能名
            <el-tooltip content="用作类描述，例如 用户" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.functionName" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-show="info.tplCategory == 'tree'">
      <h4 class="form-header">其他信息</h4>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            树编码字段
            <el-tooltip
              content="树显示的编码字段名， 如：id"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeCode" placeholder="请选择">
            <el-option
                style="width:300px"
              v-for="(column, index) in subColumns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            树父编码字段
            <el-tooltip
              content="树显示的父编码字段名， 如：parentId"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeParentCode" placeholder="请选择">
            <el-option style="width:300px"
                       v-for="(column, index) in subColumns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            树名称字段
            <el-tooltip
              content="树节点的显示名称字段名， 如：name"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeName" placeholder="请选择">
            <el-option
                style="width:300px"
              v-for="(column, index) in subColumns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-show="info.tplCategory == 'sub' || info.tplCategory == 'subone'">
      <h4 class="form-header">关联信息</h4>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            关联子表的表名
            <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select
            v-model="info.subTableName"
            placeholder="请选择关联的子表"
            style="width: 100%"
            @change="subSelectChange"
          >
            <el-option
              v-for="(table, index) in tables"
              :key="index"
              :label="table.tableName + '：' + table.tableComment"
              :value="table.tableName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            子表关联主表的外键名
            <el-tooltip
              content="子表关联主表的外键名, 如：user_id"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select
            v-model="info.subTableFkName"
            @change="$forceUpdate()"
            style="width: 100%"
            placeholder="请选择关联的子表外键名"
          >
            <el-option
              v-for="(column, index) in subColumns"
              :key="index"
              :label="column.columnName + ':' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-for="(index) in 3" :key="index" v-show="info.tplCategory == 'sub' || info.tplCategory == 'subone'">
      <h4 class="form-header">关联信息</h4>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            关联子表的表名
            <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select
              v-model="info['subTableName' + index]"
              placeholder="请选择关联的子表"
              style="width: 100%"
              @change="subSelectChange(index)"
          >
            <el-option
                v-for="(table, index) in tables"
                :key="index"
                :label="table.tableName + '：' + table.tableComment"
                :value="table.tableName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            子表关联主表的外键名
            <el-tooltip
                content="子表关联主表的外键名, 如：user_id"
                placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select
              v-model="info['subTableFkName' + index]"
              @change="$forceUpdate()"
              style="width: 100%"
              placeholder="请选择关联的子表外键名"
          >
            <el-option
                v-for="(column, index) in subColumns"
                :key="index"
                :label="column.columnName + ':' + column.columnComment"
                :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>


  </el-form>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "BasicInfoForm",
  components: { Treeselect },
  props: {
    info: {
      type: Object,
      default: null,
    },
    dict: {
      type: Object,
      default: {},
    },
    tables: {
      type: Array,
      default: null,
    },
    menus: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      subColumns: [],
      treeColums:[],
      rules: {
        tplCategory: [
          { required: true, message: "请选择生成模板", trigger: "blur" },
        ],
        packageName: [
          { required: true, message: "请输入生成包路径", trigger: "blur" },
        ],
        moduleName: [
          { required: true, message: "请输入生成模块名", trigger: "blur" },
        ],
        businessName: [
          { required: true, message: "请输入生成业务名", trigger: "blur" },
        ],
        functionName: [
          { required: true, message: "请输入生成功能名", trigger: "blur" },
        ],
      },
    };
  },
  created() {
  },
  watch: {
    "info.subTableName": function (val) {
      console.log("val", val);
      this.setSubTableColumns(val);
    },
  },
  methods: {
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children,
      };
    },
    /** 选择子表名触发 */
    subSelectChange(value) {
      console.log("value2", value);
      console.log("info", this.info);
      this.info['subTableFkName'+value] = "";
    },
    /** 选择生成模板触发 */
    tplSelectChange(value) {
      console.log("tplSelectChange value", value);

      if (value === "crud" || value === "tree") {

        console.log("树表",this.info)
        console.log(this.tables)
        this.info.subTableName = "";
        this.info.subTableFkName = "";
        this.setSubTableColumns(this.info.tableName)
      } else {
        console.log("主子表" + value);
      }
    },
    /** 设置关联外键 */
    setSubTableColumns(value) {
      console.log("setSubTableColumns", value);
      for (var item in this.tables) {
        const name = this.tables[item].tableName;
        if (value === name) {
          console.log("subColumns", this.subColumns);
          this.subColumns = this.tables[item].columns;
          console.log("aftersubColumns", this.subColumns);
          break;
        }
      }

    },
    subselect(val) {
      console.log("subselect", val);

      console.log("info", this.info.subTableFkName);
    },
  },
};
</script>