<script setup>
import { ref, onMounted } from 'vue';

import { setUserNfcTpl } from "@/api";

const tab3list = ref([]);
onMounted(async () => {
    let res = await setUserNfcTpl();
    console.log(res);
    if(res.code===200){
      tab3list.value = res.data;
    }
});

const onSubmit = () => {
  
}
</script>

<template>
        <div class="content cnt3"> 
      <van-cell-group inset>
        <van-form @submit="onSubmit">
          <van-cell class="text-center bg-lightPink py-3">
            <template #title>
              <h6 class="text-darkBlue"><strong>感應式版型切換</strong></h6>
            </template>
          </van-cell>

          <div class="text-center bg-dark px-5 pt-3">
            <van-image 
              width="100%" 
              height="500"
              position="top" 
              fit="cover"
              src="/src/assets/images/tp/tp_1.jpg"
            />
          </div>

          <div class="d-flex justify-content-center py-3">
              <van-button class="btn-tomatoRed px-5 mr-2">
                預覽
              </van-button>
              <van-button class="btn-darkBlue px-5" native-type="submit">
                確認修改
              </van-button>
          </div>
        </van-form>
      </van-cell-group>

      <van-cell-group inset>
        <van-row>
          <van-col span="12" v-for="(item, index) in tab3list" :key="index">
            <div class="imgBtn">
              <div class="imgCnt">{{ item }}
                <van-image 
                  src="/src/assets/images/tp/tp_1.jpg"
                />
              </div>      
            </div>
          </van-col>
        </van-row>
      </van-cell-group>
    </div>

</template>

<style scoped>
    
</style>