<template>
  <div class="pocAiClass">
    <bar ref="barRef" tit="智能学伴">
      <!-- <template v-slot:setting>
        <div class="setting">
          <div @click.stop="selfMessage">个人信息</div>
          <span></span>
          <div @click.stop="aiMessage">学伴设置</div>
        </div>
      </template>
			<template v-slot:settingIcon>
				<div style="width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;">
					<svg style="width: 100%;height: 100%;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.25 12.0008C5.25 12.3986 5.40802 12.7801 5.6893 13.0614C5.97058 13.3427 6.35208 13.5007 6.74987 13.5007C7.14766 13.5007 7.52915 13.3427 7.81043 13.0614C8.09171 12.7801 8.24973 12.3986 8.24973 12.0008C8.24973 11.6031 8.09171 11.2216 7.81043 10.9403C7.52915 10.659 7.14766 10.501 6.74987 10.501C6.35208 10.501 5.97058 10.659 5.6893 10.9403C5.40802 11.2216 5.25 11.6031 5.25 12.0008Z" fill="#272636"/>
<path d="M10.5 12.0008C10.5 12.3986 10.658 12.7801 10.9393 13.0614C11.2206 13.3427 11.6021 13.5007 11.9999 13.5007C12.3977 13.5007 12.7792 13.3427 13.0604 13.0614C13.3417 12.7801 13.4997 12.3986 13.4997 12.0008C13.4997 11.6031 13.3417 11.2216 13.0604 10.9403C12.7792 10.659 12.3977 10.501 11.9999 10.501C11.6021 10.501 11.2206 10.659 10.9393 10.9403C10.658 11.2216 10.5 11.6031 10.5 12.0008Z" fill="#272636"/>
<path d="M15.75 12.0008C15.75 12.3986 15.908 12.7801 16.1893 13.0614C16.4706 13.3427 16.8521 13.5007 17.2499 13.5007C17.6477 13.5007 18.0292 13.3427 18.3104 13.0614C18.5917 12.7801 18.7497 12.3986 18.7497 12.0008C18.7497 11.6031 18.5917 11.2216 18.3104 10.9403C18.0292 10.659 17.6477 10.501 17.2499 10.501C16.8521 10.501 16.4706 10.659 16.1893 10.9403C15.908 11.2216 15.75 11.6031 15.75 12.0008Z" fill="#272636"/>
</svg>
				</div>
			</template> -->
    </bar>
    <!-- <div class="pac_head">
      <div class="pac_h_left">
        <span>筛选</span>
      </div>
      <div class="pac_h_right">
        <div class="p_h_r_box">
          <div>
            <span @click.stop="settings()">
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M1.07817 8.26844C0.973943 8.10465 0.973943 7.89535 1.07817 7.73156L4.57817 2.23156C4.66995 2.08734 4.82905 2 5 2L11 2C11.1709 2 11.3301 2.08734 11.4218 2.23156L14.9218 7.73156C15.0261 7.89535 15.0261 8.10465 14.9218 8.26844L11.4218 13.7684C11.3301 13.9127 11.1709 14 11 14L5 14C4.82905 14 4.66995 13.9127 4.57817 13.7684L1.07817 8.26844ZM5.27447 13L10.7255 13L13.9073 8L10.7255 3L5.27447 3L2.09265 8L5.27447 13Z"
                  fill="black"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5ZM5.5 8C5.5 6.61929 6.61929 5.5 8 5.5C9.38071 5.5 10.5 6.61929 10.5 8C10.5 9.38071 9.38071 10.5 8 10.5C6.61929 10.5 5.5 9.38071 5.5 8Z"
                  fill="black"
                />
              </svg>
            </span>
          </div>
        </div>
      </div>
    </div> -->

    <div class="pac_screen">
      <div class="pac_s_item">
        <van-popover placement="bottom-start" v-model="showChapter" trigger="click">
          <div class="pac_s_i_list">
            <div
              :class="['pac_s_i_l_item', chapter == index ? 'pac_s_i_l_itemActive' : '',[0,2].includes(index)?'pac_s_i_l_itemDisabled':'']"
							style="justify-content: flex-start;padding-left: 2px;"
              v-for="(item, index) in classList"
              :key="index"
              @click.stop="changeChapter(index)"
            >
              <span v-text="item.title"></span>
            </div>
          </div>
          <template #reference>
            <span
              ><span>{{classList[chapter].title.substring(0,3)}}</span><svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M4.37366 6.45928L5.2929 5.54004L8.83328 9.08042L12.3737 5.54004L13.2929 6.45928L8.83328 10.9189L4.37366 6.45928Z"
                  fill="black"
                  fill-opacity="0.4"
                />
              </svg>
            </span>
          </template>
        </van-popover>
      </div>

      <div class="pac_s_item">
        <van-popover placement="bottom" v-model="showSubject" trigger="click">
          <div class="pac_s_i_list">
            <div
              :class="['pac_s_i_l_item', subject == item.label ? 'pac_s_i_l_itemActive' : '',item.disabled?'pac_s_i_l_itemDisabled':'']"
              v-for="(item, index) in subjectList"
              :key="item.value"
              @click.stop="changeSubject(item)"
            >
              <span v-text="item.label"></span>
            </div>
          </div>
          <template #reference>
            <span
              ><span>{{ subject?subject:'学科' }}</span><svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M4.37366 6.45928L5.2929 5.54004L8.83328 9.08042L12.3737 5.54004L13.2929 6.45928L8.83328 10.9189L4.37366 6.45928Z"
                  fill="black"
                  fill-opacity="0.4"
                />
              </svg>
            </span>
          </template>
        </van-popover>
      </div>

      <div class="pac_s_item">
        <van-popover placement="bottom" v-model="showEdition" trigger="click">
          <div class="pac_s_i_list">
            <div
              :class="['pac_s_i_l_item', edition == item.label ? 'pac_s_i_l_itemActive' : '',item.disabled?'pac_s_i_l_itemDisabled':'']"
              v-for="(item, index) in editionList"
              :key="item.value"
              @click.stop="changeEdition(item)"
            >
              <span v-text="item.label"></span>
            </div>
          </div>
          <template #reference>
            <span
              ><span>{{ edition?edition:'版本' }}</span><svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M4.37366 6.45928L5.2929 5.54004L8.83328 9.08042L12.3737 5.54004L13.2929 6.45928L8.83328 10.9189L4.37366 6.45928Z"
                  fill="black"
                  fill-opacity="0.4"
                />
              </svg>
            </span>
          </template>
        </van-popover>
      </div>

      <div class="pac_s_item" @click.stop="selfMessage">
        <div class="pac_s_i_message" >
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g opacity="0.9">
              <path
                d="M10 11.25C11.9192 11.25 13.475 9.69419 13.475 7.775C13.475 5.85581 11.9192 4.3 10 4.3C8.08081 4.3 6.525 5.85581 6.525 7.775C6.525 9.69419 8.08081 11.25 10 11.25ZM10 10C8.77117 10 7.775 9.00383 7.775 7.775C7.775 6.54617 8.77117 5.55 10 5.55C11.2288 5.55 12.225 6.54617 12.225 7.775C12.225 9.00383 11.2288 10 10 10Z"
                fill="black"
                fill-opacity="0.9"
              />
              <path
                d="M10 18.75C14.8325 18.75 18.75 14.8325 18.75 10C18.75 5.16751 14.8325 1.25 10 1.25C5.16751 1.25 1.25 5.16751 1.25 10C1.25 14.8325 5.16751 18.75 10 18.75ZM16.2443 14.1557C14.3435 13.0956 12.2319 12.5 9.99997 12.5C7.76802 12.5 5.65649 13.0956 3.75564 14.1557C2.96238 12.9661 2.5 11.5371 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10C17.5 11.5371 17.0376 12.9662 16.2443 14.1557ZM15.454 15.1482C14.0867 16.5963 12.1489 17.5 10 17.5C7.85112 17.5 5.91332 16.5963 4.54593 15.1482C6.22562 14.247 8.06603 13.75 9.99997 13.75C11.9339 13.75 13.7743 14.247 15.454 15.1482Z"
                fill="black"
                fill-opacity="0.9"
              />
            </g>
          </svg>

          <span>资料</span>
        </div>
      </div>
      <!-- <el-select
        v-model="subject"
        class="pac_s_select"
				style="width: 48%;"
        size="medium"
        placeholder="请选择学科"
      >
        <el-option label="全部学科" value=""></el-option>
        <el-option
          v-for="(item, index) in subjectList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-select
        v-model="edition"
        class="pac_s_select"
				style="width: 48%;"
        size="medium"
        placeholder="请选择版本"
      >
        <el-option label="全部版本" value=""></el-option>
        <el-option
          v-for="(item, index) in editionList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-input placeholder="搜索" v-model="searchValue" class="pac_s_select" style="width: 80%;">
        <i
          slot="suffix"
          @click.stop="search()"
          style="cursor: pointer;"
          class="el-input__icon el-icon-search"
        ></i>
      </el-input>

			<span class="pac_s_reset" @click.stop="reset()">重置</span> -->
    </div>
    <!-- <div class="pac_subjectList">
      <span
        :class="[subject == index ? 'pac_sl_active' : '']"
        v-for="(item, index) in subjectList"
        :key="index"
        @click.stop="changeSubject(index)"
        >{{ item }}</span
      >
    </div> -->

    <!-- <div class="pac_editionList">
      <span
        :class="[edition == index ? 'pac_el_active' : '']"
        v-for="(item, index) in editionList"
        :key="index"
        @click.stop="changeEdition(index)"
        >{{ item }}</span
      >
    </div> -->

    <div class="pac_box">
      <chapterCard
        v-for="(item, index) in classList[chapter].allClass"
        :key="index"
				:index="index"
				:index2="chapter"
        :data="item"
        :subjectList="subjectList"
      />
    </div>

    <div class="pac_footDialog" v-if="showDialog">
      <div class="pac_fd_closeArea"></div>
      <div class="pac_fd_bottom">
        <div class="pac_fd_b_left">
          <img :src="characterList.find(i => userInfo.choseCharacter === i.index).image" />
        </div>
        <div class="pac_fd_b_right">
          <span class="pac_fd_b_r_characterName">{{
            characterList.find(i => userInfo.choseCharacter === i.index)
              ? characterList.find(i => userInfo.choseCharacter === i.index).name
              : 'AI'
          }}</span>
          <span class="pac_fd_b_r_closeIcon" @click.stop="showDialog = false">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M7 0C3.14049 0 0 3.14001 0 7C0 10.86 3.14001 14 7 14C10.8595 14 14 10.86 14 7C14 3.14001 10.86 0 7 0ZM9.8555 9.156C10.0505 9.352 10.05 9.668 9.85451 9.863C9.75702 9.96 9.62951 10.009 9.50152 10.009C9.37301 10.009 9.24502 9.96001 9.14751 9.86201L6.9975 7.7055L4.84051 9.83951C4.74302 9.93552 4.61599 9.98401 4.48899 9.98401C4.36001 9.98401 4.2315 9.9345 4.1335 9.83551C3.9395 9.639 3.941 9.32299 4.13751 9.1285L6.292 6.9975L4.14549 4.844C3.95049 4.64849 3.951 4.332 4.14649 4.137C4.342 3.94149 4.65798 3.94251 4.85349 4.13799L7.00298 6.29399L9.15998 4.16001C9.35597 3.96552 9.67297 3.9675 9.86698 4.16401C10.0615 4.36052 10.0595 4.67701 9.86298 4.87101L7.70851 7.00199L9.8555 9.156Z"
                fill="#E0EAFB"
              />
            </svg>
          </span>
          <div class="pac_fd_b_r_message">
						{{ dialogMessage }}
            <!-- Hi，{{
              userInfo.userName
            }}同学，欢迎回来！你是否开始下一节课的学习，学习<span>【水循环】</span>？ -->
          </div>
          <div class="pac_fd_b_r_btnArea">
            <span class="pac_fd_b_r_ba_btn1" @click.stop="dialogBtn(3)">傾偈</span>
						<span class="pac_fd_b_r_ba_btn3" @click.stop="showDialog = false">繼續學習→</span>
            <!-- <span class="pac_fd_b_r_ba_btn2" @click.stop="dialogBtn(2)">复习上一课</span> -->
            <!-- <span class="pac_fd_b_r_ba_btn3" @click.stop="dialogBtn(1)">好，开始学习→</span> -->
          </div>
        </div>
      </div>
      <!-- <div class="pac_fd_left">
        <el-image
          class="pac_fd_l_hello"
          :src="require('../../../assets/icon/pocAiClassroom/hello.gif')"
        ></el-image>
      </div>
      <div class="pac_fd_right">
        <div class="pac_fd_r_messageArea">
          <div class="pac_fd_r_ma_message">
            Hi，科科同学，欢迎回来！你是否开始下一课的学习，学习【运动的快慢】？
          </div>
          <div class="pac_fd_r_ma_btnArea">
            <span @click.stop="dialogBtn(1)">好,开始学习新内容</span>
            <span @click.stop="dialogBtn(2)">我想复习上一节课</span>
            <span @click.stop="dialogBtn(3)">我想聊聊天</span>
          </div>
          <span class="pac_fd_r_ma_closeIcon" @click.stop="dialogBtn(0)"
            >×</span
          >
        </div>
      </div> -->
    </div>
    <!-- <settingsDialog
      ref="settingsDialogRef"
      :gradeList="gradeList"
      :characterList="characterList"
      @changeUserInfo="changeUserInfo"
      @changeCharacterInfo="changeCharacterInfo"
    /> -->
		<van-popup v-model="disabledShow" round>
			<div class="disabledShowBox">
				<div class="dsb_top">
					<div class="dsb_top_title">敬请期待</div>
					<div class="dsb_top_content">当前课程资源正在建设中，请您耐心等待。</div>
				</div>
				<div class="dsb_bottom">
					<span @click.stop="disabledShow = false">催一催</span>
					<span @click.stop="disabledShow = false">好的</span>
				</div>
			</div>
		</van-popup>
  </div>
