<template>
    <div class="box">
        <div class="box_title">五育评价</div>
        <el-divider></el-divider>
        <el-form :model="newForm" ref="newForm" :rules="rules" label-width="20vw" class="box_form" label-position="left">
            <el-form-item label="学生姓名" prop="wdwp_xs_xm">
                <el-input disabled v-model="newForm.wdwp_xs_xm" placeholder="请输入学生姓名"></el-input>
            </el-form-item>
            <el-form-item label="学籍号" prop="wdwp_xs_xjh">
                <el-input disabled v-model="newForm.wdwp_xs_xjh" />
            </el-form-item>
            <div class="" style="margin: 6vw 0;">检查项目 : </div>
            <div v-for="item in jcsmData" :key="item.xdww_id" style="padding: 0 5px;">
                <div>{{ item.xdww_name }}</div>
                <div v-for="pf in item.xddy_dygl_wypj_wdpfx" :key="pf.xdwwp_id" class="px_15 flex"
                    style="margin-bottom: 5vw;">
                    <span class="pf_name"> {{ pf.xdwwp_name }} </span>
                    <el-input class="pf_name_width" type="number" min="0" max="100" v-model="pf.fs" />
                </div>
            </div>
            <el-form-item label="评分用户类型" prop="wdwp_pfyhlx" style="margin-top: 5vw;" label-width="42vw">
                <!-- <select class="select" v-model="newForm.wdwp_pfyhlx">
                    <option value="1">教师</option>
                    <option value="2">家长</option>
                </select> -->
                <el-select class="pf_name_width" v-model="newForm.wdwp_pfyhlx" popper-class="pop-select">
                    <el-option value="1" label="教师">教师</el-option>
                    <el-option value="2" label="家长">家长</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="评分用户姓名" prop="wdwp_pfyhlx" style="margin-top: 5vw;" label-width="42vw">
                <el-input class="pf_name_width" v-model="newForm.wdwp_pfyh_xm" />
            </el-form-item>
            <el-form-item label="评分时间" prop="wdwp_pfyhlx" style="margin-top: 5vw;" label-width="42vw">
                <el-date-picker popper-class="elDatePicker" v-model="newForm.wdwp_pfyh_sj" type="datetime"
                    placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="text-center">
            <el-button type="primary" @click="newFormSubmit('newForm')">确 定</el-button>
        </div>
    </div>
