<template>
  <div class="wrap">
    <div class="m-containers" v-if="subjectJson">
      <img :src="imgList.topBanner" width="100%" class="topBanner" alt />
      <div class="paddingWrap">
        <div class="topCard">
          <img :src="imgList.note1" class="topNote" width="100%" alt />
          <p class="title">
            <img :src="imgList.squrt" class="squrts" alt />
            授课内容
          </p>
          <div class="chioseList">
            <div class="theoryCell">
              <div class="left">
                <img :src="imgList.theoryIcon" class="theoryIcon" alt />
                乐理
              </div>
              <div class="right">
                <div
                  class="theoryItem"
                  v-for="(item, index) in hasTheory"
                  :key="index"
                >
                  <van-field
                    readonly
                    clickable
                    :label="subjectName"
                    placeholder="请选择乐理"
                    :value="item.str"
                    @click="item.show = true"
                  />
                  <van-popup
                    v-model="item.show"
                    position="bottom"
                    :overlay="true"
                    get-container="#app"
                  >
                    <van-picker
                      show-toolbar
                      :columns="theoryList"
                      @cancel="item.show = false"
                      @confirm="
                        (val) => {
                          onConfirm(val, item);
                        }
                      "
                    />
                  </van-popup>
                  <div
                    class="iconWrap"
                    v-if="index == 0"
                    @click="addTheory(hasTheory)"
                  >
                    <img :src="imgList.addIcon" class="smallIcon" alt />
                  </div>
                  <div class="iconWrap" v-else>
                    <img
                      :src="imgList.deteleIcon"
                      class="smallIcon"
                      alt
                      @click="removeTheory(hasTheory, index)"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="musicCell">
              <div class="left">
                <img :src="imgList.muiscIcon" class="muiscIcon" alt />
                曲子
              </div>
              <div class="right">
                <van-field
                  v-model="testMusic"
                  rows="1"
                  autosize
                  type="textarea"
                  placeholder="请输入曲子"
                />
              </div>
            </div>
            <div class="theoryCell teachingCell">
              <div class="left">
                <img :src="imgList.bookIcon" class="bookIcon" alt />
                教材
              </div>
              <div class="right">
                <div
                  class="theoryItem"
                  v-for="(item, index) in teaching"
                  :key="index"
                >
                  <van-field
                    readonly
                    clickable
                    :label="subjectName"
                    placeholder="请选择教材"
                    :value="item.str"
                    @click="item.show = true"
                  />
                  <van-popup
                    v-model="item.show"
                    position="bottom"
                    get-container="#app"
                  >
                    <van-picker
                      show-toolbar
                      :columns="teachingList"
                      @cancel="item.show = false"
                      @confirm="
                        (val) => {
                          onTeacherConfirm(val, item);
                        }
                      "
                    />
                  </van-popup>
                  <div
                    class="iconWrap"
                    v-if="index == 0"
                    @click="addTheory(teaching)"
                  >
                    <img :src="imgList.addIcon" class="smallIcon" alt />
                  </div>
                  <div class="iconWrap" v-else>
                    <img
                      :src="imgList.deteleIcon"
                      class="smallIcon"
                      alt
                      @click="removeTheory(teaching, index)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="nextCard">
          <img :src="imgList.note2" class="topNote" width="100%" alt />
          <p class="title">
            <img :src="imgList.squrt" class="squrts" alt />
            必选项
          </p>
          <div class="chioseList">
            <p class="subTitle">1.{{ subjectJson[1].title }}</p>
            <div
              class="cell"
              :class="one == 1 ? 'activce' : ''"
              @click="one = 1"
            >
              <img :src="imgList.excellent" class="icons" alt />
              <p>{{ subjectJson[1][1] }}</p>
            </div>
            <div
              class="cell"
              :class="one == 2 ? 'activce' : ''"
              @click="one = 2"
            >
              <img :src="imgList.good" class="icons" alt />
              <p>{{ subjectJson[1][2] }}</p>
            </div>
            <div
              class="cell"
              :class="one == 3 ? 'activce' : ''"
              @click="one = 3"
            >
              <img :src="imgList.normal" class="icons" alt />
              <p>{{ subjectJson[1][3] }}</p>
            </div>
          </div>
          <img :src="imgList.line" alt width="100%" />
          <div class="chioseList">
            <p class="subTitles">2.{{ subjectJson[2].title }}</p>
            <div
              class="cell"
              :class="two == 1 ? 'activce' : ''"
              @click="two = 1"
            >
              <img :src="imgList.excellent" class="icons" alt />
              <p>{{ subjectJson[2][1] }}</p>
            </div>
            <div
              class="cell"
              :class="two == 2 ? 'activce' : ''"
              @click="two = 2"
            >
              <img :src="imgList.good" class="icons" alt />
              <p>{{ subjectJson[2][2] }}</p>
            </div>
            <div
              class="cell"
              :class="two == 3 ? 'activce' : ''"
              @click="two = 3"
            >
              <img :src="imgList.normal" class="icons" alt />
              <p>{{ subjectJson[2][3] }}</p>
            </div>
          </div>
          <img :src="imgList.line" alt width="100%" />
          <div class="chioseList">
            <p class="subTitles">3.{{ subjectJson[3].title }}</p>
            <div
              class="cell"
              :class="three == 1 ? 'activce' : ''"
              @click="three = 1"
            >
              <img :src="imgList.excellent" class="icons" alt />
              <p>{{ subjectJson[3][1] }}</p>
            </div>
            <div
              class="cell"
              :class="three == 2 ? 'activce' : ''"
              @click="three = 2"
            >
              <img :src="imgList.good" class="icons" alt />
              <p>{{ subjectJson[3][2] }}</p>
            </div>
            <div
              class="cell"
              :class="three == 3 ? 'activce' : ''"
              @click="three = 3"
            >
              <img :src="imgList.normal" class="icons" alt />
              <p>{{ subjectJson[3][3] }}</p>
            </div>
          </div>
          <img :src="imgList.line" alt width="100%" />
          <div class="chioseList">
            <p class="subTitles">4.{{ subjectJson[4].title }}</p>
            <div
              class="cell"
              :class="four == 1 ? 'activce' : ''"
              @click="four = 1"
            >
              <img :src="imgList.excellent" class="icons" alt />
              <p>{{ subjectJson[4][1] }}</p>
            </div>
            <div
              class="cell"
              :class="four == 2 ? 'activce' : ''"
              @click="four = 2"
            >
              <img :src="imgList.good" class="icons" alt />
              <p>{{ subjectJson[4][2] }}</p>
            </div>
            <div
              class="cell"
              :class="four == 3 ? 'activce' : ''"
              @click="four = 3"
              v-if="subjectJson[4][3]"
            >
              <img :src="imgList.normal" class="icons" alt />
              <p>{{ subjectJson[4][3] }}</p>
            </div>
          </div>
          <img :src="imgList.line" alt width="100%" />
          <div class="chioseList" v-if="subjectJson[5]">
            <p class="subTitles">5.{{ subjectJson[5].title }}</p>
            <div
              class="cell"
              :class="five == 1 ? 'activce' : ''"
              @click="five = 1"
            >
              <img :src="imgList.excellent" class="icons" alt />
              <p>{{ subjectJson[5][1] }}</p>
            </div>
            <div
              class="cell"
              :class="five == 2 ? 'activce' : ''"
              @click="five = 2"
            >
              <img :src="imgList.normal" class="icons" alt />
              <p>{{ subjectJson[5][2] }}</p>
            </div>
          </div>
        </div>
        <div class="nextCard">
          <img :src="imgList.note2" class="topNote" width="100%" alt />
          <p class="title">
            <img :src="imgList.squrt" class="squrts" alt />
            可选项
          </p>
          <div class="chioseList">
            <p class="subTitle">1.{{ subjectJson[6].title }}</p>
            <div
              class="cell"
              :class="six == 1 ? 'activce' : ''"
              @click="six = 1"
            >
              <img :src="imgList.excellent" class="icons" alt />
              <p>{{ subjectJson[6][1] }}</p>
            </div>
            <div
              class="cell"
              :class="six == 2 ? 'activce' : ''"
              @click="six = 2"
            >
              <img :src="imgList.normal" class="icons" alt />
              <p>{{ subjectJson[6][2] }}</p>
            </div>
          </div>
          <img :src="imgList.line" alt width="100%" />
          <div class="chioseList">
            <p class="subTitles">2.{{ subjectJson[7].title }}</p>
            <div
              class="cell"
              :class="seven == 1 ? 'activce' : ''"
              @click="seven = 1"
            >
              <img :src="imgList.excellent" class="icons" alt />
              <p>{{ subjectJson[7][1] }}</p>
            </div>
            <div
              class="cell"
              :class="seven == 2 ? 'activce' : ''"
              @click="seven = 2"
            >
              <img :src="imgList.normal" class="icons" alt />
              <p>{{ subjectJson[7][2] }}</p>
            </div>
          </div>

          <img :src="imgList.line" alt width="100%" />
          <div class="chioseList">
            <p class="subTitles">3.{{ subjectJson[8].title }}</p>
            <div
              class="cell"
              :class="eight == 1 ? 'activce' : ''"
              @click="eight = 1"
            >
              <img :src="imgList.excellent" class="icons" alt />
              <p>{{ subjectJson[8][1] }}</p>
            </div>
            <div
              class="cell"
              :class="eight == 2 ? 'activce' : ''"
              @click="eight = 2"
            >
              <img :src="imgList.good" class="icons" alt />
              <p>{{ subjectJson[8][2] }}</p>
            </div>
            <div
              class="cell"
              :class="eight == 3 ? 'activce' : ''"
              @click="eight = 3"
              v-if="subjectJson[8][3]"
            >
              <img :src="imgList.normal" class="icons" alt />
              <p>{{ subjectJson[8][3] }}</p>
            </div>
          </div>
        </div>
        <div class="nextCard">
          <p class="title commitTitle">
            <img :src="imgList.squrt" class="squrts" alt />
            老师评语
          </p>
          <div class="commitWrap">
            <van-field
              v-model="comment"
              rows="3"
              autosize
              type="textarea"
              placeholder="学员表现的怎么样？填写评语能让学员更清楚自己的优点和美中不足的地方哦～"
            />
          </div>
        </div>
      </div>
      <div class="submit" @click="submietInfo">
        <img :src="imgList.btn" width="100%" alt />
      </div>
      <div class="bottomBox"></div>
    </div>
    <MEmpty v-else :full="true" msg="暂无报告模板" />
  </div>
