<!--
 * @jixuanyu: jixuanyu
 * @Date: 2022-05-10 17:13:33
 * @LastEditors: jixuanyu
 * @Description: input 表格属性组件
-->
<template>
  <z-form :label-col="{ style: { width: '80px' } }">
    <z-form-item label="个性化">
      <z-input v-model:value="tableForm.personal" />
    </z-form-item>
    <z-form-item label="表头文本">
      <z-input v-model:value="tableForm.headText" />
    </z-form-item>
    <a-divider style="border-color: #7cb305" dashed />
    <z-form-item label="搜索项">
      <z-switch v-model:checked="tableForm.isShowSea" checked-value="1" un-checked-value="0" />
    </z-form-item>
    <z-form-item label="序号">
      <z-input v-model:value.number="tableForm.search" />
    </z-form-item>
    <z-form-item label="行占位">
      <z-select v-model:value="tableForm.spanWidth">
        <z-select-option v-for="(item, index) in rowOpt" :key="index" :value="item.value">{{ item.label }}</z-select-option>
      </z-select>
    </z-form-item>
    <z-form-item label="类型">
      <z-select v-model:value="tableForm.type">
        <z-select-option
          v-for="(item, index) in options"
          :key="index"
          :value="item.value"
        >{{ item.label }}</z-select-option>
      </z-select>
    </z-form-item>
    <z-form-item label="下拉选项">
      <z-input v-model:value="tableForm.dropDown" />
    </z-form-item>
    <a-divider style="border-color: #7cb305" dashed />
    <z-form-item label="表头">
      <z-switch v-model:checked="tableForm.isShowHead" checked-value="1" un-checked-value="0" />
    </z-form-item>
    <z-form-item label="序号">
      <z-input v-model:value.number="tableForm.head" />
    </z-form-item>
  </z-form>
</template>
<script>
import { defineComponent, toRef } from 'vue'
export default defineComponent({
  name: 'InputTable',
  props: {
    tableProperty: {
      type: Object,
      default: undefined
    }
  },
  setup(props) {
    const tableForm = toRef(props, 'tableProperty')
    const options = [{
      value: '1',
      label: '文本'
    }, {
      value: '2',
      label: '下拉'
    }, {
      value: '3',
      label: '日期'
    }, {
      value: '4',
      label: '时间'
    }, {
      value: '5',
      label: '时间日期'
    }]
    const rowOpt = [{
      label: '1/4',
      value: '1'
    }, {
      label: '1/3',
      value: '2'
    }, {
      label: '1/2',
      value: '3'
    }, {
      label: '1',
      value: '4'
    }]
    return {
      tableForm,
      options,
      rowOpt
    }
  }
})
</script>
