<template>
  <div>
    <p-grid-form
      :span="8"
      :hiddenItem="hiddenItem"
      :disableItem="disableItem"
      :label-col="{ span: 9 }"
      :items="items"
      @submit="hanlderSubmit"
    >
      <template slot="diy" slot-scope="value, form" style="margin: 0">
        <!-- <p-button> <p-icon type="upload" />ss Upload </p-button> -->
        <p-button @click="setHidden">hiddenItem </p-button>
        <!-- {{ value }}212121 -->
      </template>
    </p-grid-form>
  </div>
</template>
<script>
function startDisabledTime(startValue, form) {
  let endValue = form.getFieldValue('endTime')
  if (!startValue || !endValue) {
    return false
  }
  return startValue.valueOf() > new Date(endValue).valueOf()
}
function endDisabledTime(endValue, form) {
  let startValue = form.getFieldValue('startTime')
  if (!startValue || !endValue) {
    return false
  }
  return new Date(startValue).valueOf() >= endValue.valueOf()
}
const items = [
  {
    type: 'input',
    name: 'field-input',
    label: '输入框',
    value: '13123',
  },
  {
    type: 'number',
    name: 'field-number',
    label: '数字',
    value: '',
    disabled: false,
  },
  {
    type: 'searchModal',
    name: 'field-search',
    label: '搜索弹出框',
    value: '',
    toolbar: [],
    tableConfig: {},
  },
  {
    type: 'password',
    name: 'field-password',
    label: '密码',
    value: '',
  },
  {
    type: 'select',
    name: 'field-select',
    label: '选择器',
    value: '',
    on: {
      change(value, label, options, form) {
        form.setFieldsValue({ 'field-select': value })
        console.log(form.getFieldsValue())
        console.log(value)
      },
    },
    options: [
      { label: '是', value: 'true' },
      { label: '否', value: 'false' },
    ],
  },
  {
    type: 'row',
    label: '日期',
    name: 'ff',
    list: [
      {
        type: 'date',
        name: 'startTime',
        style: { paddingRight: '5px' },
        disabledDate: startDisabledTime,
        placeholder: '请输入开始日期',
        value: '',
      },
      {
        style: { paddingLeft: '5px' },
        type: 'date',
        name: 'endTime',
        disabledDate: endDisabledTime,
        placeholder: '请输入结束日期',
        format: 'YYYY-MM-DD',
        value: '',
      },
    ],
  },

  {
    type: 'textarea',
    name: 'note',
    limit: 100,
    label: '备注',
  },
  {
    span: 8,
    type: 'buttonGroup',
    style: { textAlign: 'right' },
    options: [
      {
        value: '查询',
        icon: 'search',
        btnType: 'primary',
        style: 'margin-right:10px',
        htmlType: 'submit',
      },
      {
        value: '重置',
        icon: 'redo',
        on: {
          click(event, form) {
            form.resetFields()
            console.log(form.getFieldsValue())

            // form.validateFields((err, field) => {})
            form.hiddenItem('startTime')
            // form.isableItem(['dfield-select', 'ccz'])
            setTimeout(() => {
              form.unhiddenItem('startTime')
              //    form.enableItem(['field-select', 'ccz'])
            }, 1000)
          },
        },
      },
      {
        name: 'yd',
        scopedSlots: { customRender: 'diy' },
      },
    ],
  },
]
export default {
  data() {
    return {
      hiddenItem: [],
      items,
      disableItem: ['endTime', 's'],
    }
  },
  mounted() {
    let _this = this
    setTimeout(() => {
      _this.disableItem = ''
    }, 2000)
  },
  methods: {
    setHidden() {
      this.hiddenItem = ['field-input', 'field-password']
    },
    selectClaic(...args) {
      console.log(args)
    },
    hanlderSubmit(evnet, form) {
      evnet.preventDefault()
      console.log(form.getFieldsValue())
    },
  },
}
</script>
