<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="60"
      :form-arr-first="modalFormList1"
      :form-arr-second="modalFormList2"
      :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 HistoryVersion from '../../../components/historyVersion/index.vue';
import OperateDialog from '../components/operateDialogCpty.vue';
import mockData from './mockData';
import mockData2 from './mockData2';
export default {
  components: {
    FormSearch,
    PublicTable,
    OperateCard,
    HistoryVersion,
    OperateDialog,
  },
  data() {
    return {
      formArr: [
        {
          type: 'input',
          prop: 'input1',
          span: 6,
          attrs: {
            label: '关键字',
          },
        },
        {
          type: 'select',
          prop: 'select1',
          span: 6,
          attrs: {
            label: '交易对手组',
          },
          options: [],
        },
      ],
      // 默认值
      formData: {},
      // 获取列表前是否loading加载
      loading: false,
      // table数据源
      tableData: [],
      // 表格项绑定的属性
      columns: [
        {
          prop: 'code',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.code'),
        },
        {
          prop: 'name',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.shortName'),
        },
        {
          prop: 'localName',
          minWidth: '200px',
          align: 'center',
          label: this.$t('field.name'),
        },
        {
          prop: 'swiftCode',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.swiftCode'),
        },
        {
          prop: 'cptyClassStr',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.cptyClass'),
        },
        {
          prop: 'cptySmallClassStr',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.cptySmallClass'),
        },
        {
          prop: 'countryStr',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.countryStr'),
        },
        {
          prop: 'cptyIdParentStr',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.cptyIdParentName'),
        },
      ],
      // 表格行单机双击事件
      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: (row) => {
            this.handleAddOrEdit('add', row);
          },
        },
        {
          text: this.$t('button.cptyGrp'),
          type: 'primary',
          class: 'el-text-color',
          callback: () => {
            this.showOperate();
          },
        },
        {
          text: this.$t('button.copy'),
          type: 'primary',
          class: 'el-text-color',
          callback: (value) => {
            this.handletableTopButton(value);
          },
        },
        {
          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: 10,
        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);
          },
        },
      ],
      modalFormList1: [
        {
          title: '',
          formArr: [
            {
              type: 'input',
              prop: 'input1',
              span: 12,
              attrs: {
                label: `${this.$t('field.code')}`,
                needStar: true,
                placeholder: '请填写',
              },
              rules: { required: true, message: '请输入文本' },
            }, {
              type: 'radio',
              prop: 'radio1',
              span: 12,
              attrs: {
                label: '启用',
                needStar: true,
              },
              options: [
                {
                  label: 1,
                  value: '启用',
                },
                {
                  label: 0,
                  value: '不启用',
                },
              ],
            },
            {
              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: '请填写',
              },
            },
          ],
        },
        {
          title: '机构信息',
          formArr: [
            {
              type: 'input',
              prop: 'input4',
              span: 12,
              attrs: {
                label: 'Fimis Code',
                needStar: true,
                placeholder: '请填写',
              },
              rules: { required: true, message: '请输入文本' },
            }, {
              type: 'input',
              prop: 'input5',
              span: 12,
              attrs: {
                label: 'SWIFT CODE',
                needStar: true,
                placeholder: '请填写',
              },
              rules: { required: true, message: '请输入文本' },
            },
            {
              type: 'input',
              prop: 'input6',
              span: 12,
              attrs: {
                label: '社会统一信用代码',
                placeholder: '请填写',
              },
            },
            {
              type: 'input',
              prop: 'input7',
              span: 12,
              attrs: {
                label: '核心客户号',
                placeholder: '请填写',
              },
            },
            {
              type: 'input',
              prop: 'input8',
              attrs: {
                label: '核心客户名称',
                placeholder: '请填写',
              },
            },
            {
              type: 'input',
              prop: 'input9',
              span: 12,
              attrs: {
                label: '国民经济部门',
                placeholder: '请填写',
              },
            },
            {
              type: 'input',
              prop: 'input10',
              span: 12,
              attrs: {
                label: '国民经济细类',
                placeholder: '请填写',
              },
            },
          ],
        },
        {
          title: '分类信息',
          formArr: [
            {
              type: 'select',
              prop: 'select1',
              span: 12,
              attrs: {
                label: '分类大类',
                needStar: true,
                placeholder: '请选择',
              },
              options: [],
              rules: { required: true, message: '请选择分类大类' },
            },
            {
              type: 'select',
              prop: 'select2',
              span: 12,
              attrs: {
                label: '分类小类',
                placeholder: '请选择',
              },
              options: [],
            },
            {
              type: 'select',
              prop: 'select3',
              span: 12,
              attrs: {
                label: '分类细类',
                placeholder: '请选择',
              },
              options: [],
            },
            {
              type: 'input',
              prop: 'input11',
              span: 12,
              attrs: {
                label: '归属上级',
                placeholder: '请填写',
              },
            },
            {
              type: 'select',
              prop: 'select4',
              span: 12,
              attrs: {
                label: '是否内部机构',
                placeholder: '请选择',
              },
              options: [],
            },
            {
              type: 'input',
              prop: 'input12',
              span: 12,
              attrs: {
                label: '内部机构代码',
                placeholder: '请填写',
              },
            }, {
              type: 'checkbox',
              prop: 'checkbox1',
              attrs: {
                label: '交易对手组',
              },
              options: [
                {
                  label: 0,
                  value: '本国',
                },
                {
                  label: 1,
                  value: '发行人',
                },
                {
                  label: 2,
                  value: '交易对手',
                },
                {
                  label: 3,
                  value: '担保人',
                },
                {
                  label: 4,
                  value: '托管机构',
                },
              ],
            },
          ],
        }, {
          title: '位置信息',
          formArr: [
            {
              type: 'select',
              prop: 'select4',
              span: 12,
              attrs: {
                label: '注册地区',
                placeholder: '请选择',
              },
              options: [],
            },
            {
              type: 'select',
              prop: 'select5',
              span: 12,
              attrs: {
                label: '风险地区',
                placeholder: '请选择',
              },
              options: [],
            },
          ],
        },
        {
          title: '其他信息',
          formArr: [
            {
              type: 'input',
              prop: 'input13',
              span: 12,
              attrs: {
                label: '联系人',
                placeholder: '请填写',
              },
            },
            {
              type: 'input',
              prop: 'input14',
              span: 12,
              attrs: {
                label: 'Tel',
                placeholder: '请填写',
              },
            },
            {
              type: 'input',
              prop: 'input15',
              span: 12,
              attrs: {
                label: 'Fax',
                placeholder: '请填写',
              },
            },
            {
              type: 'input',
              prop: 'input16',
              span: 12,
              attrs: {
                label: 'Email',
                placeholder: '请填写',
              },
            },
            {
              type: 'input',
              prop: 'input17',
              attrs: {
                label: '详细地址',
                placeholder: '请填写',
              },
            },
            {
              type: 'input',
              prop: 'input18',
              span: 12,
              attrs: {
                label: '备注',
                placeholder: '请填写',
              },
            },
          ],
        },
      ],
      modalFormList2: [
        {
          type: 'select',
          prop: 'select1',
          span: 12,
          attrs: {
            label: '行业类别层级1',
            placeholder: '请选择',
          },
          options: [],
        },
        {
          type: 'select',
          prop: 'select2',
          span: 12,
          attrs: {
            label: 'Wind二级行业',
            placeholder: '请选择',
          },
          options: [],
        },
        {
          type: 'select',
          prop: 'select3',
          span: 12,
          attrs: {
            label: '行业类别层级2',
            placeholder: '请选择',
          },
          options: [],
        },
        {
          type: 'select',
          prop: 'select4',
          span: 12,
          attrs: {
            label: '行业类别层级3',
            placeholder: '请选择',
          },
          options: [],
        },
        {
          type: 'select',
          prop: 'select5',
          span: 12,
          attrs: {
            label: '会计行业类别',
            placeholder: '请选择',
          },
          options: [],
        },
        {
          type: 'select',
          prop: 'select6',
          span: 12,
          attrs: {
            label: 'FRTB交易对手分类',
            placeholder: '请选择',
          },
          options: [],
        },
      ],
      operatedString: '',
      showOpCard: false,
      historyVisible: false,
      historySelectedValue: [],
      dataId: '', // 历史版本组件查询需要
      dialogTitle: '',
      dialogVisible: false,
      opDialogData: {}, // 编辑框的formData
      opDialogLoading: false, // 操作框保存按钮的loading
    };
  },

  async mounted() {
    this.formArr[1].options = this.deepRemoveLeftQuotes(this.getSelectOptions2(mockData2));
    console.log('我是formArr', this.formArr);
    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;
    },
    handleAddOrEdit(type, row) {
      // console.log("新增编辑", type, row);
      console.log('我是dailogVisible', this.dialogVisible);
      // 请求节假日的接口,需要处理成lable-value格式
      if (type === 'add') {
        this.dialogTitle = '新增';
      } else if (type === 'edit') {
        this.dialogTitle = '编辑';
        // this.opDialogData = {
        //   input1: row.code,
        //   input2: row.isoCode,
        //   input3: row.name,
        //   input4: row.localName,
        //   inputNumber1: row.interestNoDecimal,
        //   inputNumber2: row.noDecimal,
        //   select1: row.roundingType,
        //   select2: row.basis,
        //   select3: row.holidayId,
        //   select4: row.currencyType,
        //   select5: row.amountUnit,
        // };
      }
      this.dialogVisible = true;
    },
    getOpDialogForm(form, type) {
      const params = {
        code: form.input1,
        isoCode: form.input2,
        name: form.input3,
        localName: form.input4,
        interestNoDecimal: form.inputNumber1,
        noDecimal: form.inputNumber2,
        roundingType: form.select1,
        basis: form.select2,
        holidayId: form.select3,
        currencyType: form.select4,
        amountUnit: form.select5,
      };
      if (type === 1) {
        console.log('我要新增一条数据', params);
      } else if (type === 2) {
        console.log('我要编辑一条数据', params);
      }
    },
    // 数据列确定修改事件
    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) {
      const selectArr = arr.map((item) => ({
        value: item.codeVal,
        label: item.name,
      }));
      selectArr.unshift({
        value: '',
        label: '全部',
      });
      return selectArr;
    },
    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 (res.success) {
      //   this.tableData = res.data.result.datals;
      //   this.total = res.data.result.total;
      //   this.$message.success('请求成功');
      // }
      const res = this.deepRemoveLeftQuotes(mockData);
      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>
