<script>
import { getFileExt, isImage, formatImageSrc } from './util'
import icons from './icons'
import UiImage from 'packages/image'

const statusTextMap = {
  none: '',
  ready: '准备上传',
  uploading: '上传中',
  fail: '上传失败',
  success: '上传成功'
}

export default {
  name: 'MdFileListItem',
  functional: true,
  props: {
    title: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    status: {
      type: String,
      default: ''
    },
    editable: {
      type: Boolean,
      default: false
    },
    displayType: {
      type: String,
      default: 'list'
    },
    showStatus: {
      type: Boolean,
      default: false
    }
  },
  render(h, c) {
    const { props } = c
    let fileExt = getFileExt(props.title)
    if (!icons[fileExt]) {
      fileExt = 'unknown'
    }
    const showImg = props.displayType === 'card' && isImage(fileExt)
    const extendCls = []
    if (showImg) {
      extendCls.push('is-image')
    }
    return h('div', {
      class: ['md-file-list-item', 'md-file-list-item--' + props.displayType].concat(extendCls)
    }, [
      h('span', {
        class: 'md-file-list-item__main'
      }, showImg ? [h(UiImage, {
        props: {
          src: formatImageSrc(props.url),
          fit: 'cover'
        },
        style: {
          width: '100%',
          height: '100%'
        }
      })] : [
        h('span', {
          class: 'md-file-list-item__icon',
          style: {
            'background-image': `url(${icons[fileExt]})`
          }
        }),
        h('span', {
          class: 'md-file-list-item__title'
        }, [props.title])
      ]),
      h('span', {
        class: 'md-file-list-item__other'
      }, [
        (statusTextMap[props.status] && props.showStatus) ? h('span', {
          class: 'md-file-list-item__status'
        }, [statusTextMap[props.status]]) : null,
        props.editable ? h('span', {
          class: 'md-file-list-item__remove',
          on: {
            click(evt) {
              if (c.listeners && c.listeners.remove) {
                c.listeners.remove(evt)
              }
            }
          },
          attrs: {
            title: '删除'
          }
        }) : null
      ])
    ])
  }
}
</script>
<style lang="less">
.md-file-list-item--list{
  height: 24px;
  line-height: 24px;
  padding: 4px 12px;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: all .25s;
  &:hover {
    background-color: #ecf3fc;
  }
  .md-file-list-item__main{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .md-file-list-item__icon{
    display: inline-block;
    height: 16px;
    width: 16px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin-right: 4px;
  }
  .md-file-list-item__other{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .md-file-list-item__status{
    margin-right: 12px;
    color: #999;
    font-size: 12px;
  }
  .md-file-list-item__remove{
    width: 24px;
    height: 24px;
    background: url('./close-line.svg') no-repeat 50% 50%;
    background-size: 16px;
    display: inline-block;
    margin-left: 12px;
    opacity: .5;
    margin-right: -6px;
    border-radius: 3px;
    cursor: pointer;
    transition: all .25s;
    &:hover {
      background-color: rgba(0,0,0,.15);
    }
  }
}
.md-file-list-item--card{
  width: 96px;
  height: 96px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all .25s;
  word-break: break-all;
  &:hover {
    background-color: #ecf3fc;
  }
  &:not(.is-image) {
    padding: 8px;
  }
  &.is-image {
    overflow: hidden;
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+61,000000+100&0.65+0,0+61,0+100 */
      background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 61%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 61%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 61%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    }
    .md-file-list-item__remove{
      background-image: url('./close-white-line.svg');
      opacity: .8;
      &:hover {
        opacity: 1;
        background-color: rgba(255,255,255,.35);
      }
    }
  }
  .md-file-list-item__icon{
    display: block;
    width: 32px;
    height: 32px;
    background-position: 50% 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-bottom: 8px;
  }
  .md-file-list-item__title{
    line-height: 1.3em;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
  }
  .md-file-list-item__main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .md-file-list-item__remove{
    position: absolute;
    right: 2px;
    top: 2px;
    width: 18px;
    height: 18px;
    background: url('./close-line.svg') no-repeat 50% 50%;
    background-size: 16px;
    border-radius: 3px;
    cursor: pointer;
    transition: all .25s;
    opacity: .3;
    z-index: 3;
    &:hover {
      opacity: .8;
      background-color: rgba(0,0,0,.15);
    }
  }
  .md-file-list-item__status{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    font-size: 12px;
    padding: 6px;
    line-height: 1.5em;
    display: none;
  }
}
</style>
