<script setup>
import _ from 'lodash';
import { onMounted, onBeforeMount, ref } from 'vue'
import { toClipboard } from "@soerenmartius/vue3-clipboard";
import { showToast, showSuccessToast, showConfirmDialog } from 'vant';
import { useRoute } from 'vue-router';

import {
  getUserFaviList
  , getUserCateList
  , updateUserCate
  , setUserFaviCate
  , addUserFavi
  , deleteUserFavi
} from '@/api'

import { getAreaList } from '@/api/system';


const route = useRoute();

const setShowPicker = ref(false);

const selectVal1 = ref('all');
const selectVal2 = ref('普通');
const selectOpt1 = ref([{ text: '全部', value: 'all' }]);
const selectOpt2 = ref([{ text: '重要', value: '重要' }, { text: '普通', value: '普通' }]);

const addressList = ref([]);

onMounted(async () => {
  if (route.query.act === 'add') {
    let res = await addUserFavi({ uf_user_id: route.query.cardid });
  }
  initData();
  getCateList();
});

const initData = async () => {
  let res = await getUserFaviList(search.value);
  if (res.code === 200) {
    addressList.value = res.data;
  }
};

const getCateList = async () => {
  let res = await getUserCateList();
  if (res.code === 200) {
    columns.value = [columns.value[0], ...res.data];
    columns2.value = [columns2.value[0], ...res.data];
    if (res.data.length > 0) {
      modalForm.value.sort = res.data;
    } else {
      modalForm.value.sort = [_.cloneDeep(defaultCate)];
    }
  }
}

// 複製連結
const doCopy = (text) => {
  toClipboard(text);
  showToast("已放入剪貼簿");
};

const handleDeleteFavi = async (id) => {
  // vant 詢問是否刪除
  showConfirmDialog({
    title: '確認刪除',
    message:
      '是否確認刪除好友?',
    cancelButtonText: '取消',
    confirmButtonText: '確認',
  })
    .then(async () => {
      let res = await deleteUserFavi(id);
      if (res.code === 200) {
        initData();
        showSuccessToast('刪除成功')
      } else {
        showToast('刪除失敗')
      }
    })
    .catch(() => {
    });

};

const handleGoNfc = (item) => {
  window.open(item.nfcurl, '_blank');
};

// START: 通訊錄類別
const fieldValue = ref('全部-全部');
const showCatePicker = ref(false);

const customFieldName = {
  text: 'name',
  value: 'id',
  children: 'children',
};

const columns = ref([
  {
    id: 0,
    name: '全部',
    children: [
      {
        id: 0,
        name: '全部'
      }
    ]
  },
]);

const onCateConfirm = async (value) => {
  search.value.cate = value.selectedValues[1]
  showCatePicker.value = false
};

const onCateChange = (value) => {
  fieldValue.value = value.selectedOptions.map((item) => item.name).join('-');
};

// END: 通訊錄類別

// START: 更改好友類別
const columns2 = ref([
  {
    id: 0,
    name: '未分類',
    children: [
      {
        id: 0,
        name: '未分類'
      }
    ]
  },
]);

const showChangeCatePicker = ref(false);
const changeUserId = ref('');

const handleChangeCate = (userId) => {
  changeUserId.value = userId;
  showChangeCatePicker.value = true;
};

const onChangeCateConfirm = async (value) => {

  let res = await setUserFaviCate({ uf_user_id: changeUserId.value, cate_id: value.selectedValues[1] });
  if (res.code === 200) {
    getCateList();
    showSuccessToast('更新成功')
  } else {
    showToast('更新失敗')
  }
  showChangeCatePicker.value = false;
};

const onChangeCateChange = (value) => {
  console.log('Change Category');
};

// END: 更改好友類別

// START: 編輯通訊錄
const defaultCate = {
  "id": 0,
  "name": ""
};

const modalForm = ref({
  page: 1,
  sort: [_.cloneDeep(defaultCate)]
});