</template>
<script>
/* eslint-disable */
import { subjectJson } from "@/utils/questionJson";
import MEmpty from "@/components/MEmpty";
import { browser } from "@/common/common";
import { findTeacherClassGroupInfo, addStudyReport1 } from "@/api/teacher";
export default {
  components: { MEmpty },
  data() {
    return {
      imgList: {
        topBanner: require("@/assets/images/start/topBanner.png"),
        note1: require("@/assets/images/start/note1.png"),
        note2: require("@/assets/images/start/note2.png"),
        squrt: require("@/assets/images/start/squrt.png"),
        theoryIcon: require("@/assets/images/start/theory-icon.png"),
        muiscIcon: require("@/assets/images/start/muisc-icon.png"),
        bookIcon: require("@/assets/images/start/book-icon.png"),
        addIcon: require("@/assets/images/start/add-icon.png"),
        deteleIcon: require("@/assets/images/start/detele-icon.png"),
        excellent: require("@/assets/images/start/excellent.png"),
        good: require("@/assets/images/start/good.png"),
        normal: require("@/assets/images/start/normal.png"),
        line: require("@/assets/images/start/line.png"),
        btn: require("@/assets/images/start/button.png"),
      },
      theoryList: ["一级", "二级", "三级", "四级"],
      teachingList: [
        {
          values: ["一级", "二级", "三级", "四级"],
          defaultIndex: 2,
        },
        {
          values: [],
          defaultIndex: 1,
        },
      ],
      hasTheory: [{ str: "", show: false }],
      teaching: [{ str: "", show: false }],
      testMusic: "",
      showPicker: false,
      lessArr: [],
      subjectJson: null,
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
      eight: "",
      subjectName: null,
      id: "",
      comment: "",
    };
  },
  created() {
    for (let i = 0; i < 17; i++) {
      this.teachingList[1].values.push(` lesson${i + 1} `);
    }
    this.classGroupId = this.$route.query.classGroupId;
    this.id = this.$route.query.id;
    this.token = localStorage.getItem("Authorization");
    // if (!this.token || !this.classGroupId) {
    //   this.onAppBack();
    //   return;
    // }
    findTeacherClassGroupInfo({ classGroupId: this.classGroupId }).then(
      (res) => {
        if (res.data.code == 200) {
          this.subjectName = res.data.data.subjectNames;
          this.subjectJson = subjectJson[this.subjectName];
          //  this.subjectJson = subjectJson['打击乐'];
          // console.log(subjectJson,this.subjectName)
        }
      }
    );
  },
  methods: {
    onConfirm(val, item) {
      item.str = val;
      item.show = false;
    },
    onTeacherConfirm(val, item) {
      item.str = val[0] + val[1];
      item.show = false;
    },
    addTheory(arr) {
      arr.push({ str: "", show: false });
    },
    removeTheory(arr, index) {
      arr.splice(index, 1);
    },
    submietInfo() {
      // console.log(this.one)
      // console.log(this.json.one[this.one])
      if (this.subjectName == "打击乐") {
        if (!this.one || !this.two || !this.three || !this.four) {
          this.$toast("请认真选择必选项");
          return;
        }
      } else {
        if (!this.one || !this.two || !this.three || !this.four || !this.five) {
          this.$toast("请认真选择必选项");
          return;
        }
      }

      if (!this.hasTheory[0].str || !this.teaching[0].str) {
        this.$toast("必须选择乐理和教材");
        return;
      }
      if (!this.testMusic) {
        this.$toast("请输入练习曲目");
        return;
      }
      this.item = {
        one: this.one,
        two: this.two,
        three: this.three,
        four: this.four,
        five: this.five,
        six: this.six,
        seven: this.seven,
        eight: this.eight,
      };
      let id = this.id || null;
      let comment = this.comment || null;
      addStudyReport1({
        classGroupId: this.classGroupId,
        item: this.item,
        song: this.testMusic,
        musicTheory: this.hasTheory,
        teachingMaterial: this.teaching,
        version: 2,
        comment: this.comment,
        id,
      }).then((res) => {
        if (res.data.code == 200) {
          this.$toast("提交成功");
          setTimeout(() => {
            this.onAppBack();
          }, 2000);
        } else {
          this.$toast(res.data.msg);
          // setTimeout(() => {
          //   // this.$router.push({
          //   //   path: "/studyReport",
          //   //   query: { classGroupId: this.classGroupId }
          //   // });
          // }, 2000);
        }
      });
    },
    onAppBack() {
      if (browser().android) {
        DAYA.postMessage(JSON.stringify({ api: "back" }));
      } else if (browser().iPhone) {
        window.webkit.messageHandlers.DAYA.postMessage(
          JSON.stringify({ api: "back" })
        );
      }
    },
  },
};
</script>
<style lang="less" scoped>
.wrap {
  background-color: #fff;
}
div {
  box-sizing: border-box;
}
.m-containers {
  background: url("../../assets/images/start/bg.png") no-repeat;
  //   background-size: 100% 100%;
  position: relative;
  width: 100%;
  min-height: 16.97rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #5ed5d4;
  padding-bottom: 0.2rem;
  z-index: 0;
  .topBanner {
    z-index: 10;
  }
  .paddingWrap {
    position: relative;
    z-index: 2;
    padding: 0 0.2rem 0.26rem;
    .topCard,
    .nextCard {
      position: relative;
      border-radius: 15px;
      top: -0.08rem;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-bottom: 0.24rem;
      .commitTitle {
        position: relative !important;
        margin-bottom: 0.17rem !important;
      }
      .commitWrap {
        padding: 0.1rem;
      }
      .topNote {
        z-index: 1;
      }
      .title {
        z-index: 5;
        position: absolute;
        top: 0.21rem;
        left: 0.15rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        font-size: 0.18rem;
        height: 0.22rem;
        line-height: 0.22rem;
        margin-bottom: 0.365rem;
        color: #808080;
        font-weight: bold;
        .squrts {
          width: 0.05rem;
          height: 0.22rem;
          margin-right: 0.1rem;
          position: relative;
          z-index: 5;
        }
      }
      .chioseList {
        position: relative;
        top: -0.1rem;
        z-index: 3;
        padding: 0 0.17rem;
        .theoryCell,
        .musicCell {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
          border-radius: 10px;
          min-height: 0.44rem;
          padding: 0 0.07rem;
          .left {
            color: #666;
            font-size: 0.15rem;
            line-height: 0.44rem;
            margin-right: 6px;
            .theoryIcon {
              width: 0.17rem;
              height: 0.17rem;
              position: relative;
              top: 0.04rem;
              margin-right: 0.02rem;
            }
            .muiscIcon {
              width: 0.17rem;
              height: 0.19rem;
              position: relative;
              top: 0.04rem;
              margin-right: 0.02rem;
            }
            .bookIcon {
              width: 0.16rem;
              height: 0.19rem;
              position: relative;
              top: 0.04rem;
              margin-right: 0.02rem;
            }
          }
          .right {
            .van-cell {
              font-size: 0.14rem;
              line-height: 0.24rem;
              padding: 0.1rem 0.16rem;
            }
            .theoryItem {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              width: 2.28rem;
              /deep/.van-field__label {
                width: 0.8rem;
              }
              .iconWrap {
                position: absolute;
                right: 0.2rem;
                width: 0.42rem;
                height: 0.42rem;

                display: flex;
                flex-direction: column;
                align-items: center;
                .smallIcon {
                  margin-top: 0.15rem;
                  width: 0.15rem;
                  height: 0.15rem;
                }
              }
            }
          }
        }
        .musicCell,
        .teachingCell {
          margin-top: 0.25rem;
        }
        .subTitle,
        .subTitles {
          position: relative;
          top: -0.2rem;
          font-size: 0.18rem;
          color: #00696a;
          font-weight: bold;
        }
        .subTitles {
          top: 0 !important;
          padding: 0.27rem 0 0.24rem;
          font-weight: bold;
        }
      }
    }
    .nextCard {
      margin-top: 0.23rem;
    }
  }
  .cell.activce {
    border: 1px solid #28babd;
    color: #28babd;
  }
  .cell {
    width: 3.05rem;
    padding: 0.1rem 0.15rem 0.1rem 0;
    line-height: 0.2rem;
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
    background-color: #fff;
    font-size: 0.14rem;
    margin-bottom: 0.245rem;
    border: 1px solid transparent;
    p {
      width: 2.41rem;
    }
    .icons {
      width: 0.26rem;
      height: 0.26rem;
      margin: 0 0.105rem;
      display: block;
    }
  }
  .submit {
    width: 3.2rem;
    position: relative;
    z-index: 2;
  }
  .bottomBox {
    background: url("../../assets/images/start/bottom.png") no-repeat;
    //   background-size: 100% 100%;
    position: absolute;
    width: 100%;
    height: 3.45rem;
    left: 0;
    bottom: 0;
    z-index: 1;
  }
}
.van-overflow-hidden {
  z-index: 0;
  position: relative;
}
.van-field__control::-webkit-input-placeholder {
  /* WebKit browsers */
  font-size: 0.14rem;
  line-height: 0.2rem !important;
  color: #999;
}

.van-field__control::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-size: 0.14rem;
  line-height: 0.2rem !important;
  color: #999;
}

.van-field__control::-ms-input-placeholder {
  /* Internet Explorer 10+ */
  font-size: 0.14rem;
  line-height: 0.2rem !important;
  color: #999;
}
</style>