<template>
	<div class="scoreItem">
		<div class="si-title"  @click="openDialog">
			<div class="si-t-avatar">{{ lang.ssEvaluation }}</div>
			<span>{{ this.data.title }}</span>
		</div>
		<div class="si-content"  @click="openDialog">

		</div>
		<div class="si-footer"  @click="openDialog">
			<div class="si-f-time">{{isScoreList.length>0?isScoreList[0]['update_at']:''}}</div>
			<div class="si-f-status">{{ isScoreList.length>0?lang.ssSubmitted:lang.ssNotSubmitted }}</div>
		</div>
		<div v-if="showDialog == true" class="addDialogCss" v-el-drag-dialog>
      <div class="pzTop">
        <div class="teacherPz">
          <div class="teacherPzImg">
            <img src="../../assets/icon/teacherPz.png" alt="" />
          </div>
          <div style="margin-left: 10px; height: 25px">{{ lang.ssTeacherScoring }}</div>
        </div>
        <div @click="close">
          <img src="../../assets/close1.png" class="pzClose" alt="" />
        </div>
      </div>
      <div class="addPzBox">
				<div class="scoreTop">{{ this.data.title }}</div>
       	<div class="scoreMain">
					<div class="step_box">
          	<div class="edit_top">
          	  <div class="op_btn">
          	    <el-button type="primary" size="small" @click="reset">{{ lang.ssReset }}</el-button>
          	    <el-button type="primary" size="small" @click="publish">{{ lang.ssSubmit }}</el-button>
          	  </div>
          	</div>
          <topicVue :cJson.sync="cJson" :title="this.data.title" :brief="brief" ref="topicVue" v-if="!loading" @publish2="publish2" :tid="tid" :gcourseid="data.groupid"></topicVue>
        </div>
					<!-- <topicVue :cJson.sync="cJson" :title="data.title" :brief="data.brief" ref="topicVue" v-if="!loading"
            @getTestWorkByCid="getTestWorkByCid" @publish2="publish2" :tid="data.typeid" :gcourseid="data.groupid"></topicVue> -->
			 	</div>
        <div class="addTextCss" @click="submit">
          {{ lang.ssConfirm }}
        </div>
      </div>
    </div>
	</div>
</template>

<script>
import topicVue from "./commpont/topic.vue";
import { myMixin } from "@/mixins/mixin.js"

