<template>
    <div class="common-container">
        <TitleBar></TitleBar>
        <div>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="当前规则" name="1"></el-tab-pane>
                <el-tab-pane label="待审核" name="2"></el-tab-pane>
                <el-tab-pane label="待提交" name="3"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="main-container">
            <div class="MaintenanceTable">
                <el-form
                    class="table-select-main"
                    :model="upgradeRulesForm"
                    :rules="rules"
                    label-position="left"
                    ref="upgradeRulesForm"
                >
                    <div class="score-box">
                        <div class="rating-score">
                            <p class="score-p">评分分数</p>
                            <el-form-item label="5星:" prop="scoreFive">
                                <el-input
                                    v-model="upgradeRulesForm.scoreFive"
                                    :disabled="!show"
                                    placeholder="请输入"
                                ></el-input>
                                <span class="score-span">分</span>
                            </el-form-item>

                            <el-form-item label="4星:" prop="scoreFour">
                                <el-input
                                    v-model="upgradeRulesForm.scoreFour"
                                    :disabled="!show"
                                    placeholder="请输入"
                                ></el-input>
                                <span class="score-span">分</span>
                            </el-form-item>
                            <el-form-item label="3星:" prop="scoreThree">
                                <el-input
                                    v-model="upgradeRulesForm.scoreThree"
                                    :disabled="!show"
                                    placeholder="请输入"
                                ></el-input>
                                <span class="score-span">分</span>
                            </el-form-item>
                            <el-form-item label="2星:" prop="scoreTwo">
                                <el-input
                                    v-model="upgradeRulesForm.scoreTwo"
                                    :disabled="!show"
                                    placeholder="请输入"
                                ></el-input>
                                <span class="score-span">分</span>
                            </el-form-item>
                            <el-form-item label="1星:" prop="scoreOne">
                                <el-input
                                    v-model="upgradeRulesForm.scoreOne"
                                    :disabled="!show"
                                    placeholder="请输入"
                                ></el-input>
                                <span class="score-span">分</span>
                            </el-form-item>
                        </div>
                        <div class="upgrade-scope">
                            <p class="score-p">升级分数</p>
                            <el-form-item label="5级:" prop="levelFive">
                                <el-input
                                    v-model="upgradeRulesForm.levelFive"
                                    :disabled="!show"
                                    placeholder="请输入"
                                ></el-input>
                                <span class="score-span">分</span>
                            </el-form-item>
                            <el-form-item label="4级:" prop="levelFour">
                                <el-input
                                    v-model="upgradeRulesForm.levelFour"
                                    :disabled="!show"
                                    placeholder="请输入"
                                ></el-input>
                                <span class="score-span">分</span>
                            </el-form-item>
                            <el-form-item label="3级:" prop="levelThree">
                                <el-input
                                    v-model="upgradeRulesForm.levelThree"
                                    :disabled="!show"
                                    placeholder="请输入"
                                ></el-input>
                                <span class="score-span">分</span>
                            </el-form-item>
                            <el-form-item label="2级:" prop="leveiTwo">
                                <el-input
                                    v-model="upgradeRulesForm.leveiTwo"
                                    :disabled="!show"
                                    placeholder="请输入"
                                ></el-input>
                                <span class="score-span">分</span>
                            </el-form-item>
                        </div>
                    </div>

                    <el-row class="mt50">
                        <el-col :offset="5">
                            <el-form-item class="footBtn">
                                <el-button
                                    type="primary"
                                    :disabled="btndisabled"
                                    round
                                    @click="reset"
                                    v-if="activeName == '3'"
                                >重置</el-button>
                                <el-button
                                    type="primary"
                                    :disabled="btndisabled"
                                    round
                                    @click="submit('save')"
                                    v-if="activeName == '3'"
                                >保存</el-button>
                                <el-button
                                    type="primary"
                                    :disabled="btndisabled"
                                    round
                                    @click="submit('submit')"
                                    v-if="activeName == '3'"
                                >提交</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import {
    addData,
    addDataSave,
    removeData,
    editData,
    examine,
    queryNew,
    queryHistory,
    queryCommit,
    queryStay,
    submitData,
} from '@/apps/mobile/api/operation/expertUpgradeRule/index';
import { validPositiveInteger } from '@/apps/mobile/utils/validate';
export default {
    components: {
        TitleBar,
    },
    data() {
        var checkNum = (rule, value, callback) => {
            if (value && !validPositiveInteger(value)) {
                callback(new Error('格式不正确'));
            } else {
                callback();
            }
        };
        return {
            id: null, //待提交数据ID
            auditId: null, //待审核id
            activeName: '1',
            show: 0,
            btndisabled: false,
            upgradeRulesForm: {},
            rules: {
                scoreFive: [
                    { required: true, message: '评分不能为空' },
                    { validator: checkNum, message: '请输入正整数', trigger: 'blur' },
                ],
                scoreFour: [
                    { required: true, message: '评分不能为空' },
                    { validator: checkNum, message: '请输入正整数', trigger: 'blur' },
                ],
                scoreThree: [
                    { required: true, message: '评分不能为空' },
                    { validator: checkNum, message: '请输入正整数', trigger: 'blur' },
                ],
                scoreTwo: [
                    { required: true, message: '评分不能为空' },
                    { validator: checkNum, message: '请输入正整数', trigger: 'blur' },
                ],
                scoreOne: [
                    { required: true, message: '评分不能为空' },
                    { validator: checkNum, message: '请输入正整数', trigger: 'blur' },
                ],
                levelFive: [
                    { required: true, message: '评分不能为空' },
                    { validator: checkNum, message: '请输入正整数', trigger: 'blur' },
                ],
                levelFour: [
                    { required: true, message: '评分不能为空' },
                    { validator: checkNum, message: '请输入正整数', trigger: 'blur' },
                ],
                levelThree: [
                    { required: true, message: '评分不能为空' },
                    { validator: checkNum, message: '请输入正整数', trigger: 'blur' },
                ],
                leveiTwo: [
                    { required: true, message: '评分不能为空' },
                    { validator: checkNum, message: '请输入正整数', trigger: 'blur' },
                ],
                levelOne: [
                    { required: true, message: '评分不能为空' },
                    { validator: checkNum, message: '请输入正整数', trigger: 'blur' },
                ],
            },
            editobj: {}, // 储存待提交的数据
            theSame: true, // 待提交的数据是否改变 false改变  true未变
        };
    },
    methods: {
        reset() {
            this.upgradeRulesForm = {};
            this.$refs.upgradeRulesForm.resetFields();
        },
        submit(type) {
            this.$refs.upgradeRulesForm.validate(valid => {
                if (valid) {
                    let obj = this.upgradeRulesForm;
                    let submitObj = {
                        levelOne: obj.levelOne,
                        leveiTwo: obj.leveiTwo,
                        levelThree: obj.levelThree,
                        levelFour: obj.levelFour,
                        levelFive: obj.levelFive,
                        scoreOne: obj.scoreOne,
                        scoreTwo: obj.scoreTwo,
                        scoreThree: obj.scoreThree,
                        scoreFour: obj.scoreFour,
                        scoreFive: obj.scoreFive,
                    };
                    if (type === 'save') {
                        if (this.id && this.theSame) return this.$message.warning('未做修改!');
                        if (this.id && !this.theSame) {
                            submitObj.id = this.id;
                        }
                        addDataSave(submitObj)
                            .then(res => {
                                if (res.statusCode === '1') {
                                    this.$message.success(res.message);
                                    this.id = res.data;
                                    this.btndisabled = false;
                                    this.queryCommitData();
                                } else {
                                    this.$message.warning(res.message);
                                }
                            })
                            .catch(() => {
                                this.btndisabled = false;
                            });
                    } else {
                        // 提交操作
                        if (this.id) {
                            // 有待提交数据,提交
                            submitData(this.id)
                                .then(res => {
                                    if (res.statusCode === '1') {
                                        this.$message.success(res.message);
                                        this.id = null;
                                        this.btndisabled = false;
                                        this.queryCommitData();
                                    } else {
                                        this.$message.warning(res.message);
                                    }
                                })
                                .catch(() => {
                                    this.btndisabled = false;
                                });
                        } else {
                            // 没有待提交数据,新增
                            addData(submitObj)
                                .then(res => {
                                    if (res.statusCode === '1') {
                                        this.$message.success(res.message);
                                        this.btndisabled = false;
                                        this.queryCommitData();
                                    } else {
                                        this.$message.warning(res.message);
                                    }
                                })
                                .catch(() => {
                                    this.btndisabled = false;
                                });
                        }
                    }
                } else {
                    return false;
                }
            });
        },
        // 进入审批页面调用
        showChange() {
            this.show = 0;
            this.queryNewData();
        },
        // 点击标签页
        handleClick(tab) {
            console.log(tab, 'activeName');
            if (tab.name === '1') {
                // 查询当前规则
                this.queryNewData();
            }
            if (tab.name === '2') {
                // 查询待审核的
                this.queryStayData();
            }
            if (tab.name === '3') {
                // 查询待提交的
                this.queryCommitData();
            }
        },

        // 查询待审核
        queryStayData() {
            queryStay()
                .then(res => {
                    if (res.data && res.data.length > 0) {
                        this.upgradeRulesForm = res.data.pop();
                        this.auditId = this.upgradeRulesForm.id;
                    } else {
                        this.auditId = null;
                        this.reset();
                    }
                })
                .catch(err => err);
        },

        // 查询最新版本
        queryNewData() {
            if (!this.show && this.activeName === '1') {
                queryNew()
                    .then(res => {
                        // console.log(res, "最新");
                        if (res.data.id) {
                            this.upgradeRulesForm = res.data;
                        } else {
                            this.reset();
                        }
                    })
                    .catch(err => err);
            }
        },
        // 查询待提交的数据
        queryCommitData() {
            queryCommit()
                .then(res => {
                    // console.log(res, "res1111");
                    if (res.data && res.data.length > 0) {
                        this.upgradeRulesForm = res.data.pop();
                        this.editobj = Object.assign({
                            ...this.upgradeRulesForm,
                        });
                        this.id = this.upgradeRulesForm.id;
                    } else {
                        this.id = null;
                        this.reset();
                    }
                })
                .catch(err => err);
        },
        // 审批
        approval(data) {
            examine(data).then(res => {
                console.log(res);
                if (res.statusCode === '1') {
                    this.$message.success(res.message);
                    this.auditId = null;
                    this.queryStayData();
                } else {
                    this.$message.warning(res.message);
                }
            });
        },
    },
    created() {
        this.$nextTick(() => {
            this.queryNewData();
        });
    },
    watch: {
        upgradeRulesForm: {
            handler(newVal) {
                if (JSON.stringify(newVal) !== JSON.stringify(this.editobj)) {
                    this.theSame = false;
                } else {
                    this.theSame = true;
                }
            },
            deep: true,
        },
        activeName(val){
            if(val == 3){
                this.show = 1;
            }
            else{
                this.show = 0;
            }
        }
    },
};
</script>
<style scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}
.el-input {
    max-width: 150px;
}
.main-container {
    padding: 10px 50px;
}
.mt50 {
    margin-top: 50px;
}
.score-box {
    display: flex;
}
.rating-score {
    margin-right: 100px;
}
.score-p {
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.847058823529412);
    line-height: 28px;
}
.score-span {
    margin-right: 10px;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.847058823529412);
    text-align: right;
    line-height: 22px;
}
::v-deep .score-box .el-form-item {
    margin-left: 30px;
    width: 235px;
}
::v-deep .footBtn .el-form-item__content {
    display: flex;
    /* width: 500px; */
}
</style>
