<template>
  <div>
    <van-nav-bar left-text="返回"
      left-arrow
      @click-left="clickBack()"
      fixed
      placeholder />
    <!-- 店铺门头照组 -->
    <div class="group-container bg-white">
      <!-- <h2 class="group-title">
        店铺门头照
        <div class="title-divider"></div>
      </h2> -->
      <div class="form-item">
        <label>店铺门头照：</label>
      </div>
      <div class="form-item">
        <van-uploader :max-count="1"
          accept="image/*"
          v-model="form.storePicture"
          :after-read="storePictureRead"
          preview-size="120"
          @delete="deleteStorePicture">
        </van-uploader>
      </div>
    </div>
    <!-- 现场考核组 -->
    <div class="group-container">
      <h2 class="group-title">
        现场考核
        <div class="title-divider"></div>
      </h2>
      <div class="section">
        <div class="form-item">
          <label>是否执行：</label>
          <van-radio-group v-model="form.planStatus"
            @change="planStatusChange">
            <van-radio name="是">是</van-radio>
            <van-radio name="否">否</van-radio>
          </van-radio-group>
        </div>
        <div class="form-item"
          style="display: flex; align-items: center; margin-top: 20px;">
          <label>促销员人数：</label>
          <div class="custom-counter">
            <button @click="decreaseCount">-</button>
            <span>{{ form.temNum }}</span>
            <button @click="increaseCount">+</button>
          </div>
        </div>
        <div class="form-item">
          <label>地堆：</label>
          <van-radio-group v-model="form.storeDd"
            @change="changeStoreDd">
            <van-radio name="是">是</van-radio>
            <van-radio name="否">否</van-radio>
          </van-radio-group>
        </div>
      </div>
    </div>

    <!-- 促销员考核组 -->
    <div class="group-container bg-white">
      <h2 class="group-title">
        促销员考核
        <div class="title-divider"></div>
      </h2>
      <div class="section">
        <div class="form-item">
          <label>促销员是否在岗：</label>
          <van-radio-group v-model="form.temOnWork"
            @change="changeTemOnWork">
            <van-radio name="在岗">在岗</van-radio>
            <van-radio name="离岗">离岗 <span v-show="form.temOnWork === '离岗'">{{ temOnWorkTimeRange }}</span></van-radio>
          </van-radio-group>
        </div>
        <div class="form-item">
          <label>话述是否达标：</label>
          <van-radio-group v-model="form.temHs"
            @change="changeTemHs">
            <van-radio name="达标">达标</van-radio>
            <van-radio name="未达标">未达标</van-radio>
          </van-radio-group>
        </div>
        <div class="form-item">
          <label>物料是否齐全：</label>
          <van-radio-group v-model="form.temWl"
            @change="changeTemWl">
            <van-radio name="齐全">齐全</van-radio>
            <van-radio name="缺少">缺少</van-radio>
          </van-radio-group>
        </div>
        <div class="form-item">
          <label>着装是否达标：</label>
          <van-radio-group v-model="form.temZz"
            @change="changeTemZz">
            <van-radio name="达标">达标</van-radio>
            <van-radio name="未达标">未达标</van-radio>
          </van-radio-group>
        </div>
      </div>
    </div>

    <!-- 在/离岗取证组 -->
    <div class="group-container">
      <h2 class="group-title">
        在/离岗取证
        <div class="title-divider"></div>
      </h2>
      <div class="section">
        <div class="form-item">
          <label>在/离岗取证（最少2张照片）：</label>
        </div>
        <div class="form-item">
          <van-uploader :max-count="2"
            accept="image/*"
            v-model="form.temWorkPhotos"
            :after-read="temWorkPhotosRead"
            preview-size="120"
            @delete="deleteTemWorkPhotos">

          </van-uploader>
        </div>
        <div class="form-item">
          <label>特陈照片（1张）：</label>
        </div>
        <div class="form-item">
          <van-uploader :max-count="1"
            accept="image/*"
            v-model="form.storeTcPhoto"
            :after-read="storeTcPhotoRead"
            preview-size="120"
            @delete="deleteStoreTcPhoto">

          </van-uploader>
        </div>
        <div class="form-item">
          <label>主货架照片（1张）：</label>
        </div>
        <div class="form-item">
          <van-uploader :max-count="1"
            accept="image/*"
            v-model="form.storeZhjPhoto"
            :after-read="temOnWorkPictureRead"
            preview-size="120"
            @delete="deleteStoreZhjPhoto">

          </van-uploader>
        </div>
        <div class="form-item">
          <label>POS金额：</label>
          <van-field v-model="form.posRmb"
            type="number"
            :controls="true"
            placeholder="请输入POS金额"
            style="margin-top: 10px;"
            @input="posRmbChange" />
        </div>
        <div class="form-item">
          <label>POS照片（两张）：</label>
        </div>
        <div class="form-item">
          <van-uploader :max-count="2"
            accept="image/*"
            v-model="form.posPhotos"
            :after-read="posPhotosRead"
            preview-size="120"
            @delete="deletePosPhotos">

          </van-uploader>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 导入 useRouter