export default {
  mixins: [myMixin],
	components:{
		topicVue
	},
	emits:["refresh"],
	props:{
		data:{
			type:Object,
			default:()=>{}
		},
		isScore:{
			type:Array,
			default:()=>[]
		}
	},
	data(){
		return {
			showDialog:false,
			loading:false,
			cJson:[],
			cJson2:[],
			tid:"",
			gcourseid:"",
			brief:"",
			isScoreList:[],
			isReset:false,
			userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      role: this.$route.query.role,
      cid: "",
      type: this.$route.query.type,
		}
	},
	watch:{
		isScore(value){
			this.isScoreList = [];
			if(value.length){
				this.isScoreList = value;
			}
		}
	},
	methods:{
		openDialog(){
			if(this.isScoreList.length){
				this.cJson = this.isScoreList[0].courseJson?JSON.parse(this.isScoreList[0].courseJson):[];
				this.tid = this.isScoreList[0].id;
			}else{
				this.cJson = this.data.chapters?JSON.parse(this.data.chapters):[];
				this.tid = "";
			}
			this.showDialog = true;
			// 
			// this.getData();
			
		},
		submit(){
			this.close()
		},
		close(){
			this.showDialog = false;
		},
		publish2() {
      this.loading = true
      let cjson = this.$refs['topicVue'].checkArray
      let _cjson = this.JSONSetting(JSON.parse(JSON.stringify(cjson)));
      let pan = this.panJSON(_cjson)
      if(!pan){
        setTimeout(() => {
            this.loading = false
          }, 500);
        return
      }
      console.log(cjson);
      let params = [
        {
          uid: this.data.userid,
          cid: this.data.courseId,
          cjson: JSON.stringify(cjson),
          type: '2',
        },
      ];
      this.ajax
        .post(this.$store.state.api + ((this.tid) ? "addTestWorks2" : "addTestWorks"), params)
        .then((res) => {
          this.$message.success(this.lang.ssSaveSuccess)
          setTimeout(() => {
            this.loading = false
          }, 500);
        })
        .catch((err) => {
          this.$message.error(this.lang.ssNetworkPoor);
          this.loading = false
          console.error(err);
        });
    },
		reset(){
			this
        .$confirm(this.lang.ssConfirmResetContent, this.lang.ssPrompt, {
          confirmButtonText: this.lang.ssConfirm,
          cancelButtonText: this.lang.ssCancel,
          type: "warning",
        })
        .then(() => {
          if(this.tid){
            this.deleteTest(this.tid)
          }else{
            // if(this.courseid){
            //   this.cJson = this.setCourseid(JSON.parse(JSON.stringify(this.cJson2)));
            // }else{
            //   this.cJson = JSON.parse(JSON.stringify(this.cJson2));
            // }
						this.cJson = this.data.chapters?JSON.parse(this.data.chapters):[];
						this.$message.success(this.lang.ssResetCompleted)
            this.loading = true
            this.isReset = false
            setTimeout(() => {
              this.loading = false
            }, 0);
            this.$forceUpdate()
          }
        })
        .catch(() => {

        });
		},
		deleteTest(tid) {
      let _this = this;
      let params = [
        {
          tid: tid
        }
      ];
      _this.ajax
        .post(_this.$store.state.api + "deleteTestCourseWorks", params)
        .then(res => {
          _this.cJson = _this.data.chapters?JSON.parse(_this.data.chapters):[];
					_this.isScoreList = [];
					_this.tid = "";
					this.$emit("refresh")
        })
        .catch(err => {
          console.error(err);
        });
    },
		save() {
      let cjson = this.$refs['topicVue'].checkArray
      let params = [
        {
          uid: this.data.userid,
          cid: this.data.courseId,
          cjson: JSON.stringify(cjson),
          type: '1',
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addTestWorks", params)
        .then((res) => {
          this.$message.success(this.lang.ssSaveSuccess)
					this.showDialog = false;
					this.$emit("refresh")
        })
        .catch((err) => {
          this.$message.error(this.lang.ssNetworkPoor);
          console.error(err);
        });
    },
		publish() {
      let cjson = this.$refs['topicVue'].checkArray
      let params = [
        {
          uid: this.tid ? this.tid : this.data.userid,
          cid: this.data.courseId,
          cjson: JSON.stringify(cjson),
          type:'2',
        },
      ];
      this.ajax
        .post(this.$store.state.api + ((this.tid) ? "addTestWorks2" : "addTestWorks"), params)
        .then((res) => {
          this.$message.success(this.lang.ssSubmitSuccess)
          this.showDialog = false;
					this.$emit("refresh")
        })
        .catch((err) => {
          this.$message.error(this.lang.ssNetworkPoor);
          console.error(err);
        });
    },
		// getData() {
    //   this.loading = true
    //   let params = {
    //     cid: this.data.courseId,
    //   };
    //   this.ajax
    //     .get(this.$store.state.api + "getTestCourseDetail", params)
    //     .then((res) => {
    //       this.cJson = JSON.parse(res.data[0][0].chapters);
    //       this.cJson2 = JSON.parse(res.data[0][0].chapters);
    //       this.title = res.data[0][0].title;
    //       this.brief = res.data[0][0].brief;
    //       if (this.type == 3) {
    //         this.getTestWorks2()
    //       } else {
		// 				console.log("👇")
    //         this.getTestWorks()
    //       }
    //       this.$forceUpdate();
    //     })
    //     .catch((err) => {
    //       this.loading = false
    //       console.error(err);
    //     });
    // },
		// getTestWorks() {
    //   let params = {
    //     cid: this.data.courseId,
    //     uid: this.userid,
    //   };
    //   this.ajax
    //     .get(this.$store.state.api + "getTestWorks", params)
    //     .then((res) => {
    //       // this.cJson = JSON.parse(res.data[0][0].chapters);
    //       if (res.data[2].length) {
    //         this.cJson = JSON.parse(res.data[2][0].courseJson)

    //         let cJson = this.setJSON(JSON.parse(JSON.stringify(this.cJson)))
    //         let cJson2 = this.setJSON(this.setJson2(JSON.parse(JSON.stringify(this.cJson2))))

    //         if (JSON.stringify(cJson) != JSON.stringify(cJson2)) {
    //           this.isReset = true
    //         }
    //       }

    //       this.$forceUpdate()

    //       this.loading = false

    //     })
    //     .catch((err) => {
    //       this.loading = false
    //       console.error(err);
    //     });
    // },
    // getTestWorks2() {
    //   let params = {
    //     cid: this.data.courseId,
    //     tid: this.data.typeid,
    //   };
    //   this.ajax
    //     .get(this.$store.state.api + "getTestWorks2", params)
    //     .then((res) => {
    //       // this.cJson = JSON.parse(res.data[0][0].chapters);
    //       if (res.data[2].length) {
    //         this.cJson = JSON.parse(res.data[2][0].courseJson)

    //         let cJson = this.setJSON(JSON.parse(JSON.stringify(this.cJson)))
    //         let cJson2 = this.setJSON(this.setJson2(JSON.parse(JSON.stringify(this.cJson2))))

    //         if (JSON.stringify(cJson) != JSON.stringify(cJson2)) {
    //           this.isReset = true
    //         }


    //       }

    //       this.$forceUpdate()

    //       this.loading = false

    //     })
    //     .catch((err) => {
    //       this.loading = false
    //       console.error(err);
    //     });
    // },

	}
}
</script>

<style scoped>
.scoreItem{
	width:100%;
	height:auto;
	/* height:100px; */
	background:#F7F7F7;
	border-radius:5px;
	margin-top:15px;
	padding:10px;
	box-sizing:border-box;
}
.si-title{
	width:100%;
	height:35px;
	display:flex;
	align-items:center;
  text-align: center;

}
.si-t-avatar{
	width:35px;
	height:35px;
	background: #3E61AA;
	display: flex;
	justify-content: center;
	align-items: center;
	color:white;
	font-size:14px;
	margin-right: 5px;
	border-radius: 50%;
}
.si-title>span{
	font-size: 14px;
	width: calc(100% - 50px);
	display: block;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.si-content{
	width: 100%;
	height: 50px;
  text-align: center;

}

.si-footer{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
  text-align: center;

}
.si-f-time{
	color: #C0C0C0;
}
.si-f-status{
	margin-right: 10px;
	font-size: 14px;
}

.addDialogCss {
  position: fixed;
  width: 80%;
  height: 90%;
  min-height: 600px;
  box-shadow: 0px 0 8px 0px #555555;
  border-radius: 15px;
  z-index: 999;
  left: 30%;
  top: 40%;
  margin: -18% 0 0 -300px;
}
.pzTop {
  color: #fff;
  background: #000;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  border-radius: 15px 15px 0 0;
  user-select: none;
}
.teacherPz {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}

.teacherPzImg {
  width: 30px;
  height: 30px;
}

.addPzBox {
  height: calc(100% - 40px);
  background: #ededed;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
	display: flex;
	flex-direction: column;
}

.addTextCss {
  background: #4b79ce;
  width: 100px;
  height: 40px;
  color: #fff;
  display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
  border-radius: 15px;
  margin: 10px auto 10px;
  cursor: pointer;
}
.pzClose{
	width: 50%;
	cursor: pointer;
}
.scoreTop{
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 10px;
	font-size: 26px;
}

.scoreMain{
	width: 100%;
	flex: 1;
	overflow: auto;
	background-color: white;
}

.step_box {
  width: calc(100%);
  margin: 0 auto;
  height: calc(100% - 50px);
}
.edit_top {
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  padding: 0 30px;
  border-top: 2px solid #eee;
  border-bottom: 2px solid #eee;
  width: 95%;
  margin: 0 auto;
  box-sizing: border-box;
}

</style>