<script setup>
import { ref } from "vue";
import myTitleBg from "~/assets/myTitleBg.png";
import toicon from "~/assets/toicon.png";
import custom1 from "~/assets/customicon1.png";
import custom2 from "~/assets/customicon2.png";
import custom3 from "~/assets/customicon3.png";
import collectArrow from "~/assets/collectArrow.png";
import {  getFullPath } from '~/pages/detail/util'
import { useRouter } from 'vue-router';
import { user } from '~/store'
const router = useRouter();

const userInfo = ref();
userInfo.value = user.value;

let param = $ref({
  keyword: '',
});
initData()
function initData() {
  request({
    url: "/user/main/user_info",
    data: {
      ...param,
    },
  }).then((res) => {
    if (res.code == "1") {
      userInfo.value = res.data;
    }
  });
}
const classList = ref();
initClassData()
function initClassData () {
  request({
    url: "/txwx/dz/index",
    data: {
      limit: 6,
      M5jxrcL: "DaKFNRE",
      token:user.value.token,
      create_user_id:user.value.user_id
    },
  }).then((res) => {
    if (res.code == "1") {
      classList.value = res.data.page_data;
    }
  });
}
//
const handleSet = (item) => {
  let whereUrl;
  if (item == 'edit') {
    return false
  } else if (item == 'ques') {
    // whereUrl = `/login/feedback?type=my`;
    router.push({
        name: "login-feedback",
        query: { type: 'my' }
      });
  }else if (item == 'live') {
    whereUrl = `/main/course/zbkc`;
  router.push(whereUrl);

  }else if (item == 'userInfoEdit' || item == 'mylike') {
    whereUrl = `/${item}`;
  router.push(whereUrl);

  } else {
    whereUrl = `/main/personal/${item}`;
  router.push(whereUrl);

  }
}
//
function formatNumber(num) {
  return num*1 >= 10000 ? (num / 10000).toFixed(1) + 'w' : num;
}
const toClassDetail = (item) => {
  if (item.td_kclx_option_k == "1") {
    let tmk_id = item.dzdx_info.tmk_id?item.dzdx_info.tmk_id:'-';
    let tmz_id = item.td_dz_id;
    router.push({
      path: `/detail/mszy_zj/${tmk_id}/${tmz_id}`,
    });
  } else if (item.td_kclx_option_k == "2") {
    let tmk_id = item.dzdx_info.ttk_id?item.dzdx_info.ttk_id:"-";
    let tmz_id = item.td_dz_id;
    router.push({
      path: `/detail/tskc_zj/${tmk_id}/${tmz_id}`,
    });
  } else if (item.td_kclx_option_k == "3") {
     let tmk_id = item.dzdx_info.tz_id?item.dzdx_info.tz_id:"-";
    let tmz_id = item.td_dz_id;
    switch (item.td_dz_content) {
      case "1":
        showToast("直播还未开始，请耐心等待！");
        break;
      case "2":
        router.push({
         path: `/detail/zbkc_ks/${tmk_id}/${tmz_id}`,
        });
        break;
      case "3":
        router.push({
          path: `/detail/zbkc_ks/${tmk_id}/${tmz_id}`,
        });
        break;
    }
  } else if (item.td_kclx_option_k == "4") {
    let tmk_id = item.dzdx_info.ttk_id?item.dzdx_info.ttk_id:"-";
    let tmz_id = item.td_dz_id;
    router.push({
      path: `/detail/zyfd/${tmk_id}/${tmz_id}`,
    });
  } else if (item.td_kclx_option_k == "5") {
    let tmk_id = item.dzdx_info.tjk_id?item.dzdx_info.tjk_id:"-";
    let tmz_id = item.td_dz_id;
    router.push({
      path: `/detail/jtjy_zj/${tmk_id}/${tmz_id}`,
    });
  }
}
</script>