import { getExamineDetail, createExamine, uploadFileToOSSAPI } from '@/api'
import userStore from '@/store/modules/user'
import { v4 as uuidv4 } from 'uuid';
import { parseTime } from '@/utils'

const route = useRoute();
const router = useRouter();

const employeeNo = userStore().empInfo.empNo; // 员工工号

const form = ref({
  storePicture: [], // 店铺门头照
  temNum: null, // 促销员数量
  storeDd: '否', // 是否有地堆
  planStatus: '否', // 是否执行
  temOnWork: '离岗', // 是否在岗
  temHs: '未达标', // 话述
  temWl: '缺少', // 物料
  temZz: '未达标', // 着装
  temWorkPhotos: [], // 在/离岗取证照片
  storeTcPhoto: [], // 特陈照
  storeZhjPhoto: [], // 主货架照
  posPhotos: [], // POS 照片
  posRmb: null, // POS 金额
})
const planId = ref() // 计划 ID
const storeName = ref('') // 计划-店铺名称

// 现场考核相关
const isExecute = ref(false);
const promoterCount = ref(1);
const isStack = ref('1');

// 促销员考核相关
const isPromoterOnDuty = ref('0');
const onDutyTimeRange = '16:36 - 16:41';
const isSpeechStandard = ref('1');
const isMaterialsComplete = ref('1');
const isDressStandard = ref('0');
const temOnWorkTimeRange = ref('') // 离岗时间

// 右侧部分相关
const posAmount = ref(1);

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

const decreaseCount = async () => {
  if (form.value.temNum > 0) {
    await createExamine({
      id: form.value.id,
      temNum: form.value.temNum - 1,
      employeeId: userStore().userInfo.userId, // 稽查人id
      employeeName: userStore().userInfo.nickName, // 稽查人名字
      employeeNo: employeeNo, // 稽查人工号
    })
    form.value.temNum--;
  }
};

