<template>
  <!-- 任务列表 -->
  <van-list v-model:loading="loading"
    :finished="finished"
    :immediate-check="false"
    finished-text="没有更多了"
    @load="onLoad">
    <van-cell-group inset
      v-if="planList?.length > 0">
      <van-cell v-for="item, index in planList"
        :key="item.id">
        <template #title>
          <p class="cell-info">
            <span>{{ item.temporaryName }}</span>
            <van-button class="delete-btn"
              type="danger"
              v-if="showDelete(planDetail)"
              @click="deleteView(item, index)">删除</van-button>
          </p>
          <p>参考地址：{{ item.province + item.city + item.addr }}</p>
        </template>
        <template #label>
          <div class="item"
            v-for="o in item.photoList">
            <template v-if="o.list">
              <p class="black_title">{{ o.title }}：</p>
              <div class="image-wrap">
                <div class="small-item"
                  v-for="obj, index in o.list">
                  <van-image :src="obj.photoUrl"
                    @click="previewImage(o.list, index)" />
                  <p>{{ obj.title }}</p>
                  <p>{{ obj.time }}</p>
                </div>
              </div>
            </template>
          </div>
        </template>
      </van-cell>
    </van-cell-group>
  </van-list>
  <!-- 图片预览 -->
  <van-image-preview v-model:show="show"
    :images="images"
    :start-position="startIndex"
    @change="onChange">
    <template v-slot:index>第{{ index + 1 }}张</template>
  </van-image-preview>
</template>

<script setup>
import { parseTime } from '@/utils'
import { deletePromotionSystemAPI } from '@/api'

const { proxy } = getCurrentInstance()

const props = defineProps({
  planDetail: {
    type: Object,
    default: () => ({})
  },
  planList: {
    type: Array,
    default: () => []
  }
})
const emits = defineEmits(['refresh'])

// 加载更多-刷新列表
const loading = ref(false)
const finished = ref(false)
const onLoad = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    finished.value = true
  }, 1000)
}

// 图片预览
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
}

// 删除计划
// 是否展示删除按钮
const showDelete = (row) => {
  // 上报日期不是当月则隐藏按钮
  // const date = parseTime(row.date, '{y}-{m}')
  // const currentDate = parseTime(new Date(), '{y}-{m}')
  // return date === currentDate
  return true
}
// 点击删除
const deleteView = (item, index) => {
  // 确认是否删除
  proxy.$modal.confirm('确认删除该记录吗？').then(async () => {
    // 删除
    await deletePromotionSystemAPI(item.id)
    proxy.$modal.msgSuccess('删除成功')
    props.planList.splice(index, 1)
    emits('refresh')
    proxy.eventBus.emit('delPromotionTaskEvent')
  })
}
</script>

<style scoped
  lang="scss">

  /* 任务列表 */
  .van-list {
    margin-top: 20px;
    overflow: hidden;

    .van-cell-group {
      margin: 0 20px;
      background-color: transparent;

      /* 每个上报人组 */
      ::v-deep(.van-cell) {
        width: 100%;
        margin-top: 20px;

        .van-cell__title {
          width: 100%;

          .cell-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;

            .delete-btn {
              height: 30px;
            }
          }

          .van-cell__label {

            /* 每个照片组（推广试吃，推荐成交） */
            .item {
              margin-top: 20px;

              /* 横向图片容器 */
              .image-wrap {
                /* 强制内容在一行 */
                white-space: nowrap;
                overflow: scroll;
                overflow-y: hidden;


                .small-item {
                  width: 125px;
                  text-align: center;
                  display: inline-block;

                  .van-image {
                    height: 135px;
                  }

                  p {
                    display: block;
                  }

                }

                &::-webkit-scrollbar-track {
                  background-color: transparent;
                }

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

        &:nth-child(n+2) {
          margin-top: 20px;
        }
      }
    }
  }
</style>