<template>
  <div>
    <div class="dk-image-list">
      <ul>
        <li v-for="(item,key) in input" :key="key">
          <div class="file" :style="_style">
            <el-image v-if="type===1" :src="item" fit="contain" :style="_style" />
            <div v-if="type===2"><i class="other-file el-icon-microphone" /><i class="el-icon-video-play" @click="onPlayFile(item)" /></div>
            <div v-if="type===3"><i class="other-file el-icon-video-camera" /><i class="el-icon-video-play" @click="onPlayFile(item)" /></div>
            <div v-if="!disabled" class="close" @click="deleteImg(key)">
              <i class="el-icon-close" />
            </div>
          </div>
        </li>
        <li v-if="limit>input.length && !disabled">
          <div class="chooseImage" :style="_style" @click="onClick()"><i class="el-icon-plus" /></div>
        </li>
      </ul>
    </div>
    <el-dialog :append-to-body="true" :visible.sync="dialogFileVisible" width="1000px" :title="titles[type]">
      <dk-attachment ref="attachment" :type="type" :accept="accept" @change="onChange" />
      <div class="button">
        <el-button type="primary" :disabled="chooseFileList.length===0" @click="onSubmit()">确定</el-button>
        <el-button @click="dialogFileVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog append-to-body :visible.sync="dialogPlayVisible" width="400px">
      <div>
        <audio v-if="type===2" controls="controls" autoplay="autoplay" style="width: 100%;">
          <source :src="playFile" style="width: 100%">
        </audio>
        <video v-if="type===3" :src="playFile" width="100%" controls />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DkAttachment from '../../../DkForm/DkAttachment'

export default {
  name: 'DkFileListInput',
  components: { DkAttachment },
  props: {
    appendToBody: {
      type: Boolean,
      default: false
    },
    type: {
      default: 0,
      type: [Number, String]
    },
    value: {
      default: () => [],
      type: [Array, Object]
    },
    disabled: {
      default: false,
      type: Boolean
    },
    limit: {
      default: 3,
      type: Number
    },
    imgSize: {
      default: 100,
      type: Number
    },
    accept: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      dialogFileVisible: false,
      dialogPlayVisible: false,
      input: this.value,
      titles: {
        0: '文件选择',
        1: '选择图片',
        2: '选择音频',
        3: '选择视频'
      },
      playFile: ''
    }
  },
  computed: {
    _style() {
      return { width: this.imgSize + 'px', height: this.imgSize + 'px', lineHeight: this.imgSize + 'px' }
    }
  },
  watch: {
    input(value) {
      this.$emit('input', value)
    },
    value(value) {
      this.input = value
    }
  },
  mounted() {
  },
  methods: {
    onPlayFile(item) {
      this.playFile = item
      this.dialogPlayVisible = true
    },
    onClick() {
      this.dialogFileVisible = true
    },
    onChange(chooseFileKey, chooseFileList) {
      this.chooseFileList = chooseFileList
    },
    onSubmit() {
      this.input = this.input || []
      const list = this.$refs.attachment.chooseFileList
      for (let i = 0; i < list.length; i++) {
        this.input.push(list[i].url)
      }
      this.dialogFileVisible = false
      this.$refs.attachment.refreshList()
    },
    deleteImg(index) {
      this.input.splice(index, 1)
    }
  }
}
</script>

<style scoped lang="scss">

.button {
  text-align: center;
  border-top: 1px solid #F5F5F5;
  padding-top: 10px;
}

.dk-image-list {
  li {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;

    .file {
      position: relative;
      width: 100px;
      height: 100px;
      text-align: center;

      div {
        position: relative;

        .other-file {
          font-size: 80px;
          color: #aaa;
          line-height: 100px;
        }
        .el-icon-video-play{
          display: none;
          position: absolute;
          bottom: 2px;
          right: 2px;
          font-size: 20px;
          cursor: pointer;
        }
        &:hover .el-icon-video-play {
          color: #409EFF;
          display: block;
        }
      }

      .close {
        display: none;
        cursor: pointer;
        position: absolute;
        top: 0;
        line-height: 20px;
        right: 0;
        width: 20px;
        height: 20px;
        text-align: center;

        &:hover {
          color: #409EFF;
        }
      }

      &:hover .close {
        display: block;
      }
    }

    .chooseImage {
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 40px;
      color: #999;
      cursor: pointer;

      &:hover {
        color: #409EFF;
      }
    }
  }
}

</style>
