<template>
  <div>
    <el-input v-if ="type === 'text'" :value = "value" @change = "input" :placeholder="placeholder" style ="width:300px"></el-input>
    <el-input v-if ="type === 'phone'" :value = "value" @change = "input" :placeholder="placeholder"  style ="width:300px"></el-input>
    <el-input v-if ="type === 'email'" :value = "value" @change = "input" :placeholder="placeholder"  style ="width:300px"></el-input>
    <template v-if ="type ==='select'">
      <el-cascader
        :placeholder="placeholder"
        v-if ="selectorType === 'title'"
        :options="SelectorTitle"
        :show-all-levels="false"
        v-model ="SelectTitle"
      ></el-cascader>
      <el-cascader
        :placeholder="placeholder"
        v-else-if="selectorType === 'department'"
        :show-all-levels="false"
        :options="SelectorDepartment"
        v-model ="SelectDepartment"
      ></el-cascader>
      <el-select v-else :value ="value" @change ="input" @input="input" :placeholder="placeholder">
        <el-option v-for = "(item, index) in options" :key ="index" :label="item.choiceValues" :value="item.choiceValues" ></el-option>
      </el-select>
    </template>
    <el-radio-group v-if ="type ==='radio'" :value ="value"  @input ="input">
      <el-radio v-for= "(item, index) in options" :label="item.choiceValues" :key= "index">{{item.choiceValues}}</el-radio>
    </el-radio-group>
    <mt-select v-if ="type === 'address'" :value ="value" @input ="input" :placeholder="placeholder" type ="address"></mt-select>
     <el-checkbox-group v-model ="CheckItem" v-if ="type ==='checkbox'" >
      <el-checkbox :label="item.choiceValues" v-for= "(item, index) in options" :key= "index"></el-checkbox>
    </el-checkbox-group>
     <el-date-picker
      v-if ="type ==='date'"
      :value="value"
      type="date"
      @input = 'inputDate'
      :placeholder="placeholder">
    </el-date-picker>
  </div>
</template>
<script>
import SelectorTitle from './selector-title'
import SelectorDepartment from './selector-department'
export default {
  data () {
    return {
      SelectorDepartment: SelectorDepartment,
      SelectorDepartmentOptions: SelectorDepartment.reduce((items, item) => items.concat(item.children), SelectorDepartment[0].children),
      SelectorTitle: SelectorTitle,
      SelectotTitleOptions: SelectorTitle.reduce((items, item) => items.concat(item.children), SelectorTitle[0].children)
    }
  },
  computed: {
    SelectTitle: {
      get () {
        const result = this.SelectotTitleOptions.filter((item) => item.value === this.value)

        return result.length > 0 ? [result[0].parent, result[0].value] : []
      },
      set (v) {
        this.$emit('input', v[1])
      }
    },
    SelectDepartment: {
      get () {
        const result = this.SelectorDepartmentOptions.filter((item) => item.value === this.value)

        return result.length > 0 ? [result[0].parent, result[0].value] : []
      },
      set (v) {
        this.$emit('input', v[1])
      }
    },
    CheckItem: {
      get () {
        if (this.value.length > 0) {
          return Array.from(this.value.split('$_'))
        }
        return []

      },
      set (v) {
        this.$emit('input', v.join('$_'))
      }
    }
  },
  props: {
    type: String,
    value: [String, Number],
    selectorType: String,
    placeholder: String,
    options: Array
  },
  methods: {
    inputDate (date) {
      if (date) {
        this.$emit('input', this.$FormatDate('yyyy/MM/dd', date))
      } else {
        this.$emit('input', null)
      }
    },
    input (str) {
      this.$emit('input', str)
    }
  }
}
</script>
