<template>
  <view class="page">
    <view class="back_bar">
      <BackBar title="擅长科目" />
    </view>
    <view v-for="item of subject" :key="item.stage" class="stage-item">
      <view class="title">{{ item.stage }}</view>
      <view class="subject-item">
        <text
          v-for="(sub, index) of item.list"
          :key="index"
          :class="{ tag: true, 'active-tag': selectionData.includes(sub.value) }"
          @click="select(sub.value)"
          >{{ sub.name }}</text
        >
      </view>
    </view>
    <view class="footer">
      <button class="footer-btn" @click="clickNext">保存</button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { usepersonalStoreHook } from '@/store/inspector';
const subject = [
  {
    stage: '全学段',
    list: [
      { name: '语文', value: '语文' },
      { name: '数学', value: '数学' },
      { name: '英语', value: '英语' },
    ],
  },
  {
    stage: '小学',
    list: [
      { name: '语文', value: '语文(小学)' },
      { name: '数学', value: '数学(小学)' },
      { name: '英语', value: '英语(小学)' },
      { name: '道德与法治', value: '道德与法治(小学)' },
    ],
  },
  {
    stage: '初中',
    list: [
      { name: '语文', value: '语文(初中)' },
      { name: '数学', value: '数学(初中)' },
      { name: '英语', value: '英语(初中)' },
      { name: '物理', value: '物理(初中)' },
      { name: '化学', value: '化学(初中)' },
      { name: '生物', value: '生物(初中)' },
      { name: '历史', value: '历史(初中)' },
      { name: '地理', value: '地理(初中)' },
      { name: '道德与法治', value: '道德与法治(初中)' },
    ],
  },
  {
    stage: '高中',
    list: [
      { name: '语文', value: '语文(高中)' },
      { name: '数学', value: '数学(高中)' },
      { name: '英语', value: '英语(高中)' },
      { name: '物理', value: '物理(高中)' },
      { name: '化学', value: '化学(高中)' },
      { name: '生物', value: '生物(高中)' },
      { name: '历史', value: '历史(高中)' },
      { name: '地理', value: '地理(高中)' },
      { name: '政治', value: '政治(高中)' },
    ],
  },
];
const selectionData = ref<string[]>([]);
const select = (val: string) => {
  if (selectionData.value.includes(val)) {
    selectionData.value = selectionData.value.filter(e => e !== val);
  } else {
    selectionData.value.push(val);
  }
};
function clickNext() {
  usepersonalStoreHook().SET_SUBJECT(selectionData.value.join(','));
  uni.navigateBack({ delta: 1 });
}
onMounted(() => {
  selectionData.value = usepersonalStoreHook().form.specializedSubject.split(',');
});
</script>
<style lang="scss" scoped>
.page {
  padding: 0 30rpx 112rpx 30rpx;
  width: 100%;
  box-sizing: border-box;
  .back_bar {
    margin-bottom: 30rpx;
  }
  .stage-item {
    padding: 30rpx;
    border-radius: 20rpx;
    background: #fff;
    margin-bottom: 30rpx;

    .title {
      color: #0a1f13;
      font-family: 'PingFang SC';
      font-size: 30rpx;
      font-style: normal;
      font-weight: 500;
      line-height: 45px;
    }
    .subject-item {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .tag {
        display: inline-block;
        padding: 8rpx 24rpx;
        box-sizing: border-box;
        border-radius: 10rpx;
        font-size: 30rpx;
        background: #f9f9fb;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
      }
      .active-tag {
        background: #615dff;
        color: #fff;
      }
    }
  }
}
.footer {
  position: fixed;
  bottom: 0;
  height: 122rpx;
  width: 100vw;
  left: 0;
  padding: 16rpx 0;
  box-sizing: border-box;
  background: #fff;
  border-top: 1rpx solid #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;
  .footer-btn {
    width: 440rpx;
    height: 90rpx;
    background: #615dff;
    font-size: 30rpx;
    line-height: 90rpx;
    color: #fff;
    font-weight: 600;
  }
}
</style>
