<template>
  <div class="RCSbox">
    <FormSearch
      :form-arr="searchArr"
      :form-data="searchData"
      @outOperation="searchOutOperation"
      @searchSubmit="searchSubmit"
      @reset="searchResetForm"
    />

    <PublicTable
      ref="tableRef"
      row-key="id"
      :loading="loading"
      :has-index="false"
      :need-select="false"
      :table-data="tableData"
      :table-info="tableInfo"
      :table-column="columns"
      :events="events"
      operation-width="150px"
      :btn-button="operations"
      :operation-fixed="true"
      :is-need-pagination="true"
      :current-page="searchParams.pageNum"
      :page-size="searchParams.pageSize"
      :total="total"
      :operated-string="operatedString"
      :is-need-customcolumn="false"
      :table-top-button="tableTopButton"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      @customColumnChange="handleCustomColumnChange"
      @handleTableTopColumnIconClick="handleTableTopColumnIconClick"
      @handleSelectionChange="handleSelectionChange"
    />

    <el-dialog
      title="提示"
      :visible.sync="visible"
      width="500px"
    >
      <div>
        <PublicForm
          ref="PublicFormRef"
          :form-arr="formArr"
          :form-data="formData"
        />
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="visible = false"
        >取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="visible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PublicTable from '@/components/table';
import FormSearch from '@/components/formSearch';
import PublicForm from '@/components/form';
export default {
  components: {
    PublicTable,
    FormSearch,
    PublicForm,
  },
  data() {
    return {
      // add edit form modal
      visible: false,
      formArr: [{
        type: 'input',
        prop: 'input1',
        attrs: {
          label: 'BIC代码',
          needStar: true,
        },
        rules: { required: true, message: '请输入文本' },
      },
      {
        type: 'input',
        prop: 'input2',
        attrs: {
          label: '短名',
          needStar: true,
        },
        rules: { required: true, message: '请输入文本' },
      },
      {
        type: 'input',
        prop: 'input3',
        attrs: {
          label: '名称',
        },
      }, {
        type: 'select',
        prop: 'input4',
        attrs: {
          label: '实体',
          needStar: true,
        },
        options: [],
        rules: { required: true, message: '请选择' },
      }, {
        type: 'select',
        prop: 'input5',
        attrs: {
          label: '货币',
          needStar: true,
        },
        options: [],
        rules: { required: true, message: '请选择' },
      }, {
        type: 'select',
        prop: 'input6',
        attrs: {
          label: '国家',
          needStar: true,
        },
        options: [],
        rules: { required: true, message: '请选择' },
      }, {
        type: 'input',
        prop: 'input7',
        attrs: {
          label: '城市',
          needStar: true,
        },
        options: [],
        rules: { required: true, message: '请选择' },
      }, {
        type: 'select',
        prop: 'input8',
        attrs: {
          label: '账户性质',
          needStar: true,
        },
        options: [],
        rules: { required: true, message: '请选择' },
      }, {
        type: 'input',
        prop: 'input4',
        attrs: {
          label: '外部账号',
          needStar: true,
        },
        options: [],
        rules: { required: true, message: '请选择' },
      }, {
        type: 'input',
        prop: 'input8',
        attrs: {
          label: '外部账号',
          needStar: true,
        },
        options: [],
        rules: { required: true, message: '请选择' },
      }, {
        type: 'switch',
        prop: 'input9',
        span: 12,
        attrs: {
          label: '启用',
          needStar: true,
        },
        options: [],
        rules: { required: true, message: '请选择' },
      }, {
        type: 'switch',
        prop: 'input10',
        span: 12,
        attrs: {
          label: '默认',
          needStar: true,
        },
        options: [],
        rules: { required: true, message: '请选择' },
      }],
      formData: {},
      // search
      searchArr: [
        {
          type: 'input',
          prop: 'input1',
          span: 6,
          attrs: {
            label: '关键字',
          },
        },
      ],
      searchData: {},
      // table
      loading: false,
      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: 'type',
          minWidth: '100px',
          align: 'center',
          label: '运营机构',
        },
      ],
      operations: [
        {
          text: this.$t('button.edit'),
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
        {
          text: this.$t('button.delete'),
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
        {
          text: this.$t('button.history'),
          callback: (row) => {
            this.handleAddOrEdit('history', row);
          },
        },
      ],
      operatedString: '',
      tableTopButton: [
        {
          text: '新增',
          type: 'primary',
          class: 'el-text-color',
          callback: (value) => {
            this.handleAdd(value);
          },
        },
      ],
      // pagenation
      searchParams: {
        pageNum: 1,
        pageSize: 20,
      },
      total: 100,
    };
  },
  async mounted() {
    // this.queryPage();
  },
  methods: {
    searchSubmit(val) {
      console.log('search结果', val);
    },
    searchResetForm() {
      this.formData = {};
    },
    searchOutOperation(val, index, prop, num) {
      console.log(val, index, prop, num);
    },
    handleSizeChange(pageSize) {
      this.searchParams.pageSize = pageSize;
    },
    handleCurrentChange(pageNum) {
      this.searchParams.pageNum = pageNum;
    },
    handleAddOrEdit(type, row) {
      // console.log('新增编辑',type, row);
    },
    handleCustomColumnChange(val) {
    },
    handleDataImport() {},
    handleDataExport() {},
    handleTableTopColumnIconClick(val) {
      this.operatedString = '我是计算了之后的字符串';
      console.log('当前列 ', val);
    },
    handleSelectionChange(val) {
      console.log('多选事件 ', val);
    },
    async queryPage() {
      const params = {
        modelName: 'pubCurrency',
        grpType1: 'CU',
        queryParam: {
          grpid: '',
          code: '',
          pageStart: this.searchParams.pageNum,
          pageLimit: this.searchParams.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('请求成功');
      }
    },
    // 自定义按钮 点击事件
    handletableTopButton(val) {
      console.log('自定义按钮', val);
    },
    handleAdd() {
      this.visible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.RCSbox {
  width: 100%;
  height: 100%;
}
</style>
