<template>
  <div>
    <!--
      form 總共包含 單選框 多選框 輸入框 選擇器 日期時間選擇器
      formDate: {
        formModel: {}, // 表單資料物件
        rules: {}, // 	表單驗證規則
        inline: false, // boolean	行內表單模式
        labelPosition:'', // right/left/top 表單域標籤的位置，如果值為 left 或者 right 時，則需要設定 label-width
        formContent: [
          {
            formItemLabel: '', // 標籤
            formType: 'text', // 判斷型別
            Model: '', // 繫結值
            inputPlaceholder: '', // 提示語
            readonly: false, // boolean 只讀
          },
          {
            formItemLabel: '', // 標籤
            formType: 'select',
            Model: '',
            selectPlaceholder: '',
            checkType: '', // 當需要change方法時 用來做使用方法判斷的
            options: [
              {
                value: '我是隱藏的和獲取的值',
                label: '我是顯示的值'
              }
            ] // 選項的值
          },
          {
            formItemLabel: '', // 標籤
            formType: 'radio', // radioButton 按鈕形式  radio 普通形式
            Model: '',
            size: '', // medium / small / mini	*Radio 的尺寸，僅在 border 為真時有效
            radio: [{
              label: '', // 標題
              disabled: false, // 禁用
              border: false // 邊框 radio
            }]
          },
          {
            formItemLabel: '', // 標籤
            formType: 'checkbox',
            Model: '',
            size: '', // medium / small / mini	*多選框組尺寸，僅對按鈕形式的 Checkbox 或帶有邊框的 Checkbox 有效
            checkbox: [{
              label: '', // 標題
              disabled: false, // 禁用
              border: false // 邊框 radio
            }]
          },
          {
            formItemLabel: '', // 標籤
            formType: 'dateTimeDicker',
            Model: '',
            type: '', // year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange
            dateTimeDickerPlaceholder: '',
            format: '', // 格式
            valueFormat: '' // 格式
          }
        ],
      }
     -->
    <el-form
      :model="formDate.formModel"
      :rules="formDate.rules"
      :inline="formDate.inline"
      :label-position="formDate.labelPosition"
      label-width="auto"
    >
      <slot name="formTop" />
      <el-form-item
        v-for="(item, key) in formDate.formContent"
        :key="key"
        :label="item.formItemLabel"
        :prop="item.Model"
      >
        <!-- 輸入框 -->
        <el-input
          v-if="item.formType == 'text' || item.formType == 'textarea'"
          v-model="formDate.formModel[item.Model]"
          :type="item.formType"
          :placeholder="item.inputPlaceholder"
          :readonly="item.readonly"
        />
        <!-- 選擇器 -->
        <el-select
          v-if="item.formType == 'select'"
          v-model="formDate.formModel[item.Model]"
          :placeholder="item.selectPlaceholder"
          clearable
          filterable
          @change="selectChange(item.checkType)"
        >
          <el-option
            v-for="i in item.options"
            :key="i.value"
            :label="i.label"
            :value="i.value"
          />
        </el-select>
        <!-- 單選框 -->
        <el-radio-group
          v-if="item.formType == 'radio' || item.formType == 'radioButton'"
          v-model="formDate.formModel[item.Model]"
          :size="item.size"
        >
          <!-- 普通單選框 -->
          <template
            v-if="item.formType == 'radio'"
          >
            <el-radio
              v-for="(radio, key1) in item.radio"
              :key="key1"
              :label="radio.label"
              :border="radio.border"
              :disabled="radio.disabled"
            />
          </template>
          <!-- 按鈕形式的單選框 -->
          <template
            v-if="item.formType == 'radioButton'"
          >
            <el-radio-button
              v-for="(radio, key1) in item.radio"
              :key="key1"
              :label="radio.label"
              :disabled="radio.disabled"
            />
          </template>
        </el-radio-group>
        <!-- 複選框 -->
        <el-checkbox-group
          v-model="formDate.formModel[item.Model]"
          :size="item.size"
        >
          <el-checkbox
            v-for="(checkbox, key2) in item.checkbox"
            :key="key2"
            :label="checkbox.label"
            :border="checkbox.border"
            :disabled="checkbox.disabled"
            :name="item.Model"
          >
            {{ checkbox.label }}
          </el-checkbox>
        </el-checkbox-group>
        <!-- 日期時間選擇器 -->
        <el-date-picker
          v-if="item.formType == 'dateTimeDicker'"
          v-model="formDate.formModel[item.Model]"
          :type="item.type"
          :placeholder="item.dateTimeDickerPlaceholder"
          :format="item.format"
          :value-format="item.valueFormat"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    formDate: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    selectChange(checkType) {
      console.log(checkType)
      if (checkType === undefined) {
        // console.log('und')
      } else {
        console.log('父元件方法')
        this.$emit('selectChange', checkType)
      }
    }
  }
}
</script>