<template>
  <view class="paper-detail">
    <view>
      <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="">
        <view class="paper-detail-title">纸品详情</view>
        <view slot="left"></view>
        <view slot="right" class="paper-detail-right-title" @tap="shareTap">分享</view>
      </uni-nav-bar>
    </view>
    <view class="paper-detail-info">
      <view>
        <text class="paper-detail-info-text">纸品名称：</text>
        <text class="paper-detail-info-subtext">{{ form.name }}</text>
      </view>
      <view>
        <text class="paper-detail-info-text">纸厂信息：</text>
        <text class="paper-detail-info-subtext">{{ form.manufacturerName }}</text>
      </view>
      <view>
        <text class="paper-detail-info-text">品牌信息：</text>
        <text class="paper-detail-info-subtext">{{ form.brandName }}</text>
      </view>
      <view>
        <text class="paper-detail-info-text">纸种信息：</text>
        <text class="paper-detail-info-subtext">{{ form.categoryName }}</text>
      </view>
    </view>
    <uGap></uGap>
    <view class="paper-detail-list">
      <view class="paper-detail-list-title paper-bottom-border">纸品售价</view>
      <view>
        <uni-table emptyText="暂无更多数据">
          <!-- 表头行 -->
          <uni-tr class="paper-table-title">
            <uni-th align="left" width="55">克重</uni-th>
            <uni-th align="left" width="65">现款单价</uni-th>
            <uni-th align="left" width="65">库存</uni-th>
            <uni-th align="left" width="75">是否特价</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item, index) in skuList" :key="index">
            <uni-td>{{ item.weight }}</uni-td>
            <uni-td>{{ item.listPrice }}元</uni-td>
            <uni-td>{{ transformStock(item.stock, item.stockUnit) }}</uni-td>
            <uni-td>{{ item.isPromoting === true ? '是' : '否' }}</uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>
    <uGap></uGap>
    <view class="paper-detail-list">
      <view class="paper-detail-list-title">纸品图片</view>
      <view class="paper-list-view">
        <image v-for="(item, index) in imgList" :key="index" class="paper-detail-list-image" :src="item" mode=""></image>
      </view>
    </view>
    <uGap></uGap>
    <view class="paper-detail-list paper-bottom-border">
      <view class="paper-detail-list-title">商品买点</view>
      <view class="paper-detail-list-text">
        <text>{{ form.sellingProposition }}</text>
      </view>
    </view>
    <view class="paper-detail-list paper-bottom-border">
      <view class="paper-detail-list-title">商品描述</view>
      <view class="paper-detail-list-text">
        <text>{{ form.description }}</text>
      </view>
    </view>
    <view class="paper-detail-list paper-bottom-border">
      <view class="paper-detail-list-title">送货说明</view>
      <view class="paper-detail-list-text">
        <text>{{ form.shippingNote }}</text>
      </view>
    </view>
    <view class="paper-detail-list paper-bottom-border">
      <view class="paper-detail-list-title">其他说明</view>
      <view class="paper-detail-list-text">
        <text>{{ form.otherNote }}</text>
      </view>
    </view>
    <view class="flex-col section_4" v-show="visible">
      <image src="/static/imgs/mall/close-icon.png" class="image_9" @click="closeShare" />
      <image style="width: 560rpx; height: 710rpx" :src="shareInfo.storeCodeImg"></image>
      <view class="bottom-group flex-row justify-center view_3">
        <text @click="downPoster">下载海报</text>
        <text @click="showShareArea" class="text_19">分享</text>
      </view>
    </view>
    <view class="flex-col section_8" v-if="shareAreaVisible">
      <view class="flex-row group_20">
        <view class="flex-col items-center" @click="sharePoster('WXSceneSession')">
          <image src="/static/imgs/general/wx-icon.png" class="image_13" />
          <text class="text_33">微信</text>
        </view>
        <view class="flex-col group_22" @click="sharePoster('WXSceneTimeline')">
          <image src="/static/imgs/general/wx-circle-icon.png" class="image_13 image_15" />
          <text class="text_34">朋友圈</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { back, saveImage } from '@/utils/hook.js'
import uGap from '@/components/u-gap/u-gap.vue'
import { H5_URL_PAPER } from '@/enums/index.js'
import { getSupplierDetail, getPaperQrCode } from '@/apis/add-paper.js'
export default {
  components: {
    uGap
  },
  data() {
    return {
      shareInfo: {
        storeCodeImg: '',
        storeName: '',
        paperName: ''
      },
      visible: false, // 分享弹窗
      shareAreaVisible: false, // 底部弹窗
      form: {},
      skuList: [],
      imgList: [],
      id: null
    }
  },
  onLoad(option) {
    if (option.id) {
      this.id = option.id
      this.getDetailList()
    } else {
      uni.showToast({
        title: '参数错误',
        icon: 'none',
        success: () => {
          setTimeout(() => {
            back()
          }, 2000)
        }
      })
    }
  },
  methods: {
    back,
    //获取详情
    getDetailList() {
      let params = {
        mallSupplierIds: this.$store.state.supplierInfo.supplierId,
        productId: this.id
      }
      getSupplierDetail(params).then((res) => {
        if (res) {
          this.form = res
          this.skuList = res.skuList
          this.imgList = res.imgList
          this.$set(this.form, 'categoryName', res.categoryName)
        }
      })
    },
    transformStock(num, unit) {
      if (unit == 2) {
        return `${num}吨`
      }
      if (unit == 1) {
        return `${num}张`
      }
    },
    // 分享
    shareTap() {
      getPaperQrCode({ mallSupplierId: this.$store.state.supplierInfo.supplierId, paperId: this.id }).then((res) => {
        if (res) {
          this.visible = true
          this.shareInfo.storeCodeImg = `data:image/png;base64,${res}`
          this.shareInfo.storeName = this.$store.state.supplierInfo.name
          this.shareInfo.paperName = this.form.name
        }
      })
    },
    closeShare() {
      this.visible = false
      this.shareAreaVisible = false
    },
    downPoster() {
      saveImage(this.shareInfo.storeCodeImg)
    },
    sharePoster(scene) {
      console.log('url', H5_URL_PAPER + `id=${this.$store.state.supplierInfo.supplierId}&paperId=${this.id}`)
      uni.share({
        provider: 'weixin',
        type: 0,
        title: this.shareInfo.paperName,
        summary: '纸厂: ' + this.shareInfo.storeName,
        scene: scene, // WXSceneTimeline,WXSceneSession
        imageUrl: 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/wx-share-paper.png',
        href: H5_URL_PAPER + `id=${this.$store.state.supplierInfo.supplierId}&paperId=${this.id}`,
        success: () => {
          console.log('分享成功')
        },
        fail: (err) => {
          console.log('err', err)
        }
      })
    },
    showShareArea() {
      this.shareAreaVisible = true
    }
  }
}
</script>

