<script setup>
import _ from 'lodash'
import axios from 'axios'

import { ref, onBeforeMount, onMounted } from 'vue'

import { Cropper } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css';

import { useUserStore } from '@/store/user'

import { useRouter } from 'vue-router'

import { showToast, showFailToast, showLoadingToast, showSuccessToast } from 'vant';

import { getUserInfo,  updateUserInfo, updateCard, searchConnection, addUserFavi, setUserNfcTpl } from '@/api'

import { updateUserExtra, updateUserLink, getUserExtra,updateUserAddon } from '@/api/user';
import { getAreaList, getWorkList } from '@/api/system';

import imgTp1 from '@/assets/images/tp/tp_1.jpg'
import imgTp2 from '@/assets/images/tp/tp_2.jpg'
import imgTp3 from '@/assets/images/tp/tp_3.jpg'
import imgTp4 from '@/assets/images/tp/tp_4.jpg'
import { computed } from 'vue';

const URL = window.URL || window.webkitURL;

const userStore = useUserStore()

const router = useRouter()

const form = ref({ addon: [] })

const genderChecked = ref()

const resourceActive = ref('1');

const fileList = ref([]);

const myCrop = ref(null)

const tabActive = ref(0)

const tabItemObj = ref([
  { title: "基本資料", icon: "fa-id-card-clip" },
  { title: "社群分享", icon: "fa-share-nodes" },
  { title: "人脈資訊", icon: "fa-gem" },
  { title: "NFC版型", icon: "fa-layer-group" }
]);

const validatorUrl = (val) => {
  if (val.length > 0) {
    return /(https?:\/\/|line:\/\/|tel:|mailto:)\S+/.test(val)
  } else {
    return true
  }
};

const validatorTel = (val) => {
  if (val.length > 0) {
    return /(\d{2,3}-?|\(\d{2,3}\))\d{3,4}-?\d{4}/.test(val)
  } else {
    return true
  }
};

// START: 基本資料


const crop = ref({
  show: false,
  img: null,
})

onMounted(async () => {
  let userRes = await getUserInfo()
  if (userRes.code === 200) {
    form.value = userRes.data  
  }

  //取得區域資料
  let areaRes = await getAreaList()
  if (areaRes.code === 200) {
    areaColumns.value = areaRes.data
    //取得區域名稱
    if (areaRes.data.length > 0) {
      areaName.value = _.find(areaRes.data, { value: form.value.area }).text
    }
  }

  //取得工作性質資料
  let workRes = await getWorkList()
  if (workRes.code === 200) {
    console.log(workRes)
    workColumns.value = workRes.data
    //取得工作性質名稱
    if (workRes.data.length > 0) {
      // 從工作性質資料中找出對應的名稱
      // const findRes = workRes.data.find((item) => {
      //   return item.value === form.value.work
      // })

      // if(findRes){
      //   workName.value = findRes.text
      // }else{
      //   workName.value = ''
      // }
      const findRes = _.find(workRes.data, { value: form.value.work })
      if(findRes){
        workName.value = findRes.text
      }
    }
  }

  if (userRes.data.nfc_addon && (userRes.data.nfc_addon.length > 0)) {
    form.value.addon = JSON.parse(userRes.data.nfc_addon)
  }

})


const onCrop = () => {
  const { canvas } = myCrop.value.getResult();
  if (canvas) {
    const imgFile = new FormData();
    canvas.toBlob(async (blob) => {
      let ufile = new File([blob], "image.jpg");
      imgFile.append("user_id", form.value.user_id)
      imgFile.append("fileType", "IMAGE")
      imgFile.append('file', ufile)

      crop.value.show = false

      showLoadingToast({
        duration: 0,
        message: '圖片上傳中...',
        forbidClick: true,
      });

      let res = await axios.post(
        `${import.meta.env.VITE_APP_API_URL}/user/uploadAvatar`,
        imgFile,
        {
        }
      )

      if (res.data.code == 200) {
        form.value.avatar = res.data.data
        showSuccessToast('上傳成功');
      } else {
        showToast.fail('上傳失敗');
      }

    }, 'image/jpeg');
  }

  return
}