</template>

<script>
import chapterCard from './component/chapterCard.vue'
// import settingsDialog from './component/settingsDialog.vue'
import bar from './component/bar.vue'
import { Dialog } from 'vant';
// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {
  bind(el, binding) {
    // 在元素上绑定一个点击事件监听器
    el.clickOutsideEvent = function(event) {
      // 检查点击事件是否发生在元素的内部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
        binding.value(event)
      }
    }
    // 在文档上添加点击事件监听器
    document.addEventListener('click', el.clickOutsideEvent)
  },
  unbind(el) {
    // 在元素上解除点击事件监听器
    document.removeEventListener('click', el.clickOutsideEvent)
  }
}
export default {
  components: {
    chapterCard,
    // settingsDialog,
    bar
  },
  directives: {
    'click-outside': clickOutside // 注册自定义指令
  },
  data() {
    return {
      userId: this.$store.state.user.userinfo.userid,
      org: this.$store.state.user.userinfo.org,
      oid: this.$store.state.user.userinfo.organizeid,
      chapter: 1,
      showChapter: false,
      subject: '科學',
      showSubject: false,
      edition: '牛津大學',
      showEdition: false,
      searchValue: '',
      grade: 6,
			disabledShow:false,
      showDialog: false,
			dialogMessage:"",
      userInfo: {
        userName: '科科',
        grade: 6,
        userAvatar: require('../../assets/images/pocAiClassroom/defaultAvatar.png'),
        choseCharacter: 0
      },
      characterList: [
        {
          index: 0,
          image: require('../../assets/images/pocAiClassroom/character1.png'),
          name: '圆鼓鼓的大胖鱼',
          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心'
        },
        {
          index: 1,
          image: require('../../assets/images/pocAiClassroom/character2.png'),
          name: '迷人的大反派2',
          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心2'
        },
        {
          index: 2,
          image: require('../../assets/images/pocAiClassroom/character3.png'),
          name: '迷人的大反派3',
          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心3'
        },
        {
          index: 3,
          image: require('../../assets/images/pocAiClassroom/character4.png'),
          name: '迷人的大反派4',
          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心4'
        },
        {
          index: 4,
          image: require('../../assets/images/pocAiClassroom/character5.png'),
          name: '迷人的大反派5',
          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心5'
        },
        {
          index: 5,
          image: require('../../assets/images/pocAiClassroom/character6.png'),
          name: '迷人的大反派6',
          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心6'
        }
      ],
      // gradeList: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级'],
			gradeList: ['小一', '小二', '小三', '小四', '小五', '小六', '中一', '中二', '中三','中四','中五','中六'],
      subjectList: [
        // { value: 0, label: '语文' },
        // { value: 1, label: '数学' },
        // { value: 2, label: '英语' },
        // { value: 3, label: '物理' },
        // { value: 4, label: '化学' },
        // { value: 5, label: '生物' },
        // { value: 6, label: '历史' },
        // { value: 7, label: '地理' },
        // { value: 8, label: '政治' }
				{ value: 0, label: '中國語文',disabled:true, },
        { value: 1, label: '英國語文 ',disabled:true, },
        { value: 2, label: '數學',disabled:true, },
        { value: 3, label: '公民與社會發展',disabled:true, },
        { value: 4, label: '科學',disabled:false, },
        { value: 5, label: '物理',disabled:true, },
        { value: 6, label: '化學',disabled:true, },
        { value: 7, label: '生物',disabled:true, },
        { value: 8, label: '中國歷史',disabled:true, },
				
      ],
      // gradeList: [
      //   "一年级",
      //   "二年级",
      //   "三年级",
      //   "四年级",
      //   "五年级",
      //   "六年级",
      //   "七年级",
      //   "八年级",
      //   "九年级"
      // ],
      // subjectList: [
      //   { value: 0, label: "语文" },
      //   { value: 1, label: "数学" },
      //   { value: 2, label: "英语" },
      //   { value: 3, label: "物理" },
      //   { value: 4, label: "化学" },
      //   { value: 5, label: "生物" },
      //   { value: 6, label: "历史" },
      //   { value: 7, label: "地理" },
      //   { value: 8, label: "政治" }
      // ],
      editionList: [
			{ value: 0, label: '牛津大學', disabled: false },
			{ value: 1, label: '聯合培進', disabled: true }
        // { value: 0, label: "人教版" },
        // { value: 1, label: "教科版" },
        // { value: 2, label: "北师大版" },
        // { value: 3, label: "苏教版" },
        // { value: 4, label: "沪教版" },
        // { value: 5, label: "浙教版" },
        // { value: 6, label: "冀教版" },
        // { value: 7, label: "鲁教版" },
        // { value: 8, label: "人教A版" },
        // { value: 9, label: "人教B版" }
      ],
      classList: [
        {
          title: '第一章：科學入門',
          allClass: [
            {
              title: '學習科學',
              type: 0,
              isComplete: false,
              subject: 4,
							disabled:true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741724834676182.png'
            },
            {
              title: '科學的實踐',
              type: 0,
              subject: 4,
              isComplete: false,
							disabled:true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731724834767532.png'
            },
            {
              title: '實驗室安全',
              type: 0,
              subject: 4,
              isComplete: false,
							disabled:true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png'
            },
            {
              title: '實驗室儀器及基本實驗技巧',
              type: 0,
              subject: 4,
              isComplete: false,
							disabled:true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751724834771676.png'
            },
            {
              title: '綜合練習',
              type: 1,
              subject: 4,
              isComplete: false,
							disabled:true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png'
            }
          ]
        },
        {
          title: '第二章：水',
          allClass: [
            {
              title: '水的物熊變化',
              type: 0,
              subject: 4,
              isComplete: false,
							disabled:false,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8761724834777931.png'
            },
            {
              title: '水循環',
              type: 0,
              subject: 4,
              isComplete: false,
							disabled:false,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8771724834845597.png'
            },
            {
              title: '溶解',
              type: 0,
              subject: 4,
              isComplete: false,
							disabled:true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8781724834847977.png'
            },
            {
              title: '水的淨化',
              type: 0,
              subject: 4,
              isComplete: false,
							disabled:true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8791724834873373.png'
            },
            {
              title: '食水的進一步處理',
              type: 0,
              subject: 4,
              isComplete: false,
							disabled:true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8761724834777931.png'
            },
            {
              title: '節約用水和水污染',
              type: 0,
              subject: 4,
              isComplete: false,
							disabled:true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8771724834845597.png'
            },
            {
              title: '綜合練習',
              type: 1,
              subject: 4,
              isComplete: false,
							disabled:true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png'
            },
          ]
        },
        {
          title: '第三章：观察生物',
          allClass: [
            {
              title: '生物',
              type: 0,
              isComplete: false,
              subject: 4,
							disabled:true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741724834676182.png'
            },
            {
              title: '生物的分類',
              type: 0,
              subject: 4,
              isComplete: false,
							disabled:true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731724834767532.png'
            },
            {
              title: '檢索表',
              type: 0,
              subject: 4,
              isComplete: false,
							disabled:true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png'
            },
            {
              title: '生物多樣性',
              type: 0,
              subject: 4,
              isComplete: false,
							disabled:true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751724834771676.png'
            },
            {
              title: '綜合練習',
              type: 1,
              subject: 4,
              isComplete: false,
							disabled:true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png'
            }
          ]
        }
      ]
    }
  },
  methods: {
    changeGrade() {
      this.$refs.settingsDialogRef.open(this.userInfo)
    },
    // changeSubject(newIndex) {
    //   if (this.subject == newIndex) return;
    //   this.subject = newIndex;
    // },
    // changeEdition(newIndex) {
    //   if (this.edition == newIndex) return;
    //   this.edition = newIndex;
    // },
    dialogBtn(type = 0) {
      if (type == 0) {
        this.showDialog = false
      } else if (type == 1) {
        this.$router.push(`/pocClass?type=1`)
        // console.log("开始学习新的内容");
      } else if (type == 2) {
        this.$router.push(`/pocClass?type=2`)
        // console.log("复习上一节课");
      } else if (type == 3) {
        this.$router.push(`/pocAiChat?type=3`)
      }
    },
    reset() {
      this.subject = ''
      this.edition = ''
      this.searchValue = ''
    },
    settings() {
      this.$refs.settingsDialogRef.open(this.userInfo)
    },
    search() {
      console.log('筛选', this.chapter, this.subject, this.edition)
    },
    changeUserInfo(data) {
      this.userInfo.userName = data.userName
      this.userInfo.grade = data.grade
      this.$refs.settingsDialogRef.close()
    },
    changeCharacterInfo(data) {
      this.userInfo.choseCharacter = data.index
      this.$refs.settingsDialogRef.close()
    },
    // 个人信息
    selfMessage() {
      this.$router.push('/pocSelfMessage')
    },
    aiMessage() {
      console.log('渠道学伴设置')
    },
    changeChapter(index) {
			if([0,2].includes(index))return;
      this.chapter = index
      this.showChapter = false
      console.log('切换章节', index)
    },
    changeSubject(item) {
			if(item.disabled)return;
      this.subject = item.label
      this.showSubject = false
      console.log('切换科目', item)
    },
    changeEdition(item) {
			if(item.disabled)return;
      this.edition = item.label
      this.showEdition = false
      console.log('切换版本', item)
    },
		getUserInfoData(){
			let data = window.localStorage.getItem('userInfo');
			if(data){
				data = JSON.parse(data);
				this.userInfo = data;
				this.edition = data.edition;
				this.subject = data.subject;
				this.chapter = data.chapter;
			}else{
				this.$router.push('/pocStartIndex')
			}
		},
		getFirstEnterStatus(){
			let data = window.localStorage.getItem('showDialog');
			if(data){
				data = JSON.parse(data)
				if(data.type==1){
					if((new Date().getTime()-data.time)<=(1000*60)){
						return window.localStorage.removeItem('showDialog')
					};
					this.dialogMessage = `同學仔，歡迎返嚟！請問你想要繼續學習，定係想同我傾吓偈呢？`
					this.showDialog = true;
				}else if(data.type==2){
					if((new Date().getTime()-data.time)<=(1000*60)){
						return window.localStorage.removeItem('showDialog')
					};
					this.dialogMessage = `同學仔，歡迎返嚟！請問你想要繼續學習，定係想同我傾吓偈呢？`
					this.showDialog = true;
					
				}
				
			}else{
				this.showDialog = false;
			}
		},
  },
  mounted() {
		
		this.$nextTick(()=>{
			this.getFirstEnterStatus();
			this.getUserInfoData();
		})
    // window.addEventListener("orientationchange",()=>{alert("切换了方向")})
  }
}
</script>

