<template>
  <el-form-item :label="item.label || ''">
    <!-- 单选 -->
    <template v-if="item.type == 'radio'">
      <el-radio-group v-model="dataValue">
        <el-radio
          v-for="(radio, index) in itemList"
          :key="'radio_' + index"
          v-bind="radio"
        >
        </el-radio>
      </el-radio-group>
    </template>

    <!-- 多选 -->
    <template v-else-if="item.type == 'checkbox'">
      <el-checkbox-group v-model="checkboxValue" @change="onChangeCheck">
        <el-checkbox
          v-for="(checkbox, index) in itemList"
          :key="'checkbox_' + index"
          v-bind="checkbox"
        >
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <!-- 输入框 -->
    <template v-else-if="item.type == 'input'">
      <el-input v-bind="item.input" v-model="dataValue">
        <template slot="prefix">
          <!-- 头部内容 -->
          <slot name="prefix"></slot>
        </template>
        <template #suffix>
          <!-- 尾部内容 -->
          <slot name="suffix"></slot>
        </template>
        <template #prepend>
          <!-- 前置内容 -->
          <slot name="prepend"></slot>
        </template>
        <template #append>
          <!-- 后置内容 -->
          <slot name="append"></slot>
        </template>
      </el-input>
    </template>

    <!-- 下拉选择框 -->
    <template v-else-if="item.type == 'select'">
      <el-select v-bind="item.select" v-model="dataValue">
        <el-option
          v-for="(option, index) in itemList"
          :key="'option_' + index"
          v-bind="option"
        >
        </el-option>
        <slot></slot>
        <template #prefix>
          <!-- 头部内容 -->
          <slot name="prefix"></slot>
        </template>
      </el-select>
    </template>

    <!-- 开关 -->
    <template v-else-if="item.type == 'switch'">
      <el-switch v-bind="item.timePicker" v-model="dataValue"></el-switch>
    </template>

    <!-- 时间选择器 -->
    <template v-else-if="item.type == 'timePicker'">
      <el-time-picker v-bind="item.timePicker" v-model="dataValue">
      </el-time-picker>
    </template>

    <!-- 日期选择器 -->
    <template v-else-if="item.type == 'datePicker'">
      <el-date-picker
        v-bind="item.datePicker"
        :placeholder="item.datePicker.placeholder || '选择日期'"
        :start-placeholder="item.datePicker.startPlaceholder || '开始日期'"
        :end-placeholder="item.datePicker.endPlaceholder || '结束日期'"
        v-model="dataValue"
        @change="onChangeCheck"
      >
      </el-date-picker>
    </template>

    <!-- 远程搜索 -->
    <template v-else-if="item.type == 'autocomplete'">
      <el-autocomplete v-bind="item.autocomplete" v-model="dataValue">
      </el-autocomplete>
    </template>

    <slot></slot>
  </el-form-item>
</template>

<script>
import axios from "axios";
export default {
  name: "DilFormItem",
  model: {
    prop: "itemValue",
    event: "change",
  },
  props: {
    item: {
      type: Object,
      require: true,
    },
    itemValue: {
      default: null,
    },
  },
  data() {
    return {
      checkboxValue: [],
      // 列表内容数组
      itemList: [],
    };
  },
  created() {
    const item = this.item;
    if (item[item.type]) {
      const sourceType = item[item.type].sourceType;
      switch (sourceType) {
        case "request":
          {
            const requestObj = item[item.type].request;
            if (requestObj.url) {
              axios.request({ ...requestObj }).then((res) => {
                if (res.status == 200) {
                  if (res.data.code == 200) {
                    this.itemList = res.data.data;
                  }
                }
              });
            }
          }
          break;
        case "list":
          this.itemList = item[item.type].list.list;
          break;
      }
    }
  },
  computed: {
    dataValue: {
      get() {
        return this.itemValue;
      },
      set(value) {
        this.onChange(value);
      },
    },
  },
  methods: {
    onChange(value) {
      this.$emit("change", value);
    },
    onChangeCheck(value) {
      this.dataValue = value;
    },
  },
};
</script>

<style>
</style>
