<template>
  <div class="item-card">
    <div class="hover-card">
      <div class="img-container">
        <img :src="file_logo" alt="">
      </div>
      <div class="item-headline" :title="fileData.name" @click="showPic">
        <p class="item-name">{{fileData.file_name}}</p><!-- <Icon class="item-delet" @click.stop="del_item(fileData.id)" type="md-close" /> -->
      </div>
    </div>
    <div class="item-info">
      <!-- <span>{{fileData.file_type}}</span> -->
      <span>大小：<span>{{fileSize}}</span></span>
      <span>上传于：<span>{{fileAddTime}}</span></span>
    </div>
    <span class="item-span"></span>
    <!-- <Input v-model="fileData.url" readonly>
        <a href="javascript:void(0);" class="copyButton" v-clipboard="copyLink" slot="append">复制</a>
    </Input> -->
    <div class="item-operation">
      <div class="item-operation-copy" v-clipboard="copyLink">
        <Icon type="ios-copy-outline" />
        {{$t('copy')}}
      </div>
      <span style="#E8E8E8">|</span>
      <div class="item-operation-move" @click.stop="del_item(fileData.id)">
        <Icon type="ios-trash-outline" />
        {{$t('delete')}}
      </div>
    </div>
  </div>
</template>

<script>
import { DelFile } from '@/api/data'
import { getToken } from '@/libs/util'
export default {
  props: {
    fileData: {
      type: Object
    }
  },
  methods: {
    showPic () {
      window.open(this.fileData.url, '_blank')
    },
    del_item (id) {
      this.$Modal.confirm({
        title: this.$t('operation_confirm'),
        content: this.$t('are_u_sure_to_delete'),
        className: 'vertical-center-modal',
        onOk: () => {
          const formdata = new FormData()
          formdata.append('access_token', getToken())
          formdata.append('id', id)
          DelFile(formdata).then(res => {
            if (res.ret === 200) {
              this.$Message.success(this.$t('successfully_deleted'))
              this.$emit('refresh')
            } else {
              this.$Message.error(res.msg)
            }
          })
        },
        onCancel: () => {
        }
      })
    }
  },
  computed: {
    fileSize () {
      let size = this.fileData.file_size / 1024
      if (size > 1024) {
        size = size / 1024
        size = Math.floor(size * 100) / 100 + 'MB'
      } else {
        size = Math.floor(size * 100) / 100 + 'KB'
      }
      return size
    },
    fileAddTime () {
      let data_time = this.fileData.upload_time
      let time = data_time.slice(0, 10)
      return time
    },
    copyLink () {
      return {
        value: this.fileData.url,
        success: (e) => {
          this.$Message.success(this.$t('copy_ok'))
        },
        error: () => {
          this.$Message.error(this.$t('copy_fail'))
        }
      }
    },
    file_logo () {
      // todo 扩展其他文件的logo 使用swtich方式
      if (/\.(jpe?g|png|gif)$/i.test(this.fileData.url)) {
        return this.fileData.url
      } else if (/\.(xlsx?)$/i.test(this.fileData.url)) {
        let logo = require('@/assets/icons/file-icon/xls_logo.jpg')
        return logo
      } else if (/\.(docx?)$/i.test(this.fileData.url)) {
        let logo = require('@/assets/icons/file-icon/doc_logo.jpg')
        return logo
      } else if (/\.(pptx?)$/i.test(this.fileData.url)) {
        let logo = require('@/assets/icons/file-icon/ppt_logo.jpg')
        return logo
      } else if (/\.(html)$/i.test(this.fileData.url)) {
        let logo = require('@/assets/icons/file-icon/html_logo.jpg')
        return logo
      } else {
        let logo = require('@/assets/icons/file-icon/others_logo.jpg')
        return logo
      }
    }
  }
}
</script>

<style lang="less">
  .item-card {
    overflow: hidden;
    width: 23%;
    font-size: 14px;
    margin-left: 2%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-bottom: 30px;
    background: #fff;
    border-radius: 10px;
    height: 292px;
    .img-container {
      width: 100%;
      height: 158px;
      margin-bottom: 22px;
      /* background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC"); */

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .item-headline {
      display: flex;
      justify-content: space-between;
      cursor: pointer;

      .item-name {
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        margin-left:20px;
        width: 280px;
        font-size:16px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
      }

      .item-delet {
        display: none;
        padding-right: 5px;
        padding-top: 5px;
        color: #fff;
      }
    }
    .item-info {
      display: flex;
      justify-content: space-between;
      color: #666666;
      margin: 5px 20px 13px;
      font-size: 12px;
    }

    .item-span{
      width: 100%;
      height: 1px;
      background: #E8E8E8;
      display: inline-block;
    }

    .item-operation{
      height: 46px;
      display: flex;
      align-items: center;
      margin: 0 20px;
      text-align: center;
      &-copy, &-move{
        width: 50%;
      }
      &-copy:hover, &-move:hover{
        color:#F7B500;
        cursor: pointer;
      }
    }
    .copyButton {
      color: #515a6e;
    }

    .copyButton:hover {
      color: #57a3f3;
    }

  }
  .item-span{
    width: 100%;
    height: 1px;
    background: #E8E8E8;
    display: inline-block;
  }
  .item-card:hover {
    .item-delet {
      display: inline-block;
    }

    .item-delet:hover {
      display: inline-block;
      color: rgb(255, 60, 0);
    }
  }
</style>
