<template>
  <div class="RCSbox">
    <OperateCard
      v-if="showOpCard"
      class="cleft"
      :icon-left-list="iconLeftList"
      :icon-right-list="iconRightList"
      :form-list="formList"
    />
    <div class="cright">
      <FormSearch
        :form-arr="formArr"
        :form-data="formData"
        @outOperation="outOperation"
        @searchSubmit="searchSubmit"
        @reset="resetForm"
      />
      <div class="tableBox">
        <PublicTable
          ref="table"
          class="table"
          row-key="id"
          :loading="loading"
          :has-index="false"
          :need-select="false"
          :table-data="tableData.slice((pageParams.pageNum-1)*pageParams.pageSize,pageParams.pageNum*pageParams.pageSize)"
          :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="pageParams.pageNum"
          :page-size="pageParams.pageSize"
          :total="pageParams.total"
          :operated-string="operatedString"
          :is-need-customcolumn="false"
          @sizeChange="handleSizeChange"
          @currentChange="handleCurrentChange"
          @customColumnChange="handleCustomColumnChange"
          @handleTableTopColumnIconClick="handleTableTopColumnIconClick"
          @handleSelectionChange="handleSelectionChange"
        />
      </div>
    </div>
    <HistoryVersion
      ref="historyVersion"
      :data-id="dataId"
      :selected-value="historySelectedValue"
      :visible.sync="historyVisible"
      @handleCancel="historyVisible = false"
    />
    <OperateDialog
      ref="operateDialog"
      :title="dialogTitle"
      :percent-width="30"
      :form-arr="modalFormList"
      :form-data="opDialogData"
      :visible.sync="dialogVisible"
      :loading="opDialogLoading"
      @handleCancel="dialogVisible = false"
      @dialogOK="getOpDialogForm"
    />
  </div>
</template>