const afterRead = async (file, name) => {
  crop.value.show = true

  const ofile = file.file
  crop.value.img = URL.createObjectURL(ofile);
  // crop.value.img = ofile
  return
};

const onAddBtn = () => {
  if (form.value.addon) {
    form.value.addon.push({ icon: '', name: '', link: '' })
  } else {
    form.value.addon = [{ icon: '', name: '', link: '' }]
  }
}

const onDelBtn = (index) => {
  form.value.addon.splice(index, 1)
}

const onMoveBtn = (type, index) => {
  if (type === 0) {
    if (index !== 0) {
      [form.value.addon[index], form.value.addon[index - 1]] = [form.value.addon[index - 1], form.value.addon[index]]
    }
  } else {
    if (index + 1 !== form.value.addon.length) {
      [form.value.addon[index + 1], form.value.addon[index]] = [form.value.addon[index], form.value.addon[index + 1]]
    }
  }

}

const onSubmit = async () => {
  showLoadingToast({
    duration: 0,
    message: '資料更新中...',
    forbidClick: true,
  });
  console.log(form.value,"test");
  let res = await getUserInfo(form.value)
  if (res.code === 200) {
    showSuccessToast('更新成功')
    router.push('/member')
  } else {
    showToast.fail('更新失敗')
  }
};

const searchChecked = ref(true);
const searchOnUpdateValue = (newValue) => {
  showConfirmDialog({
    title: '提醒',
    message: '是否切换開關？',
  }).then(() => {
    searchChecked.value = newValue;
  });
};


// 區域
const showAreaPicker = ref(false);
const areaColumns = ref([]);
const areaName = ref('');

const onAreaConfirm = (value) => {
  areaName.value = value.selectedOptions[0].text
  form.value.area = value.selectedOptions[0].value
  showAreaPicker.value = false
}

// 工作性質
const showWorkPicker = ref(false);
const workColumns = ref([]);
const workName = ref('');

const onWorkConfirm = (value) => {
  workName.value = value.selectedOptions[0].text
  form.value.work = value.selectedOptions[0].value
  showAreaPicker.value = false
}

// END: 基本資料




// START: 人脈資源

const search = ref({
  type: 0,
  keyword: '',
})

const tab2result = ref('你所需要的資源');
const tab2showPicker = ref(false);
const loading = ref(false);
const finished = ref(false);

const tab2columns = [
  { text: '你所需要的資源', value: 0 },
  { text: '你能提供的資源', value: 1 },
];

const tab2OnConfirm = ({ selectedOptions }) => {
  tab2result.value = selectedOptions[0].text;
  search.value.type = selectedOptions[0].value;
  tab2showPicker.value = false;
  handleSearch();
};

const tab2OnSearch = async () => {
  handleSearch();
};

const handleSearch = async () => {
  let res = await searchConnection(search.value);
  if (res.code === 200) {
    tab2list.value = res.data;
    console.log(tab2list.value)
  }
};

const tab2list = ref([]);

const tab2Loading = ref(false);
const tab2Finished = ref(false);
const tab2TodoLists = ref([]);
const tab2AddFriend = ref([]);

const tab2ListonLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  // setTimeout(() => {
  //   for (let i = 0; i < 10; i++) {
  //     tab2list.value.push(tab2list.value.length + 1);
  //   }

  //   // 加载状态结束
  //   tab2Loading.value = false;

  //   // 数据全部加载完成
  //   if (tab2list.value.length >= 40) {
  //     tab2Finished.value = true;
  //   }
  // }, 1000);
};

const handleAddFavi = async (uf_user_id) => {
  console.log(uf_user_id)
  let res = await addUserFavi({ uf_user_id });

  if (res.code === 200) {
    return showToast({
      message: '已加入好友',
      duration: 1000,
    });
  }
  return showToast({
    message: '加入失敗',
    duration: 1000,
  });
}
// END: 人脈資源


const tab3list = ref([
  {
    id: 0,
    image: imgTp1,
  },
  {
    id: 1,
    image: imgTp2,
  },
  {
    id: 2,
    image: imgTp3,
  },
  {
    id: 3,
    image: imgTp4,
  }
]);


