<template>
  <app-dialog v-model="visible" :loading="dialogLoading" append-to-body class="detail-dialog" hide-footer
              title="字段选择" width="50%"
  >
    <div class="page-view flex-1 h-100">
      <!--      <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" label-width="100px"-->
      <!--                  @query="onQuery" @reset="onReset"-->
      <!--      >-->
      <!--        <app-filter-item :filter-config="{ operation: 'EQUAL' }" :span="10" el-type="input"-->
      <!--                         label="字段名"-->
      <!--        >-->
      <!--          <el-input v-model="filters.apiName" clearable placeholder="请输入"-->
      <!--                    @keyup.enter.native="$refs['app-filter'].query"-->
      <!--          />-->
      <!--        </app-filter-item>-->
      <!--      </app-filter>-->
      <!-- 列表组件 -->
      <div class="pa-11 bg-white h-100 flex-col border-radius-5">
        <el-table
          ref="htTable"
          :data="tableData"
          header-cell-class-name="done-header-row"
          row-class-name="done-row"
          size="medium"
          @row-click="rowClick"
        >
          <el-table-column align="center" label="字段中文名" show-overflow-tooltip>
            <template slot-scope="scope">
              <span> {{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="字段编码" show-overflow-tooltip>
            <template slot-scope="scope">
              <span> {{ scope.row.code }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="字段类别" show-overflow-tooltip>
            <template slot-scope="scope">
              <span> {{ fieldTypeChange(scope.row.fieldValueType) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="字段长度" show-overflow-tooltip>
            <template slot-scope="scope">
              <span> {{ scope.row.attrLength }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!--        <el-row justify="end" type="flex">-->
        <!--          <el-pagination-->
        <!--            :current-page="searchFrom.pageBean.page"-->
        <!--            :page-size="searchFrom.pageBean.pageSize"-->
        <!--            :page-sizes="[10, 20, 50, 100]"-->
        <!--            :total="total"-->
        <!--            layout="total, sizes, prev, pager, next, jumper"-->
        <!--            @size-change="handleSizeChange"-->
        <!--            @current-change="handleCurrentChange"-->
        <!--          />-->
        <!--        </el-row>-->
      </div>
    </div>
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import tableMixin from '@/mixins/table.js';
import { getDictionaryByCode } from '@/utils/dictionary.js';
import API from '@/api/business/dataODSCatalog';

export default {
  name: 'FieldList',
  mixins: [dialogMixin, tableMixin],
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      dialogLoading: false,
      total: 0,
      tableData: [],
      searchFrom: {
        'querys': [
          {
            'group': 'quick',
            'operation': 'LIKE',
            'relation': 'OR',
            'value': '',
            'property': 'name',
          },
        ],
        'pageBean': {
          'page': 1,
          'pageSize': 10,
        },
        'sorter': [],
      },
    };
  },
  computed: {},
  mounted() {
    this.getFieldsByTable();
  },
  methods: {
    getDictionaryByCode,
    fieldTypeChange(type) {
      const data = getDictionaryByCode('zdzlb');
      return data.filter(item => item.value === type)[0].name;
    },
    async getFieldsByTable() {
      this.dialogLoading = true;
      try {
        const { fieldList } = await API.getFieldsList(this.data.id);
        if (fieldList && fieldList.length) {
          this.tableData = fieldList.filter(item => item.fieldType === '2');
        }
      } catch (err) {
        this.$message.warning(err || '资源项字段查询失败！');
      } finally {
        this.dialogLoading = false;
      }
    },
    rowClick(data) {
      this.visible = false;
      this.$emit('confirm', data, this.data);
    },
    // handleSizeChange: function(size) {
    // },
    // handleCurrentChange() {
    // },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .gz-dialog .app-dialog-content {
  padding: 0 !important;
}

::v-deep .el-table__body-wrapper {
  overflow-y: auto;
  height: calc(100% - 55px);
}
</style>
