<template>
  <view class="page">
    <view class="back_bar"> <BackBar title="选择章节" /></view>
    <view v-for="item of chaperTree" :key="item.id" class="card">
      <view class="unit cell flex-bt" @click="() => (!item.children.length ? select(item) : null)">
        {{ item.name }}
        <wd-img v-if="selectId === item.id" width="30rpx" height="30rpx" :src="radio"></wd-img>
      </view>
      <view v-for="(chaper, chaperIndex) of item.children" :key="chaperIndex">
        <view class="cell flex-bt" @click="select(chaper)">
          <text class="chaper-name">{{ chaperIndex + 1 }}.{{ chaper.name }}</text>
          <wd-img v-if="selectId === chaper.id" width="30rpx" height="30rpx" :src="radio"></wd-img>
        </view>
        <view
          v-for="(sub, subIndex) of chaper.children"
          :key="subIndex"
          class="sub-cell flex-bt"
          @click="select(sub)"
        >
          <text class="sub-name"> <text class="dot"></text>{{ sub.name }} </text>
          <wd-img v-if="selectId === sub.id" width="30rpx" height="30rpx" :src="radio"></wd-img>
        </view>
      </view>
    </view>
    <view class="footer">
      <button class="footer-btn" @click="clickNext">确定</button>
    </view>
    <MultiplePicker
      v-model="showPicker"
      :pickList="knowledgeList"
      title="选择知识点"
      :pickVal="[0]"
      @confirm="confirmSelect"
    />
  </view>
</template>
<script setup lang="ts">
import radio from '@/static/svg/radio.svg';
import { getChaper, getKnowledge, getKnowledgeVideo } from '@/api/modules/inspector';
import { onMounted, ref } from 'vue';
import MultiplePicker from './components/MultiplePicker.vue';

const selectId = ref<number>(-1);
const selection = ref<any>({});
const plan = ref<any>({});
const chaperTree = ref<any[]>([]);
const knowledgeList = ref<any[]>([{ value: 0, name: '知识点1' }]);
const showPicker = ref(false);
function select(row: any) {
  selectId.value = row.id;
  selection.value = row;
}

const taskType = ref<number>(0);
function clickNext() {
  if (selectId.value === -1) {
    uni.showToast({
      title: '请先选择章节再进行下一步',
      icon: 'none',
      duration: 3000,
    });
    return;
  }
  if (taskType.value === 0) {
    getVideoList();
  } else {
    getKnowledgeList();
  }
}
// 获取章节
async function getChaperList() {
  try {
    uni.showLoading({
      title: '加载中...',
    });
    const { code, data } = await getChaper({ textBookId: plan.value.row.bookId });
    if (code === 200) {
      chaperTree.value = data || [];
    }
    uni.hideLoading();
  } catch (error) {
    uni.hideLoading();
  }
}
// 获取章节
async function getVideoList() {
  try {
    uni.showLoading({
      title: '加载中...',
    });
    const { data } = await getKnowledgeVideo(selectId.value);
    console.log(data.rows);
    if (data.rows.length) {
      uni.setStorageSync('videoList', data.rows);
      plan.value.planList[plan.value.index] = {
        ...plan.value.planList[plan.value.index],
        chapterId: selectId.value,
        chapterName: selection.value.chapterName || selection.value.name,
      };
      uni.setStorageSync('plan', plan.value);
      await uni.navigateTo({
        url: '/pages/inspector/releasePlan/selectVideo',
      });
    } else {
      uni.showToast({
        title: '该章节暂无视频',
        icon: 'none',
        duration: 3000,
      });
    }
    uni.hideLoading();
  } catch (error) {
    uni.hideLoading();
  }
}
// 根据章节查询知识点
async function getKnowledgeList() {
  try {
    uni.showLoading({
      title: '加载中...',
      mask: true,
    });
    const { code, data } = await getKnowledge({ chapterId: selectId.value });
    uni.hideLoading();
    knowledgeList.value = data.map((item: any) => {
      return {
        name: item.name,
        value: item.id,
      };
    });
    if (knowledgeList.value.length === 0) {
      uni.showToast({ title: '该章节没有知识点', icon: 'none' });
      return;
    }
    showPicker.value = true;
  } catch (error) {
    uni.hideLoading();
  }
}
function confirmSelect(val: any) {
  let data = val.map(item => {
    return {
      chapterId: selectId.value,
      chapterName: selection.value.name,
      courseTimeId: item.value,
      courseTimeName: item.name,
    };
  });
  plan.value.planList[plan.value.index] = {
    ...plan.value.planList[plan.value.index],
    chapterId: data[0].chapterId,
    chapterName: data[0].chapterName,
    courseTimeId: data[0].courseTimeId,
    courseTimeName: data[0].courseTimeName,
  };
  data.slice(1).forEach(item => {
    plan.value.planList.push({
      ...plan.value.planList[plan.value.index],
      chapterId: item.chapterId,
      chapterName: item.chapterName,
      courseTimeId: item.courseTimeId,
      courseTimeName: item.courseTimeName,
    });
  });
  plan.value.row = plan.value.planList[plan.value.index];
  console.log(plan.value.planList);

  uni.setStorageSync('plan', plan.value);
  uni.navigateTo({ url: '/pages/inspector/releasePlan/index' });
}

onMounted(() => {
  plan.value = uni.getStorageSync('plan');
  taskType.value = plan.value?.row?.taskType ?? 0;
  getChaperList();
});
</script>
<style lang="scss" scoped>
.page {
  padding: 0 30rpx 30rpx 30rpx;
  box-sizing: border-box;
  padding-bottom: 124rpx;
  overflow: hidden;
  overflow-y: auto;
  .back_bar {
    margin-bottom: 30rpx;
  }
  .flex-bt {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .card {
    margin-bottom: 30rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 0 30rpx;
    box-sizing: border-box;

    .unit {
      color: #0a1f13;
      font-family: 'PingFang SC';
      font-size: 32rpx;
      line-height: 46rpx;
      font-weight: 600;
    }
    .cell {
      // height: 102rpx;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f6f6f6;
      .chaper-name {
        font-size: 30rpx;
        width: 570rpx;
        color: #0a1f13;
      }
    }
    .sub-cell {
      // height: 102rpx;
      // padding: 0 30rpx;
      box-sizing: border-box;
      line-height: 42rpx;
      font-size: 30rpx;
      color: #666;
      border-bottom: 1rpx solid #f6f6f6;
      .sub-name {
        padding: 30rpx;
        width: 550rpx;

        .dot {
          position: relative;
          display: inline-block;
          width: 10rpx;
          margin-right: 16rpx;
          height: 42rpx;
          box-sizing: border-box;
          &::after {
            content: '';
            position: absolute;
            top: 50%;
            display: inline-block;
            width: 10rpx;
            height: 10rpx;
            border-radius: 50%;
            background-color: #666;
          }
        }
      }
    }
    .sub-cell:not(:last-child) {
      border-bottom: 1rpx solid #f6f6f6;
    }
  }
}
.footer {
  position: fixed;
  bottom: 0;
  height: 122rpx;
  width: 100vw;
  left: 0;
  padding-top: 16rpx;
  box-sizing: border-box;
  background: #fff;
  border-top: 1rpx solid #f6f6f6;
  display: flex;
  justify-content: center;
  .footer-btn {
    margin: auto;
    width: 440rpx;
    height: 90rpx;
    background: #615dff;
    font-size: 30rpx;
    line-height: 90rpx;
    color: #fff;
    font-weight: 600;
  }
}
</style>
