<template>
  <div class="mobile-page-container">
    <van-nav-bar left-arrow
      @click-left="router.back()">
    </van-nav-bar>
    <div class="terminal-info-container">
      <p class="title">录入终端信息</p>
      <div class="content">
        <!-- 终端名称输入 -->
        <van-field v-model="terminalName"
          label="终端名称："
          label-align="top"
          placeholder="请输入"
          class="input-field" />

        <!-- 门头照上传 -->
        <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>
      </div>

    </div>
    <!-- 操作按钮 -->
    <div class="button-group">
      <div class="content">
        <van-button type="danger"
          block
          @click="handleCreateTask">
          创建任务
        </van-button>
        <van-button type="info"
          block
          @click="handleCancel">
          取消
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { uploadFileToOSSAPI } from '@/api'
import { v4 as uuidv4 } from 'uuid';
import { typeOptions as typeOption } from '@/views/mobile/constant'

const router = useRouter();
const form = ref({
  selectedType: []
})
const terminalName = ref('');
const headerPhotoUrl = ref('');
const typeOptions = ref(typeOption); // 门店类型
const selectedType = ref('');
const showTypePopup = ref(false);

// 门头照上传逻辑
// 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
  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, // 稽查人工号
  })
  showNotify({ type: 'success', message: 'POS 照片删除成功' })
}

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

// 创建任务（可根据需求对接接口）
const handleCreateTask = () => {
  console.log('创建任务：', {
    terminalName: terminalName.value,
    headerPhoto: headerPhotoUrl.value,
    storeType: selectedType.value,
  });
  // 此处可补充接口请求逻辑
};

// 取消操作
const handleCancel = () => {
  console.log('取消操作');
  // 可重置表单等逻辑
  terminalName.value = '';
  headerPhotoUrl.value = '';
  selectedType.value = 'KA';
};
</script>

<style lang="scss"
  scoped>
  .mobile-page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8f8f8;

    .terminal-info-container {
      flex: 1;
      padding: 20px;
      box-sizing: border-box;
      background-color: transparent;

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

      .content {
        background-color: white;
      }

      .header-photo-section {
        ::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;
        }
      }
    }

    .button-group {
      margin-top: auto;
      margin-bottom: 20px;

      .content {
        background-color: transparent;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 50px;
      }
    }
  }
</style>