<template>
  <cms-page-form
    :form-model="formModel"
    :form-collapse-item="formCollapseItem"
  >
    <template slot="baseInfo">
      <cms-form-item :column="3" label="下拉列表">
        <cms-pull-down-magnifier
          styles="width:50%"
          v-model="formModel.realName"
          :request-call="this.$http.tables.dynamicTableUrl"
          :form-model="formModel"
          :columns="columns"
          :height="400"
          :props="{
            label: 'realName',
            value: 'account',
          }"
          :show-search-form="false"
          :query-params="{
            xx: formModel.realName
          }"
          :match-key="{
            realName: 'realName',
            account: 'account'
          }"
        >
        </cms-pull-down-magnifier>
      </cms-form-item>
      <cms-form-item :column="3" label="下拉列表">
        <cms-pull-down-magnifier
          styles="width:50%"
          v-model="formModel.realName"
          :request-call="this.$http.tables.dynamicTableUrl"
          :form-model="formModel"
          :columns="columns"
          :height="400"
          :props="{
            label: 'realName',
            value: 'account',
          }"
          :show-search-form="false"
          :query-params="{
            xx: formModel.realName
          }"
          :match-key="{
            realName: 'realName',
            account: 'account'
          }"
        >
        </cms-pull-down-magnifier>
      </cms-form-item>
      <cms-form-item :column="3" label="下拉列表">
        <cms-pull-down-magnifier
          styles="width:50%"
          v-model="formModel.realName"
          :request-call="this.$http.tables.dynamicTableUrl"
          :form-model="formModel"
          :columns="columns"
          :height="400"
          :props="{
            label: 'realName',
            value: 'account',
          }"
          :show-search-form="false"
          :query-params="{
            xx: formModel.realName
          }"
          :match-key="{
            realName: 'realName',
            account: 'account'
          }"
        >
        </cms-pull-down-magnifier>
      </cms-form-item>
    </template>
  </cms-page-form>
</template>

<script>
import { mixTableConfig } from "@/comps/mixin/common-mixins";

export default {
  name: "form-components-demo",
  data() {
    return {
      formCollapseItem: [ {
        name: 'baseInfo',
        title: '基本信息',
        collapse: true
      } ],
      formModel: {
        realName: undefined
      }
    }
  },
  computed: {
    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,
      } ]
    },
  }
}
</script>

<style scoped>

</style>