<template>
  <div class="mobile-page-container">
    <!-- 常规陈列 -->
    <div class="item"
      v-for="(obj, index) in displayGroup">
      <p class="title">常规陈列{{ index + 1 }}：</p>
      <van-cell-group inset>
        <van-field v-model="obj.modality"
          name="modality"
          label="形式"
          placeholder="请输入形式"
          auto-complete="off"
          :rules="[{ required: true, message: '请输入形式' }]" />
        <van-field v-model="obj.cost"
          name="cost"
          label="费用"
          placeholder="费用"
          auto-complete="off"
          :rules="[{ required: true, message: '请输入费用' }]" />
        <van-field label="常规陈列照片"
          label-align="top"
          class="header-photo-section">
          <template #input>
            <van-uploader :max-count="2"
              accept="image/*"
              v-model="obj.displayPhotos"
              :after-read="displayPhotosRead"
              preview-size="120"
              @delete="deletedisplayPhotos">
            </van-uploader>
          </template>
        </van-field>
        <van-field label="核查结果"
          label-align="top">
          <template #input>
            <van-checkbox-group v-model="obj.verify"
              direction="horizontal"
              shape="square">
              <van-checkbox name="合格">合格</van-checkbox>
              <van-checkbox name="需整改">需整改</van-checkbox>
              <van-checkbox name="不合格">不合格</van-checkbox>
              <van-checkbox name="虚假">虚假</van-checkbox>
            </van-checkbox-group>
          </template>
        </van-field>
      </van-cell-group>
    </div>
    <!-- 新增按钮 -->
    <van-button class="add-item"
      type="primary"
      @click="addItem">新增一组陈列</van-button>
    <!-- 总体判定 -->
    <div class="overall">
      <p class="title">常规陈列总体判定结果：</p>
      <van-checkbox-group v-model="overAll.verify"
        direction="horizontal"
        shape="square">
        <van-checkbox name="合格">合格</van-checkbox>
        <van-checkbox name="需整改">需整改</van-checkbox>
        <van-checkbox name="不合格">不合格</van-checkbox>
        <van-checkbox name="虚假">虚假</van-checkbox>
      </van-checkbox-group>
    </div>
  </div>
</template>

<script setup>
// 陈列组信息
const displayGroup = ref([
  {
    modality: '', // 形式
    cost: '', // 费用
    displayPhotos: [], // 陈列照片
    verify: [] // 核查结果
  }
])
// 新增一组
const addItem = () => {
  displayGroup.value.push({
    modality: '', // 形式
    cost: '', // 费用
    displayPhotos: [], // 陈列照片
    verify: [] // 核查结果
  })
}


// 陈列照片
const displayPhotosRead = 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 deletedisplayPhotos = async () => {
  if (isInitializing.value) return

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


// 总体核查结果
const overAll = ref({})
</script>

<style scoped
  lang="scss">
  .mobile-page-container {
    padding: 10px 10px 0 10px;
    background-color: white;
    font-size: 14px;

    /* 公共样式 */
    .title {
      margin: 0;
      font-weight: 900;
      color: var(--main-color);
    }

    /* 每个分组 */
    .item {
      margin-bottom: 10px;
      .van-cell-group {
        padding: 0;
        margin: 0;

        .van-cell {
          padding-left: 0px;
        }

        .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;
          }
        }

        /* 核查结果 */
        .van-checkbox {
          margin-bottom: 10px;
        }
      }

      &:after {
        content: " ";
        display: block;
        width: 100%;
        border-bottom: 1px solid gray;
      }

    }

    /* 新增一组 */
    .add-item {
      width: 100%;
      height: 30px;
      margin-top: 10px;
    }

    /* 总体判定 */
    .overall {
      background-color: white;
      padding-top: 10px;

      .van-checkbox-group {
        margin-top: 10px;

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


</style>