<template>
  <div class="book-detail-page content-bg">
    <div class="modify-top" />
    <div style="height: 1.5rem;" />
    <div class="book-detail">
      <div style="text-align: center;">
        <van-image width="220" height="220" fit="contain" lazy-load :src="bookInfo.cover" />
      </div>
      <div class="book-intro">
        <p class="book-post">{{ bookInfo.name }}</p>
        <div id="book-intro" :class="{ 'van-multi-ellipsis--l3': isToggle }">{{ bookInfo.note }}</div>
        <div v-if="hasToggle">
          <div v-if="isToggle" class="book-toggle-icon" @click="isToggle = false">
            展开&nbsp;
            <van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" />
          </div>
          <div v-else class="book-toggle-icon" @click="isToggle = true">
            折叠&nbsp;
            <van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_up" />
          </div>
        </div>
      </div>

      <van-sticky>
        <div class="book-video-title">
          <van-row>
            <van-col span="12">
              <span class="bg-gradient">作品演绎</span>
              <!-- <div style="background-color: #F9D95C; width: 70px; height: 4px;"></div> -->
            </van-col>
            <van-col span="12">
              <div style="font-size: 1rem; color: #999999; text-align: right;">
                <van-icon :name="icon_video" />
                {{ bookInfo.total ? bookInfo.total : 0 }}个作品
              </div>
            </van-col>
          </van-row>
        </div>
        <div class="book-video-language">
          <van-row>
            <van-col span="6">
              <div :class="[checkMandarin ? 'checked' : 'uncheck']" @click="toggleLanguage('mandarin')">普通话</div>
            </van-col>
            <van-col span="6">
              <div :class="[checkLocalism ? 'checked' : 'uncheck']" @click="toggleLanguage('localism')">方言</div>
            </van-col>
            <van-col v-if="checkLocalism" span="12" @click="showPicker = true">
              <div class="choose-wrapper">
                <div class="text">
                  &nbsp;{{ chooseLanguage.text }}
                </div>
                <div class="icon">
                  <van-icon name="arrow-down" />&nbsp;
                </div>
              </div>
            </van-col>
          </van-row>
          <van-popup v-model:show="showPicker" round position="bottom">
            <van-picker 
              :columns="columns" :columns-field-names="{ text: 'text', value: 'val', children: 'children' }" @cancel="showPicker = false" @confirm="onConfirm"
            />
          </van-popup>
        </div>
      </van-sticky>

      <div class="book-video-list">
        <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
          <template v-for="item in prod_list" :key="item">
            <video-card :item="item">
              <template #bookDetailSub>
                <div style="color: #999999; padding: 0px 1rem 0.5rem;" @click="goToDetail(item)">
                  {{ item.kg_name }} ｜ {{ item.localism_type }}
                </div>
              </template>
            </video-card>
          </template>
        </van-list>
      </div>
      <div style="height: 2rem;" />
      <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无作品信息" />
    </div>
    <div style="height: 6rem;" />
    <div class="book-bar">
      <div class="text" @click="onSubscribe">
        <template v-if="!bookInfo.is_subscribe">
          <van-icon :name="icon_subscribed" size="1.25rem" style="margin: 0 auto;" />
          <span style="font-size: 0.85rem;">订阅</span>
        </template>
        <template v-else>
          <van-icon :name="icon_unsubscribe" size="1.25rem" style="margin: 0 auto;" />
          <span style="font-size: 0.85rem;">已订阅</span>
        </template>
      </div>
      <div class="button">
        <my-button type="primary" @on-click="uploadVideo">上传作品</my-button>
      </div>
      <div class="button">
        <my-button type="plain" @on-click="toDonate">爱心助力</my-button>
      </div>
    </div>
    <shortcut-fixed type="C" :item="shortcutItem" />
  </div>

  <!-- 上传时，如果没有默认儿童提示弹框, 如果没有实名认证提示弹框 -->
  <notice-overlay :show="showNotice" :text="noticeText" @on-submit="onSubmit" @on-close="onClose">
    <div style="color: #333333;">
      <div v-html="noticeHtml" />
    </div>
  </notice-overlay>

  <donate-flower :user-type="donateType" :show-popup="showDonate" :item="donateInfo" @on-close="closeDonate" />

  <van-overlay :show="show" z-index="9999">
    <div class="wrapper" @click.stop>
      <van-loading size="24px">跳转中...</van-loading>
    </div>
  </van-overlay>
