<template>
    <van-popup
      class="addBanner"
      v-model="show"
      position="bottom" 
      :close-on-click-overlay="false"
      :style="{height: '100%'}">
      <input type="file" name="img" @change="change" id="inputbanner" style="display:none;">
      <h5-cropper :option="option" hide-input @getFile="getFile" ref="cropper"></h5-cropper>
      <label for="inputbanner">
         <div class="add">
            <common-svg 
              name="Droptheelements"
              width="33px" 
              height="33px"></common-svg>
            <div style="color:#EBEBEB;font-size: 14px;">增加Banner图</div>
            <div style="color:#818181;font-size: 12px;">展示在详情页面的顶部</div>
         </div>
       </label>
       <div class="preview">
         <div style="position:relative;display:inline-block;"
            v-for="(img, index) in imgs" 
            :key="index" >
            <common-svg name="shangchuantupian-shanchutupian" style="position:absolute;right:0;top:0;z-index:1;" @click.native="del(index)"></common-svg>
            <van-image
              width="60px"
              height="60px"
              fit="contain"
              :src="img.url"
            />
         </div>
       </div>
       <ul style="text-align:left;padding:12px;color:#818181;font-size:12px;">
         <li>1、最多可添加四张banner图</li>
         <li>2、建议350（宽）x140（高）的比例</li>
         <li>3、最大限制2M</li>
         <li>4、文件类型：PNG/JPG/GIF（无动态化）</li>
       </ul>
      <div class="btn-group">
        <div class="left" @click="$emit('save')">仅保存</div>
        <div class="right" @click="$emit('save-and-chain')">保存并上链</div>
      </div>
    </van-popup>
</template>
<script lang="ts">
import { Component, Prop, Watch, Vue, Emit } from 'vue-property-decorator';
import { Button, Field, Popup, Image } from 'vant';
import H5Cropper from 'vue-cropper-h5';
import { Getter } from 'vuex-class';
import { TemplateDataItem } from '@/const/interface';
import { Route } from 'vue-router';
const maxFileSize = 2 * 1024 * 1024;
@Component({
  components: {
    [Button.name]: Button,
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Image.name]: Image,
    H5Cropper,
  },
})
export default class AddBanner extends Vue {
  @Prop({
    required: true,
  })
  private banners!: any[];
  private imgs: any[]  = [];
  private show: boolean = true;
  private option: any = {
    fixedNumber: [35, 14],
    ceilbutton: true,
    canMoveBox: true,
  };
  @Watch('banners', { immediate: true, deep: true })
  private async onChange(newVal: [], oldVal: []) {
    if (newVal.length <= 0) {
      this.imgs = [];
      return;
    }
    this.$api.file.getFiles(newVal).then((res: any) => {
      this.imgs = res.files;
    });
  }
  private del(index: number) {
    this.imgs.splice(index, 1);
    const value = [...this.hashs];
    value.splice(index, 1);
    this.$emit('update:banners', value);
  }
  private getFile(file: any) {
    this.$api.file.upload(file).then((res: any) => {
        this.imgs.push(res);
        this.$emit('update:banners', this.hashs);
    });
  }
  private change(e: any) {
    if (this.imgs.length >= 4) {
      this.$toast('最多上传4张banner图');
      return;
    }
    if (e.target.files[0].size > maxFileSize) {
      this.$toast('文件大小限制2M');
      return;
    }
    (this.$refs.cropper as any).loadFile(e.target.files[0]);
    e.target.value = '';
  }
  get hashs() {
    return this.imgs.map( (img: any) => img.hash );
  }
}
</script>
<style scoped lang="scss">
  .addBanner{
    .upbtn{
      height: 0;
    }
    .add{
      position:relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 170px;
      text-align: center;
      background: #353535;
      color: #FFFFFF;
    }
    .preview{
      display: grid;
      grid-template-columns: repeat(auto-fill, 70px);
      gap: 10px;
      padding: 17px;
    }
    .btn-group{
      .left,.right{
        flex: auto;
      }
      .left{
        width:160px;
        height:40px;
        line-height: 40px;
        border-radius:4px;
        border:1px solid rgba(238,238,238,1);
      }
      .right{
        margin-left: 10px;
        width:160px;
        height:40px;
        line-height: 40px;
        background:linear-gradient(360deg,rgba(93,123,246,1) 0%,rgba(108,122,254,1) 100%);
        box-shadow:0px 2px 10px 0px rgba(63,121,254,0.4);
        border-radius:4px;
        color: #FFFFFF;
      }
    }
  }
</style>