 <template>
  <a-table rowKey="columnId" :columns="tableColumns" :dataSource="tableDataList" :pagination="false" class="obit-atable"
    highlight-current-row style="width: 100%" :scroll="{x:'100%'}">
    <template #sort="{record,index}">
      {{index+1}}
    </template>
    <template #columnComment="{ record  }">
      <!-- {{record.columnComment}} -->
      <a-input v-model:value="record.columnComment"></a-input>
    </template>
    <template #javaType="{ record  }">
      <a-select v-model:value="record.javaType">
        <a-select-option label="Long" value="Long">Long</a-select-option>
        <a-select-option label="String" value="String">String</a-select-option>
        <a-select-option label="Integer" value="Integer">Integer</a-select-option>
        <a-select-option label="Double" value="Double">Double</a-select-option>
        <a-select-option label="BigDecimal" value="BigDecimal">BigDecimal</a-select-option>
        <a-select-option label="Date" value="Date">Date</a-select-option>
      </a-select>
    </template>
    <template #javaField="{ record  }">
      <a-input v-model:value="record.javaField"></a-input>
    </template>
    <template #isEdit="{ record  }">
      <!-- <a-checkbox true-label='1' v-model:checked="record.isEdit"></a-checkbox> -->
      <obit-checkbox v-model:value="record.isEdit">
      </obit-checkbox>
    </template>
    <template #isInsert="{ record  }">
      <obit-checkbox v-model:value="record.isInsert">
      </obit-checkbox>
    </template>
    <template #isList="{ record  }">
      <obit-checkbox v-model:value="record.isList">
      </obit-checkbox>
    </template>
    <template #isQuery="{ record  }">
      <obit-checkbox v-model:value="record.isQuery">
      </obit-checkbox>
    </template>
    <template #queryType="{ record  }">
      <a-select v-model:value="record.queryType" style="width: 100px;">
        <a-select-option label="=" value="EQ">=</a-select-option>
        <a-select-option label="!=" value="NE">!=</a-select-option>
        <a-select-option label=">" value="GT">&gt;</a-select-option>
        <a-select-option label=">=" value="GTE">&gt;=</a-select-option>
        <a-select-option label="<" value="LT"> &lt; </a-select-option>
        <a-select-option label="<=" value="LTE">&lt;=</a-select-option>
        <a-select-option label="LIKE" value="LIKE">LIKE</a-select-option>
        <a-select-option label="BETWEEN" value="BETWEEN">BETWEEN</a-select-option>
      </a-select>
    </template>
    <template #isRequired="{ record  }">
      <obit-checkbox v-model:value="record.isRequired">
      </obit-checkbox>
    </template>
    <template #htmlType="{ record  }">
      <obit-dict dictCode="code_html_type" type="select" placeholder="请选择" v-model:value="record.htmlType">
      </obit-dict>
    </template>
    <template #dictType="{ record }">
      <a-select v-model:value="record.dictType" clearable filterable placeholder="请选择" style="width: 100px;"
        v-if="record.htmlType=='select'||record.htmlType=='radio'">
        <a-select-option v-for="dict in dictOptions" :key="dict.dictType" :label="dict.dictName" :value="dict.dictType">
          <span style="float: left">{{ dict.dictName }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
        </a-select-option>
      </a-select>
    </template>
  </a-table>
  <div class="submit t-c">
    <a-button type="primary" @click="submitForm()">保存字段信息</a-button>
  </div>
</template>
    <script>
import { onMounted, reactive, ref, toRefs, watch, inject, getCurrentInstance } from 'vue'
import { util } from '../../../entery'

export default {

  name: "fieldInfoForm ",
  props: {
    detailsInfo: {
      type: Object,
    },
    cloumns: {
      type: Array
    }
  },
  emits: ["reload"],
  setup (props, context) {
    let http = inject('http')
    let { proxy } = getCurrentInstance()
    let _data = reactive({
      // 表信息
      tables: [],
      // 表列信息
      tableDataList: [],
      dictOptions: [],
      // 表详细信息
      info: {},
      tableColumns: [
        { slots: { customRender: 'sort' }, title: '序号', width: 60 },
        { dataIndex: 'columnName', title: '字段列名', width: 120 },
        { slots: { customRender: 'columnComment' }, title: '字段描述', width: 120 },
        { dataIndex: 'columnType', title: '物理类型', width: 120 },
        { slots: { customRender: 'javaType' }, title: 'java类型', width: 120 },
        { slots: { customRender: 'javaField' }, title: 'java属性', width: 120 },
        { slots: { customRender: 'isEdit' }, title: '插入', width: 80 },
        { slots: { customRender: 'isInsert' }, title: '编辑', width: 80 },
        { slots: { customRender: 'isList' }, title: '列表', width: 80 },
        { slots: { customRender: 'isQuery' }, title: '查询', width: 80 },
        { slots: { customRender: 'queryType' }, title: '查询方式', width: 120 },
        { slots: { customRender: 'isRequired' }, title: '必填', width: 80 },
        { slots: { customRender: 'htmlType' }, title: '显示类型', width: 120 },
        { slots: { customRender: 'dictType' }, title: '字典类型', width: 120 },
      ],
    })
    let _methods = {
      submitForm () {
        let param = util.util.cloneObj(_data.tableDataList)
        http.updatField(param).then((res) => {
          context.emit('reload')
          proxy.$message.success('字段信息保存成功')
        })
      },
      getDictOptionselect () {
        http.optionselect().then(res => {
          let datas = util.util.cloneObj(res)
          _data.dictOptions = datas
        })
      },
    }
    onMounted(() => {
      _data.tableDataList = util.util.cloneObj(props.cloumns);
      _methods.getDictOptionselect();
    })
    return {
      ...toRefs(_data),
      ..._methods
    }
  },

};
</script>