<template>
  <div>
    <el-input v-if ="type === 'text'" v-model='copyValue' :placeholder="placeholder" style ="width:300px"></el-input>
    <!-- <el-input  :value = "value" @change = "input" :placeholder="placeholder" style ="width:300px"></el-input> -->
    <mt-upload-pic
      v-if ="type === 'file'"
      v-model = "copyValue"
     ></mt-upload-pic>
    <el-input v-if ="type === 'phone'" v-model='copyValue' :placeholder="placeholder"  style ="width:300px"></el-input>
    <el-input v-if ="type === 'email'" v-model='copyValue' :placeholder="placeholder"  style ="width:300px"></el-input>
    <template v-if ="type ==='select' || type ==='edu'">
      <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 v-model='copyValue' :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'" v-model='copyValue'>
      <el-radio v-for= "(item, index) in options" :label="item.choiceValues" :key= "index">{{item.choiceValues}}</el-radio>
    </el-radio-group>
    <el-radio-group v-if ="type ==='sex'" v-model ="copyValue">
      <el-radio  label="男">男</el-radio>
      <el-radio  label="女">女</el-radio>
    </el-radio-group>
    <mt-select v-if ="type === 'address'" v-model ="copyValue"  :placeholder="placeholder" type ="address"></mt-select>
    <mt-select v-if ="type === 'country'" v-model ="copyValue"  :placeholder="placeholder" :language='language' :level='1' type ="country"></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="checkType(copyValue)"
      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
      ),
      copyValue: ''
    }
  },
  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('$_'))
      }
    }
  },
  watch: {
    copyValue (v) {
      this.$emit('input', v)
    },
    value: {
      handler (v) {
        this.copyValue = v
      },
      immediate: true
    }
  },
  props: {
    type: String,
    value: [String, Number],
    selectorType: String,
    placeholder: String,
    options: Array,
    language: {
      default: 'EN',
      type: String
    }
  },
  methods: {
    checkType (v) {
      if (v) {
        let reg = /[-|/]/g

        if (reg.test(v)) {
          return v
        }
        return +v
      }
      return ''

    },
    inputDate (date) {
      if (date) {
        this.$emit('input', new Date(date).getTime())
      } else {
        this.$emit('input', null)
      }
    }
  }
}
</script>
