<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">
        <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>
  </div>
</template>

<script setup>
import { uploadFileToOSSAPI, getLocation } from '@/api'
import { typeOptions as typeOption } from '@/views/mobile/constant'
import convention from './tabs/categoryInfomation.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: '请开启软件的定位授权，再试' + JSON.stringify(error),
        })
      },
      {
        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>
.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;
    }
  }

}
</style>