<template>
  <div class="mobile-container">
    <van-nav-bar left-text="返回"
      left-arrow
      @click-left="clickBack()" />
    <van-cell-group>
      <van-cell>
        <template #title>
          <p>{{ planDetail.storeName }}</p>
        </template>
        <template #label>
          <p class="employee">{{ planDetail.employeeName }}</p>
          <p v-if="planDetail.planStatus === 0">未执行</p>
          <p v-else
            class="plan-go">执行</p>
        </template>
        <template #value>
          <p>{{ planDetail.pattern }}</p>
          <p>{{ parseTime(planDetail.date, '{y}:{m}:{d}') }}</p>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 任务列表 -->
    <van-pull-refresh v-model="refreshLoading"
      :pull-distance="100"
      @refresh="onRefresh">
      <van-list v-model:loading="loading"
        :finished="finished"
        :immediate-check="false"
        finished-text="没有更多了"
        @load="onLoad">
        <van-cell-group inset>
          <van-cell v-for="item in planList"
            :key="item.id"
            label-class="image-cell">
            <template #title>
              <p>{{ item.temporaryName }}</p>
              <p>{{ item.province + item.city }}</p>
            </template>
            <template #label>
              <div class="image-wrap">
                <van-image v-for="o, index in item.photoList"
                  :src="o.photoUrl"
                  width="75"
                  height="100"
                  @click="previewImage(item.photoList, index)"></van-image>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </van-pull-refresh>

    <van-image-preview v-model:show="show"
      :images="images"
      :start-position="startIndex"
      @change="onChange">
      <template v-slot:index>第{{ index + 1 }}张</template>
    </van-image-preview>
  </div>
</template>

<script setup>
import { getPlanDetailAPI } from '@/api'
import { parseTime } from '@/utils'
// 获取路由路径上的 id 参数
const route = useRoute();
const router = useRouter();
const id = route.params.id;

// 获取计划详情
const planDetail = ref({})
const planList = ref([])
const getPlanDetail = async () => {
  const res = await getPlanDetailAPI(id)
  planDetail.value = res.data.planInfo

  // 循环多人打卡记录
  planList.value = res.data.reporteds?.map(o => {
    const { tgcjPhotoInfos: tgcjPhotoInfosList, tghdPhotoInfos: tghdPhotoInfosList, tgscPhotoInfos: tgscPhotoInfosList } = o.reported
    if (tgscPhotoInfosList) {
      var tgscPhotoInfos = [...tgscPhotoInfosList?.map(item => ({
        time: parseTime(item.createTime, '{h}:{i}'),
        photoUrl: item.photoUrl
      }))]
    }
    if (tghdPhotoInfosList) {
      var tghdPhotoInfos = [...tghdPhotoInfosList?.map(item => ({
        time: parseTime(item.createTime, '{h}:{i}'),
        photoUrl: item.photoUrl
      }))]
    }
    if (tgcjPhotoInfosList) {
      var tgcjPhotoInfos = [...tgcjPhotoInfosList?.map(item => ({
        time: parseTime(item.createTime, '{h}:{i}'),
        photoUrl: item.photoUrl
      }))]
    }

    // 判断上班卡，午休下班卡，午休上班卡，下班卡是否有值，有则添加到数组中
    // 数组是二维数组，第一到三是推广数据，第四个是打卡数据
    const { clockInTime, clockInPhoto, noonClockOutTime, noonClockOutPhoto, noonClockInTime, noonClockInPhoto, clockOutTime, clockOutPhoto } = o.clock
    const clockList = []
    if (clockInTime) {
      clockList.push({
        time: parseTime(clockInTime, '{h}:{i}'),
        title: '上班卡',
        photoUrl: clockInPhoto
      })
    }
    if (noonClockOutTime) {
      clockList.push({
        time: parseTime(noonClockOutTime, '{h}:{i}'),
        title: '午休下班卡',
        photoUrl: noonClockOutPhoto
      })
    }
    if (noonClockInTime) {
      clockList.push({
        time: parseTime(noonClockInTime, '{h}:{i}'),
        title: '午休上班卡',
        photoUrl: noonClockInPhoto
      })
    }
    if (clockOutTime) {
      clockList.push({
        time: parseTime(clockOutTime, '{h}:{i}'),
        title: '下班卡',
        photoUrl: clockOutPhoto
      })
    }

    // 组装数据
    const photoDialogList = ref([{
      title: '推广试吃照片',
      list: tgscPhotoInfos
    }, {
      title: '推广互动照片',
      list: tghdPhotoInfos
    }, {
      title: '推广成交照片',
      list: tgcjPhotoInfos
    }, {
      title: '考勤打卡照片',
      list: clockList
    }])
    // 把数组里图片合并成一个大数组
    const allPhotoList = ref([])
    photoDialogList.value.forEach(o => {
      if (o.list) {
        allPhotoList.value.push(...o.list)
        allPhotoList.value.push(...o.list)
        allPhotoList.value.push(...o.list)
      }
    })
    return {
      id: o.reported.id, // 用的是促销上报的id，不是打卡的 id 
      province: o.reported.province, // 省份
      city: o.reported.city, // 城市
      temporaryName: o.reported.temporaryName, // 临时名称
      photoList: allPhotoList, // 照片列表
    }
  })
}
getPlanDetail()

const refreshLoading = ref(false)
const onRefresh = () => {
  refreshLoading.value = true
  setTimeout(() => {
    refreshLoading.value = false
    getPlanDetail()
  }, 1000)
}
const loading = ref(false)
const finished = ref(false)
const onLoad = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    finished.value = true
  }, 1000)
}

const clickBack = () => {
  router.back()
}

const show = ref(false)
const images = ref([])
const index = ref(0)
const startIndex = ref(0)
const previewImage = (list, ind) => {
  show.value = true
  startIndex.value = ind
  images.value = list.map(o => o.photoUrl)
}
const onChange = (ind) => {
  index.value = ind
}
</script>

<style scoped>
p {
  margin: 0;
}

.plan-go {
  color: #39bb74;
}

.mobile-container {
  background: #f5f5f5;
  min-height: 100vh;

  .van-cell-group {
    background: #f5f5f5;
  }

  .van-list {
    margin-top: 20px;
    min-height: 100vh;
  }

  ::v-deep(.van-cell__title) {
    width: 100%;

    .image-wrap {
      /* 强制内容在一行 */
      white-space: nowrap;
      flex: 1;
      overflow: scroll;

      .van-image {
        display: inline-block;
        margin: 0 10px;
      }
    }
  }
}

::v-deep(.employee) {
  margin-bottom: 5px !important;
}

::v-deep(.van-popup--right) {
  width: 85% !important;
}

::v-deep(.van-cell__label) {
  font-size: 14px !important;
}
</style>