<template>
  <div class="composite-page" :style="{ paddingTop: 0, backgroundImage: `url(${getImgUrl()})` }">
    <div class="compositeImg">
      <van-uploader v-show="!imgUrl" :after-read="afterRead" class="img-uploader" :max-count="1" v-model="fileList">
        <img src="https://4dscene.4dage.com/new4dkk/deng/static/img/icon_upload.svg" alt="" />
        <div>上传照片进行合成</div>
        <span>请上传竖屏图片</span>
      </van-uploader>
      <img
        class="bg"
        style="top: -265px; right: -185px"
        src="https://4dscene.4dage.com/new4dkk/deng/static/img/img_loading_active@2x.png"
        alt=""
      />
      <img
        class="bg"
        style="bottom: -265px; left: -185px"
        src="https://4dscene.4dage.com/new4dkk/deng/static/img/img_loading_active@2x.png"
        alt=""
      />
    </div>
    <div class="list">
      <div class="mbl"></div>
      <div class="title" :style="{ color: imgUrl ? '#fff' : '#303030' }">请选择艺术风格</div>
      <div class="listcontent">
        <div
          class="listItem"
          :style="{ backgroundImage: `url(${imgUrl})` }"
          v-for="(item, index) in list"
          :class="{ active: active == index }"
          @click="handleacibe(item, index)"
          :key="index"
        >
          <img :src="item.img" alt="" />
          <!-- <div>{{ item.name }}</div> -->
        </div>
      </div>
    </div>
    <van-popup
      closeIconPos="bottom-right"
      v-model="shareImg"
      position="center"
      bgColor="transparent"
      style="background: transparent"
      @close="
        shareImg = false
        showShare = false
        imgUrl = ''
        fileList = []
        $store.commit('home/setImg', null)
      "
    >
      <div class="shareImgDiv showimg1" v-if="imgUrl" >
        <div ref="downDiv" style="width: 100%; height: 100%">
          <myImg :src="imgUrl" :bgsrc="activeImg"  />
        </div>
        <div v-if="!img && !showShare" class="bit2 mybut" @click="handleSavaimg">
          <!-- <img style="margin: 0; height: 24px; width: 24px" src="/static/img/dowm.png" alt="" /> -->
          查看图片{{ img }}
        </div>
        <!-- <div class="scz"><van-icon name="photo-o" size="26" style="margin-right: 11px" />照片合成中...</div> -->
        <!-- <div class="result">
        <div class="butlist flex justify-between">
          <div class="bit2">
            下载图片
          </div>
        </div>
      </div> -->
      </div>
      <div class="shareImg" v-if="img">
        <div class="close" @click="shareImg = false
        showShare = false
        imgUrl = ''
        fileList = []
        $store.commit('home/setImg', null)">
                <img
                  width="42px"
                  height="42px"
                  src="/static/img/icon_cancel@2x.png"
                ></img>
              </div>
        <img style="width: 100%" :src="img" alt="" />
        <div class="tips" style="text-align: center; color: #fff; margin-top: 10px">
          长按保存图片
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import Cropp from 'vue-cropp'
import { toast, alert, confirm, notify } from '@/utils/toast'
import Loading from '@/utils/loading'
import myImg from './img.vue'
import axios from 'axios'
import { ImagePreview } from 'vant'
export default {
  name: 'Login',
  components: {
    Cropp,
    myImg
  },
  data() {
    return {
      active: 0,
      activeImg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/03@2x.png',
      show: false,
      shareImg: false,
      showShare: false,
      imgUrl: '',
      fileList: [],
      imgs: [
        {
          src: 'https://4dscene.4dage.com/new4dkk/deng/static/img/homeBg.jpg',
          w: 375,
          h: 250
        }
      ],
      list: [
        {
          name: '黑白',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/03@2x.png'
        },
        {
          name: '黑白',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/01@2x.png'
        },
        {
          name: '黑白',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/02@2x.png'
        },
        {
          name: '黑白',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/04@2x.png'
        },
        {
          name: '黑白',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/05@2x.png'
        },
        {
          name: '黑白',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/06@2x.png'
        }
      ]
    }
  },
  mounted() {
    // ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']);
    this.handleVueX()
    this.handleMapState()
    this.handleMapGetters()
  },
  computed: {
    ...mapState(['base']),
    ...mapState('home', ['img'])
  },
  methods: {
    getImgUrl() {
      return this.imgUrl || 'https://4dscene.4dage.com/new4dkk/deng/static/img/bg03@2x.png'
    },
    showLoading() {
      Loading.show()
      setTimeout(() => {
        Loading.hide()
      }, 3000)
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      this.$store.commit('home/setImg', null)
      console.log(file)
      let that = this
      let imgFile = new FormData()
      imgFile.append('type', 'img')
      imgFile.append('file', this.fileList[0].file)
      let headers = {
        'Content-Type': 'multipart/form-data',
        'Access-Control-Allow-Credentials': true,
        token: localStorage.getItem('token')
      }
      axios
        .post('https://sit-nanhuacs.4dage.com/api/wx/upload', imgFile, { headers })
        .then(res => {
          file.src = 'https://sit-nanhuacs.4dage.com' + res.data.data.filePath
          that.imgUrl = 'https://sit-nanhuacs.4dage.com' + res.data.data.filePath
          that.shareImg = true
        })
        .catch(() => {})
      // this.postRequest('/api/wx/upload', imgFile, {header}).then(r => {
      //     if (r.data.success) {
      //       this.imgKey.push(r.data.data.key)
      //     }
      //   })
    },
    // toast
    onChange(index) {
      console.log(index)
    },
    onChange(index) {
      console.log(index)
    },
    handleToast(type) {
      toast('这是Toast提示', type)
    },
    // alert
    handleAlert() {
      alert('确认删除吗？')
        .then(() => {
          toast('你点了确认')
        })
        .catch(() => {
          toast('你点了关闭')
        })
    },
    // confirm
    handleConfirm() {
      confirm('是否确认删除？')
        .then(() => {
          toast('你点了确认')
        })
        .catch(() => {
          toast('你点了取消')
        })
    },
    // notify
    handleNotify() {
      notify('通知通知通知', 0)
    },
    // 新开页面
    openHomePage() {
      const path = this.$router.resolve({
        name: 'Home',
        query: {
          id: '123'
        }
      })
      window.open(path.href, '_blank')
    },
    // 去登陆页
    toHmoe() {
      this.$router.push({
        name: 'Login',
        query: {
          id: '123',
          type: 'edit'
        }
      })
    },
    // 使用vuex读取state
    handleVueX() {
      console.log(this.$store.state.base.b)
    },
    // 使用mapState映射vuex
    handleMapState() {
      console.log(this.base.b)
    },
    // 使用mapGetters映射getters
    handleMapGetters() {
      console.log(this.getB)
    },
    handleacibe(item, index) {
      this.active = index
      this.activeImg = item.img
    },
    handleSavaimg() {
      let that = this
      console.log('base64', this.$refs.downDiv)
      this.showShare = true
      if (!this.$refs.downDiv) return
      this.$store.commit('home/setImg', null)
      this.$nextTick(() => {
        console.log('DOM updated!')
        // 在 DOM 更新后执行的回调函数
        setTimeout(() => {
          that.$store.dispatch('home/saveImage', that.$refs.downDiv)
        }, 1000)
        // this.$store.dispatch('home/saveImage', this.$refs.downDiv)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.composite-page {
  background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/bg03@2x.png);
  background-size: cover;
  height: 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-top: 46px;
  .showimg1 {
    // background: rgba(39, 26, 12, 0.5);
    border-radius: 0px 0px 0px 0px;
    backdrop-filter: blur(5px);
    top: -4px;
  }
  .compositeImg {
    // overflow-x: hidden;
    text-align: center;
    position: relative;
    height: calc(100% - 209px);
    .mybut {
      position: absolute;
      bottom: 0;
      right: 6.4vw;
      z-index: 10;
      /* margin: 0 auto; */
      width: 100px;
      left: calc(50% - 50px);
      height: 42px;
      width: 124px;
      line-height: 42px;
      background: rgba(187, 171, 146, 0.8);
      border-radius: 38px 38px 38px 38px;
      border: 1px solid #fff9b1;
      color: #5b472e;
    }
    .scz {
      width: 217px;
      height: 65px;
      line-height: 65px;
      text-align: center;
      background: rgba(187, 171, 146, 0.8);
      border-radius: 38px 38px 38px 38px;
      position: absolute;
      left: calc(50% - 108px);
      top: calc(50% - 32px);
    }
    .result {
      width: 256px;
      height: 423px;
      margin: 0 auto;
      position: relative;
      top: 69px;
      // position: relative;
      // left: calc(50% - 128px);
      .img {
        width: 248px;
        height: 300px;
        background: #ffffff;
        padding: 13px 9px 46px 9px;
        border-radius: 0px 0px 0px 0px;
        img {
          width: 248px;
          height: 100%;
          object-fit: cover;
          margin: 0;
        }
      }
      .butlist {
        margin-top: 19px;
        width: 270px;
        // padding: 0 9px;
        .bit1 {
          height: 42px;
          width: 124px;
          line-height: 42px;
          background: rgba(33, 28, 21, 0.6);
          border-radius: 38px 38px 38px 38px;
          border: 1px solid #bbab92;
          color: #e3c991;
        }
        .bit2 {
          height: 42px;
          width: 124px;
          line-height: 42px;
          background: rgba(187, 171, 146, 0.8);
          border-radius: 38px 38px 38px 38px;
          border: 1px solid #fff9b1;
          color: #5b472e;
        }
      }
    }
    .bg {
      position: absolute;
      width: 370px;
      height: auto;
      cursor: none;
      pointer-events: none;
      opacity: 0.15;
    }
    img {
      width: 54px;
      height: 54px;
      object-fit: cover;
      margin-top: 50%;
    }
    div {
      margin: 4px 0;
      font-weight: 400;
      font-size: 16px;
      color: #303030;
      line-height: 19px;
      text-align: center;
    }
    span {
      font-weight: 400;
      font-size: 14px;
      color: #b1967b;
      line-height: 16px;
    }
  }
  .list {
    padding: 11px 0 22px 0;
    border-top: 1px solid #ffffff;
    position: relative;
    .mbl {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      background: rgba(203, 202, 186, 0.4);
      box-shadow: inset 0px 8px 7px 0px rgba(255, 255, 255, 0.25);
      z-index: 0;
    }
    .title {
      position: relative;
      z-index: 1;
      font-weight: 400;
      font-size: 14px;
      color: #303030;
      line-height: 16px;
      margin-bottom: 14px;
      padding: 0 14px;
    }
    .listcontent {
      &::-webkit-scrollbar {
        display: none;
      }
      position: relative;
      z-index: 1;
      padding: 0 14px;
      display: flex;
      width: calc(100% - 28px);
      overflow-x: scroll;
      overflow-y: hidden;
      .listItem {
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
        line-height: 14px;
        text-align: center;
        height: 136px;
        width: 96px;
        margin-right: 10px;
        position: relative;
        background-size: 100%;
        background-repeat: no-repeat;
        img {
          height: 136px;
          width: 96px;
          object-fit: cover;
        }
        div {
          position: absolute;
          bottom: 10px;
          width: 100%;
          text-align: center;
          color: #fff;
          z-index: 1;
        }
      }

      .active {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
        box-shadow: 0px 0px 17px 0px #fff9b1;
        border-radius: 0px 0px 0px 0px;
        border: 2px solid #e3c991;
      }
    }
  }

  .shareImg {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    .close{

      position: absolute;
      right: -0;
      top: -0;
      width: 42px;
      height: 42px;
    }
  }
  .shareImgDiv {
    width: calc(100vw - 40px);
    height: 100%;
    margin: 0 auto;
    padding-bottom: 50px;
    .home {
      margin: 0 auto;
    }
    .bit2 {
      height: 42px;
      width: 124px;
      line-height: 42px;
      background: rgba(187, 171, 146, 0.8);
      border-radius: 38px 38px 38px 38px;
      border: 1px solid #fff9b1;
      color: #5b472e;
      position: absolute;
      bottom: 0;
      left: calc(50% - 62px);
      text-align: center;
    }
  }
}
</style>