const sel1Change = (value) => {
  if (value != 'all') {
    let child = modalForm.value.sort[value].children;
    let ary = [];

    child.forEach((item, i) => {
      ary.push({
        text: item.name,
        value: item.name
      })
    });
    selectOpt2.value = ary;
    selectVal2.value = child[0].name;
  } else {
    selectOpt2.value = [];
    selectVal2.value = '';
  }
};

const addCard = () => {
  modalForm.value.sort.push(_.cloneDeep(defaultCate));
  modalForm.value.page = modalForm.value.sort.length;
};

const delCard = (page) => {
  if (page > 1) {
    modalForm.value.page = page - 1;
  }
  modalForm.value.sort.splice(page - 1, 1);
};

const addBtn = (page) => {
  if (!modalForm.value.sort[page - 1].children) {
    modalForm.value.sort[page - 1].children = [];
  }

  modalForm.value.sort[page - 1].children.push(_.cloneDeep(defaultCate));

};

const moveCard = (type, page) => {
  if (type === 0) {
    if (page !== 1) {
      [modalForm.value.sort[page - 1], modalForm.value.sort[page - 2]] = [
        modalForm.value.sort[page - 2],
        modalForm.value.sort[page - 1],
      ];
      modalForm.value.page = page - 1;
    }
  } else {
    if (page !== modalForm.value.sort.length) {
      [modalForm.value.sort[page], modalForm.value.sort[page - 1]] = [
        modalForm.value.sort[page - 1],
        modalForm.value.sort[page],
      ];
      modalForm.value.page = page + 1;
    }
  }
};

const delBtn = (index) => {
  modalForm.value.sort[modalForm.value.page - 1].children.splice(index, 1);
  if (modalForm.value.sort[modalForm.value.page - 1].children.length === 0) {
    delete modalForm.value.sort[modalForm.value.page - 1].children;
  }
};

const moveBtn = (type, index) => {
  if (type === 0) {
    if (index !== 0) {
      [
        modalForm.value.sort[modalForm.value.page - 1].children[index],
        modalForm.value.sort[modalForm.value.page - 1].children[index - 1],
      ] = [
          modalForm.value.sort[modalForm.value.page - 1].children[index - 1],
          modalForm.value.sort[modalForm.value.page - 1].children[index],
        ];
    }
  } else {
    if (index + 1 !== modalForm.value.sort[modalForm.value.page - 1].children.length) {
      [
        modalForm.value.sort[modalForm.value.page - 1].children[index + 1],
        modalForm.value.sort[modalForm.value.page - 1].children[index],
      ] = [
          modalForm.value.sort[modalForm.value.page - 1].children[index],
          modalForm.value.sort[modalForm.value.page - 1].children[index + 1],
        ];
    }
  }
};


const onSubmit = async () => {
  let res = await updateUserCate({ category: modalForm.value.sort })
  if (res.code === 200) {
    getCateList();
    showSuccessToast('更新成功')
    // router.push('/member')
  } else {
    console.log(res.code);
    showToast('更新失敗')
  }
};

const search = ref({
  cate: 0,
  area: 0,
  sex: 2,
  keyword: ''
});

const tab2showPicker = ref(false);

const tab3showPicker = ref(false)
const tab3columns = ref([])
const areaName = ref('')

//取得區域資料
let areaRes = await getAreaList()
if (areaRes.code === 200) {
    tab3columns.value = areaRes.data
    // tab3columns加上第一項為全部
    tab3columns.value.unshift({
      text: '全部',
      value: 0
    })

    //取得區域名稱
    // if (areaRes.data.length > 0) {
    //   const findRes = _.find(areaRes.data, { value: form.value.area })
    //   if (findRes) {
    //     areaName.value = findRes.text
    //   }
    // }
}

const tab3OnConfirm = (value) => {
  areaName.value = value.selectedOptions[0].text
  search.value.area = value.selectedOptions[0].value
  tab3showPicker.value = false
}