</template>
<script>
import request from '@/utils/request';
export default {
    name: "index",
    data() {
        return {
            rules: {
                wdwp_xs_xjh: [
                    { required: true, message: "请输入学生学籍号", trigger: "submit" },
                ],
                wdwp_xs_xm: [
                    { required: true, message: "请输入学生姓名", trigger: "submit" },
                ],
                wdwp_pfyhlx: [
                    { required: true, message: "请选择评分用户类型", trigger: "submit" },
                ],
            },
            newForm: {
                wdwp_xs_xjh: '',
                wdwp_xs_xm: '11',
                wdwp_pfyhlx: '1',
                wdwp_pfyh_xm: '',
                wdwp_pfyh_sj: new Date(),
            },
            hdData: [],
            title: '',
            isEdit: false,
            xdh_id: '',
            jcsmData: [],
            params: {},
        }
    },
    methods: {
        getJcxm() {
            request({
                url: '/xddy/dygl_wypj_wdsz/index',
                data: {
                    token: this.params.token,
                    page: 1,
                    limit: 99,
                }
            }).then(res => {
                if (res.code == '1') {
                    this.jcsmData = res.data.page_data;
                }
            })
        },
        newFormSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let arr1 = [];
                    let flag = false;
                    this.jcsmData.forEach(item => {
                        let obj1 = {
                            xdww_id: item.xdww_id,
                            xdww_name: item.xdww_name,
                            xddy_dygl_wypj_wdpfx: [],
                        }
                        let arr2 = [];
                        item?.xddy_dygl_wypj_wdpfx.forEach(key => {
                            if (!key.fs) {
                                return flag = true;
                            }
                            arr2.push({
                                xdwwp_id: key.xdwwp_id,
                                xdwwp_name: key.xdwwp_name,
                                fs: key.fs,
                            });
                        })
                        obj1.xddy_dygl_wypj_wdpfx = arr2;
                        arr1.push(obj1);
                    })
                    if (flag) {
                        return alert('请填写完整')
                    }
                    let data = {
                        token: this.params.token,
                        issubmit: '1',
                        api: 'json',
                        pj_json: JSON.stringify(arr1),
                        wdwp_pfyhlx: this.newForm.wdwp_pfyhlx,
                        wdwp_sm_id: this.params.sm_id,
                        wdwp_xs_xjh: this.newForm.wdwp_xs_xjh,
                        wdwp_xs_xm: this.newForm.wdwp_xs_xm,
                        wdwp_pfyh_xm: this.newForm.wdwp_pfyh_xm,
                        wdwp_pfyh_sj: this.newForm.wdwp_pfyh_sj
                    };
                    console.log(data,'33333333');
                    request({
                        url: '/xddy/dygl_wypj_pjjl/batch_pj',
                        data,
                    }).then(res => {
                        if (res.code == 1) {
                            alert(res.msg);
                        } else {
                            alert(res.msg);
                        }
                    })
                }
            })
        }
    },
    mounted() {
        var temp1 = location.href.split('?');
        var pram = temp1[1];
        var keyValue = pram.split('&');
        // var obj = {};
        for (var i = 0; i < keyValue.length; i++) {
            var item = keyValue[i].split('=');
            var key = item[0];
            var value = item[1];
            this.params[key] = value;
        }
        this.newForm.wdwp_xs_xjh = this.params.xsxh;
        this.newForm.wdwp_xs_xm = decodeURI(this.params.xsxm);

        if (this.params.token) {
            request({
                url: '/user/main/login',
                data: {
                    token: this.params.token
                }
            }).then(res => {
                if (res.code == 1) {
                    localStorage.setItem('userInfo', JSON.stringify(res.data));
                    this.getJcxm();
                }
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.flex {
    display: flex;
    align-items: center;
}

.px_15 {
    padding: 5px 20px;
}

.box {
    width: 100vw;
    padding: 3vw 2vw;

    .box_title {
        width: 100%;
        font-size: 5vw;
    }

    .box_form {
        font-size: 4vw;
    }
}

::v-deep {
    .el-form {
        .el-form-item__label {
            font-size: 4vw !important;
        }

        .el-form-item {
            margin: 5vw 0;
        }

        .el-input__inner {
            width: 70vw;
            height: 7vw;
            padding: 1vw 2vw;
            font-size: 4vw;
        }

        .pf_name_width {
            .el-input__inner {
                width: 30vw;
            }
        }

        .el-date-editor {
            .el-input__inner {
                width: 50vw;
            }
        }

        // .pop_select {
        //     font-size: 4vw !important;
        // }
    }

    .el-button {
        font-size: 4vw;
        padding: 20px 40px;
        box-sizing: content-box;
        border-radius: 20px;
        margin-top: 15vw;
    }

    // .el-select-dropdown__item {
    //     font-size: 4vw !important;
    //     padding: 0 5px;
    // }

}

.pop-select {
    .el-select-dropdown__item {
        font-size: 4vw !important;
        height: 7vw;
        line-height: 6vw;
        padding: 0 10px;
    }
}



.pf_name {
    min-width: 40vw;
    // text-align: right;
    padding-left: 5vw;
    color: #555;
    font-weight: 400;
}
</style>
<style lang="scss">
.elDatePicker.el-picker-panel {
    width: 53vw !important;
    padding: 0 5px;
    box-sizing: content-box;

    .el-picker-panel__content {
        width: 95%;
        font-size: 4vw;
    }
    .el-input{
        padding: 5px 0;
    }
    .el-input__inner{
        height: 6vw;
    }
    .el-input__inner,
    .el-date-picker__header-label,
    .el-date-table,.el-button {
        font-size: 4vw !important;
    }

    .el-date-picker__header-label {
        line-height: 5vw;
    }

    .el-picker-panel__icon-btn {
        font-size: 4vw !important;

    }

    .el-date-table td div {
        height: 50px;
    }

    .el-date-table td span {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }
    .el-time-panel{
        width: 100%;
    }
    .el-time-spinner__item{
        font-size: 3vw;
        height: 50px;
        line-height: 50px;
    }
    .el-time-panel__btn{
        font-size: 3vw;
    }
    .el-time-spinner__wrapper{
        max-height: 300px;
    }
    .el-date-table td.current:not(.disabled) span {
        color: #FFF;
        background-color: #409EFF;
    }
    .el-time-panel__footer{
        height: 60px;
        line-height: 60px;
    }
}
</style>