<template>
  <view class="wrap">
    <view class="title">打卡店铺 :
      <view class="store_name">{{ storeName }}</view>
    </view>
    <view class="title title_back">推广试吃照片（最少 4 张）</view>
    <van-uploader preview-size="170rpx"
      name="img"
      accept="image"
      :capture="['camera']"
      :file-list="afterTryFileList"
      @after-read="afterTry"
      @delete="deleteTry" />
    <view class="title title_back">推广互动照片（最少 4 张）</view>
    <van-uploader preview-size="170rpx"
      accept="image"
      :capture="['camera']"
      :file-list="afterInterFileList"
      @after-read="afterInter"
      @delete="deleteInter" />
    <view class="title title_back">推广成交照片（最少 4 张）</view>
    <van-uploader preview-size="170rpx"
      accept="image"
      :capture="['camera']"
      :file-list="afterDealFileList"
      @after-read="afterDeal"
      @delete="deleteDeal" />
  </view>
</template>

<script>
import { getOnWorkRecordAPI, getPromotionPhotoAPI, getPromotionPhotoRecordAPI } from '@/api'
import { uploadFile } from '@/api/common/upload'
import { v4 as uuidv4 } from 'uuid'
export default {
  data() {
    return {
      storeName: '',
      activityReportedId: '',
      afterTryFileList: [],
      afterInterFileList: [],
      afterDealFileList: []
    }
  },
  created() {
    this.getOnWorkRecordFn()
    this.getPromotionPhotoFn()
  },
  methods: {
    // 获取促销员任务列表
    async getOnWorkRecordFn() {
      const res = await getOnWorkRecordAPI(this.$store.getters.user.id)
      this.storeName = res.data.storeName
      this.activityReportedId = res.data.reportedId // 活动上报 ID
    },
    // 获取推广照片列表
    async getPromotionPhotoFn() {
      const res = await getPromotionPhotoRecordAPI(this.$store.getters.user.id)
      this.afterTryFileList = res.data.tgscPhotoUrls ? res.data.tgscPhotoUrls?.map(o => ({
        url: o,
        type: 'image'
      })) : []
      this.afterInterFileList = res.data.tghdPhotoUrls ? res.data.tghdPhotoUrls?.map(o => ({
        url: o,
        type: 'image'
      })) : []
      this.afterDealFileList = res.data.tgcjPhotoUrls ? res.data.tgcjPhotoUrls?.map(o => ({
        url: o,
        type: 'image'
      })) : []
    },
    // 推广试吃
    async afterTry(event) {
      const photoUrl = await this.uploadPromotionPhoto(event)
      this.afterTryFileList.push({
        url: photoUrl,
        type: 'image'
      })
      // 提交照片给后台
      this.submitPhoto()
    },
    // 推广互动
    async afterInter(event) {
      const photoUrl = await this.uploadPromotionPhoto(event)
      this.afterInterFileList.push({
        url: photoUrl,
        type: 'image'
      })
      this.submitPhoto()
    },
    // 推广成交
    async afterDeal(event) {
      const photoUrl = await this.uploadPromotionPhoto(event)
      this.afterDealFileList.push({
        url: photoUrl,
        type: 'image'
      })
      this.submitPhoto()
    },
    // 上传推广照片
    async uploadPromotionPhoto(event) {
      const { file: { url } } = event.detail;
      // 按照年-月/日/手机号/类型/uuid.png 格式组成字符串
      const year = new Date().getFullYear()
      const month = new Date().getMonth() + 1
      const day = new Date().getDate()
      const phone = this.$store.getters.user.phone
      const photoUrl = await uploadFile(`promotion/${year}-${month}/${day}/${phone}/${uuidv4()}.png`, url)
      return photoUrl
    },
    // 提交照片
    async submitPhoto() {
      const res = await getPromotionPhotoAPI({
        activityReportedId: this.activityReportedId,
        temporaryId: this.$store.getters.user.id,
        temporaryName: this.$store.getters.user.name,
        tgscPhotoUrls: [...this.afterTryFileList.map(o => o.url)],
        tghdPhotoUrls: [...this.afterInterFileList.map(o => o.url)],
        tgcjPhotoUrls: [...this.afterDealFileList.map(o => o.url)]
      })
      console.log(res)
    },
    deleteTry(event) {
      this.afterTryFileList.splice(event.detail.index, 1) 
      this.submitPhoto()
    },
    // 前端删除照片
    deleteDeal(event) {
      this.afterDealFileList.splice(event.detail.index, 1)
      this.submitPhoto()
    },
    // 前端删除照片
    deleteInter(event) {
      this.afterInterFileList.splice(event.detail.index, 1)
      this.submitPhoto()
    }
  }
}
</script>

<style lang="scss"
  scoped>
  ::v-deep .uni-forms {
    padding: 10px;

    .uni-forms-item__label {
      padding: 0;
    }

    .uni-forms-item {
      align-items: center;
    }

    .uni-forms-item__content {
      margin-left: 20px;
    }
  }

  .wrap {
    background-color: white;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    .store_name {
      font-size: 30rpx;
      display: inline-block;
      color: #7b7b7b;
      padding-left: 30rpx;
    }

    .title {
      font-size: 28rpx;
      padding: 10px;
    }

    .title_back {
      background-color: rgb(227, 227, 227);
    }
  }
</style>
