<template>
    <el-dialog :title="lang.ssEnglishSpeak" :visible.sync="EnglishVoiceDialog" :append-to-body="true" width="100%"
        :before-close="handleClose" class="dialog_diy">
        <div class="ev_box" v-if="EnglishVoiceDialog">
            <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 class="ev_btn">
                <el-button type="primary" style="padding: 5px 10px;font-size: 14px;height: 30px;" size="mini" :disabled="!(checkType == (checkJson.length - 1))" @click="addEnglishWork">{{ lang.ssClickSubmit }}</el-button>

            </div>
        </div>
        <!-- <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirm()">确 认</el-button>
            <el-button @click="close()">关 闭</el-button>
        </span> -->
    </el-dialog>
</template>

<script>
import right from './component/right.vue'
import left from './component/left.vue'
import { myMixin } from "@/mixins/mixin.js"
export default {
    mixins: [ myMixin ],
    components: {
        right,
        left
    },
    props: {
        EnglishVoiceDialog: {
            type: Boolean,
            default: false
        },
        englishVoiceJson: {
            type: Object
        },
        userid:{
            type:String
        },
        id:{
            type:String
        },
        courseType:{
            type:[Number, String]
        },
        taskCount:{
            type:Number
        },
        toolindex:{
            type:Number
        },
        englishVoiceJsonWork:{
            type: Array
        }
    },
    data() {
        return {
            checkJson: [],
            checkJson2: {},
            title: '',
            detail: '',
            checkType: 0,
            work: [],
            wScore: 0,
            scoreDetail: "",
            homeWorkLoading : false

        }
    },
    methods: {
        handleClose(done) {
            this.close();
            done();
        },
        close() {
            this.$emit("update:EnglishVoiceDialog", false);
        },
        close2() {
            this.$emit("update:EnglishVoiceDialog", 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=[]
            this.work.length = a.array.length
            let works = JSON.parse(
                JSON.stringify(this.englishVoiceJsonWork)
            );
            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, text, star) {
            if(this.checkJson[index].type == 'createRole'){
                console.log(url);
                this.work[index] = JSON.parse(JSON.stringify(url))
                this.$forceUpdate()
            }else{
                if(star){
                    let score = parseInt(star.AccuracyScore / 20)
                    this.work[index] = {
                        audio:url,
                        text:text,
                        score:score,
                        star:star
                    }
                }else{
                    this.work[index] = {
                        audio:url,
                        text:text
                    }
                }

            }
        },
        addEnglishWork() {
            let params = [
                {
                    uid: this.userid,
                    cid: this.id,
                    stage: this.courseType,
                    task: this.taskCount,
                    tool: this.toolindex,
                    content: JSON.stringify(this.work),
                    type: 17,
                    atool: 70,
                    text: "",
                },
            ];
            if (this.homeWorkLoading) return this.$message.info(this.lang.ssClickTooFast)
            this.homeWorkLoading = true
            this.ajax
                .post(this.$store.state.api + "addCourseWorks5", params)
                .then((res) => {
                    this.$message({
                        message: this.lang.ssSubmitSuccess,
                        type: "success",
                    });
                    setTimeout(() => {
                            this.homeWorkLoading = false
                        }, 500);

                    this.addOp3('1', "", { courseid: this.id,tool:'英语口语',
                    data: JSON.stringify(this.work),
                    type: "course_tool_sub" }, "success")
                    this.$emit('selectSWorks')
                    this.$emit('selectStudent')
                    this.close2();
                })
                .catch((err) => {
                   
                    this.$message.error(this.lang.ssSubmitFailed);
                    console.error(err);
                    setTimeout(() => {
                            this.homeWorkLoading = false
                        }, 500);

                    this.addOp3('1', "", { courseid: this.id,tool:'英语口语',
                    data: JSON.stringify(this.work),
                    type: "course_tool_sub" }, err)
                });
        },
    },
    watch: {
        EnglishVoiceDialog: {
            handler: function (newVal, oldVal) {
                if (newVal) {
                    this.setVoiceJson(this.englishVoiceJson);
                }
            },
            deep: true,
        },
    },
    mounted() {
        this.setVoiceJson(this.englishVoiceJson);
    },
}
</script>

<style scoped>
.dialog_diy>>>.el-dialog {
    height: 100%;
    margin: 0vh auto !important;
}

.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;
}

.ev_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
}

.ev_box_left {
    width: 280px;
    margin-right: 15px;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.ev_box_right {
    width: calc(100% - 280px - 15px);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.ev_btn {
    position: absolute;
    bottom: 0;
    right: 80px;
    height: 210px;
    display: flex;
    align-items: center;
}</style>