const increaseCount = async () => {
  await createExamine({
    id: form.value.id,
    temNum: form.value.temNum + 1,
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
  form.value.temNum++;
};

// 获取考核详情/创建稽核任务
const getDetail = async () => {
  const res = await getExamineDetail(route.params.examineId)
  planId.value = res.data.planId
  storeName.value = res.data.storeName
  form.value = res.data
  form.value.storePicture = res.data.storePicture ? [{
    url: res.data.storePicture
  }] : []
  // form.value.planStatus = res.data.planStatus === '是'  // 未执行（否）（false）  执行(是）（true）
  // 如果执行了促销人数默认为 1，否则为 0
  form.value.temNum = res.data.temNum || (form.value.planStatus === '是' ? 1 : 0)
  // 如果执行了则所有单选框的值默认有值，否则为否
  if (form.value.planStatus === '是') {
    // 执行
    form.value.storeDd = res.data.storeDd === null ? '是' : res.data.storeDd
    form.value.temOnWork = res.data.temOnWork === null ? '在岗' : res.data.temOnWork
    form.value.temHs = res.data.temHs === null ? '达标' : res.data.temHs
    form.value.temWl = res.data.temWl === null ? '齐全' : res.data.temWl
    form.value.temZz = res.data.temZz === null ? '达标' : res.data.temZz
  } else {
    form.value.storeDd = res.data.storeDd === null ? '否' : res.data.storeDd
    form.value.temOnWork = res.data.temOnWork === null ? '离岗' : res.data.temOnWork
    form.value.temHs = res.data.temHs === null ? '未达标' : res.data.temHs
    form.value.temWl = res.data.temWl === null ? '缺少' : res.data.temWl
    form.value.temZz = res.data.temZz === null ? '未达标' : res.data.temZz
  }

  form.value.temWorkPhotos = res.data?.temWorkPhotos ? (res.data.temWorkPhotos.map(o => {
    return {
      url: o
    }
  })) : []
  form.value.storeTcPhoto = res.data?.storeTcPhoto ? [{
    url: res.data.storeTcPhoto
  }] : []
  form.value.storeZhjPhoto = res.data?.storeZhjPhoto ? [{
    url: res.data.storeZhjPhoto
  }] : []
  form.value.posPhotos = res.data?.posPhotos ? (res.data.posPhotos.map(o => {
    return {
      url: o
    }
  })) : []
  form.value.posRmb = res.data.posRmb || 0
}
getDetail()

// 店铺门头照上传
const storePictureRead = async (file) => {
  // 处理上传的文件
  const date = new Date()
  const month = date.getMonth() + 1
  const theDate = date.getDate()
  const pictureUrl = await uploadFileToOSSAPI(`examine/${date.getFullYear()}-${month}/${theDate}/${planId.value}/${employeeNo}/${uuidv4()}.png`, file.file)

  await createExamine({
    id: form.value.id,
    storePicture: pictureUrl,
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}
// 删除店铺门头照
const deleteStorePicture = async () => {
  await createExamine({
    id: form.value.id,
    storePicture: '',
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}

// 执行状态改变
const planStatusChange = async (val) => {
  form.value.planStatus = val
  await createExamine({
    id: form.value.id,
    planStatus: form.value.planStatus,
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}

// 改变地堆状态
const changeStoreDd = async () => {
  await createExamine({
    id: form.value.id,
    storeDd: form.value.storeDd,
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}

// 改变在岗状态
const changeTemOnWork = async () => {
  if (form.value.temOnWork === '离岗') {
    changeTemOnWorkTimeRange()
  }
  // 保存给后台状态
  await createExamine({
    id: form.value.id,
    temOnWork: form.value.temOnWork,
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}
const changeTemOnWorkTimeRange = () => {
  // temOnWorkTimeRange
  // 从当前时间到 15 分钟以后，用 parseTime 只显示时和分
  const currentTime = new Date()
  const futureTime = new Date(currentTime.getTime() + 15 * 60000)
  const formatteCurrentTime = parseTime(currentTime, '{h}:{i}')
  const formattedTime = parseTime(futureTime, '{h}:{i}')
  temOnWorkTimeRange.value = `${formatteCurrentTime} - ${formattedTime}`
}
changeTemOnWorkTimeRange()

// 改变话术物料和着装时把参数传给后台
const changeTemHs = async () => {
  await createExamine({
    id: form.value.id,
    temHs: form.value.temHs,
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}
const changeTemWl = async () => {
  await createExamine({
    id: form.value.id,
    temWl: form.value.temWl,
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}
const changeTemZz = async () => {
  await createExamine({
    id: form.value.id,
    temZz: form.value.temZz,
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}

// 在/离岗照片上传
const temWorkPhotosRead = async (file) => {
  // 处理上传的文件
  const date = new Date()
  const month = date.getMonth() + 1
  const theDate = date.getDate()
  const pictureUrl = await uploadFileToOSSAPI(`examine/${date.getFullYear()}-${month}/${theDate}/${planId.value}/${employeeNo}/${uuidv4()}.png`, file.file)
  // 如果当前对象包含 objectUrl 则是组件上传的，替换当前元素的对象
  const index = form.value.temWorkPhotos.findIndex(o => o.objectUrl)
  form.value.temWorkPhotos[index] = {
    url: pictureUrl
  }

  await createExamine({
    id: form.value.id,
    temWorkPhotos: form.value.temWorkPhotos.map(o => o.url),
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}

// 删除在/离岗照片
const deleteTemWorkPhotos = async () => {
  await createExamine({
    id: form.value.id,
    temWorkPhotos: form.value.temWorkPhotos.map(o => o.url),
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}

// 特陈照片上传
const storeTcPhotoRead = async (file) => {
  // 处理上传的文件
  const date = new Date()
  const month = date.getMonth() + 1
  const theDate = date.getDate()
  const pictureUrl = await uploadFileToOSSAPI(`examine/${date.getFullYear()}-${month}/${theDate}/${planId.value}/${employeeNo}/${uuidv4()}.png`, file.file)

  await createExamine({
    id: form.value.id,
    storeTcPhoto: pictureUrl,
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}

// 删除特陈照片
const deleteStoreTcPhoto = async () => {
  await createExamine({
    id: form.value.id,
    storeTcPhoto: '',
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}

// 主货架照片
const temOnWorkPictureRead = async (file) => {
  // 处理上传的文件
  const date = new Date()
  const month = date.getMonth() + 1
  const theDate = date.getDate()
  const pictureUrl = await uploadFileToOSSAPI(`examine/${date.getFullYear()}-${month}/${theDate}/${planId.value}/${employeeNo}/${uuidv4()}.png`, file.file)

  await createExamine({
    id: form.value.id,
    storeZhjPhoto: pictureUrl,
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}
// 删除主货架照片
const deleteStoreZhjPhoto = async () => {
  await createExamine({
    id: form.value.id,
    storeZhjPhoto: '',
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}

// POS 两张照片
const posPhotosRead = async (file) => {
  // 处理上传的文件
  const date = new Date()
  const month = date.getMonth() + 1
  const theDate = date.getDate()
  const pictureUrl = await uploadFileToOSSAPI(`examine/${date.getFullYear()}-${month}/${theDate}/${planId.value}/${employeeNo}/${uuidv4()}.png`, file.file)
  // 判断 objectUrl
  const index = form.value.posPhotos.findIndex(o => o.objectUrl)
  form.value.posPhotos[index] = {
    url: pictureUrl
  }

  await createExamine({
    id: form.value.id,
    posPhotos: form.value.posPhotos.map(o => o.url),
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}
// 删除 POS 照片
const deletePosPhotos = async () => {
  await createExamine({
    id: form.value.id,
    posPhotos: form.value.posPhotos.map(o => o.url),
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}

// POS 金额修改
const posRmbChange = async () => {
  await createExamine({
    id: form.value.id,
    posRmb: form.value.posRmb || 0,
    employeeId: userStore().userInfo.userId, // 稽查人id
    employeeName: userStore().userInfo.nickName, // 稽查人名字
    employeeNo: employeeNo, // 稽查人工号
  })
}

</script>

<style scoped>
html,
body {
  margin: 0;
  padding: 0;
}

.container {
  padding: 16px;
}

.group-container {
  margin-bottom: 0;
  padding: 16px;
}

.section {
  margin-bottom: 20px;
}

.form-item {
  margin-bottom: 12px;
}

h2 {
  font-size: 18px;
  margin-bottom: 8px;
}

.uploader-preview img {
  width: 100%;
  height: auto;
}

label {
  font-size: 0.373rem;
}

:deep(.van-radio__label) {
  font-size: 0.373rem;
}

.bg-white {
  background-color: #fff;
}

.bg-gray-100 {
  background-color: transparent;
  /* 去掉灰色背景 */
}

.group-title {
  /* 减小组标题的字体大小 */
  font-size: 14px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.group-title .title-divider {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 4px;
}

/* 让具体 item 的标题不加粗 */
label {
  font-size: 0.373rem;
  font-weight: normal;
}

.custom-counter {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.custom-counter button {
  width: 25px;
  height: 25px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 缩小按钮内文本的字体大小 */
  font-size: 14px;
}

.custom-counter span {
  width: 30px;
  text-align: center;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 3px 0;
  font-size: 14px;
}

/* 给单选框添加上下间距 */
:deep(.van-radio) {
  margin-top: 8px;
  margin-bottom: 8px;
}

/* 调整预览图片的大小 */
.uploader-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保图片覆盖整个容器 */
}
</style>


<style scoped>
/* 自定义促销员数量输入框的样式 */
.custom-promoter-count-field .van-field__control {
  /* 调整输入框宽度 */
  width: 80px;
}

.custom-promoter-count-field .van-field__button {
  /* 调整 + - 按钮的颜色 */
  color: #007aff;
}

:deep(.van-field) {
  height: 30px;
  /* 可以根据需要调整高度 */
  line-height: 30px;
  /* 确保文本垂直居中 */
  padding: 0;
  /* 外部 padding 覆盖成 0 */
}

/* 使用样式穿透为 POS 金额输入框添加背景色 */
:deep(.van-field__control) {
  background-color: #f5f5f5;
  /* 可根据需要调整背景色 */
  padding-left: 16px;
}
</style>