<template>
  <div>
    <cms-query-table
      ref="userTable"
      v-bind="$attrs"
      :fixed-height="fixedHeight"
      :height="height"
      :tools-bar="toolsBarConfig"
      :query-params="queryForm"
      :show-loading="true"
      :columns="columns"
      :query-rules="rules"
      :margin-top="45"
      :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>
    </cms-query-table>
    <cms-edit-form-view
      title="测试侧滑组件"
      :form-model="{}"
      :form-width="'50%'"
      :before-close="handleClose"
      :form-collapse-item="formCollapseItem"
      v-model="viewShow">
      <template slot="baseInfo">
        <cms-form-item :column="1" label="测试标题">
          <cms-form-input placeholder="请输入..."/>
        </cms-form-item>
      </template>
    </cms-edit-form-view>
  </div>
</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('点击了搜索')
    },
    toView(row) {
      this.viewShow = true;
    },
  },
  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 []
    },
    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>