<template>
  <from-bottom-dialog
      :page-id="pageId"
      v-model="modelValue"
      @cancel="closeShare1"
      :touch-moved="false"
      maskMode="light"
      height="60vh"
      mode="light">
    <div class="video-share">

      <div class="shares">
        <div class="to" @click="closeShare($emit('share2WeChat'),'type1')">
          <div class="wrapper">
            <div v-if="loading.type1" class="loading-wrapper" style="width: 80%;height: 80%;">
              <LoadingCircle v-model="progress"/>
            </div>
            <img v-else src="@/assets/img/icon/components/share/wechat.webp" alt="">
          </div>
          <span>微信</span>
        </div>
        <div class="to" @click="closeShare($emit('showShare2WeChatZone'))">
          <div class="wrapper">
            <img src="@/assets/img/icon/components/share/wechatquan.png" alt="">
          </div>
          <span>朋友圈</span>
        </div>
        <template v-if="false">
          <div class="to" @click="closeShare($emit('share2QQZone'))">
            <img src="@/assets/img/icon/components/share/qq.webp" alt="">
            <span>QQ</span>
          </div>
          <div class="to" @click="canDownload && closeShare($emit('download'))"
               :style="{ opacity : canDownload ? '1' : '0.5' }">
            <img src="@/assets/img/icon/components/share/download.png" alt="">
            <span>保存本地</span>
          </div>
          <div class="to" @click="$nav('/home/report',{mode:this.mode})">
            <img src="@/assets/img/icon/components/share/warning.png" alt="">
            <span>举报</span>
          </div>
          <div class="to" @click="copyLink">
            <img src="@/assets/img/icon/components/share/copy.png" alt="">
            <span>复制口令</span>
          </div>
          <div class="to" @click="toggleCollect">
            <img v-if="isCollect" src="@/assets/img/icon/components/share/collect-yellow.png" alt="">
            <img v-else src="@/assets/img/icon/components/share/collect.png" alt="">
            <span>收藏</span>
          </div>
          <div class="to" @click="$no">
            <img src="@/assets/img/icon/components/share/comeon.webp" alt="">
            <span>一起看</span>
          </div>
          <div class="to" @click="copyLink">
            <img src="@/assets/img/icon/components/share/link.png" alt="">
            <span>复制链接</span>
          </div>
          <div class="to" @click="$no">
            <img src="@/assets/img/icon/components/share/dou.webp" alt="">
            <span>帮上热门</span>
          </div>
          <template v-if="isShowMore">
            <div class="to" @click="closeShare($emit('showShareDuoshan'))">
              <img src="@/assets/img/icon/components/video/duoshan.png" alt="">
              <span>多闪</span>
            </div>
            <div class="to" @click="$no">
              <img src="@/assets/img/icon/components/video/totoutiao.webp" alt="">
              <span>今日头条</span>
            </div>
          </template>
          <template v-else>
            <div class="to" @click="$no">
              <img src="@/assets/img/icon/components/share/share.png" alt="">
              <span>更多分享</span>
            </div>
          </template>
          <div class="to" @click="closeShare($emit('dislike'))">
            <img src="@/assets/img/icon/components/share/dislike.png" alt="">
            <span>不感兴趣</span>
          </div>
          <div class="to" @click="$no">
            <img src="@/assets/img/icon/components/share/bizhi.webp" alt="">
            <span>动态壁纸</span>
          </div>
          <div class="to" @click="closeShare($emit('showDouyinCode'))">
            <img src="@/assets/img/icon/components/share/code.png" alt="">
            <span>抖音码</span>
          </div>
        </template>
      </div>
      <div class="friends">
        <div class="item" v-for="item in friends.all">
          <img class="left" v-lazy="$imgPreview(item.avatar)" alt="">
          <div class="right">
            <span>{{ item.name }}</span>
            <b-button size="small" :type="item.shared?'dark':'primary'"
                      @click="item.shared = true">
              {{ item.shared ? '已' : '' }}分享
            </b-button>
          </div>
        </div>
        <div class="more" @click="closeShare($nav('/message/share-to-friend'))">
          <img class="left" src="../../../assets/img/icon/components/video/more-dark.png">
          <span>更多朋友</span>
        </div>
      </div>
    </div>
  </from-bottom-dialog>
</template>

<script>
import {mapState} from "vuex";
import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
import LoadingCircle from "./LoadingCircle";
// import DouyinCode from "./DouyinCode";

export default {
  name: "Share",
  components: {
    FromBottomDialog,
    LoadingCircle
    // DouyinCode
  },
  props: {
    modelValue: false,
    videoId: {
      type: String,
      default: null
    },
    pageId: {
      type: String,
      default: 'home-index'
    },
    canDownload: {
      type: Boolean,
      default: true
    },
  },

  computed: {
    ...mapState(['friends']),
  },
  data() {
    return {
      isCollect: false,
      isShowMore: true,
      loading: {
        typ1: false
      },
      progress: 0
    }
  },
  methods: {
    async copyLink() {
      this.closeShare()
      this.$showLoading()
      await this.$sleep(500)
      this.$hideLoading()
      this.$notice('复制成功')
    },
    toggleCollect() {
      this.closeShare()
      if (this.isCollect) {
        this.$notice('取消收藏成功')
      } else {
        this.$notice('收藏成功')
      }
      this.isCollect = !this.isCollect
    },
    toggleCall(item) {
      item.select = !item.select
    },
    closeShare(v1, v2) {
      this.loading[v2] = true
      // this.$emit("update:modelValue", false)
      let interval = setInterval(() => {
        if (this.progress <= 100) {
          this.progress++
        } else {
          clearInterval(interval)
        }
      }, 12)
    },
    closeShare1() {
      this.$emit("update:modelValue", false)
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/less/index";

.video-share {
  height: 60vh;
  width: 100%;
  border-radius: 1rem 1rem 0 0;
  color: white;
  box-sizing: border-box;

  .friends {
    border-radius: 1rem;
    margin: 1rem;
    padding: 0 @padding-page;
    @avatar-width: 3.8rem;
    font-size: 1.4rem;
    background: white;

    @item-width: 5.5rem;

    .item {
      height: @item-width;
      color: black;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f3f3f3;

      .left {
        width: @avatar-width;
        height: @avatar-width;
        border-radius: 50%;
        margin-right: 1.5rem;
      }

      .right {
        font-size: 1.4rem;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;

        img {
          height: 2rem;
        }
      }
    }

    .more {
      height: @item-width;
      color: black;
      background: white;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f3f3f3;

      .left {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        margin-left: 1rem;
        margin-right: 2rem;
      }
    }
  }

  @icon-width: 5.8rem;

  .shares {
    @space-width: 1.5rem;

    overflow-x: scroll;
    display: flex;
    padding-right: @space-width * 2;

    .to {
      margin-left: @space-width;
      margin-bottom: @space-width;

      .wrapper {
        box-sizing: border-box;
        background: white;
        width: @icon-width;
        height: @icon-width;
        padding: 1.2rem;
        border-radius: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 100%;
          //height: 100%;
        }
      }

      span {
        margin-top: .7rem;
        color: black;
        font-size: 1rem;
        display: block;
        text-align: center;
      }
    }
  }


  .loading {
    width: 60%;
    height: 60%;
    position: relative;

    @border-width: 3.1px;

    .quan1 {
      position: absolute;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      border: @border-width solid darkgrey;
      border-radius: 50%;
    }

    .quan2 {
      position: absolute;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      border: @border-width solid #514F56;
      border-radius: 50%;
    }

  }


}

</style>