<script>
import FormSearch from '../../../components/formSearch/index.vue';
import PublicTable from '../../../components/table/index.vue';
import OperateCard from '../../../components/operateCard/index.vue';
import OperateDialog from '../components/operateDialog.vue';
import HistoryVersion from '../../../components/historyVersion/index.vue';
import mockData from './mockData.js';
import mockData2 from './mockData2.js';
export default {
  components: {
    FormSearch,
    PublicTable,
    OperateCard,
    OperateDialog,
    HistoryVersion,
  },
  data() {
    return {
      formArr: [
        {
          // input: true,
          type: 'input',
          prop: 'input1',
          span: 6,
          attrs: {
            label: '关键字',
          },
        },
      ],
      // 默认值
      formData: {},
      // 获取列表前是否loading加载
      loading: false,
      // table数据源
      tableData: [],
      // 表格项绑定的属性
      columns: [
        {
          prop: 'code',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.code'),
        },
        {
          prop: 'localName',
          minWidth: '200px',
          align: 'center',
          label: this.$t('field.name'),
        },
        {
          prop: 'name',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.shortName'),
        },
        {
          prop: 'refDateName',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.refDateName'),
        },
        {
          prop: 'periodName',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.periodName'),
        },
        {
          prop: 'noPeriods',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.noPeriods'),
        },
        {
          prop: 'noDays',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.noDays'),
        },
        {
          prop: 'dayTypeName',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.dayTypeName'),
        },
      ],
      // 表格行单机双击事件
      events: {
        'row-dblclick': (row) => {
          // 双击表格 行 触发的函数
          // console.log('row-dblclick',row);
        },
        'row-click': (row) => {
          // 单机表格 行 触发的函数
          // console.log("row-click", row);
        },
      },
      // 操作栏自定义按钮
      operations: [
        {
          text: this.$t('button.edit'),
          type: 'text',
          class: 'el-text-color',
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
        {
          text: this.$t('button.delete'),
          type: 'text',
          class: 'el-text-color',
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
        {
          text: this.$t('field.history'),
          type: 'text',
          class: 'el-text-color',
          callback: (row) => {
            this.historyVersionOpen();
          },
        },
      ],
      tableTopButton: [
        {
          text: this.$t('button.add'),
          type: 'primary',
          class: 'el-text-color',
          callback: () => {
            this.handleAddOrEdit('add');
          },
        },
        {
          text: this.$t('button.tenorGrp'),
          type: 'primary',
          class: 'el-text-color',
          callback: () => {
            this.showOperate();
          },
        },
        {
          text: this.$t('button.export'),
          type: 'primary',
          class: 'el-text-color',
          callback: (value) => {
            this.handletableTopButton(value);
          },
        },
        {
          text: this.$t('button.import'),
          type: 'primary',
          class: 'el-text-color',
          callback: (value) => {
            this.handletableTopButton(value);
          },
        },
      ],
      // 左方操作列图标参数
      // 操作栏自定义按钮
      iconLeftList: [
        {
          text: this.$t('button.add'),
          type: 'el-icon-plus',
          callback: (row) => {
            this.handleAddOrEdit('add', row);
          },
        },
        {
          text: this.$t('button.edit'),
          type: 'el-icon-edit',
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
        {
          text: this.$t('button.delete'),
          type: 'el-icon-delete',
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
      ],
      iconRightList: [
        {
          type: 'el-icon-close',
          callback: () => {
            this.closeOperateCard();
          },
        },
      ],
      // 搜索查询的参数
      pageParams: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      formList: [
        {
          label: 'G7',
          value: 'test',
          chosen: false,
          callback: (index) => {
            this.getNodeInfo(index);
          },
        },
        {
          label: 'G6',
          value: 'test',
          chosen: false,
          callback: (index) => {
            this.getNodeInfo(index);
          },
        },
      ],
      modalFormList: [
        {
          type: 'input',
          prop: 'input1',
          attrs: {
            label: `${this.$t('field.code')}`,
            needStar: true,
            placeholder: '请填写',
          },
          rules: { required: true, message: '请输入文本' },
        },
        {
          type: 'input',
          prop: 'input2',
          attrs: {
            label: `${this.$t('field.shortName')}`,
            needStar: true,
            placeholder: '请填写',
          },
          rules: { required: true, message: '请输入文本' },
        },
        {
          type: 'input',
          prop: 'input3',
          attrs: {
            label: `${this.$t('field.name')}`,
            placeholder: '请填写',
          },
        },
        {
          type: 'select',
          prop: 'select1',
          attrs: {
            label: '期限类型',
            needStar: true,
            placeholder: '请选择',
          },
          options: [],
          rules: { required: true, message: '请选择期限类型' },
        },
        {
          type: 'select',
          prop: 'select2',
          attrs: {
            label: '开始日期',
            needStar: true,
            placeholder: '请选择',
          },
          options: [],
          rules: { required: true, message: '请选择开始日期' },
        },
        {
          type: 'input',
          prop: 'input4',
          attrs: {
            label: '期限数量',
            needStar: true,
            placeholder: '请填写',
          },
          rules: { required: true, message: '请输入文本' },
        },
        {
          type: 'input',
          prop: 'input5',
          attrs: {
            label: '畸零天数',
            needStar: true,
            placeholder: '请填写',
          },
          rules: { required: true, message: '请输入文本' },
        },
        {
          type: 'select',
          prop: 'select3',
          attrs: {
            label: '日期类型',
            needStar: true,
            placeholder: '请选择',
          },
          options: [],
          rules: { required: true, message: '请选择日期类型' },
        },
        {
          type: 'input',
          prop: 'input6',
          attrs: {
            label: '描述',
            placeholder: '请填写',
          },
        },
      ],
      operatedString: '',
      showOpCard: false,
      historyVisible: false,
      historySelectedValue: [],
      dataId: '', // 历史版本组件查询需要
      dialogTitle: '',
      dialogVisible: false,
      opDialogData: {}, // 编辑框的formData
      opDialogLoading: false, // 操作框保存按钮的loading
    };
  },

  async mounted() {
    const options = this.deepRemoveLeftQuotes(mockData2);
    this.modalFormList[3].options = this.getSelectOptions1(options.PeriodType);
    this.modalFormList[4].options = this.getSelectOptions1(options.RefDateType);
    this.modalFormList[7].options = this.getSelectOptions1(
      options.ConvDayType,
    );
    this.queryPage();
  },
  methods: {
    searchSubmit(val) {
      console.log('search结果', val);
    },
    // 展示左方操作卡片
    showOperate() {
      this.showOpCard = true;
    },
    closeOperateCard() {
      this.showOpCard = false;
    },
    resetForm() {
      this.formData = {};
    },
    outOperation(val, index, prop, num) {
      console.log(val, index, prop, num);
    },
    // 页面展示条数改变事件-pageSize
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize;
    },
    // 页面切换事件-pageNum
    handleCurrentChange(pageNum) {
      // console.log('');
      this.pageParams.pageNum = pageNum;
    },
    // 数据列确定修改事件
    handleCustomColumnChange(val) {
      // console.log('数据列确定修改事件',val);
      // this.tableData = mockData2;
    },
    // 导入按钮点击事件
    handleDataImport() {},
    // 导出按钮点击事件
    handleDataExport() {},
    // 点击当前列前的图标事件
    handleTableTopColumnIconClick(val) {
      this.operatedString = '我是计算了之后的字符串';
      console.log('当前列 ', val);
    },
    // 多选事件
    handleSelectionChange(val) {
      console.log('多选事件 ', val);
    },
    // 自定义按钮 点击事件
    handletableTopButton(val) {
      console.log('自定义按钮', val);
    },
    getNodeInfo(index) {
      for (const i in this.formList) {
        this.formList[i].chosen = false;
      }
      this.formList[index].chosen = true;
    },
    historyVersionOpen() {
      // 打开请求版本接口,请求选中的值以及所有的可选值。
      this.dataId = 'pubCurrency_30171999';
      this.getSelectedValue(this.dataId);
    },
    getSelectedValue(dataId) {
      // 请求选中的版本数据
      this.historySelectedValue = [2, 3];
      if (this.historySelectedValue.length < 1) {
        this.$message.warning('该条数据未存储过历史版本数据');
        return;
      }
      this.historyVisible = true;
      this.$refs.historyVersion.onOpen();
    },
    versionChange(value, index) {
      console.log('我是改变的值', value, index);
    },
    getSelectOptions1(arr) {
      return arr.map((item) => ({
        value: item.value,
        label: item.text,
      }));
    },
    getSelectOptions2(arr) {
      return arr.map((item) => ({
        value: item.code,
        label: item.name,
      }));
    },
    handleAddOrEdit(type, row) {
      // console.log("新增编辑", type, row);
      console.log('我是dailogVisible', this.dialogVisible);
      // 请求节假日的接口,需要处理成lable-value格式
      console.log('我是formArr', this.modalFormList);
      if (type === 'add') {
        this.dialogTitle = '新增';
      } else if (type === 'edit') {
        this.dialogTitle = '编辑';
        this.opDialogData = {
          input1: row.code,
          input2: row.name,
          input3: row.localName,
          input4: row.noPeriods,
          input5: row.noDays,
          input6: row.comments,
          select1: row.periodName,
          select2: row.refDateName,
          select3: row.dayTypeName,
        };
      }
      this.dialogVisible = true;
    },
    getOpDialogForm(form, type) {
      const params = {
        code: form.input1,
        name: form.input2,
        localName: form.input3,
        noPeriods: form.input4,
        noDays: form.input5,
        comments: form.input6,
        periodName: form.select1,
        refDateName: form.select2,
        dayTypeName: form.select3,
      };
      if (type === 1) {
        console.log('我要新增一条数据', params);
      } else if (type === 2) {
        console.log('我要编辑一条数据', params);
      }
    },
    async queryPage() {
      // const params = {
      //   modelName: 'pubCurrency',
      //   grpType1: 'CU',
      //   queryParam: {
      //     grpid: '',
      //     code: '',
      //     pageStart: this.pageParams.pageNum,
      //     pageLimit: this.pageParams.pageSize,
      //   },
      // };
      // const res = await this.$apis.queryPage(params);
      // if (success) {
      //   this.tableData = res.data.result.datals;
      //   this.pageParams.total = res.data.result.total;
      //   this.$message.success('请求成功');
      // }
      const res = this.deepRemoveLeftQuotes(mockData);
      console.log('我是返回的res', res);
      this.tableData = res.datals;
      this.pageParams.total = Number(res.total);
      this.pageParams.pageSize = Number(res.pageSize);
    },
    // 去除对象数据左方的引用号，处理返回复制的返回数据用
    deepRemoveLeftQuotes(obj) {
      if (typeof obj !== 'object' || obj === null) return obj;

      if (Array.isArray(obj)) {
        return obj.map((item) => this.deepRemoveLeftQuotes(item));
      }

      const newObj = {};
      for (const key in obj) {
        const newKey = key.replace(/^["']|["']$/g, '');
        newObj[newKey] = this.deepRemoveLeftQuotes(obj[key]);
      }
      return newObj;
    },
  },
};
</script>

<style lang="scss" scoped>
.RCSbox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  .cright {
    flex: 1;
    width: 800px;
    margin-left: 12px;
    padding: 0 12px;
  }
}
</style>
