<template>
  <div>
    <cms-button @click="dialogVisible=true">点击打开Dialog表格</cms-button>
    <cms-dialog-table
      :dialog-visible="dialogVisible"
      :form-model="formModel"
      :dialog-config="{
        showFooter: true,
        dialogTitle: '弹窗标题',
        modalCallback: modalCallback,
        constantLoad: initConstantLoad,
        modalConfig: {
          'show-title-overflow': true,
          'destroy-on-close': true,
          'show-close': true,
          'show-zoom': false,
          'mask-closable': false,
          'esc-closable': false,
          'fullscreen': true,
        }
      }"
      :table-config="{
        requestCall: this.$http.tables.selectCmsTableListUrl,
        columns: columns,
        matchKey: {}, // 匹配
        pagination: false,
        toolsBar: [ {
          status: 'primary',
          icon: 'download',
          title: this.$t('common.button.downloadCode'),
          access: 'user:insert',
          onClick: click
        } ]
      }"
      :search-form-config="{
        formItemConfig: formItemConfigs,
        showSearchForm: true,
        searchFormModel: queryForm,
        searchFormRules: queryRules
      }"
    >
      <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>
    </cms-dialog-table>
  </div>
</template>

<script>
import { constantsUrl } from "@/views/table/services/tables";
import {
  dictionaryMix,
  formConfigMix,
  mixTableConfig,
  mixTableConstants,
  pageInitMix
} from "@/comps/mixin/common-mixins";

export default {
  name: "cms-dialog-table-demo",
  mixins: [ dictionaryMix, pageInitMix, mixTableConstants, mixTableConfig, formConfigMix ],
  data() {
    return {
      formModel: {},
      dialogVisible: false,
      queryForm: {
        account: undefined,
        realName: undefined,
        realName1: undefined,
        realName2: undefined,
      },
    }
  },
  computed: {
    formItemConfigs() {
      return [
        {
          label: '登录账户',
          prop: "account",
        },
        {
          label: '登录账户',
          prop: "realName",
        },
        {
          label: '登录账户',
          prop: "realName1",
        },
      ]
    },
    rules() {
      return {
        account: [ {
          required: true,
          trigger: [ 'change', 'blur' ]
        } ]
      }
    },
    toolsBarConfig() {
      return []
    },
    columns() {
      return [ {
        title: '真实姓名',
        field: 'realName',
        width: 200,
        cellRender: {
          name: "cell-link",
          events: {
            click: this.toView,
          },
        },
      }, {
        ...mixTableConfig.default,
        title: '测试标题',
        field: 'b',
        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,
      } ]
    },
  },
  methods: {
    click() {
      alert(1)
    },
    modalCallback() {
      this.dialogVisible = false;
    },
    initConstantLoad() {
      return new Promise((resolve => {
        constantsUrl().then(result => {
          resolve(result);
        })
      }))
    },
  }
}
</script>

<style scoped>

</style>