</template>

<script setup>
import { ref, onActivated, nextTick, onMounted, computed } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { Cookies, _, storeToRefs, mainStore, Toast, hasEllipsis } from '@/utils/generatePackage'
import { MyButton, VideoCard, NoticeOverlay, DonateFlower, ShortcutFixed } from '@/utils/generateModules'
import { icon_video, icon_up, icon_down, icon_subscribed, icon_unsubscribe, no_image } from '@/utils/generateIcons'
import { JSJ_FORM_C } from '@/constant'
import { useVideoList, useDefaultPerf, useShortcutBar, useScrollTop } from '@/composables';
import { addSubscribeAPI } from '@/api/C/book.js'
import { prepareDonateAPI } from '@/api/C/donate.js'

const { shortcutItem } = useShortcutBar(['home', 'me']); // 配置快捷跳转条
const { resetScrollTop } = useScrollTop(); // 页面滚动恢复
resetScrollTop('scrollTop');

const $route = useRoute();
const $router = useRouter();

const { toggleLanguage, onLoad, columns, prod_list, finished, loading, bookInfo, showPicker, checkLocalism, checkMandarin, onConfirm, chooseLanguage, finishedTextStatus, emptyStatus } = useVideoList($route);
const { userInfo } = useDefaultPerf($route.query.id);

const donateInfo = ref({})
const userType = Cookies.get('userType')
// 判断是访客进入还是幼儿园进入
const donateType = computed(() => {
  return userType === 'client' ? 'K' : 'V';
})
onMounted(async () => {
  const { data } = await prepareDonateAPI({ kg_id: $route.query.kg_id });
  donateInfo.value = data;
})

// 判断是否显示简介的展开图标
const hasToggle = ref(false); // 判断是否有展开文字，默认没有
const isToggle = ref(true); // 判断展开状态，默认展开

nextTick(() => {
  // 判断是否显示简介的展开图标
  hasToggle.value = hasEllipsis('book-intro');
})

/**
 * 书籍订阅
 */
const onSubscribe = async () => {
  const { msg } = await addSubscribeAPI({ book_id: $route.query.id });
  if (msg === 'add subscribe OK') {
    bookInfo.value.is_subscribe = true;
    Toast.success('订阅成功')
  } else {
    bookInfo.value.is_subscribe = false;
    Toast.success('取消订阅')
  }
}

/*************** 捐书模块START ***************/

// 弹出捐赠弹框模块
const showDonate = ref(false);

const toDonate = () => {
  showDonate.value = true;
}

const closeDonate = (v) => {
  showDonate.value = v;
}
/*******************************************/


/**
 * 上传作品回调
 */

// 不能上传提示原因弹框
const showNotice = ref(false)
const onClose = () => { // 关闭提示框回调
  showNotice.value = false;
}
// 跳转个人中心
const onSubmit = () => {
  $router.push({
    path: '/me/index'
  });
}

const noticeText = ref('')
const noticeHtml = ref('')
const show = ref(false); // 跳转等待提示
const uploadVideo = () => {
  if (userInfo.value.can_upload === 1) { // 可以上传
    show.value = true;
    // x_field_1 是金数据表单传入的参数，家长上传的格式为：user_id-book_id-perf_id，perf_id是当前缺省的儿童id
    const str = `${userInfo.value.user_id}-${$route.query.id}-${userInfo.value.perf_id}`;
    // 已读隐私条例，直接跳转上传页面
    // $router.push({
    //   path: '/client/privacyNotice',
    //   query: {
    //     str
    //   }
    // })
    if (Cookies.get('privacy_notice')) {
      location.href = `${JSJ_FORM_C}?x_field_1=${str}`;
      // BUG: 关闭loading临时处理
      setTimeout(() => {
        show.value = false;
      }, 2000);
    } else { // 跳转个人隐私阅读
      $router.push({
        path: '/client/privacyNotice',
        query: {
          str
        }
      })
    }
  } else if (userInfo.value.can_upload === -1) { // 未实名认证
    showNotice.value = true;
    noticeText.value = '前往认证'
    noticeHtml.value = `
      <p>您还没有实名认证</p>
      <p>请前往个人中心进行实名认证</p>
    `
  } else if (userInfo.value.can_upload === -2) { // 没有默认儿童
    showNotice.value = true;
    noticeText.value = '前往新增'
    noticeHtml.value = `
      <p>您还没有新增儿童</p>
      <p>请前往个人中心进行新增</p>
    `
  }
}

