<template>
  <cms-custom-table
    ref="dynamicTable"
    v-bind="$attrs"
    :fixed-height="fixedHeight"
    :height="height"
    :tools-bar="toolsBarConfig"
    :query-params="queryForm"
    :show-loading="true"
    :columns="columns"
    :partial-loading="true"
    :query-rules="rules"
    :margin-top="205"
    :constant-load="initConstantLoad"
    :form-item-config="configItem"
    :request-call="this.$http.tables.dynamicTableUrl"
    :search-method="searchClick"
    :table-code="'1000000'"
    :table-title="'测试动态表格'"
    :table-config="{
      enable: true,  // 是否启用表格配置
      saveConfigUrl: this.$http.tables.saveCmsTableConfigUrl, // 保存表格配置信息的地址
      queryConfigUrl: this.$http.tables.selectCmsTableConfigUrl, // 查询表格配置信息的地址
    }"
  >
    <template slot="account">
      <cms-form-input v-model="queryForm.account" placeholder="11111111111"/>
    </template>
    <template slot="realName">
      <cms-form-input v-model="queryForm.realName" placeholder="22222222222"/>
    </template>
    <template slot="realName1">
      <cms-form-input v-model="queryForm.realName1" placeholder="33333333333"/>
    </template>
    <template slot="realName2">
      <cms-form-input v-model="queryForm.realName2" placeholder="444444444444"/>
    </template>

    <template slot="columns">
      <vxe-column type="seq" width="60" fixed="left" title="编号" align="center"/>
      <vxe-column
        field="realName"
        title="真实姓名"
        fixed="left"
        :cell-render="{
          name: 'cell-link',
          events: {
            click: this.toView,
          },
        }"/>
      <vxe-column field="cardType" title="身份证号码">
        <template slot-scope="{row}">
          {{ row }}
        </template>
      </vxe-column>
      <cms-query-table-column field="createTime" title="创建时间">
        <template slot-scope="{row}">{{ row }}</template>
      </cms-query-table-column>
    </template>
  </cms-custom-table>
</template>

<script>
import { dictionaryMix, formConfigMix, mixTableConfig, mixTableConstants, pageInitMix, } from "../../package";
import { constantsUrl } from "@/views/table/services/tables";

export default {
  name: "dynamic-table-demo",
  mixins: [ dictionaryMix, pageInitMix, mixTableConstants, mixTableConfig, formConfigMix ],
  data() {
    return {
      viewShow: false,
      queryForm: {
        account: undefined,
        realName: undefined,
        realName1: undefined,
        realName2: undefined,
      },
      dialogForm: {
        aa: undefined
      },
      modalVisible: false,
      modalVisible1: false,
      expandRowKeys: [],
    }
  },
  created() {
  },
  methods: {
    handleClose() {
      return true;
    },
    initConstantLoad() {
      return new Promise((resolve => {
        constantsUrl().then(result => {
          resolve(result);
        })
      }))
    },
    searchClick() {
      console.log('点击了搜索');
      this.$refs.dynamicTable.reload();
    },
    toView(row) {
      this.$messageTips.success("测试")
    },
  },
  computed: {
    formCollapseItem() {
      return [ {
        name: 'baseInfo',
        title: '基本信息',
        collapse: true
      } ]
    },
    configItem() {
      return [
        {
          label: '登录账户',
          prop: "account",
        },
        {
          label: '登录账户',
          prop: "realName",
        },
        {
          label: '登录账户',
          prop: "realName1",
        },
        {
          label: '登录账户',
          prop: "realName2",
        },
      ]
    },
    rules() {
      return {
        account: [ {
          required: true,
          trigger: [ 'change', 'blur' ]
        } ]
      }
    },
    toolsBarConfig() {
      return [ {
        status: 'primary',
        icon: "el-icon-circle-plus-outline",
        title: '新增',
        access: "1111111111111",
        onClick: () => {
          this.$messageTips.alert('新增')
        },
      }, ]
    },
    columns() {
      return [
        {
          ...mixTableConfig.checkbox
        }, {
          title: '真实姓名',
          field: 'realName',
          fixed: 'left',
          width: 200,
          cellRender: {
            name: "cell-link",
            events: {
              click: this.toView,
            },
          },
        }, {
          ...mixTableConfig.amount,  // 活动成本
          title: '测试标题',
          field: 'number',
          width: 200,
        }, {
          ...mixTableConfig.default,
          title: '身份证类型',
          field: 'cardType',
          width: 200
        }, {
          title: '身份证好号码',
          field: 'idCard',
          width: 200
        }, {
          title: '是否启用',
          field: 'enable',
          width: 200
        }, {
          title: '创建时间',
          field: 'createTime',
          width: 300
        }, {
          ...mixTableConfig.default,
          title: '备注',
          field: 'remark',
          minWidth: 500,
        } ]
    },
    staticDataSource() {
      return [ {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: 5
      } ]
    }
  }
}
</script>

<style scoped>

</style>
