<template>
    <van-popup
     class="addBanner"
     v-model="show"
      position="bottom" 
      :close-on-click-overlay="false"
      :style="{height: '100%'}">
       <label>
        <input type="file" name="img"  @change="change" style="display:none;">
         <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>
       <div>1、最多可添加四张banner图
              2、建议350（宽）x140（高）的比例
              3、最大限制2M
              4、文件类型：PNG/JPG/GIF（无动态化）</div>
      <div class="btn-group">
        <div class="left" @click="save">仅保存</div>
        <div class="right" @click="saveAndChain">保存并上链</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 { Getter } from 'vuex-class';
import { TemplateDataItem } from '@/const/interface';
import { Route } from 'vue-router';
@Component({
  components: {
    [Button.name]: Button,
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Image.name]: Image,
  },
})
export default class AddBanner extends Vue {
  @Prop({
    required: true,
  })
  private banners!: string[];
  private imgs: any[]  = [];
  private show: boolean = true;
  private option: any = {};
  @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);
  }
  private change(e: any) {
    const input = e.target;
    const files = input.files;
    if (files && files[0]) {
      this.$api.file.upload(files[0]).then((res: any) => {
        this.imgs.push(res);
      });
    }
  }
  get hashs() {
    return this.imgs.map( (img: any) => img.hash );
  }
  @Emit('save')
  private save() {
    return this.hashs;
  }
  @Emit('save-and-chain')
  private saveAndChain() {
    return this.hashs;
  }
}
</script>
<style scoped lang="scss">
  .addBanner{
    .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>