<template>
  <!-- 稽查任务 -->
  <div class="wrap">
    <van-nav-bar left-arrow
      left-text="返回"
      @click-left="router.back()">
    </van-nav-bar>
    <div class="content">
      <p class="title">稽查任务:</p>
      <!-- 终端名称 -->
      <div class="terminal-wrap">
        <div>
          <van-image width="2.25rem"
            height="3.5rem"></van-image>
        </div>
        <div class="terminal-info">
          <p>终端名称：世纪港湾广缘超时</p>
          <p>终端编码：P0500052306</p>
          <p>经销商：秦皇岛红朗森商贸有限公司</p>
          <p>地址：河北省秦皇岛市海港区北环路街道秦皇岛冻结附录</p>
        </div>
      </div>
      <!-- 地址 -->
      <div class="location-wrap">
        <van-icon name="location-o"
          class="location-icon" />
        <van-loading size="20px"
          v-if="addressLoading">正在获取您的位置...</van-loading>
        <p v-else>{{ addressStr }}</p>
        <van-icon name="replay"
          class="refresh-icon"
          @click="handleClickLocation" />
      </div>
      <!-- 门头照上传 -->
      <div class="header-photo-section">
        <van-field label="门头照"
          label-align="top">
          <template #input>
            <van-uploader :max-count="2"
              accept="image/*"
              v-model="form.posPhotos"
              :after-read="posPhotosRead"
              preview-size="120"
              @delete="deletePosPhotos">
            </van-uploader>
          </template>
        </van-field>
      </div>
      <!-- 门店类型选择 -->
      <van-field :model-value="form.selectedType.join('')"
        label="门店类型"
        label-align="top"
        placeholder="请选择"
        @click="showTypePopup = true" />
      <van-popup v-model:show="showTypePopup"
        position="bottom"
        @close="showTypePopup = false">
        <van-picker v-model="form.selectedType"
          :columns="typeOptions"
          @confirm="handleTypeConfirm"
          @cancel="showTypePopup = false" />
      </van-popup>
      <!-- 信息填写组 -->
      <van-tabs v-model:active="active"
        class="tabs"
        swipeable
        sticky>
        <van-tab title="常规陈列">
          <convention />
        </van-tab>
        <van-tab title="档期陈列">
          <scheduleDisplay />
        </van-tab>
        <van-tab title="档期补差">
          <scheduleAdjustment />
        </van-tab>
        <van-tab title="品类信息">
          <categoryInfomation />
        </van-tab>
      </van-tabs>
      <!-- 任务总结 -->
      <div class="task-summary">
        <p class="title">其他：</p>
        <van-field label="礼盒/礼袋是否在售："
          label-align="top">
          <template #input>
            <van-checkbox-group v-model="form.verify"
              direction="horizontal"
              shape="square">
              <van-checkbox name="礼盒">礼盒</van-checkbox>
              <van-checkbox name="礼袋">礼袋</van-checkbox>
            </van-checkbox-group>
          </template>
        </van-field>
        <van-field label="我品 SKU 总数："
          placeholder="请输入"
          label-align="top" />
        <van-field label="备注："
          placeholder="请输入"
          label-align="top"
          type="textarea"
          border />
        <!-- 大日期产品照片 -->
        <div class="header-photo-section">
          <van-field label="大日期产品照片"
            label-align="top">
            <template #input>
              <van-uploader :max-count="2"
                accept="image/*"
                v-model="form.posPhotos"
                :after-read="posPhotosRead"
                preview-size="120"
                @delete="deletePosPhotos">
              </van-uploader>
            </template>
          </van-field>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { uploadFileToOSSAPI, getLocation } from '@/api'
import { typeOptions as typeOption } from '@/views/mobile/constant'
import convention from './tabs/conventionalDisplay.vue'
import scheduleDisplay from './tabs/scheduleDisplay.vue'
import scheduleAdjustment from './tabs/scheduleAdjustment.vue'
import categoryInfomation from './tabs/categoryInfomation.vue'

const router = useRouter();
const form = reactive({
  selectedType: [], // 门店类型
})

// 地理定位
const addressStr = ref('')
const addressLoading = ref(true)
const getLocationFn = () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      async function (position) {
        const lat = position.coords.latitude;
        const lng = position.coords.longitude;
        const res = await getLocation({
          lat,
          lng
        })
        const { standard_address } = res.result.formatted_addresses
        addressStr.value = standard_address

        addressLoading.value = false
      },
      function (error) {
        showDialog({
          title: '系统提示',
          message: '请开启软件的定位授权，再试',
        })
      },
      {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
      }
    );
  } else {
    showDialog({
      title: '系统提示',
      message: '你的设备不支持定位',
    })
  }
}
getLocationFn()
const handleClickLocation = () => {
  addressLoading.value = true
  setTimeout(() => {
    getLocationFn()
  }, 1500)
}

// 门头照
// 门头照上传逻辑
// POS 两张照片
const posPhotosRead = async (file) => {

  // 处理上传的文件
  const date = new Date()
  const month = date.getMonth() + 1
  const theDate = date.getDate()
  const pictureUrl = await uploadFileToOSSAPI(`risk/${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
  }

}
// 删除 照片
const deletePosPhotos = async () => {
  if (isInitializing.value) return

  showNotify({ type: 'success', message: 'POS 照片删除成功' })
}

// 门店类型
const showTypePopup = ref(false)
const typeOptions = ref(typeOption); // 门店类型
// 确认门店类型
const handleTypeConfirm = (val) => {
  form.selectedType = val;
  showTypePopup.value = false;
};

// 信息填写组
const active = ref(0)
</script>

<style scoped
  lang="scss">
  .wrap {
    background-color: #f5f5f5;
    min-height: 100vh;
    font-size: 16px;

    .content {
      padding: 20px;

      .title {
        margin: 0;
        font-size: 14px;
        font-weight: bold;
      }

      /* 终端名称信息 */
      .terminal-wrap {
        margin-top: 10px;
        padding: 10px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        gap: 20px;

        .terminal-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          p {
            font-size: 14px;
            margin: 0;
            color: #a1a1a1;
          }

          p:first-child {
            color: black;
            font-size: 15px;
            font-weight: bold;
          }
        }


      }

      /* 位置信息 */
      .location-wrap {
        margin-top: 10px;
        padding: 10px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .location-icon {
          font-size: 20px;
          color: #da5c50;
        }

        p {
          font-size: 14px;
          margin: 0;
        }
      }

      /* 门头照 */
      .header-photo-section {
        margin-top: 10px;

        ::v-deep(.van-uploader__upload) {
          width: 80px !important;
          height: 80px !important;
          border: 1px dashed #ccc;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #f8f8f8;
        }
      }

      /* 信息填写组 */
      .tabs {
        margin-top: 10px;
      }


      /* 其他 */
      .task-summary {
        margin-top: 10px;
        background: white;
        padding: 10px;
        color: var(--main-color);

        .title {
          margin-bottom: 10px;
        }

        ::v-deep(textarea) {
          border: 1px solid lightgray;
        }

        .van-cell {
          padding: 0;

          .van-checkbox {
            margin-bottom: 10px;
          }
        }
      }
    }

  }
</style>