<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="commissionForm"
                    label-position="left"
                    :rules="rules"
                    ref="commissionForm"
                >
                    <el-row>
                        <el-col :span="3">
                            <span class="title">专家入驻前期</span>
                        </el-col>
                        <el-col :lg="10" :sm="24">
                            <el-form-item label="诊单个数:" prop="newExpertAnswerNum">
                                <el-input
                                    placeholder="请输入"
                                    :disabled="!show"
                                    v-model.number="
                                        commissionForm.newExpertAnswerNum
                                    "
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="补贴金额:" prop="newExpertBoon">
                                <el-input
                                    placeholder="请输入"
                                    :disabled="!show"
                                    v-model.number="
                                        commissionForm.newExpertBoon
                                    "
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="3">
                            <span class="title">专家入驻后期</span>
                        </el-col>
                        <el-col :lg="10" :sm="24">
                            <el-form-item label="服务费抽成:" :disabled="!show" prop="expertCommission">
                                <el-input
                                    placeholder="请输入"
                                    :disabled="!show"
                                    v-model.number="
                                        commissionForm.expertCommission
                                    "
                                    class="shortInput"
                                ></el-input>
                                <span>%</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="mt50">
                        <el-col :span="10">
                            <el-form-item label="学堂打赏抽成:" prop="schoolCommission">
                                <el-input
                                    placeholder="请输入"
                                    :disabled="!show"
                                    v-model.number="
                                        commissionForm.schoolCommission
                                    "
                                    class="shortInput"
                                ></el-input>
                                <span>%</span>
                            </el-form-item>
                            <el-form-item label="题库打赏抽成:" prop="questionCommission">
                                <el-input
                                    placeholder="请输入"
                                    :disabled="!show"
                                    v-model.number="
                                        commissionForm.questionCommission
                                    "
                                    class="shortInput"
                                ></el-input>
                                <span>%</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="mt50">
                        <el-col :offset="4">
                            <el-form-item>
                                <el-button
                                    :disabled="!auditId"
                                    type="primary"
                                    round
                                    v-if="!show && activeName == '3'"
                                    @click="pass"
                                >通过</el-button>
                                <el-button
                                    :disabled="!auditId"
                                    type="primary"
                                    round
                                    v-if="!show && activeName == '3'"
                                    @click="rejectShow"
                                >驳回</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <!-- 驳回弹窗 -->
        <RejectDialog @isReject="isReject" ref="regectDialog"></RejectDialog>
    </div>
</template>
<script>
import TitleBar from "@/apps/mobile/components/common/TitleBar";
import RejectDialog from '@/apps/mobile/components/reject/index';
import {
    addData,
    addDataSave,
    removeData,
    editData,
    examine,
    queryNew,
    queryHistory,
    queryCommit,
    queryStay,
} from '@/apps/mobile/api/operation/commission/index';
export default {
    components: {
        TitleBar,
        RejectDialog,
    },
    data() {
        return {
            commissionForm: {}, // 搜索表单
            show: 0,
            activeName: '2',
            rules: {
                newExpertAnswerNum: [
                    { required: true, message: '不能为空' },
                    { type: 'number', message: '必须为数字值' },
                ],
                newExpertBoon: [
                    { required: true, message: '不能为空' },
                    { type: 'number', message: '必须为数字值' },
                ],
                expertCommission: [
                    { required: true, message: '不能为空' },
                    { type: 'number', message: '必须为数字值' },
                ],
                schoolCommission: [
                    { required: true, message: '不能为空' },
                    { type: 'number', message: '必须为数字值' },
                ],
                questionCommission: [
                    { required: true, message: '不能为空' },
                    { type: 'number', message: '必须为数字值' },
                ],
            },
            id: null, //待提交ID
            auditId: null, //待审核id
            editobj: {}, // 储存待提交的数据
            theSame: true, // 待提交的数据是否改变 false改变  true未变
        };
    },
    created() {
        this.$nextTick(() => {
            this.queryNewData(); 
        });
    },
    methods: {
        // 进入审批页面调用
        showChange() {
            this.show = 0;
            this.queryNewData();
        },
        // 点击标签页
        handleClick(tab) {
            console.log(tab, 'activeName');
            if (tab.name === '1') {
                // 查询历史版本
                this.queryHistoryData();
            }
            if (tab.name === '2') {
                // 查询最新的
                this.queryNewData();
            }
            if (tab.name === '3') {
                // 查询待审核的
                this.queryStayData();
            }
        },
        // 查询历史版本
        queryHistoryData() {
            queryHistory()
                .then(res => {
                    if (res.data.id) {
                        this.commissionForm = { ...res.data };
                    }
                })
                .catch(err => err);
        },

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

        // 查询最新版本
        queryNewData() {
            if (!this.show && this.activeName === '2') {
                queryNew()
                    .then(res => {
                        if (res.data.id) {
                            this.commissionForm = res.data;
                        }
                    })
                    .catch(err => err);
            }
        },
        // 查询待提交的数据
        queryCommitData() {
            queryCommit()
                .then(res => {
                    console.log(res);
                    if (res.data && res.data.length > 0) {
                        this.commissionForm = res.data.pop();
                        this.id = this.commissionForm.id;
                        this.editobj = Object.assign({
                            ...this.commissionForm,
                        });
                        // console.log(this.commissionForm, "待提交");
                    } else {
                        this.id = null;
                    }
                })
                .catch(err => err);
        },
        // 审批
        approval(data) {
            examine(data).then(res => {
                if (res.statusCode === '1') {
                    this.$message.success(res.message);
                    this.auditId = null;
                    this.queryStayData();
                    this.commissionForm = {};
                    this.$refs.commissionForm.resetFields();
                } else {
                    this.$message.warning(res.message);
                }
            });
        },
        // 审核通过  (仅在审批页面使用)
        pass() {
            this.$confirm('是否通过审批?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    if (this.auditId) {
                        // 有待审数据
                        let examineObj = {
                            id: this.auditId,
                            examineFlag: 1,
                        };
                        this.approval(examineObj);
                    }
                })
                .catch(() => {});
        },
        // 驳回 (审批页面调用)
        isReject(data) {
            // console.log(data, 'isRegect');
            let bhObj = {
                id: this.auditId,
                notExamineReason: data.checkComment,
                examineFlag: 2,
            };
            this.approval(bhObj);
        },
        rejectShow() {
            this.$refs.regectDialog.open(this.auditId);
            this.commissionForm = {};
            this.$refs.commissionForm.resetFields();
        },
    },
    watch: {
        commissionForm: {
            handler(newVal) {
                if (JSON.stringify(newVal) !== JSON.stringify(this.editobj)) {
                    this.theSame = false;
                } else {
                    this.theSame = true;
                }
                console.log(this.theSame, 'this.theSame');
            },
            deep: true,
        },
    },
};
</script>
<style  scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}
.el-input {
    width: auto !important;
}
.main-container {
    padding: 0px 50px;
}
.title {
    font-family: 'PingFang SC Bold', 'PingFang SC Medium', 'PingFang SC', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.847058823529412);
    line-height: 28px;
    min-width: 100px;
}
.shortInput {
    max-width: 140px;
}
.mt50 {
    margin-top: 50px;
}
</style>
