<template>
  <view class="page">
    <view class="back_bar"> <BackBar title="选择任务" /></view>
    <view class="card">
      <view v-for="item of list" :key="item.id" class="cell" @click="selcetPlan(item.id)">
        <wd-img :width="item.width" :height="item.height" :src="item.imgUrl"></wd-img>
        <wd-img v-show="selectId === item.id" width="30rpx" height="30rpx" :src="radio"></wd-img>
      </view>
    </view>
    <view class="footer">
      <button class="footer-btn" @click="clickNext">下一步</button>
    </view>
    <Popup v-model="showPopup" titleText="累计学习" @handleConfirmBtn="handleConfirm">
      <view class="popup-row">
        <text>{{ labelText }}</text>
        <wd-input-number v-model="count" :step="1" />
      </view>
    </Popup>
  </view>
</template>
<script setup lang="ts">
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
import { getPrecisionFlag } from '@/api/modules/inspector';
import video from '@/static/svg/video.svg';
import radio from '@/static/svg/radio.svg';
import exercise from '@/static/svg/exercise.svg';
import study from '@/static/svg/study.svg';
import sense from '@/static/svg/sense.svg';
import { onMounted, reactive, ref } from 'vue';
import Popup from './components/popup.vue';
const showPopup = ref(false);
const count = ref(1);
const list = ref<any[]>([
  { id: 0, imgUrl: video, width: '260rpx', height: '82rpx' },
  { id: 1, imgUrl: exercise, width: '260rpx', height: '82rpx' },
  { id: 2, imgUrl: study, width: '197rpx', height: '82rpx' },
  // { id: 3, imgUrl: sense, width: '197rpx', height: '82rpx' },
]);
const plan = ref<any>({});
const labelText = ref('次数');
const planIndex = ref();
const selectId = ref<number>(-1);
function selcetPlan(id: number) {
  selectId.value = id;
}
async function clickNext() {
  switch (selectId.value) {
    case -1:
      uni.showToast({
        title: '请选择任务再进行下一步',
        icon: 'none',
        duration: 3000,
      });
      break;
    case 0:
      setplanRow();
      uni.navigateTo({ url: '/pages/inspector/releasePlan/selectBook' });
      break;
    case 1:
      setplanRow();
      uni.navigateTo({ url: '/pages/inspector/releasePlan/selectBook' });
      break;
    case 2:
      PrecisionFlag();

      break;
    case 3:
      labelText.value = '次数';
      showPopup.value = true;
      break;
  }
}
async function PrecisionFlag() {
  const { code, data } = await getPrecisionFlag({
    subjectId: plan.value.row.subjectId,
    userId: plan.value.userId,
  });
  if (code === 200 && data) {
    labelText.value = '次数';
    showPopup.value = true;
  } else {
    uni.showToast({
      title: '该学科所选教材没有练习题，无法发布AI精准学任务',
      icon: 'none',
      duration: 3000,
    });
  }
}
function setplanRow(num?: string | number) {
  let row = plan.value.planList[plan.value.index];
  row = { ...row, taskType: selectId.value, num };
  plan.value.row = row;
  plan.value.planList[plan.value.index] = row;
  uni.setStorageSync('plan', plan.value);
}
function handleConfirm() {
  // 回到发布页面
  const num = count.value;
  setplanRow(num);
  uni.navigateBack({ delta: 1 });
}
onShow(() => {
  plan.value = uni.getStorageSync('plan');
  planIndex.value = plan.value.index;
  selectId.value = plan.value.row?.taskType;
  count.value = plan.value.row.num;
});
</script>
<style lang="scss" scoped>
.page {
  padding: 0 30rpx 30rpx 30rpx;
  box-sizing: border-box;
  .back_bar {
    margin-bottom: 30rpx;
  }
  .card {
    background: #fff;
    border-radius: 20rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    .cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;
      box-sizing: border-box;
    }
    .cell:not(:last-child) {
      border-bottom: 1px solid #f6f6f6;
    }
  }
}
.footer {
  position: fixed;
  display: flex;
  justify-content: center;
  bottom: 0;
  height: 122rpx;
  width: 100vw;
  left: 0;
  padding-top: 16rpx;
  box-sizing: border-box;
  background: #fff;
  border-top: 1rpx solid #f6f6f6;
  .footer-btn {
    margin: auto;
    width: 440rpx;
    height: 90rpx;
    background: #615dff;
    font-size: 30rpx;
    line-height: 90rpx;
    color: #fff;
    font-weight: 600;
  }
}
.popup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
</style>