<template>
  <div class="box-border pt-2 text-14px bg-[#f4f9ff] my" v-if="userInfo">
    <div class="w-full box-border px-1">
      <div class="h-full h-60px box-border px-1 flex flex-row justify-between bg-light-blue-50 titleBg">
        <div class="w-7/10 flex flex-row relative singelpart">
          <div class="w-63px h-63px mr-5px avatorIcon"  style="opacity: 1;">
            <!-- <img :src="userInfo.user_avatar" alt=""> -->
          </div>
          <div class="w-63px h-63px mr-5px absolute l-0 -top-15px  avatorIcon"  style="opacity: 1;">
            <img :src="userInfo.user_avatar" alt="" class="w-full h-full">
          </div>
          <div class="flex flex-col justify-center">
            <h4 class="text-16px text-left text-[#222222]  userName">{{userInfo.user_name}}</h4>
            <div class="box-border pl-5px flex flex-row justify-start mt-5px p-3px text-12px text-left text-[#54545c] secInfo" @click="handleSet('integral')">
              <i class="mr-3px firtI"></i>
              我的积分 {{ userInfo.user_score }}
              <i class="ml-3px secI"></i>
            </div>
          </div>
        </div>

        <div class="flex flex-col justify-center w-3/10 singelpart">
          <p class="text-10px text-center text-[#222222] truncate schoolInfo">{{ userInfo.school }}</p>
          <p class="w-full mt-10px box-border pr-5px py-2px flex flex-row justify-center items-center text-10px text-center text-[#d4b577] bg-[#222222] editInfo" @click="handleSet('userInfoEdit')">
            <span>编辑资料</span>
            <img :src="toicon"  class="w-15px h-15px ml-5px arrowIcon"  alt="" />
          </p>
        </div>
      </div>
    </div>

    <div class="mt-10px bg-#ffffff">
      <van-cell @click="handleSet('setting')" title="设置" is-link class="flex flex-row items-center">
        <template #icon>
          <img :src="custom1" class=" mr-1" />
        </template>
      </van-cell>
      <van-cell  @click="handleSet('ques')"  title="问题与反馈"  is-link class="flex flex-row items-center">
        <template #icon>
          <img :src="custom2" class="w-18px h-18px mr-1" />
        </template>
      </van-cell>
      <van-cell  @click="handleSet('live')"  title="专题直播"  is-link class="flex flex-row items-center" v-if="false">
        <template #icon>
          <img :src="custom3" class="w-18px h-18px mr-1" />
        </template>
      </van-cell>
    </div>

    <div class="mt-10px box-border pb-6 bg-[#ffffff] classContent" >
      <div class="collectContent h-35px flex flex-row justify-between items-center  box-border px-2 mb-1 bg-[#ffffff]" @click="handleSet('mylike')">
        <div class="text-18px text-left font-bold text-[#222222] collectContent_left">我的点赞</div>
        <img :src="collectArrow" class="collectContent_right w-7px" alt="" >
      </div>

      <div class="box-border px-15.6px " v-if="classList">
        <div class="classAll flex flex-row flex-wrap justify-between" >
          <div class="mb-2 rounded bg-[#ffffff] singlePart " v-for="(item,index) in classList" :key="index" @click="toClassDetail(item)">
            <div class="h-97px relative classImg">
              <img :src="getFullPath(item.dzdx_info.img)" alt="">
              <div class="w-3/5 h-30px absolute top-0 right-0 flex flex-row flex-nowrap justify-between items-center box-border px-5px text-10px text-left text-[#ffffff] detailShow">
                <span class="w-1/2 box-border pl-20px liul"><i></i>{{formatNumber(item.dzdx_info.lll) }}</span>
                <span class="w-1/2 box-border pl-12px zan"><i></i>{{ formatNumber(item.dzdx_info.dzl) }}</span>
              </div>
            </div>
            <div class="box-border px-1 text-14px text-left text-[#222222] truncate leading-4 classTitle">{{ item.dzdx_info.name }}</div>
            <div class="flex flex-row justify-between items-center box-border px-1 text-12px text-hex-666666 leading-2 secInfoShow ">
              <span class="whitespace-nowrap">{{ item.dzdx_info.teacher_name }}</span>
              <span class="flex-1 truncate text-right ml-8px">{{ item.dzdx_info.school_name }}</span>
            </div>
          </div>
        </div>



        <!-- <van-row justify="space-between">
          <van-col span="12"  v-for="(item, index) in 4" :key="index" class="rounded mb-1"  style="background-color: #ffffff;overflow: hidden;">
            <div class="w-full h-80px">
              <img src="EEEEE" alt="">
            </div>
            <div class="classTitle box-border px-1 ">高中数学提高班</div>
            <div class="flex flex-row justify-between box-border px-1 secInfoShow">
              <span>张晓晨</span>
              <span>桐乡互联网学校</span>
            </div>
          </van-col>
        </van-row> -->

      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
html {
  font-size: 14px;
}
.my {
  .titleBg {
    background: url("~/assets/myTitleBg.png") no-repeat center center;
    background-size: cover;
  }
  .avatorIcon {
    border-radius: 50%;
    overflow: hidden;
  }
  .secInfo {
    background: linear-gradient(270deg, rgba(244, 246, 251, 0.98) 0%, #fddab5);
    border-radius: 9px;
    i.firtI {
      width: 15px;
      display: inline-block;
      background: url("~/assets/jfIcon.png") no-repeat left center;
      background-size: 100%;
    }
    .secI {
      width: 13px;
      display: inline-block;
      background: url("~/assets/jfArrow.png") no-repeat left center;
      background-size: 100%;
    }
  }
  .editInfo {
    border: 0.5px solid #d0b277;
    border-radius: 10px;
  }
  .classContent{
    .classImg{
      overflow: hidden;
      img{
        object-fit: contain;
      }
    }

  }
.singlePart{
  width: 48%;
  overflow: hidden;
  box-shadow: 0px 5px 12px 0px rgba(153,160,168,0.18);
  .detailShow{
    background-color: rgba(0, 0, 0, 0.3);
    border-bottom-left-radius: 5px;
    .liul{
      background: url("~/assets/llIcon.png") no-repeat left center;
      background-size: 18px 10px;
    }
    .zan{
      background: url("~/assets/zanIcon.png") no-repeat left center;
      background-size: 10px 10px;
    }
  }
}

}
</style>
