<template>
  <div :class="isShow == false ? 'notEvaBox' : 'tEvaBox'">
    <div class="top">
      <div @click="isShow = !isShow">
        <img src="../../../assets/icon/englishVoice/all.png" alt="" />
      </div>
      <div>教师评价</div>
    </div>
    <div class="scoreShow">
      <div v-if="scoreType == 0">
        <el-input v-model="score" placeholder="评分"></el-input>
      </div>
      <div v-if="scoreType == 1"><el-rate v-model="score1"></el-rate></div>
    </div>
    <div class="sContent">
      <el-input
        type="textarea"
        placeholder="您可在此输入评语"
        v-model="text"
        resize="none"
        :rows="3"
      >
      </el-input>
    </div>
    <div class="evaButton" @click="sucNotice">
      <div><img src="../../../assets/icon/englishVoice/beauty.png" alt="" /></div>
      <div>智能评价</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: "",
      score1: "",
      scoreType: 0, //根据教师端选择评分制度显示，目前没有传值，我就先用一个type显示，后面直接获取数据中的type就行，这个删掉
      text: "",
      isShow: true,
    };
  },
  methods: {
    sucNotice() {
      this.$emit("setNotice", true);
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped>
.tEvaBox,
.notEvaBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: 100%;
  height: 210px;
}

.notEvaBox {
  height: 25px;
  overflow: hidden;
}
.tEvaBox > div,
.notEvaBox > div {
  margin: 0 0 10px 0;
}
.tEvaBox > .top,
.notEvaBox > .top {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.top > div:first-child,
.evaButton > div:first-child {
  width: 15px;
  height: 15px;
  margin-right: 10px;
  cursor: pointer;
}

.top > div:first-child > img,
.evaButton > div:first-child > img {
  width: 100%;
  height: 100%;
}

.scoreShow {
  width: 50%;
}

.sContent {
  width: 90%;
}

.evaButton {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  background: #3681fc;
  color: #fff;
  width: 110px;
  height: 30px;
  justify-content: center;
  border-radius: 5px;
  cursor: pointer;
}
</style>