<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-form ref="myFormRef">
          <!-- 终端名称输入 -->
          <van-field v-model="form.storeName"
            label="终端名称："
            label-align="top"
            placeholder="请输入"
            class="input-field"
            :rules="[{ required: true, message: '请输入终端名称' }]" />
          <!-- 门头照上传 -->
          <div class="header-photo-section">
            <van-field label="门头照"
              label-align="top"
              :rules="[{ required: true, message: '请上传门头照' }]">
              <template #input>
                <van-uploader :max-count="1"
                  accept="image/*"
                  capture="camera"
                  :model-value="form.storePicture"
                  :after-read="posPhotosRead"
                  preview-size="78"
                  @delete="deletePosPhotos">
                </van-uploader>
              </template>
            </van-field>
          </div>
          <!-- 门店类型选择 -->
          <van-field :model-value="form.selectedType.join('')"
            readonly
            label="门店类型"
            label-align="top"
            placeholder="请选择"
            @click="showTypePopup = true"  :rules="[{ required: true, message: '请选择门店类型' }]"/>
          <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-form>
      </div>
    </div>
    <!-- 操作按钮 -->
    <div class="button-group">
      <div class="content">
        <van-button type="danger"
          block
          @click="handleCreateTask">
          创建任务
        </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'
import useUserStore from '@/store/modules/user'

const router = useRouter();

const form = reactive({
  storeName: '',
  storePicture: [],
  selectedType: []
})
const typeOptions = ref(typeOption); // 门店类型
const showTypePopup = ref(false);

// 门头照上传逻辑
const posPhotosRead = async (file) => {
  const pictureUrl = await uploadFileToOSSAPI(`risk/newTerminal-storePhoto/${useUserStore().empInfo.empNo}/${uuidv4()}.png`, file.file)
  form.storePicture = [{
    url: pictureUrl
  }]
  showNotify({ type: 'success', message: '照片上传成功' })
}
// 删除照片
const deletePosPhotos = async () => {
  form.storePicture = []
  showNotify({ type: 'success', message: '照片删除成功' })
}

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

// 创建任务（跳转路由传参即可）
const myFormRef = ref(null)
const handleCreateTask = () => {
  // 校验整个表单
  myFormRef.value.validate().then(() => {
    // 校验通过，执行创建任务逻辑
    router.push({
      path: '/inspectionTask',
      query: {
        taskStatus: true,
        storeName: form.storeName,
        storeCode: null,
        storePicture: form.storePicture[0]?.url,
        selectedType: form.selectedType[0]
      }
    })
  })
};

</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>