<template>
  <div>
    <FormSearch
      :form-arr="formArr"
      :form-data="formData"
      @outOperation="outOperation"
      @searchSubmit="searchSubmit"
      @input="handleInput"
      @reset="resetForm"
    />
    <div class="tableBox">
      <PublicTable
        ref="table"
        class="table"
        row-key="id"
        :loading="loading"
        :has-index="true"
        :need-select="true"
        :table-data="tableData"
        :table-info="tableInfo"
        :table-column="columns"
        :events="events"
        operation-width="150px"
        :btn-button="operations"
        :table-top-button="tableTopButton"
        :operation-fixed="true"
        :is-need-pagination="true"
        :current-page="searchParams.pageNum"
        :page-size="searchParams.pageSize"
        :total="total"
        :operated-string="operatedString"
        :is-need-customcolumn="false"
        :has-operation="false"
        @sizeChange="handleSizeChange"
        @currentChange="handleCurrentChange"
        @customColumnChange="handleCustomColumnChange"
        @handleTableTopColumnIconClick="handleTableTopColumnIconClick"
        @handleSelectionChange="(val)=> currentSelect = val"
      />
    </div>
    <NewDialog
      :text="'新增'"
      :width="'30%'"
      :form-arr="dialogFormArr"
      :form-data="dialogFormData"
      :dialog-visible="visible"
      @onSubmit="handleSubmit"
      @onClose="handleClose"
    />
  </div>
</template>

<script>
import FormSearch from '../../../components/formSearch/index.vue';
import PublicTable from '../../../components/table/index.vue';
import NewDialog from '../mdsRating/dialogWithForm.vue';
import { TYPE, TYPE_NAME } from '../mdsRating/constants/index';

// 不同数据类型对应不同标的

