<template>
  <div class="book-detail-page content-bg">
    <div class="modify-top"></div>
    <div class="book-detail">
      <div style="text-align: center;">
        <van-image width="220" height="220"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed" />
      </div>
      <div class="book-intro">
        <p class="book-post">逃家小兔绘本</p>
        <div id="book-intro" :class="{ 'van-multi-ellipsis--l3': isToggle }">
          从前有一只小兔子，总是想要离家出走。有一天他对妈妈说：“我要跑走啦！”“如果你跑走了我就去追你，因为你是我的小宝贝呀！”妈妈说。
          一场爱的捉迷藏就此展开了
        </div>
        <div v-if="hasToggle">
          <div v-if="isToggle" @click="onToggle(false)" class="book-toggle-icon">展开&nbsp;
            <van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" />
          </div>
          <div v-else @click="onToggle(true)" class="book-toggle-icon">折叠&nbsp;
            <van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_up" />
          </div>
        </div>
      </div>

      <div class="book-video-title">
        <van-row>
          <van-col span="12">
            作品演绎
            <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" />
              54个作品
            </div>
          </van-col>
        </van-row>
      </div>

      <div class="book-video-language">
        <van-row>
          <van-col span="6">
            <div @click="toggleLanguage" :class="[check_mandarin ? 'checked' : 'uncheck']">普通话</div>
          </van-col>
          <van-col span="6">
            <div @click="toggleLanguage" :class="[check_localism ? 'checked' : 'uncheck']">方言</div>
          </van-col>
          <van-col span="12" v-if="check_localism" @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>

      <div class="book-video-list">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div v-for="item in list" :key="item" style="height: 3rem;">{{ item }}</div>
        </van-list>
      </div>
    </div>
    <div style="height: 5rem;"></div>
    <div class="book-bar">
      <div @click="onSubscribe" class="text">
        <van-icon v-if="!is_subscribe" :name="icon_subscribed" size="1.25rem" style="margin: 0 auto;" />
        <van-icon v-else :name="icon_unsubscribe" size="1.25rem" style="margin: 0 auto;" />
        <span style="font-size: 0.85rem;">订阅</span>
      </div>
      <div class="button">
        <my-button @on-click="payFor" type="custom" :custom-style="styleObject1">爱心捐书</my-button>
      </div>
      <div class="button">
        <my-button @on-click="uploadVideo" type="custom" :custom-style="styleObject2">上传作品</my-button>
      </div>
    </div>
    <to-me @on-click="gotoMe()"></to-me>
  </div>
</template>

<script setup>
import MyButton from '@/components/MyButton/index.vue'

import icon_video from '@images/video.png'
import icon_up from '@images/icon-guanbi@2x.png'
import icon_down from '@images/icon-zhankai@2x.png'
import icon_subscribed from '@images/icon-dingyue01@2x.png'
import icon_unsubscribe from '@images/icon-dingyue02@2x.png'

import ToMe from '@/components/ToMe/index.vue'
import tools from '@/common/tool'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();

// 自定义按钮颜色样式
const styleObject1 = reactive({
  backgroundColor: '#FFFFFF',
  color: '#713610',
  borderColor: '#713610'
})
const styleObject2 = reactive({
  backgroundColor: '#F9D95C',
  color: '#713610',
  borderColor: '#F9D95C'
})

const items = reactive([])

const gotoMe = () => {
  console.warn('跳转我的地址');
}

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

const onToggle = (v) => { // 展开/折叠
  isToggle.value = v
}

// 切换视频语言
const check_mandarin = ref(true);
const check_localism = ref(false);
const chooseLanguage = ref({ text: '普通话', val: '00' }); // 默认选中普通话
const toggleLanguage = () => {
  check_mandarin.value = !check_mandarin.value;
  check_localism.value = !check_localism.value;
  // 修改默认语言绑定数据
  if (check_localism.value) {
    chooseLanguage.value = { text: columns[0]['text'], val: columns[0]['val'] }
  } else {
    chooseLanguage.value = { text: '普通话', val: '00' };
  }
}
// 方言选择项
const columns = [
  { text: '所有方言', val: '00' },
  { text: '沪语', val: '01' },
  { text: '粤语', val: '02' },
];

const showPicker = ref(false);

const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  chooseLanguage.value = {
    text: selectedOptions[0].text,
    val: selectedOptions[0].val
  }
};

onMounted(() => {
  // 判断是否显示简介的展开图标
  hasToggle.value = tools.hasEllipsis('book-intro');
  for (let index = 0; index < 20; index++) {
    items.push({
      id: index,
      avatar: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg'
    })
  }
})

// 处理书籍下作品列表
const list = ref([]);
const loading = ref(false);
const finished = ref(false);

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

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

    // 数据全部加载完成
    if (list.value.length >= 100) {
      finished.value = true;
    }
  }, 1000);
};

// 书籍订阅
let is_subscribe = ref(false);
const onSubscribe = () => {
    is_subscribe.value = !is_subscribe.value
}

// 爱心捐书
const payFor = () => {
    console.warn('弹出框');
}

// 上传作品
const uploadVideo = () => {
    console.warn('跳转页面');
}
</script>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>

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

.book-detail-page {
  overflow: auto;

  .book-detail {
    margin: 1rem;
    margin-top: 1.25rem;
    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;
      }

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

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

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

    .book-video-language {
      padding: 1rem;

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

      .checked {
        background: #F9D95C;
        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-video-list {
      height: 20rem;
      overflow: scroll;
    }
  }

  .book-bar {
    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;
    }
  }
}
</style>