<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader :title="$route.meta.title" :content="$route.meta.description" hidden-breadcrumb />
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <view-table ref="table" view-code="Entity" :filter="filter">
        <template #command="{ row }">
          <Button size="small" :title="$t('Front_Btn_Extend_Column')" type="primary" custom-icon="fa fa-bars" @click="$refs.columnTable.open({ modelName: row.name })"></Button>
        </template>
      </view-table>
    </Card>
    <modal-table ref="columnTable" view-code="ExtendColumn" @create="param => $refs.columnForm.openDefault(param)" @edit="({ row, index }) => $refs.columnForm.open(row)">
      <template #command="{ row }">
        <Button size="small" :title="$t('Front_Btn_Remove')" type="warning" custom-icon="fa fa-trash-alt" @click="remove(row)"></Button>
      </template>
    </modal-table>
    <modal-form ref="columnForm" view-code="ExtendColumnEdit" @on-change="formChange" @on-after-save="$refs.columnTable.loadData()" />
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import modelApi from '../../api/model';

  export default {
    name: 'system-extendColumn',
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        filter: {}
      };
    },
    computed: {},
    created() {},
    methods: {
      formChange() {
        const data = this.$refs.columnForm.data;
        const columns = this.$refs.columnForm.columns;

        const columnPropertyName = columns.find(item => {
          return item.code === 'propertyName';
        });
        const columnDataType = columns.find(item => {
          return item.code === 'dataType';
        });
        const columnSize = columns.find(item => {
          return item.code === 'size';
        });
        const columnFkModel = columns.find(item => {
          return item.code === 'fkModel';
        });

        if (data.dataType === 'String') {
          // 字符串
          columnSize.isShow = true;
          columnSize.name = this.$t('Front_Label_Length');
          columnFkModel.isShow = false;
        } else if (data.dataType === 'Decimal') {
          // 小数
          columnSize.isShow = true;
          columnSize.name = this.$t('Front_Label_Decimal_Digit');
          columnFkModel.isShow = false;
        } else if (data.dataType === 'ID') {
          // 唯一键
          columnSize.isShow = false;
          columnFkModel.isShow = true;
        } else {
          columnSize.isShow = false;
          columnFkModel.isShow = false;
        }

        if (data.id != null) {
          // 不能修改数据类型、外键表名
          columnPropertyName.readonly = true;
          columnDataType.readonly = true;
          columnFkModel.readonly = true;
        } else {
          columnPropertyName.readonly = false;
          columnDataType.readonly = false;
          columnFkModel.readonly = false;
        }

        //this.$refs.columnForm.forceUpdate();
      },
      remove(row) {
        this.confirm('Front_Msg_Sure_To_Delete_Item', () => {
          this.confirm('Front_Msg_Sure_To_Delete_Column', async () => {
            await modelApi.remove('ExtendColumn', row.id);

            this.success('Front_Msg_Success', () => {
              this.$refs.columnTable.loadData();
            });
          });
        });
      }
    }
  };
</script>