const selectedTpl = computed(() => {
  if (form.value.nfc_template) {
    return tab3list.value[form.value.nfc_template].image
  } else {
    return tab3list.value[0].image
  }
})

const handleSelectTpl = (id) => {
  form.value.nfc_template = id
}

const handleChangeTplSubmit = async() => {
  let res = await setUserNfcTpl(form.value.nfc_template);
  if (res.code === 200) {
    showSuccessToast('修改成功')
  } else {
    showFailToast('修改失敗')
  }
}

</script>

<template>
  <div class="member page">
    <van-nav-bar class="bg-skyBlue py-1" left-arrow @click-left="$router.push('/')">
      <template #title>
        <h5 class="text-white mb-1"><strong>會員資料</strong></h5>
      </template>
      <template #left>
        <h4><i class="fa-solid fa-angle-left text-white" :style="{ opacity: 0.5 }"></i></h4>
      </template>
    </van-nav-bar>

    <van-tabs class="van-tabs" :lazy-render="true" v-model:active="tabActive">
      <van-tab v-for="(item, index) in tabItemObj" :key="index">
        <template #title>
          <div class="tab_item">
            <i :class="`fa-solid ${item.icon} fa-2x mb-1`"></i>
            <p class="mb-3">{{ item.title }}</p>
          </div>
        </template>
      </van-tab>
    </van-tabs>

    <div class="content cnt0" v-show="tabActive === 0">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <div class="text-center p-4">
            <van-uploader :after-read="afterRead" :max-count="1" name="avatar" class="mb-4">
              <div class="upload-main">
                <img class="upload-img avatar" :src="form.avatar" alt="" v-if="form.avatar" />
                <img class="upload-img avatar" src="@/assets/images/upload.jpg" alt="" v-else />
                <div class="ml-3">
                  <p class="text-skyBlue mb-2">上傳圖片，預設為Line頭像</p>
                  <van-button class="btn-darkBlue" icon="plus" block size="small">上傳檔案</van-button>
                </div>
              </div>
            </van-uploader>
            <van-field v-model="form.mark" rows="3" type="textarea" maxlength="100" name="mark" placeholder="請輸入100字以內的簡介"
              show-word-limit :style="{ border: '1px #e3e3e3 solid', borderRadius: '6px' }" />
          </div>

          <van-field v-model="form.real_name" label="姓名" name="real_name" placeholder="請輸入您的姓名"
            :rules="[{ required: true, message: '姓名為必填' }]" />
          <van-field v-model="form.company" label="公司名稱" name="company" placeholder="請輸入您的公司名稱"
            :rules="[{ required: true, message: '公司名稱必填' }]" />
          <van-field v-model="form.title" label="職稱" name="title" placeholder="請輸入您的職稱" />
          <van-field v-model="form.phone" label="手機" name="phone" type="tel" placeholder="Ex. 0900000001 不要有空格"
            :rules="[{ required: true, message: '手機號必填' }, { pattern: /\d{10}/, message: '手機號格式錯誤' }]" />
          <van-field v-model="form.tel" label="市話" name="tel" type="tel" placeholder="請輸入您的市話"
            :rules="[{ validator: validatorTel, message: '市話格式不正確,Ex. 02xxxx or 02-xxxx' }]" />
          <van-field v-model="form.email" label="Email" name="email" placeholder="請輸入您的Email"
            :rules="[{ required: true, message: 'Email必填' }, { pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/, message: 'Email格式錯誤' }]" />
          <van-field v-model="form.address" label="住址" name="address" placeholder="請輸入您的地址" />
          <van-field v-model="form.age" label="年齡" name="age" placeholder="請輸入您的年齡" />
          <van-field name="sex" label="性別">
            <template #input>
              <van-radio-group v-model="form.sex" direction="horizontal" checked-color="#5b7b94">
                <van-radio name="0">男</van-radio>
                <van-radio name="1">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>

          <van-field v-model="areaName" is-link readonly name="area" label="區域" placeholder="請選擇區域" 
            @click="showAreaPicker = true" />
          <van-popup v-model:show="showAreaPicker" position="bottom">
            <van-picker :columns="areaColumns" confirm-button-text="確認" cancel-button-text="取消" @confirm="onAreaConfirm" @cancel="showAreaPicker = false" />
          </van-popup>

          <van-field v-model="workName" is-link readonly name="work" label="工作性質" placeholder="請選擇工作性質"
            @click="showWorkPicker = true" />
          <van-popup v-model:show="showWorkPicker" position="bottom">
            <van-picker :columns="workColumns" confirm-button-text="確認" cancel-button-text="取消" @confirm="onWorkConfirm" @cancel="showWorkPicker = false" />
          </van-popup>

          <van-field readonly>
            <template #label>是否公開<br />資料搜尋</template>
            <template #input>
              <van-switch v-model="searchChecked" @update:model-value="searchOnUpdateValue" size="18px"
                active-color="#5b7b94" inactive-color="#888888" />
            </template>
          </van-field>        
        </van-cell-group>

        <van-cell-group inset v-if="userStore.userData.level === 3">
          <van-cell class="text-center bg-lightPink py-3">
            <template #title>
              <h6 class="text-darkBlue"><strong>人脈資訊</strong></h6>
              <div style="text-align: center;">
                下面為客製型會員專屬提供被搜尋
              </div>
            </template>
          </van-cell>

          <van-field v-model="form.introduction" name="introduction" placeholder="請輸入簡短的自我介紹" label-align="top">
            <template #label>
              <i class="fa-solid fa-gem text-darkBlue"></i> 一句話介紹自己
            </template>
          </van-field>

          <van-divider :style="{
            color: '#345068',
            borderColor: '#345068',
            padding: '0 16px',
          }"><strong>貴人資源共享</strong></van-divider>
          <van-collapse v-model="resourceActive" accordion>
            <van-collapse-item title="工商簡介" name="3">
              <van-field v-model="form.exchange" rows="3" type="textarea" name="exchange" maxlength="100"
                placeholder="請填寫工商簡介" show-word-limit />
              <van-field v-model="form.exchange_link" label="分享網址：" name="exchange_link" placeholder="需求連結" />
            </van-collapse-item>
            <van-collapse-item title="我能分享的資源" name="1">
              <van-field v-model="form.supply" rows="3" type="textarea" maxlength="100" name="supply"
                placeholder="請填寫能分享的資源" show-word-limit />
              <van-field v-model="form.supply_link" label="分享網址：" name="supply_link" placeholder="分享網址"
                :rules="[{ validator: validatorUrl, message: '網址格式不正確,Ex. http://' }]" />
            </van-collapse-item>
            <van-collapse-item title="我需要的資源" name="2">
              <van-field v-model="form.demand" rows="3" type="textarea" maxlength="100" name="demand"
                placeholder="請填寫需要的的資源" show-word-limit />
              <van-field v-model="form.demand_link" label="分享網址：" name="demand_link" placeholder="需求連結" />
            </van-collapse-item>
          </van-collapse>
        </van-cell-group>

        <van-sticky position="bottom">
          <div class="bottomBtnCnt">
            <van-button block class="btn-darkBlue" native-type="submit">確認修改</van-button>
          </div>
        </van-sticky>
      </van-form>
    </div>

    <div class="content cnt1" v-show="tabActive === 1">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field v-model="form.url" label="個人網頁" name="url" placeholder="請輸入您的個人網頁" />
          <van-field v-model="form.line" label="Line" name="line" placeholder="請輸入您的Line ID" />
          <van-field v-model="form.facebook" label="Facebook" name="facebook" placeholder="請輸入您的Facebook" />
          <van-field v-model="form.ig" label="IG" name="ig" placeholder="請輸入您的IG" />
          <van-field v-model="form.youtube" label="YouTube" name="youtube" placeholder="請輸入您的YouTube" />
          <van-field v-model="form.wechat" label="WeChat" name="wechat" placeholder="請輸入您的WeChat" />
          <van-field v-model="form.tiktok" label="Tiktok" name="tiktok" placeholder="請輸入您的Tiktok" />
        </van-cell-group>

        <van-cell-group inset>
          <van-cell class="bg-lightPink">
            <template #title>
              <h6 class="text-darkBlue"><strong>相關連結</strong></h6>
            </template>
            <template #value>
              <van-button size="small" @click="onAddBtn">
                <h6>新增連結</h6>
              </van-button>
            </template>
          </van-cell>

          <van-field v-for="(item, idx) in form.addon" :key="idx">
            <template #label>
              <van-field v-model="item.name" name="" maxlength="15" placeholder="請輸入名稱"
                :rules="[{ required: true, message: '連結名稱必填' }]" />
            </template>
            <template #input>
              <van-field v-model="item.link" name="" placeholder="請輸入您的按鈕連結"
                :rules="[{ required: true, message: '按鈕連結必填' }]" />
            </template>
            <template #button>
              <van-button size="small" class="ml-1 btn-tomatoRed" icon="delete-o" hairline
                @click="onDelBtn(idx)"></van-button>
              <van-button size="small" class="ml-1 btn-skyBlue" icon="arrow-up" hairline
                @click="onMoveBtn(0, idx)"></van-button>
              <van-button size="small" class="ml-1 btn-skyBlue" icon="arrow-down" plain hairline
                @click="onMoveBtn(1, idx)"></van-button>
            </template>
          </van-field>
        </van-cell-group>

        <van-sticky position="bottom">
          <div class="bottomBtnCnt">
            <van-button block class="btn-darkBlue" native-type="submit">確認修改</van-button>
          </div>
        </van-sticky>
      </van-form>
    </div>

    <div class="content cnt2" v-show="tabActive === 2">
      <van-cell-group inset>
        <van-row gutter="0" align="center">
          <van-col span="9">
            <van-field v-model="tab2result" is-link readonly name="picker" :border="false" placeholder="請選擇"
              @click="tab2showPicker = true" />
            <van-popup v-model:show="tab2showPicker" position="bottom">
              <van-picker
              confirm-button-text="確認"
              cancel-button-text="取消"
              :columns="tab2columns"
              @confirm="tab2OnConfirm"
              @cancel="tab2showPicker = false"
              />
            </van-popup>
          </van-col>
          <van-col span="15">
            <van-search
            v-model="search.keyword"
            show-action
            placeholder="請輸入搜尋關鍵字"
            @search="tab2OnSearch"
            >
              <template #action>
                <van-button class="btn-darkBlue" @click="tab2OnSearch">
                  搜索
                </van-button>
              </template>
            </van-search>
          </van-col>
        </van-row>
      </van-cell-group>

      <van-cell-group inset>
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="tab2ListonLoad"
          class="accordion" id="accordion">
          <!-- <van-cell v-for="item in list" :key="item" :title="item" >  -->
          <!-- <van-cell v-for="item in tab2list" :key="item" :title="item"> 
            <template #title>
              <div class="list-item">
                <div class="avatar"><img :src="item.avatar"></div>
                <div class="text">
                  <h5 class="name ellipsis">{{item.real_name}}</h5>
                  <div class="desc ellipsis">@{{item.note}}</div>
                </div>
              </div>
            </template>
            <template #value>
              <van-button size="normal" class="border-0"><h5><i class="fa-solid fa-layer-group text-darkBlue"></i></h5></van-button>
              <van-button size="normal" class="border-0"><h5><i class="fa-solid fa-comment-medical text-darkBlue"></i></h5></van-button>
            </template>
          </van-cell>     -->

          <div class="list-item" v-for="(item, index) in tab2list" :key="index">
            <div class="left">
              <div class="avatar"><img :src="item.avatar"></div>
              <div class="text">
                <h5 class="name ellipsis">{{ item.real_name }}</h5>
                <div class="desc ellipsis">@{{ item.introduction }}</div>
              </div>
            </div>
            <div class="right">
              <van-button size="normal" class="border-0" data-toggle="collapse" :href="`#c${index}`" role="button"
                aria-expanded="false" :aria-controls="`c${index}`">
                <h5><i class="fa-solid fa-layer-group text-darkBlue"></i></h5>
              </van-button>
              <van-button v-if="(item.is_favorite) == 0" size="normal" class="border-0"
                @click="handleAddFavi(item.user_id)">
                <h5><i class="fa-solid fa-comment-medical text-darkBlue"></i></h5>
              </van-button>
            </div>
            <div class="bottom collapse" :id="`c${index}`" data-parent="#accordion">
              <h6 class="text-darkBlue"><strong>我能分享的資源</strong></h6>
              <div class="desc">{{ item.supply }}</div>
              <div class="url py-2">網址：<a :href="item.supply_link" target="_blank" class="text-moBlue">{{ item.supply_link
              }}</a></div>
              <hr />
              <h6 class="text-darkBlue"><strong>我需要的資源</strong></h6>
              <div class="desc">{{ item.demand }}</div>
              <div class="url py-2">網址：<a :href="item.demand_link" target="_blank" class="text-moBlue">{{ item.demand_link
              }}</a></div>
            </div>
          </div>

        </van-list>

      </van-cell-group>


    </div>

    <div class="content cnt3" v-show="tabActive === 3">
      <van-form>
        <van-cell-group inset>
          <div class="block">
            <van-image width="100%" position="top" fit="cover" :src="selectedTpl" />
          </div>
        </van-cell-group>

        <van-cell-group inset>
          <van-cell class="text-center bg-lightPink py-3">
              <template #title>
                <h6 class="text-darkBlue"><strong>NFC感應式版型切換</strong></h6>
              </template>
          </van-cell>

          <van-row>
            <van-col span="12" v-for="(item, index) in tab3list" :key="index">
              <div class="imgBtn" :data-id="index" @click="handleSelectTpl(item.id)">
                <div class="imgCnt">
                  <van-image :src="item.image" />
                </div>
              </div>
            </van-col>
          </van-row>
        </van-cell-group>

        <van-sticky position="bottom">
          <div class="bottomBtnCnt">
            <van-button block class="btn-darkBlue" @click="handleChangeTplSubmit">確認修改</van-button>
          </div>
        </van-sticky>
      </van-form>
    </div>

    <!-- <Footer/> -->

    <van-popup class="cropPopup" v-model:show="crop.show" closeable>
      <h5 class="text-center mt-3">檔案裁切上傳</h5>
      <div class="cropper-section">
        <div class="crop-area">
          <cropper class="cropper" ref="myCrop" :src="crop.img" :stencil-props="{
            aspectRatio: 1 / 1,
          }" :auto-zoom="true" />
        </div>
        <van-button round class="btn-tomatoRed rounded-pill w-50 mt-3" size="small" @click="onCrop">
          裁切確認
        </van-button>
      </div>
    </van-popup>

  </div>
