<template>
  <div class="RCSbox">
    <OperateCard
      v-if="showOpCard"
      :icon-left-list="iconLeftList"
      :icon-right-list="iconRightList"
      :form-list="formList"
    />
    <div class="cright common-page">
      <FormSearch
        :form-arr="formArr"
        :form-data="formData"
        @outOperation="outOperation"
        @searchSubmit="searchSubmit"
        @reset="resetForm"
      />
      <PublicTable
        ref="table"
        class="table"
        row-key="id"
        :loading="loading"
        :has-index="false"
        :need-select="false"
        :table-data="tableData"
        :table-info="tableInfo"
        :table-column="columns"
        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"
        :is-need-customcolumn="false"
        is-need-import
        is-need-export
        @sizeChange="handleSizeChange"
        @currentChange="handleCurrentChange"
        @customColumnChange="handleCustomColumnChange"
      />
    </div>
    <HistoryVersion
      ref="historyVersion"
      :data-id="dataId"
      :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 HistoryVersion from '../../../components/historyVersion/index.vue';
import OperateDialog from '../components/operateDialog.vue';
export default {
  name: 'PubCurrency',
  components: {
    FormSearch,
    PublicTable,
    OperateCard,
    HistoryVersion,
    OperateDialog,
  },
  data() {
    return {
      formArr: [
        {
          type: 'input',
          prop: 'code',
          span: 6,
          attrs: {
            label: '关键字',
          },
        },
      ],
      // 默认值
      formData: {},

      // 获取列表前是否loading加载
      loading: false,

      tableInfo: {
        fileConfig: {
          uploadParams: {
            moduleName: 'pubCurrency',
            param: { 'multiple': false },
          },
        },
        // tableHeight: document.documentElement.clientHeight - 286,
      },
      // 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: 'noDecimal',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.noDecimal'),
        },
        {
          prop: 'interestNoDecimal',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.interestNoDecimal'),
        },
        {
          prop: 'basisName',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.basis'),
        },
        {
          prop: 'roundingTypeName',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.roundingType'),
        },
        {
          prop: 'amountUnitName',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.amountUnit'),
        },
        {
          prop: 'holidayIdName',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.holidayId'),
        },
        {
          prop: 'isoCode',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.isoCode'),
        },
      ],
      // 操作栏自定义按钮
      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('delete', row);
          },
        },
        {
          text: this.$t('field.history'),
          type: 'text',
          class: 'el-text-color',
          callback: (row) => {
            this.historyVersionOpen(row);
          },
        },
      ],
      tableTopButton: [
        {
          text: this.$t('button.add'),
          type: 'primary',
          class: 'el-text-color',
          callback: () => {
            this.handleAddOrEdit('add');
          },
        },
        {
          text: this.$t('button.ccyGrp'),
          type: 'primary',
          class: 'el-text-color',
          callback: () => {
            this.showOperate();
          },
        },
      ],

      // 左方操作列图标参数
      // 操作栏自定义按钮
      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);
          },
        },
      ],

      modalFormList: [
        {
          type: 'input',
          prop: 'code',
          attrs: {
            label: `${this.$t('field.code')}`,
            needStar: true,
            placeholder: '请填写',
          },
          rules: [
            { required: true, message: '不能为空' },
            { max: 10, message: '最大长度为10' },
            { pattern: /^[A-Za-z0-9]*$/, message: '必须为数字、英文组成' },
          ],
        },
        {
          type: 'input',
          prop: 'isoCode',
          attrs: {
            label: `${this.$t('field.isoCode')}`,
            needStar: true,
            placeholder: '请填写',
          },
          rules: [
            { required: true, message: '不能为空' },
            { pattern: '^[A-Za-z0-9]{3}$', message: '必须为三位数字、英文组成' },
          ],
        },
        {
          type: 'input',
          prop: 'name',
          attrs: {
            label: `${this.$t('field.shortName')}`,
            needStar: true,
            placeholder: '请填写',
          },
          rules: [
            { required: true, message: '不能为空' },
            { pattern: '^[A-Za-z0-9\&amp;\._\-\s)(/]*$', message: '必须为数字、英文、_、-、&amp;、空格、)、(、.、/组成' },
            { max: 30, message: '长度在1-30之间' },
          ],
        },
        {
          type: 'input',
          prop: 'localName',
          attrs: {
            label: `${this.$t('field.name')}`,
            placeholder: '请填写',
            rules: [
              { max: 50, message: '长度在1-50之间' },
            ],
          },
        },
        {
          type: 'inputNumber',
          prop: 'interestNoDecimal',
          attrs: {
            label: `${this.$t('field.interestNoDecimal')}`,
            needStar: true,
          },
          rules: { required: true, message: '不能为空' },
        },
        {
          type: 'select',
          prop: 'roundingType',
          attrs: {
            label: `${this.$t('field.roundingType')}`,
            needStar: true,
            placeholder: '请选择',
          },
          options: [],
          rules: { required: true, message: '不能为空' },
        },
        {
          type: 'inputNumber',
          prop: 'noDecimal',
          attrs: {
            label: `${this.$t('field.noDecimal')}`,
            needStar: true,
          },
          rules: { required: true, message: '不能为空' },
        },
        {
          type: 'select',
          prop: 'basis',
          attrs: {
            label: `${this.$t('field.basis')}`,
            needStar: true,
            placeholder: '请选择',
          },
          options: [],
          rules: { required: true, message: '不能为空' },
        },
        {
          type: 'select',
          prop: 'holidayId',
          attrs: {
            label: `${this.$t('field.holidayId')}`,
            needStar: true,
            placeholder: '请选择',
          },
          options: [],
          rules: { required: true, message: '不能为空' },
        },
        {
          type: 'select',
          prop: 'currencyType',
          attrs: {
            label: `货币类型`,
            needStar: true,
            placeholder: '请选择',
          },
          options: [],
          rules: { required: true, message: '不能为空' },
        },
        {
          type: 'select',
          prop: 'amountUnit',
          attrs: {
            label: `${this.$t('field.amountUnit')}`,
            needStar: true,
            placeholder: '请选择',
          },
          options: [],
          rules: { required: true, message: '不能为空' },
        },
      ],
      showOpCard: false,
      historyVisible: false,
      historySelectedValue: [],
      dataId: '', // 历史版本组件查询需要
      dialogTitle: '',
      dialogVisible: false,
      opDialogData: {
        interestNoDecimal: '2',
        noDecimal: '2',
        roundingType: 'R',
        basis: 'A',
        amountUnit: 'BBL',
      }, // 编辑框的formData
      opDialogLoading: false, // 操作框保存按钮的loading
    };
  },

  async mounted() {
    this.getOptionList();
    this.queryPage();
  },
  methods: {
    async getOptionList() {
      const { data: { result: options }} = await this.$apis.pubQueryComboxData({ codifierGrpCodes: 'RoundType,Basis,AmountUnit,CurrencyType,static_rcsUnits,static_unitDefaultValues' });
      this.modalFormList[5].options = options.RoundType;
      this.modalFormList[7].options = options.Basis;
      this.modalFormList[9].options = options.CurrencyType;
      this.modalFormList[10].options = options.rcsUnits;
    },

    async queryPage() {
      const params = {
        'queryParam.moduleName': 'pubCurrency',
        'queryParam.grpType1': 'CU',
        'queryParam.grpid': '',
        'queryParam.code': this.formData.code,
        'queryParam.pageStart': this.pageParams.pageNum,
        'queryParam.pageLimit': this.pageParams.pageSize,
      };
      this.loading = true;
      const res = await this.$apis.queryPage(params);
      if (res.success) {
        this.tableData = res.data.result.datals;
        this.pageParams.total = Number(res.data.result.total);
        this.loading = false;
      }
    },

    searchSubmit(val) {
      this.queryPage();
    },
    resetForm() {
      this.formData = {};
    },
    outOperation(val, index, prop, num) {
      console.log(val, index, prop, num);
    },

    // 展示左方操作卡片
    showOperate() {
      this.showOpCard = true;
    },
    closeOperateCard() {
      this.showOpCard = false;
    },

    // 页面展示条数改变事件-pageSize
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize;
      this.queryPage();
    },
    // 页面切换事件-pageNum
    handleCurrentChange(pageNum) {
      this.pageParams.pageNum = pageNum;
      this.queryPage();
    },
    async handleAddOrEdit(type, row) {
      if (type === 'delete') {
        return;
      }
      const holidayRes = await this.$apis.queryAll({ 'queryParam.moduleName': 'pubHoliday' });
      this.modalFormList[8].options = holidayRes.data.result.datals.map(item => {
        return { value: item.id, text: item.code };
      });
      if (type === 'add') {
        this.dialogTitle = '新增';
        const idRes = await this.$apis.findStaticDataId();
        this.opDialogData = {
          interestNoDecimal: '2',
          noDecimal: '2',
          roundingType: 'R',
          basis: 'A',
          amountUnit: 'BBL',
          id: idRes.data.id,
          globalId: '',
        };
        this.modalFormList[0].attrs.disabled = false;
      } else if (type === 'edit') {
        this.dialogTitle = '编辑';
        this.opDialogData = { ...row };
        this.modalFormList[0].attrs.disabled = true;
      }
      this.dialogVisible = true;
    },
    async getOpDialogForm(form, type) {
      const params = {
        code: form.code,
        isoCode: form.isoCode,
        name: form.name,
        localName: form.localName,
        interestNoDecimal: form.interestNoDecimal,
        noDecimal: form.noDecimal,
        roundingType: form.roundingType,
        basis: form.basis,
        holidayId: form.holidayId,
        currencyType: form.currencyType,
        amountUnit: form.amountUnit,
        id: form.id,
        globalId: form.globalId,
      };
      const queryParam = {
        'queryParam.moduleName': 'pubCurrency',
        'queryParam.domain': JSON.stringify(params),
      };
      if (type === 1) {
        const res = await this.$apis.pubDoSave(queryParam);
        if (res.success) {
          this.$message.success('操作成功');
          this.dialogVisible = false;
          this.queryPage();
        }
      } else if (type === 2) {
        const res = await this.$apis.pubDoUpdate(queryParam);
        if (res.success) {
          this.$message.success('操作成功');
          this.dialogVisible = false;
          this.queryPage();
        }
      }
    },
    // 数据列确定修改事件
    handleCustomColumnChange(val) {
      // console.log('数据列确定修改事件',val);
      // this.tableData = mockData2;
    },
    // 导入按钮点击事件
    handleDataImport() {},
    // 导出按钮点击事件
    handleDataExport() {},

    getNodeInfo(index) {
      for (const i in this.formList) {
        this.formList[i].chosen = false;
      }
      this.formList[index].chosen = true;
    },
    async historyVersionOpen(row) {
      // 打开请求版本接口,请求选中的值以及所有的可选值。
      this.dataId = `pubCurrency_${row.id}`;
      this.historyVisible = true;
      this.$refs.historyVersion.onOpen();
    },
    versionChange(value, index) {
      console.log('我是改变的值', value, index);
    },
  },
};
</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>