const tab4showPicker = ref(false);
const tab4columns = ref([
  {
    text: '全部',
    value: 2
  },
  {
    text: '男',
    value: 1
  },
  {
    text: '女',
    value: 0
  }
]);
const sexName = ref('')

const tab4OnConfirm = (value) => {
  sexName.value = value.selectedOptions[0].text
  search.value.sex = value.selectedOptions[0].value
  tab4showPicker.value = false
}


const handleSearch = async () => {
  let res = await getUserFaviList(search.value);
  if (res.code === 200) {
    addressList.value = res.data;
  }

}
  

</script>

<template>
  <div class="address page">
    <van-nav-bar class="bg-skyBlue py-1" left-arrow right-arrow @click-left="$router.push('/')"
      @click-right="setShowPicker = true">
      <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>

      <template #right>
        <h4><i class="fa-solid fa-gear text-white" :style="{ opacity: 0.5 }"></i></h4>
      </template>
    </van-nav-bar>

    <div class="content">
      <!-- START: 通訊錄類別 -->
      <van-cell-group inset>
        <van-field v-model="fieldValue" is-link readonly label="類別" placeholder="通訊錄類別" @click="showCatePicker = true" />
        <van-popup v-model:show="showCatePicker" round position="bottom">
          <van-picker :columns="columns" :columns-field-names="customFieldName" confirm-button-text="確認"
            cancel-button-text="取消" @cancel="showCatePicker = false" @confirm="onCateConfirm" @change="onCateChange" />
        </van-popup>
      </van-cell-group>      
      <van-cell-group inset>
        <van-row gutter="0" align="center">
          <van-col span="5">
            <van-field v-model="areaName" is-link readonly name="picker" 
              :border="false" 
              placeholder="縣市"
              @click="tab3showPicker = true" />
            <van-popup v-model:show="tab3showPicker" position="bottom">
              <van-picker confirm-button-text="確認" cancel-button-text="取消" :columns="tab3columns" @confirm="tab3OnConfirm"
                @cancel="tab3showPicker = false" />
            </van-popup>
          </van-col>
          <van-col span="5">
            <van-field v-model="sexName" 
              is-link 
              readonly 
              name="picker"
              :border="false"
              placeholder="性別"
              @click="tab4showPicker = true" />
            <van-popup v-model:show="tab4showPicker" position="bottom">
              <van-picker confirm-button-text="確認" cancel-button-text="取消" :columns="tab4columns" @confirm="tab4OnConfirm"
                @cancel="tab4showPicker = false" />
            </van-popup>
          </van-col>
          <van-col span="14">
            <van-search v-model="search.keyword" show-action placeholder="請輸入搜尋關鍵字" @search="handleSearch">
              <template #action>
                <van-button class="btn-darkBlue" @click="handleSearch">
                  搜索
                </van-button>
              </template>
            </van-search>
          </van-col>
        </van-row>
      </van-cell-group>
      <!-- END: 通訊錄類別 -->

      <van-cell-group inset>
        <van-list>
          <div class="list-item" v-for="(item, index) in addressList" :data-cateid="item.user_cate_id" :key="index">
            <div class="left" @click="handleGoNfc(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.line }}</div>
              </div>
            </div>
            <div class="right">
              <van-button size="small" class="border-0" @click="handleChangeCate(item.user_id)">
                <h5><i class="fa-solid fa-heart text-darkBlue"></i></h5>
              </van-button>
              <van-button size="small" class="border-0" @click="doCopy(item.nfcurl)">
                <h5><i class="fa-solid fa-share-nodes text-darkBlue"></i></h5>
              </van-button>
              <van-button size="small" class="border-0" @click="handleDeleteFavi(item.uf_id)">
                <h5><i class="fa-solid fa-trash text-darkBlue"></i></h5>
              </van-button>
            </div>
          </div>

        </van-list>

      </van-cell-group>
    </div>
    <!-- START: 編輯通訊錄 -->
    <van-dialog v-model:show="setShowPicker" width="400" showCancelButton confirm-button-text="確認修改" @confirm="onSubmit">

      <van-form @submit="onSubmit">
        <div id="app" class="address-block">
          <div class="bg-lightPink px-2 pt-3">
            <ul class="nav nav-tabs">
              <li class="nav-item" v-for="(card, index) in modalForm.sort" :key="index"
                @click="modalForm.page = index + 1">
                <button type="button" class="nav-link" :class="{ active: modalForm.page === index + 1 }">
                  {{ index + 1 }}
                </button>
              </li>
              <li class="nav-item" @click="addCard" v-if="modalForm.sort.length < 10">
                <button type="button" class="nav-link">
                  <i class="fa fa-plus-circle"></i>
                </button>
              </li>
            </ul>
          </div>

          <van-cell-group class="m-0 pt-2">
            <van-field label="調整卡片順序" :border="false" v-if="modalForm.sort.length > 1">
              <template #button>
                <van-button size="small" class="ml-1 btn-skyBlue" icon="arrow-left"
                  @click="moveCard(0, modalForm.page)">前移</van-button>
                <van-button size="small" class="ml-1 btn-skyBlue" icon="arrow"
                  @click="moveCard(1, modalForm.page)">後移</van-button>
                <van-button size="small" class="ml-1 btn-tomatoRed" icon="delete-o"
                  @click="delCard(modalForm.page)"></van-button>
              </template>
            </van-field>

            <van-field v-model="modalForm.sort[modalForm.page - 1].name" label="分類名稱" id="vcard-title" input-align="right"
              placeholder="請輸入分類名稱" />

            <div class="listCnt">
              <div class="item" v-for="(btn, index) in modalForm.sort[modalForm.page - 1].children" :key="index">
                <van-field v-model="btn.name" id="cardbtn-text-0" placeholder="請輸入子項目名稱" class="bg-transparent">
                  <template #button>
                    <van-button size="small" class="bg-transparent border-0" icon="arrow-up" @click="moveBtn(0, index)"
                      v-if="modalForm.sort[modalForm.page - 1].children.length > 1"></van-button>
                    <van-button size="small" class="bg-transparent border-0" icon="arrow-down" @click="moveBtn(1, index)"
                      v-if="modalForm.sort[modalForm.page - 1].children.length > 1"></van-button>
                    <van-button size="small" class="bg-transparent border-0" icon="delete-o"
                      @click="delBtn(index)"></van-button>
                  </template>
                </van-field>
              </div>
              <van-button block class="btn-tomatoRed" icon="add-o" @click="addBtn(modalForm.page)">
                <h6>新增按鈕</h6>
              </van-button>
            </div>

          </van-cell-group>
        </div>
      </van-form>

    </van-dialog>
    <!-- END: 編輯通訊錄 -->
    <van-popup v-model:show="showChangeCatePicker" round position="bottom">
      <van-picker :columns="columns2" :columns-field-names="customFieldName" confirm-button-text="確認"
        cancel-button-text="取消" @cancel="showChangeCatePicker = false" @confirm="onChangeCateConfirm"
        @change="onChangeCateChange" />
    </van-popup>

  </div>
</template>

<style lang="less" scoped>
.address {
  .content {
    min-height: calc(100vh - 54px);
  }

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

  .nav-tabs {
    .nav-link {
      color: #4a677d;
      background-color: #fff;
      border-color: transparent;
      margin-right: 4px;
    }

    .nav-item.show .nav-link,
    .nav-link.active {
      color: #fff;
      background-color: #4a677d;
      border-color: #4a677d #4a677d #4a677d;
    }
  }

  .listCnt {
    padding: 15px;

    .item {
      margin-bottom: 15px;
      border: 1px #ddd solid;
      border-radius: 5px;
    }
  }
}

.address-block {
  max-height: 80vh;
  overflow-y: auto;
}
</style>