</template>

<style src="@/assets/css/main.css"></style>

<style lang="less" scoped>

.member{
  .content{
    min-height: calc(100vh - 142px);
    padding-bottom: 0;
  }  
  .cnt2 {
    .van-list {
      .list-item {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 15px 0;
        margin: 0 15px;
        border-bottom: 1px #e3e3e3 solid;

        .left {
          flex: 1 0 0%;
          display: flex;
          align-items: center;

          .avatar {
            width: 55px;
            min-width: 55px;
            aspect-ratio: 1/1;
            border-radius: 50%;
            margin-right: 10px;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .name {
            font-weight: bold;
          }
        }

        .right {
          flex: 0 0 auto;
        }

        .bottom {
          flex: 1 0 100%;
          border: 1px #e3e3e3 solid;
          border-radius: 10px;
          padding: 0 10px;
          margin: 0;
          transition: all .2s;

          &.show {
            padding: 10px;
            margin: 5px 0;
          }
        }
      }
    }
    .van-search,.van-search-content{
      padding-left: 0;
    }
  }

  .cnt3 {
    .block {
      height: 110vw;
      text-align: center;
      background-color: #000;
      padding: 20px 35px;
      overflow: hidden;
      overflow-y: auto;
    }

    .imgBtn {
      padding: 10px;
      margin: 10px;
      background-color: #333;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
      transform: scale(1);
      transition: all .3s;

      &.active,
      &:hover {
        transform: scale(1.02);
      }

      .imgCnt {
        width: 100%;
        height: 150px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}

</style>