<template>
  <div class="dk-file-input">
    <!--TODO 这里没有判断类型-->
    <template v-if="showInput">
      <el-input v-model="input" :placeholder="placeholder" clearable>
        <template slot="append">
          <el-button v-if="type!==1&&input" style="border-right: 1px solid #ccc" @click.native="dialogPlayVisible=true">
            <i class="el-icon-caret-right" />
          </el-button>
          <el-button @click.native="onClick">选择</el-button>
        </template>
      </el-input>
      <div v-if="type===1" class="show  u-m-t-5">
        <el-image :src="input" alt="" class="image" fit="contain">
          <template slot="error">
            <div class="image-error">
              <i class="el-icon-picture-outline" />
            </div>
          </template>
        </el-image>
        <em @click="input=''"><i class="el-icon-close" /></em>
      </div>
      <p v-if="help" style="font-size: 12px;color: #999">{{ help }}</p>
    </template>
    <template v-else>
      <div
        class="only-img"
        style="position: relative"
        :style="{width:imgSize+'px',height:imgSize+'px', }"
        @click="onClick"
      >
        <template v-if="input">
          <!--          图片附件-->
          <el-image v-if="type===1" :src="input" alt="" fit="contain" style="width: 100%;height: 100%">
            <div slot="error" class="image-slot">
              <div class="no-image"><i class="el-icon-picture-outline" /></div>
            </div>
          </el-image>
          <!--          其他附件-->
          <template v-if="type!==1&&input">
            <slot name="media">
              <div class="media" style="">
                <i class="other-file el-icon-video-play" />
              </div>
            </slot>
            <div class="play_btn" @click.stop="onPlay">
              <i class="el-icon-caret-right" />
            </div>
          </template>
          <div class="close" @click.stop="onClear()">
            <i class="el-icon-close" />
          </div>
        </template>
        <template v-else>
          <div class="media" :style="{lineHeight:imgSize-10+'px',fontSize:imgSize/2+'px'}">
            <i class="other-file el-icon-plus" />
          </div>
        </template>
      </div>
    </template>
    <el-dialog :append-to-body="true" :visible.sync="dialogTableVisible" width="1000px" :title="titles[type]">
      <dk-attachment ref="attachment" :key="type" :type="type" :accept="accept" @change="onChange" />
      <div class="button">
        <el-button type="primary" :disabled="chooseFileList.length===0" @click="onSubmit()">确定</el-button>
        <el-button @click="dialogTableVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogPlayVisible" width="600px" class="dk-file-play" append-to-body @close="closePlay">
      <div v-if="type===3" class="play">
        <video ref="play" :src="input" width="100%" controls />
      </div>
      <audio v-if="type===2" ref="play" controls="controls" autoplay="autoplay" style="width: 100%;">
        <source :src="input" style="width: 100%">
      </audio>
    </el-dialog>
  </div>
</template>

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

export default {
  name: 'DkFileInput',
  components: { DkAttachment },
  props: {
    placeholder: {
      default: '',
      type: String
    },
    // 类型0文件 1图 2音频 3视频
    type: {
      default: 0,
      type: [Number, String]
    },
    value: {
      default: '',
      type: String
    },
    // 显示input 框
    showInput: {
      default: true,
      type: Boolean
    },
    imgSize: {
      default: 100,
      type: Number
    },
    help: {
      default: '',
      type: String
    },
    accept: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      input: this.value,
      titles: {
        0: '文件选择',
        1: '选择图片',
        2: '选择音频',
        3: '选择视频'
      },
      dialogPlayVisible: false,
      playFile: '',
      chooseFileList: []
    }
  },
  watch: {
    input(value) {
      this.$emit('input', value)
    },
    value(value) {
      this.input = value
    }
  },
  mounted() {
  },
  methods: {
    onClear() {
      this.input = ''
    },
    onChange(chooseFileKey, chooseFileList) {
      this.chooseFileList = chooseFileList
    },
    onPlay() {
      this.dialogPlayVisible = true
    },
    onClick() {
      this.dialogTableVisible = true
    },
    onSubmit() {
      this.input = this.$refs.attachment.chooseFileList[0]?.url
      if (!this.input) {
        this.$message.info('你还未选择文件')
        return
      }
      this.dialogTableVisible = false
      this.$refs.attachment.refreshList()
    },
    closePlay() {
      this.$refs.play.pause()
    }
  }
}
</script>
<style lang="scss">
.dk-file-input {
  .image-error {
    font-size: 40px;
    line-height: 100px;
    text-align: center;
    background: #f5f5f5;
    color: #999;
  }
}
</style>
<style scoped lang="scss">

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

.show {
  position: relative;

  .image {
    width: 110px;
    min-height: 100px;
    height: auto;
    border: 1px solid #ccc;
    padding: 5px;
  }

  em {
    cursor: pointer;
    color: #ccc;
    line-height: 20px;
    font-size: 15px;
    font-weight: 600;
    position: absolute;
    top: 0;
  }
}

.only-img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: relative;

  &:hover .close {
    display: block;
  }

  .close {
    cursor: pointer;
    font-size: 12px;
    position: absolute;
    top: 0;
    right: 0;
    background: #999;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    border-radius: 100px;
    display: none;
  }

  .no-image {
    text-align: center;
    width: 100%;
    background: #f5f5f5;
    color: #999;
    cursor: pointer
  }

  .media {
    text-align: center;
    width: 100%;
    background: #f5f5f5;
    color: #999;
    cursor: pointer
  }

  .play_btn {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    text-align: center;
    color: #fff;
    right: 0;
    font-size: 18px;
    width: 20px;
    height: 20px;
    background: #409EFF;
    line-height: 20px
  }
}
</style>