export default {
  components: {
    FormSearch,
    PublicTable,
    NewDialog,
  },
  data() {
    return {
      formArr: [
        {
          type: 'selectApi',
          prop: 'selectApi1',
          span: 6,
          options: [],
          attrs: {
            label: '数据集',
          },
        },
        {
          type: 'selectApi',
          prop: 'selectApi2',
          span: 6,
          options: [],
          attrs: {
            label: '数据类型',
          },
        },
      ],
      // 默认值
      formData: {},
      // 获取列表前是否loading加载
      loading: false,
      // table数据源
      tableData: [
        {
          historyKey: 'mdsDataRicSetService-82186815',
          historyType: 'mdsDataRicSetService',
          id: '82186815',
          dataSetCode: 'DayEnd',
          itemCode: 'AGX_OnShore',
          isCalculation: null,
          dataSourceCode: 'BLOOMBERG',
          underlying: 'AGX',
          dataType: 'CURVE',
          tenor: 'TN,SW',
          symbol: '',
          ricCode: null,
          timeStamp: '2024-06-04 19:27:35',
          primaryId: '44555891',
          dataTypeName: '收益率曲线',
        },
      ],
      // 表格项绑定的属性
      columns: [
        {
          prop: 'dataTypeName',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.dataTypeName'),
        },
        {
          prop: 'itemCode',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.itemCode'),
        },
        {
          prop: 'tenor',
          minWidth: '200px',
          align: 'center',
          label: this.$t('field.tenor'),
        },
        {
          prop: 'dataSourceCode',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.dataSourceCode'),
        },
      ],
      // 表格行单机双击事件
      events: {
        'row-dblclick': (row) => {
          // 双击表格 行 触发的函数
          console.log('row-dblclick', row);
        },
        'row-click': (row) => {
          // 单机表格 行 触发的函数
          console.log('row-click', row);
        },
      },
      tableTopButton: [
        {
          text: this.$t('button.add'),
          type: 'primary',
          class: 'el-text-color',
          callback: (value) => {
            this.handletableTopButton(value, TYPE.ADD);
          },
        },
        {
          text: this.$t('button.edit'),
          type: 'primary',
          class: 'el-text-color',
          callback: (value) => {
            this.handletableTopButton(value, TYPE.EDIT);
          },
        },
        {
          text: this.$t('button.delete'),
          type: 'primary',
          class: 'el-text-color',
          callback: (value) => {
            this.handletableTopButton(value, TYPE.DELETE);
          },
        },
        {
          text: this.$t('button.copy'),
          type: 'primary',
          class: 'el-text-color',
          callback: (value) => {
            this.handletableTopButton(value, TYPE.COPY);
          },
        },
      ],
      // 搜索查询的参数
      searchParams: {
        pageNum: 1,
        pageSize: 20,
      },
      total: 100,
      operatedString: '',
      componentsPropName: null,
      currentSelect: [],
      visible: false,
      dialogFormArr: [
        {
          type: 'select',
          prop: 'dataSetCode',
          span: 24,
          options: [],
          attrs: {
            label: '数据集名称',
          },
        },
        {
          type: 'select',
          prop: 'dataType',
          span: 24,
          options: [],
          attrs: {
            label: '数据类型',
          },
        },
        {
          type: 'select',
          prop: 'ratingAgencyCode',
          span: 24,
          options: [],
          attrs: {
            label: '标的',
          },
        },
        {
          type: 'select',
          prop: 'ratingCode',
          span: 24,
          options: [],
          attrs: {
            label: '期限',
          },
        },
        {
          type: 'checkbox',
          prop: 'isCalculation',
          span: 24,
          options: [
            {
              label: '是',
              value: true,
            },
          ],
          attrs: {
            label: '是否套算',
          },
        },
        {
          type: 'select',
          prop: 'dataSourceCode',
          span: 24,
          options: [],
          attrs: {
            label: '数据源',
          },
        },
      ],
      dialogFormData: null,
      dataSource: [], // 数据源数组
    };
  },

  async mounted() {
    this.queryMsdFindAllDataSet();
    this.queryComboxDataAction();
    this.queryFindAllDataSource();
  },
  methods: {
    async handleInput(val) {
      console.log(val);
      return;
    },
    searchSubmit(val) {
      console.log('search结果', val);
    },
    resetForm() {
      this.formData = {};
    },
    outOperation(val, index, prop, num) {
      console.log(val, index, prop, num);
      this.componentsPropName = prop;
    },
    // 页面展示条数改变事件-pageSize
    handleSizeChange(pageSize) {
      this.searchParams.pageSize = pageSize;
    },
    // 页面切换事件-pageNum
    handleCurrentChange(pageNum) {
      // console.log('');
      this.searchParams.pageNum = pageNum;
    },
    handleAddOrEdit(type, row) {
      // console.log('新增编辑',type, row);
    },
    // 数据列确定修改事件
    handleCustomColumnChange(val) {
      // console.log('数据列确定修改事件',val);
      // this.tableData = mockData2;
    },
    // 导入按钮点击事件
    handleDataImport() { },
    // 导出按钮点击事件
    handleDataExport() { },
    // 点击当前列前的图标事件
    handleTableTopColumnIconClick(val) {
      this.operatedString = '我是计算了之后的字符串';
      console.log('当前列 ', val);
    },
    // 多选事件
    handleSelectionChange(val) {
      console.log('多选事件 ', val);
      this.currentSelect = val;
    },
    // 自定义按钮 点击事件
    handletableTopButton(val, type) {
      console.log('自定义按钮', val, type);
      if (type === 'add') {
        this.dialogFormData = {
          targetType: null,
          targetCode: null,
          ratingAgencyCode: null,
          ratingCode: null,
          ratingDate: new Date(),
        };
        this.visible = true;
        return;
      }
      if ([TYPE.EDIT, TYPE.COPY].includes(type)) {
        if (this.currentSelect.length > 1) {
          this.$message.error('至多选择一条');
          return;
        }
        if (this.currentSelect.length < 1) {
          this.$message.error('至少选择一条');
          return;
        }
        const { targetType, targetCode, ratingAgencyCode, ratingCode, ratingDate } = this.currentSelect[0];
        this.dialogFormData = {
          targetType,
          targetCode,
          ratingAgencyCode,
          ratingCode,
          ratingDate,
        };
        this.visible = true;
        this.text = TYPE_NAME[type];
        return;
      }
      if (type === TYPE.DELETE) {
        if (this.currentSelect.length < 1) {
          this.$message.error('至少选择一条');
          return;
        }
      }
      return;
    },

    /** table列表 */
    async queryPage() {
      const params = {
        queryParam: {
          datasetCode: '',
          dataType: '',
          pageStart: this.searchParams.pageNum,
          pageLimit: this.searchParams.pageSize,
        },
      };
      const res = await this.$apis.msdBaseQueryPage(params);
      if (res.success) {
        this.tableData = res.data.result.datals;
        this.total = res.data.result.total;
        this.$message.success('请求成功');
      }
    },

    /** 数据集 */
    async queryMsdFindAllDataSet() {
      const res = await this.$apis.msdFindAllDataSet();
      if (res.success) {
        const { dataSet } = res.data;
        const arr = dataSet.map(item => ({ label: item.datasetName, value: item.datasetCode }));
        this.formArr[0].options = arr;
        this.dialogFormArr[0].options = arr;
        this.$message.success('请求成功');
      }
    },

    /** 数据类型 */
    async queryComboxDataAction() {
      const params = 'DataType,static_allPairs';
      const res = await this.$apis.msdQueryComboxDataAction(params);
      if (res.success) {
        const { result: { DataType, allPairs }} = res.data;
        const arr = DataType.map(item => ({ label: item.text, value: item.value }));
        this.formArr[1].options = arr;
        this.dialogFormArr[1].options = arr;
        this.dialogFormArr[2].options = allPairs.map(item => ({ label: item.text, value: item.value }));
        this.$message.success('请求成功');
      }
    },

    /** 数据源 */
    async queryFindAllDataSource() {
      const res = await this.$apis.mdsFindAllDataSource();
      if (res.success) {
        const { dataSource = [] } = res.data;
        const arr = dataSource.map(item => ({ label: item.datasourceName, value: item.datasourceCode }));
        this.dataSource = arr;
        this.dialogFormArr[5].options = arr;
        this.$message.success('请求成功');
      }
    },

    handleSubmit(val) {
      this.visible = false;
      console.log('submitVal', val);
    },
    handleClose() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped></style>
