<template>

  <a-form :inline="true" :model="tableInfos" :rules="rules" ref="genInfoForm" :label-col="{span: 4}"
    :wrapper-col="{span:18}">
    <a-row :gutter="[24, 24]">
      <a-col :span="24">
        <div class="drawing-board">
          <a-col :span="12">
            <a-form-item label="生成模板" name="tplCategory">
              <a-select v-model:value="tableInfos.tplCategory" @change="tplSelectChange">
                <a-select-option label="单表（增删改查）" value="crud">单表（增删改查</a-select-option>
                <a-select-option label="树表（增删改查）" value="tree">树表（增删改查）</a-select-option>
                <a-select-option label="主子表（增删改查）" value="sub">主子表（增删改查）</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="生成包路径" name="packageName">
              <a-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
                <i class="a-icon-question"></i>
              </a-tooltip>
              <a-input :maxlength="20" placeholder="请输入" show-word-limit v-model:value="tableInfos.packageName">
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="生成模块名" name="moduleName">

              <a-tooltip content="可理解为子系统名，例如 system" placement="top">
                <i class="a-icon-question"></i>
              </a-tooltip>
              <a-input placeholder="请输入" v-model:value="tableInfos.moduleName" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="生成业务名" name="businessName">
              <a-tooltip content="可理解为功能英文名，例如 user" placement="top">
                <i class="el-icon-question"></i>
              </a-tooltip>
              <a-input placeholder="请输入" v-model:value="tableInfos.businessName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="生成功能名" name="functionName">
              <a-tooltip content="用作类描述，例如 用户" placement="top">
                <i class="el-icon-question"></i>
              </a-tooltip>
              <a-input placeholder="请输入" v-model:value="tableInfos.functionName"></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="生成代码方式" name="genType">
              <a-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
                <i class="el-icon-question"></i>
              </a-tooltip>
              <a-radio-group name="radioGroup" v-model:value="tableInfos.genType">
                <a-radio value="0">zip压缩包</a-radio>
                <a-radio value="1">自定义路径</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="24" v-show="tableInfos.genType=='1'">
            <a-form-item label="自定义路径" name="genPath" :label-col="{span: 2}" :wrapper-col="{span:22}"
              style="overflow: hidden;">
              <div style="float: left; width: 700px;">
                <a-input v-model:value="tableInfos.genPath">
                </a-input>
              </div>
              <a-select v-model:value="Path" style="float: left;width: 180px;">
                <a-select-option label="最近路径快速选择" value="0">最近路径快速选择</a-select-option>
                <a-select-option label="恢复默认的生成基础路径" @click.native="tableInfos.genPath = '/'" value="1">恢复默认的生成基础路径
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="[24, 24]" v-show="tableInfos.tplCategory == 'tree'">
      <a-col :span="24">
        <h4 class="form-header">其他信息</h4>
        <a-divider style="height: 1px; background-color:#ccc;margin:0" />
        <div class="drawing-board">
          <a-col :span="12">
            <a-form-item label="生成模板">
              <a-select v-model:value="tableInfos.treeCode" placeholder="请选择">
                <a-select-option v-for="(item,index) in tableField" :key="index" :value="item.columnName">
                  {{item.columnName + '：' + item.columnComment}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="树父编码字段">
              <a-select v-model:value="tableInfos.treeParentCode" placeholder="请选择">
                <a-select-option v-for="(item,index) in tableField" :key="index" :value="item.columnName">
                  {{item.columnName + '：' + item.columnComment}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="树名称字段">
              <a-select v-model:value="tableInfos.treeName" placeholder="请选择">
                <a-select-option v-for="(item,index) in tableField" :key="index" :value="item.columnName">
                  {{item.columnName + '：' + item.columnComment}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="[24, 24]" v-show="tableInfos.tplCategory == 'sub'">
      <a-col :span="24">
        <h4 class="form-header">关联信息</h4>
        <a-divider style="height: 1px; background-color:#ccc;margin:0" />
        <div class="drawing-board">
          <a-col :span="12">
            <a-form-item label="关联子表的表名">
              <a-select v-model:value="tableInfos.subTableName" placeholder="请选择"
                @change="(value,option) => getSubTableName(value)">
                <a-select-option v-for="(item,index) in tables" :key="index" :value="item.tableName">
                  {{item.tableName+ '：' + item.tableComment}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="子表关联的外键名">
              <a-select v-model:value="tableInfos.subTableFkName" placeholder="请选择">
                <a-select-option v-for="(column, index) in subColumns" :key="index" :value="column.columnName">
                  {{column.columnName + '：' + column.columnComment}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </div>
      </a-col>
    </a-row>
  </a-form>
  <div class="submit t-c">
    <a-button type="primary" @click="submitForm()">保存生成信息</a-button>
  </div>
</template>
<script>
import { reactive, toRefs, watch, onMounted, inject, getCurrentInstance } from 'vue'
import { util } from '../../../entery'
export default {
  name: "BasicInfoForm",
  // components: { Treeselect },
  props: {
    open: {
      type: Boolean
    },
    tables: {
      type: Array
    },
    tableInfo: {
      type: Object
    },
    cloumns: {
      type: Array
    },

  },
  emits: ["reload"],
  setup (props, context) {
    let http = inject('http')
    let { proxy } = getCurrentInstance()
    let _data = reactive({
      value4: '最近路径快速选择',
      formData: {},
      genInfoForm: null,
      rolePermiss: null,
      tableField: [],
      tables: [],
      tableInfos: [],
      Path: '0',
      subColumns: [],
      tableName: '',
      optionData: {},
      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" }
        ],
      }
    })
    let _methods = {
      getSubTableName (value) {
        _data.tableName = value;
      },
      submitForm () {
        _data.genInfoForm.validate().then(() => {
          let item = {
            parentMenuId: _data.tableInfos.menuId,
            treeCode: _data.tableInfos.treeCode,
            treeName: _data.tableInfos.treeName,
            treeParentCode: _data.tableInfos.treeParentCode
          }
          let param = util.util.cloneObj(_data.tableInfos)
          param.params = item
          param.columns = []
          http.updateGenerate(param).then((res) => {
            context.emit('reload')
            proxy.$message.success('生成信息保存成功')
          })
        })
      },
      /** 设置关联外键 */
      setSubTableColumns (value) {
        for (var item in props.tables) {
          const name = props.tables[item].tableName;
          if (value === name) {
            _data.subColumns = props.tables[item].columns;
            break;
          }
        }
      },

      jsonChange () {
        if (_data.tableInfos.options) {
          _data.optionData = JSON.parse(_data.tableInfos.options)
        }
        if (!_data.optionData.parentMenuId) {
          _data.tableInfos.menuId = ''
        } else {
          _data.tableInfos.menuId = _data.optionData.parentMenuId
        }
        if (!_data.optionData.treeCode) {
          _data.tableInfos.treeCode = ''
        } else {
          _data.tableInfos.treeCode = _data.optionData.treeCode
        }
        if (!_data.optionData.treeName) {
          _data.tableInfos.treeName = ''
        } else {
          _data.tableInfos.treeName = _data.optionData.treeName
        }
        if (!_data.optionData.treeParentCode) {
          _data.tableInfos.treeParentCode = ''
        } else {
          _data.tableInfos.treeParentCode = _data.optionData.treeParentCode
        }
      },
      /** 选择生成模板触发 */
      tplSelectChange (value) {
        if (value !== 'sub') {
          props.tableInfo.subTableName = '';
          props.tableInfo.subTableFkName = '';
        }
      },
    }
    onMounted(() => {
      _data.tables = util.util.cloneObj(props.tables)
      _data.tableInfos = util.util.cloneObj(props.tableInfo)
      _methods.jsonChange();
      _data.tableField = util.util.cloneObj(props.cloumns);
    })
    watch(() => _data.tableName, (value) => {
      _methods.setSubTableColumns(value)
    })
    return {
      ...toRefs(_data),
      ..._methods,
    }
  },


};
</script>
