<template>
  <el-dialog
    :title="lang.ssView"
    :visible.sync="dialogVisibleENScore"
    :append-to-body="true"
    width="800px"
    :before-close="handleClose"
    class="dialog_diy"
  >
    <div>
      <div class="studentDetail">
        <div class="tx"><img src="../../assets/avatar.png" alt="" /></div>
        <div class="nameAndTime">
          <div style="margin-bottom: 5px">{{ commentDetail.sName }}</div>
          <div>{{ commentDetail.time }}</div>
        </div>
        <div class="btn_box">
          <el-button type="primary" size="small" @click="opanData">
            {{ lang.ssStudentReport }}
          </el-button>
        </div>
      </div>
      <div class="en_box">
        <div class="ev_box_left">
          <left
            :title="title"
            :detail="detail"
            :checkJson="checkJson"
            :checkType="checkType"
            @setType="setType"
          >
          </left>
        </div>
        <div class="ev_box_right">
          <right
            :checkJson="checkJson"
            :checkType="checkType"
            @setType="setType"
            :work="work"
            @setWork="setWork"
          >
          </right>
        </div>
      </div>
      <div class="scoreBox">
        <span class="t">{{ lang.ssEnterScore }}</span>
        <el-input-number
          :disabled="courseDetail.userid != userid"
          v-model="wScore2"
          :controls="false"
          :min="0"
          :max="100"
        ></el-input-number>
      </div>
      <div class="scoreDetailBox">
        <span class="t">{{ lang.ssScoringComment }}</span>
        <el-input
          type="textarea"
          :rows="5"
          :disabled="courseDetail.userid != userid"
          resize="none"
          v-model="scoreDetail2"
          :placeholder="lang.ssEnterStudentEvaluation"
        >
        </el-input>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">{{ lang.ssCancelBtn }}</el-button>
      <el-button
        type="primary"
        v-if="courseDetail.userid == userid"
        @click="scoreWork(commentDetail.wid)"
        >{{ lang.ssConfirmBtn }}
      </el-button>
    </span>
    <dataBoard :dataDialog.sync="dataDialog" :mark="{wScore2:wScore2,scoreDetail2:scoreDetail2}" :englishVoiceJson="englishVoiceJson" :commentDetail="commentDetail"></dataBoard>
  </el-dialog>
</template>

<script>
import right from "./component/right.vue";
import left from "./component/left.vue";
import dataBoard from "./data/index.vue";
import { myMixin } from "@/mixins/mixin.js"

export default {
  mixins: [myMixin],
  components: {
    right,
    left,
    dataBoard
  },
  props: {
    dialogVisibleENScore: {
      type: Boolean,
      default: false
    },
    englishVoiceJson: {
      type: Object
    },
    userid: {
      type: String
    },
    commentDetail: {
      type: [Object,Array]
    },
    courseDetail: {
      type: Object
    },
    wScore: {
      type: Number
    },
    scoreDetail: {
      type: String
    }
  },
  data() {
    return {
      checkJson: [],
      checkJson2: {},
      title: "",
      detail: "",
      checkType: 0,
      work: [],
      wScore2: 0,
      scoreDetail2: "",
      dataDialog: false 
    };
  },
  methods: {
    handleClose(done) {
      this.close();
      done();
    },
    close() {
      this.$emit("update:dialogVisibleENScore", false);
    },
    close2() {
      this.$emit("update:dialogVisibleENScore", false);
    },
    confirm() {
      this.close2();
    },
    setJson(val) {
      this.checkJson = val;
      this.$forceUpdate();
    },
    setVoiceJson(val) {
      let a = JSON.parse(JSON.stringify(val));
      this.checkJson2 = JSON.parse(JSON.stringify(a));
      this.title = a.title;
      this.detail = a.detail;
      this.checkJson = a.array;
      this.checkType = 0;
      this.work.length = (a.array && a.array.length) ? a.array.length : 0;
      this.wScore2 = JSON.parse(JSON.stringify(this.wScore));
      this.scoreDetail2 = JSON.parse(JSON.stringify(this.scoreDetail));
      let works = JSON.parse(
        JSON.parse(JSON.stringify(this.commentDetail.works))
      );
      for (var i = 0; i < this.work.length; i++) {
        if(i > (works.length - 1)){
            break
        }
        this.work[i] = works[i];
      }
    },
    setType(index) {
      this.checkType = index;
    },
    setWork(url, index) {
      this.work[index] = url;
    },
    scoreWork(wid) {
      if (this.wScore2 == 0) {
        this.$message.error(this.lang.ssPleaseRate);
        return;
      }
      let params = [
        {
          wid: wid,
          score: JSON.stringify({
            wScore: this.wScore2,
            detail: this.scoreDetail2
          })
        }
      ];
      this.ajax
        .post(this.$store.state.api + "scoreWork", params)
        .then(res => {
          this.$message({
            message: this.lang.ssRatingSuccess,
            type: "success"
          });
          this.wScore2 = 0;
          this.scoreDetail2 = "";
          this.$emit("selectSWorks");
          this.$emit("selectStudent");
          this.close2();
        })
        .catch(err => {
          this.$message.error(this.lang.ssRatingFailed);
          console.error(err);
        });
    },
    opanData(){
      this.dataDialog = true
    }
  },
  watch: {
    dialogVisibleENScore: {
      handler: function(newVal, oldVal) {
        if (newVal) {
          this.setVoiceJson(this.englishVoiceJson);
        }
      },
      deep: true
    }
  },
  mounted() {
    this.setVoiceJson(this.englishVoiceJson);
  }
};
</script>

<style scoped>

.dialog_diy >>> .el-dialog__header {
  background: #454545 !important;
  padding: 15px 20px;
}

.dialog_diy >>> .el-dialog__body {
  /* height: calc(100% - 54px); */
  box-sizing: border-box;
  /* padding: 0px; */
}

.dialog_diy >>> .el-dialog__title {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  /* background: #e8ebf1; */
  overflow: hidden;
}

.studentDetail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* align-items: center; */
  align-items: flex-start;
}

.tx {
  width: 50px;
}

.tx > img {
  width: 100%;
  height: 100%;
}

.nameAndTime {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-left: 10px;
}

.scoreBox,
.scoreDetailBox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 20px;
  font-size: 18px;
  width: 100%;
}

.scoreBox .t,
.scoreDetailBox .t {
  margin-right: 10px;
  width: 100px;
  text-align: right;
}

.scoreDetailBox {
  align-items: flex-start;
}

.scoreDetailBox >>> .el-textarea {
  width: calc(100% - 200px);
}

.scoreBox >>> .el-input {
  width: 130px;
  font-size: 38px;
}

.scoreBox >>> .el-input__inner {
  height: 60px;
}

.en_box {
  width: 100%;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #cccccc;
  height: 500px;
  display: flex;
  box-sizing: border-box;
  margin: 20px 0px 0 0;
}

.ev_box_left {
  width: 200px;
  border-right: 1px solid #cccccc;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
}
.ev_box_right {
  width: calc(100% - 200px);
  border-right: 1px solid #cccccc;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
}

.btn_box{
  display: flex;
  align-items: center;
  height: 50px;
  margin-left: auto;
}
</style>