/****************** keepAlive 模块 *******************/

// TAG: keepAlive 缓存页面
const store = mainStore();
/**
 * 大菠萝的修改数据方式 3种
 */
// 简单数据修改
// store.keepPages.push($route.meta.name);
// 多条数据修改
store.$patch((state) => {
  state.keepPages = [...state.keepPages, $route.meta.name];
})
// 通过action修改
// store.keepThisPage($route.meta.name);
// 调用返回其他store的数据
// store.getTestStoreList

onActivated(() => { // keepAlive 重置后执行回调
  // TAG: pinia应用，动态刷新数据
  // 处理数据未刷新数据显示问题
  const { video_detail } = storeToRefs(store);
  // 如果作品信息有变化及时修正
  const arr = ref([]);
  _.each(prod_list.value, (item) => {
    if (item.id === video_detail.value.id) {
      item = video_detail.value
    }
    arr.value.push(item);
  })
  // 触发更新
  prod_list.value = arr.value;
  // 滚动恢复
  resetScrollTop('scrollTop');

  // 更新页面名称，因为不刷新副作用~
  document.title = $route.meta.title;
});

onBeforeRouteLeave(() => {
  // 监听记录滚动位置
  store.changeScrollTop(window.scrollY)
})

/****************** 视频组件相关操作 *******************/
const goToDetail = (v) => { // 跳转作品详情页
  $router.push({
    path: '/client/videoDetail',
    query: {
      prod_id: v.id,
      book_id: v.book_id,
      type: v.type, // 特殊标识，判断入口 为keepAlive使用
      perf_id: v.perf_id
    }
  });
}
/*****************************************************/
</script>

<style lang="less" scoped>
@import url('@css/content-bg.less');

.book-detail-page {
  // overflow: auto;

  .book-detail {
    margin: 1rem;
    // margin-top: 1.25rem;
    margin-top: 0;
    padding-top: 1rem;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);

    .book-intro {
      padding: 1rem;

      .book-post {
        color: #222222;
        font-size: 1.25rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
      }

      #book-intro {
        color: #333333;
        margin-top: 0.25rem;
        line-height: 1.7;
      }

      .book-toggle-icon {
        text-align: right;
        color: #713610;
        font-size: 1rem;
      }
    }

    .book-video-title {
      background-color: #F7F7F7;
      padding: 1rem 1.5rem;

      .bg-gradient {
        background: linear-gradient(@base-color, @base-color) no-repeat;
        /*调整下划线的宽度占百分之百  高度是3px */
        background-size: 100% 3px;
        /* 调整下划线的起始位置 左侧是0 上边是1.15em */
        background-position: 0 1rem;
      }
    }

    .book-video-language {
      padding: 1rem;
      background-color: white;

      .uncheck {
        background: #F7F7F7;
        border-radius: 15px;
        padding: 0.5rem;
        text-align: center;
        color: #222222;
        margin: 0 0.25rem;
      }

      .checked {
        background: @base-color;
        border-radius: 15px;
        padding: 0.5rem;
        text-align: center;
        color: #222222;
        margin: 0 0.25rem;
      }

      .choose-wrapper {
        background: #F7F7F7;
        border-radius: 15px;
        padding: 0.5rem;
        text-align: center;
        color: #B0B0B0;
        margin: 0 0.25rem;

        .text {
          display: inline-block;
          text-align: left;
          width: 80%;
        }

        .icon {
          display: inline-block;
          text-align: right;
          width: 20%;
        }
      }
    }
  }

  .book-bar {
    z-index: 999;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    box-sizing: content-box;
    background-color: white;
    padding: 1rem;

    .text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 3rem;
      color: #713610;
      text-align: center;
    }

    .button {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      padding: 0 0.5rem;
    }
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: auto;
  text-align: center;
}
</style>