<style scoped>
.pocAiClass {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  /* background-image: radial-gradient(#bbcdff 0%, #bbcdff 1%, #e6dee9 100%); */
  background-color: #f0f2f5;
  box-sizing: border-box;
  padding-top: 40px;
}

.pac_head {
  width: 100%;
  height: auto;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  margin-top: 50px;
}

.pac_h_left {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pac_h_left > span {
  font-size: 22px;
}

.pac_h_right {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p_h_r_box {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.p_h_r_box > div {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

.p_h_r_box > div > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.p_h_r_box > div > span {
  width: 40px;
  height: 40px;
}

.p_h_r_box > div > span > svg {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.pac_screen {
  width: 100%;
  height: auto;
  margin-top: 00px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.pac_s_item {
  flex: 1;
  height: 40px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
	box-sizing: border-box;
}

.pac_s_i_message{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	margin: 10px 0;
	box-sizing: border-box;
	border-left: 1px solid #E7E7E7;
}

.pac_s_i_message>svg{
	margin-right: 5px;
}

.pac_s_item > span {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.pac_s_i_list {
  width: auto;
  height: auto;
  padding: 10px;
  max-height: 70vh;
	box-sizing: border-box;
  overflow: auto;
}

.pac_s_i_l_item {
  width: auto;
  height: 35px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  font-size: 16px;
  justify-content: center;
  margin: 5px 0;
	padding: 0 5px;
  transition: 0.3s;
}

.pac_s_i_l_itemActive {
  background-color: #3e86fd !important;
  color: #fff !important;
}

.pac_s_i_l_item:active {
  background-color: #e7e7e7;
}

.pac_s_reset {
  padding: 7px 12px;
  background-color: #e2eeff;
  color: #3681fc;
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 10px;
}

.pac_s_select {
  height: 40px;
  margin-bottom: 10px;
}

.pac_s_select >>> .el-input {
  width: 100%;
  height: 100%;
  font-size: 16px;
}

.pac_s_select >>> .el-input > .el-input__inner {
  width: 100%;
  height: 100%;
}

.pac_s_select >>> .el-input__inner {
  font-size: 16px;
}

.pac_box {
  width: 100%;
  height: auto;
  /* margin-top: 20px; */
  overflow: auto;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}

.pac_fd_left {
  width: 200px;
  height: 200px;
}

.pac_fd_l_hello {
  width: 100%;
  height: 100%;
}

.pac_fd_right {
  flex: 1;
  height: 200px;
  display: flex;
  align-items: center;
}

.pac_fd_r_messageArea {
  width: 100%;
  height: 90%;
  background-color: #dae3f5;
  box-sizing: border-box;
  padding: 30px 30px 20px 30px;
  border: solid 3px #fff;
  border-radius: 0 20px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.pac_fd_r_ma_message {
  width: 100%;
  flex: 1;
  font-size: 26px;
}

.pac_fd_r_ma_btnArea {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.pac_fd_r_ma_btnArea > span {
  margin-left: 30px;
  background-color: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  cursor: pointer;
  border: solid 2px #4874cb;
}

.pac_fd_r_ma_btnArea > span:nth-of-type(1) {
  background-color: #4874cb;
  color: #fff;
}

.pac_fd_r_ma_closeIcon {
  font-size: 30px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  color: #fff;
}

.pac_footDialog {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* background-color: red; */
}

.pac_fd_closeArea {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(32, 51, 80, 0) 0%, rgba(73, 116, 182, 0.6) 100%);
}

.pac_fd_bottom {
  width: 100%;
  height: 150px;
  position: absolute;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pac_fd_b_left {
  width: 130px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 100%;
}

.pac_fd_b_left > img {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 300px;
  transform: translate(50px, 80px);
}

.pac_fd_b_right {
  width: 100%;

  height: 100%;
  background: linear-gradient(180deg, #fafcff 0%, #e7eefe 100%);
  /* border-radius: 6px; */
  padding: 32px 24px 24px 24px;
  box-sizing: border-box;
  z-index: 2;
  position: relative;
}

.pac_fd_b_r_characterName {
  padding: 10px 15px;
  background-color: #3681fc;
  border-radius: 6px;
  color: white;
  font-weight: bold;
  font-size: 16px;
  position: absolute;
  left: 0px;
  top: -20px;
}

.pac_fd_b_r_closeIcon {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 10px;
  top: 10px;
}

.pac_fd_b_r_closeIcon > svg {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.pac_fd_b_r_message {
  max-width: 100%;
  font-size: 16px;
  padding: 0px 30px;
}

.pac_fd_b_r_message > span {
  font-weight: bold;
}

.pac_fd_b_r_btnArea {
  position: absolute;
  bottom: 10px;
  right: 30px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.pac_fd_b_r_btnArea > span {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  margin-left: 20px;
  white-space: nowrap;
  cursor: pointer;
  background-color: #fdfeff;
  box-sizing: border-box;
}

.pac_fd_b_r_ba_btn1 {
  color: #00000099;
}

.pac_fd_b_r_ba_btn2 {
  border: 2px solid #3681fc;
  background-color: #ffffffe5 !important;
}

.pac_fd_b_r_ba_btn3 {
  background-color: #3681fc !important;
  color: white;
}

.setting {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  position: absolute;
  top: 100%;
  right: 10px;
  box-sizing: border-box;
  padding: 10px 10px;
  background-color: #fff;
  box-shadow: 0px 8px 10px -5px #00000014;

  box-shadow: 0px 16px 24px 2px #0000000a;

  box-shadow: 0px 6px 30px 5px #0000000d;
  border-radius: 3px;
}
.setting > div {
  width: 100%;
  height: 40px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: 0.3s;
}

.setting > div:active {
  background-color: #f0f2f5;
}

.setting > span {
  width: 100%;
  height: 1px;
  margin: 5px 0;
  background-color: #e7e7e7;
}

.pac_s_i_l_itemDisabled{
	color: gray !important;
}

.disabledShowBox{
	/* width: 250px; */
	width: 80vw;
	height: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dsb_top{
	flex: 1;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.dsb_top_title{
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
}

.dsb_top_content{
	font-size: 16px;
	max-width: 80%;
	display: flex;
	align-items: center;
	color: #666666;
}

.dsb_bottom{
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 10px 20px;
}

.dsb_bottom>span{
	flex: 1;
	height: 90%;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	font-weight: bold;
	background-color: #F0F2F5;
	color: #3681FC;
}

.dsb_bottom>span:nth-of-type(2){
	margin-left: 20px;
	background-color: #3681FC;
	color: #fff !important;
}
</style>
