<template>
  <div class="ui-cover-upload">
    <div class="ui-cover-upload__current">
      <ui-image v-if="value" width="140px" height="140px" fit="cover" :src="value" />
    </div>
    <ui-popover
      class="ui-cover-upload__control"
    >
      <ui-button slot="reference" size="small" :block="true">更改封面</ui-button>
      <div class="ui-cover-upload__main">
        <strong class="ui-cover-upload__title">选择一个封面</strong>
        <div class="ui-cover-upload__images">
          <span
            class="ui-cover-upload__image"
            v-for="(image, index) in defaultImages"
            :key="index"
            @click="handleDefaultImageClick(image)"
          >
            <ui-image :src="image"></ui-image>
          </span>
        </div>
        <ui-upload
          class="ui-cover-upload__manual"
          @input="handleUploadChange"
        >
          <span class="ui-cover-upload__manual-title">上传封面</span>
          <span class="ui-cover-upload__manual-tips">JPG或PNG，最大2M</span>
        </ui-upload>
      </div>
    </ui-popover>
  </div>
</template>
<script>
import UiPopover from '@huntianning/components/packages/popover'
import UiButton from '@huntianning/components/packages/button'
import UiImage from '@huntianning/components/packages/image'
import UiUpload from '@huntianning/components/packages/upload'

export default {
  name: 'UiCoverUpload',
  components: {
    UiImage,
    UiButton,
    UiPopover,
    UiUpload
  },
  props: {
    value: {
      type: String
    },
    syncDefaultValue: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    defaultImages() {
      return [
        'netdisk-1303885219.cos.ap-beijing.myqcloud.com/1657239736488/1.png',
        'netdisk-1303885219.cos.ap-beijing.myqcloud.com/1657239736523/2.png',
        'netdisk-1303885219.cos.ap-beijing.myqcloud.com/1657239736531/3.png',
        'netdisk-1303885219.cos.ap-beijing.myqcloud.com/1657239736541/4.png',
        'netdisk-1303885219.cos.ap-beijing.myqcloud.com/1657239736544/5.png',
        'netdisk-1303885219.cos.ap-beijing.myqcloud.com/1657239736546/6.png',
        'netdisk-1303885219.cos.ap-beijing.myqcloud.com/1657239736549/7.png',
        'netdisk-1303885219.cos.ap-beijing.myqcloud.com/1657239736552/8.png',
        'netdisk-1303885219.cos.ap-beijing.myqcloud.com/1657239736559/9.png',
        'netdisk-1303885219.cos.ap-beijing.myqcloud.com/1657239736562/10.png',
        'netdisk-1303885219.cos.ap-beijing.myqcloud.com/1657239736566/11.png',
        'netdisk-1303885219.cos.ap-beijing.myqcloud.com/1657239736570/12.png',
        'netdisk-1303885219.cos.ap-beijing.myqcloud.com/1657239736574/13.png'
      ]
    },
    innerValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
    this.checkDefaultValue()
  },
  methods: {
    checkDefaultValue() {
      if (this.value) {
        return
      }
      if (!this.syncDefaultValue) {
        return
      }
      if (!this.defaultImages.length) {
        return
      }
      this.innerValue = this.defaultImages[0]
    },
    handleDefaultImageClick(image) {
      this.innerValue = image
    },
    handleUploadChange(image) {
      this.innerValue = image
    }
  }
}
</script>
<style lang="less">
.ui-cover-upload{
  width: 140px;
}
.ui-cover-upload__title{
  display: block;
  color: #606C80;
  height: 20px;
  line-height: 20px;
  padding: 12px 12px 0;
  font-weight: normal;
}
.ui-cover-upload__current{
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto 12px;
  background-color: #eee;
}
.ui-cover-upload__main{
  width: 188px;
}
.ui-cover-upload__images{
  padding: 6px;
  overflow: hidden;
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}
.ui-cover-upload__image{
  width: 32px;
  height: 32px;
  background-color: #eee;
  display: block;
  margin: 6px;
  float: left;
  position: relative;
  cursor: pointer;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #5086fa;
    opacity: 0;
    transition: all .25s;
  }
  &:hover {
    &:after {
      opacity: 1;
    }
  }
}
.ui-cover-upload__manual{
  border-top: 1px solid #F3F4F5;
  padding: 12px;
  line-height: 1.5em;
  text-align: left;
  cursor: pointer;
  transition: all .25s;
  .el-upload{
    text-align: left;
  }
  &:hover {
    background-color: #f3f3f3;
  }
}
.ui-cover-upload__manual-title{
  display: block;
  color: #131313;
}
.ui-cover-upload__manual-tips {
  color: #606C80;
  font-size: 12px;
}
</style>