<style lang="scss">
.paper-detail {
  .paper-detail-title {
    width: 100%;
    font-size: 36rpx;
    color: #000000;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
  }
  .paper-detail-right-title {
    font-size: 28rpx;
    color: #007aff;
    text-align: right;
    line-height: 40rpx;
    font-weight: 500;
  }
  .paper-detail-info {
    height: 260rpx;
    background: #ffffff;
    padding: 24rpx 32rpx;
    line-height: 56rpx;
  }
  .paper-detail-info-text {
    font-size: 28rrpx;
    color: #888888;
    letter-spacing: 0;
    font-weight: 400;
  }
  .paper-detail-info-subtext {
    font-size: 28rpx;
    color: #333333;
    letter-spacing: 0;
    font-weight: 400;
  }

  .paper-detail-list {
    background: #ffffff;
    .paper-detail-list-title {
      font-size: 28rpx;
      color: #000000;
      letter-spacing: 0;
      font-weight: 600;
      height: 80rpx;
      align-items: center;
      display: flex;
      padding-left: 32rpx;
    }
    .paper-detail-list-text {
      font-size: 28rpx;
      color: #333333;
      letter-spacing: 0;
      font-weight: 400;
      align-items: center;
      line-height: 50rpx;
      padding: 0rpx 32rpx 20rpx 32rpx;
    }
    .paper-table-title {
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.5);
      letter-spacing: 0;
      font-weight: 400;
      background: #f7f8fa;
    }
    .paper-list-view {
      padding: 0rpx 32rpx 32rpx;
    }
    .paper-detail-list-image {
      width: 120rpx;
      height: 120rpx;
      margin-right: 24rpx;
    }
  }
  .paper-bottom-border {
    border-bottom: 2rpx solid #d8d8d8;
  }
}
.section_4 {
  z-index: 100;
  padding: 252rpx 36rpx 403rpx 95rpx;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  .image_9 {
    align-self: flex-end;
    width: 62rpx;
    height: 62rpx;
  }
  .section_5 {
    margin-top: 30rpx;
    padding: 60rpx 0;
    border-radius: 20rpx;
    background-image: url('/static/imgs/mall/qrCode-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 560rpx;
    .section_6 {
      margin: 0 32rpx;
      padding: 50rpx 56rpx 0;
      background-color: rgb(255, 255, 255);
      box-shadow: 0px 2rpx 10rpx 0px rgba(0, 0, 0, 0.1);
      border-radius: 16rpx;
      width: 496rpx;
      .group_13 {
        margin: 0 12rpx;
        position: relative;
        .image_10 {
          width: 360rpx;
          height: 360rpx;
        }
        .image_11 {
          width: 330rpx;
          height: 330rpx;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .group_14 {
        padding: 40rpx 0 56rpx;
        .text_15 {
          color: rgb(51, 51, 51);
          font-size: 30rpx;
          font-weight: 500;
          line-height: 42rpx;
          white-space: nowrap;
        }
        .text_16 {
          margin-top: 10rpx;
          color: rgb(136, 136, 136);
          font-size: 24rpx;
          font-weight: 500;
          line-height: 33rpx;
          white-space: nowrap;
        }
      }
    }
  }
  .bottom-group {
    padding: 0 32rpx;
    .text_19 {
      margin-left: 83rpx;
      margin-right: 62rpx;
    }
  }
  .view_3 {
    margin-top: 40rpx;
    color: rgb(255, 255, 255);
    font-size: 30rpx;
    font-weight: 500;
    line-height: 42rpx;
    white-space: nowrap;
  }
}
.section_8 {
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 213rpx;
  padding: 32rpx 0 52rpx;
  color: rgb(0, 0, 0);
  font-size: 24rpx;
  line-height: 33rpx;
  white-space: nowrap;
  background-color: rgb(255, 255, 255);
  border-radius: 20rpx 20rpx 0px 0px;
  .group_20 {
    margin: 0 32rpx;
    .group_22 {
      margin-left: 36rpx;
      flex: 1 1 auto;
      .image_15 {
        margin-left: 4rpx;
      }
      .text_34 {
        margin-top: 10rpx;
      }
    }
    .text_33 {
      margin-top: 10rpx;
    }
    .image_13 {
      width: 64rpx;
      height: 64rpx;
    }
  }
}
</style>
