<!-- 预置数据集 -->
<template>
  <div style="position: relative">
    <el-form
      ref="myDataSetPage"
      :model="myDataSetPage"
      label-width="75px"
      :size="defaultFormItemSize"
      label-position="right"
      @submit.native.prevent
    >
      <filter-box :item-width="350" @search="search()" @reset="onReset">
        <el-form-item label="标注类型" prop="formFilter.annotationType">
          <el-select
            v-model="myDataSetPage.formFilter.annotationType"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in myDataSetPage.annotationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务类型" prop="formFilter.annotationType">
          <el-select
            v-model="myDataSetPage.formFilter.annotationType"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in myDataSetPage.taskOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="领域类型" prop="formFilter.annotationType">
          <el-select
            v-model="myDataSetPage.formFilter.annotationType"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in myDataSetPage.territoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应用场景" prop="formFilter.annotationType">
          <el-select
            v-model="myDataSetPage.formFilter.annotationType"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in myDataSetPage.sceneOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="数据集名称或描述"
          prop="formFilter.dataName"
          label-width="125px"
        >
          <el-input
            class="filter-item"
            v-model="myDataSetPage.formFilter.dataName"
            :clearable="true"
            placeholder="数据集名称或描述"
          />
        </el-form-item>
      </filter-box>
    </el-form>
    <div :style="{ height: tableHeight ,background:'#fff'}" >
      <cardBox class="tableBox" :list="[1,2,3]" :refresh="refresh"></cardBox>
      <el-row slot="pagination" type="flex" justify="end" style="margin-top: 16px;">
        <el-pagination :total="myDataSetPage.tableData.impl.totalCount" :current-page="myDataSetPage.tableData.impl.currentPage" :page-size="myDataSetPage.tableData.impl.pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next, sizes" @current-change="myDataSetPage.tableData.impl.onCurrentPageChange" @size-change="myDataSetPage.tableData.impl.onPageSizeChange">
        </el-pagination>
      </el-row>
    </div>

  </div>
</template>

<script>
/* eslint-disable-next-line */
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
import { mapGetters } from 'vuex';
import cardBox from './cardBox';
import { ModelSquare } from '@/api/gptController.js';
export default {
  data () {
    return {
      myDataSetPage: {
        formFilter: {
          annotationType: undefined,
          dataName: undefined
        },
        annotationOptions: [
          {
            value: 'cexiangdaohang',
            label: '侧向导航'
          },
          {
            value: 'dingbudaohang',
            label: '顶部导航'
          }
        ],
        taskOptions: [
          {
            value: 'cexiangdaohang',
            label: '侧向导航'
          },
          {
            value: 'dingbudaohang',
            label: '顶部导航'
          }
        ],
        territoryOptions: [
          {
            value: 'cexiangdaohang',
            label: '侧向导航'
          },
          {
            value: 'dingbudaohang',
            label: '顶部导航'
          }
        ],
        sceneOptions: [
          {
            value: 'cexiangdaohang',
            label: '侧向导航'
          },
          {
            value: 'dingbudaohang',
            label: '顶部导航'
          }
        ],
        isInit: false,
        tableData: {
          impl: new TableWidget(this.getwidgetData, true, true, false, undefined, false)
        }
      },
      filterBoxheight: 0

    };
  },

  components: {cardBox},

  computed: {
    ...mapGetters(['getMainContextHeight']),
    tableHeight () {
      return this.getMainContextHeight - this.filterBoxheight - 32 + 'px';
    }
  },

  mounted () {
    this.filterBoxheight = this.$refs.myDataSetPage?.$el.clientHeight;
    window.addEventListener('resize', () => {
      this.filterBoxheight = this.$refs.myDataSetPage?.$el.clientHeight;
    });
    this.formInit()
  },

  methods: {
    getwidgetData (params) {
      if (params == null) params = {};
      params = {
        ...params

        // modelSquareDtoFilter: { ...this.myDataSetPage.formFilter }
      }

      return new Promise((resolve, reject) => {
        ModelSquare.list(this, params).then(res => {
          resolve({
            dataList: res.data.dataList,
            totalCount: res.data.totalCount
          });
        }).catch(e => {
          reject(e);
        });
      });
    },
    refresh (reloadData = false) {
      if (reloadData) {
        this.myDataSetPage.tableData.impl.refreshTable(true, 1);
      } else {
        this.myDataSetPage.tableData.impl.refreshTable();
      }
    },
    onReset () {
      this.$refs.myDataSetPage.resetFields();
      this.refresh(true);
    },
    formInit () {
      this.refresh();
    },

    search () {},
    handleChange () {}
  }
};
</script>
<style lang="scss" scoped>

.tableBox {
  background-color: white;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow: auto;
  align-content: flex-start;
  justify-content: space-between;
}

</style>
