<template>
<el-checkbox-group v-model="list">
  <el-checkbox v-for="(v,k) in types" :key="v" :label="v">{{k}}</el-checkbox>
</el-checkbox-group>
</template>

<script>
export default {
  name: 'ZFormParamFileType',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      types: {
        'Excel 97~2003': 'application/vnd.ms-excel',
        'Excel 2007+': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'TXT': 'text/plain',
        'World': 'application/msword',
        '图片': 'image/*',
        '声音': 'audio/*',
        'PDF': '.pdf',
        'PPT': 'application/vnd.ms-powerpoint',
        'WPS': 'application/vnd.ms-works',
        'ZIP': 'application/zip'
      },
      list: []
    }
  },
  mounted() {
    this.valueChange()
  },
  watch: {
    value: 'valueChange',
    list: {
      handler() {
        this.$emit('input', this.list.join(','))
      },
      deep: true
    }
  },
  methods: {
    valueChange() {
      this.list = this.value.split(',').filter(item => !!item)
    }
  }
}
</script>

<style scoped>

</style>
