<template>
    <div>

        <!--客户信息 -->
        <customerInfoPage :customerId="customerId" ref="customerInfoPage" />

        <!--工单信息-->
        <ticketDetailCompentPage :ticketId="ticketId" ref="ticketDetailCompentPage" />
      <div style="height:40px"></div>

         <el-card shadow="hover" body-style="padding:10px" class="card"  v-if="!checkSikllGroup(ticketInfo.ticket.skillGroupId)"> 
                <div v-if="ticketInfo.ticket.substatus==102&&ticketInfo.ticket.updateUser == this.loginUserId">
                    <el-button class="filter-item" type="primary" @click="bohuiVisible=true">
                        <span v-if="ticketInfo.ticket.updateUser==loginUserId">撤销</span>
                    </el-button>
                </div> 
        </el-card>
        
        <!-- 工单操作--> 
        <el-card shadow="hover"  body-style="padding:10px" class="card" v-if="checkSikllGroup(ticketInfo.ticket.skillGroupId)">
                     <el-button  v-if="ticketInfo.ticket.substatus==102" class="filter-item" type="primary" @click="bohuiVisible=true">
                        <span v-if="ticketInfo.ticket.handler==loginUserId">撤销</span>
                        <span v-if="ticketInfo.ticket.handler!=loginUserId">驳回</span>
                    </el-button>
                     <el-button v-if="ticketInfo.ticket.status!=2" class="filter-item" type="primary" @click="wcgdVisible=true">完成</el-button>
                     <el-button v-if="ticketInfo.ticket.status==1" class="filter-item" type="primary" @click="cxfpVisible=true">流转</el-button>
                     <el-button v-if="ticketInfo.ticket.status==2" class="filter-item" type="primary" @click="reopenVisible=true">重新打开</el-button>
                     <el-button class="filter-item" type="primary" @click="tjbzVisible=true">添加备注</el-button>
             
        </el-card> 
        <br />

        <!-- <el-tooltip placement="top" content="返回顶部">
            <back-to-top :visibility-height="50" />
        </el-tooltip> -->

        <!-- 添加备注 -->
        <el-dialog title="添加备注" :visible.sync="tjbzVisible" width="600px" :close-on-click-modal="false" center>

            <el-form label-width="120px">
                <el-form-item label="备注">
                    <el-input v-model="memoMark" size="mini" type="textarea" rows="5" clearable />
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveMemo">保存</el-button>
                <el-button @click="tjbzVisible = false">取消</el-button>
            </span>
        </el-dialog>

        <!-- 完成工单 -->
        <el-dialog title="完成工单" :visible.sync="wcgdVisible" width="600px" :close-on-click-modal="false" center>

            <el-form label-width="120px">
                <el-form-item label="处理结果">
                    <el-select v-model="ticketResulVal" style="width:300px" clearable>
                        <!-- multiple -->
                        <span v-for="item in ticketResultList" :key="item.id">
                            <el-option :label="item.name" :value="item.id" v-if="item.type==ticketInfo.ticket.ticketType" />
                            <!-- <el-option v-for="item in ticketResultList"  :key="item.id" :label="item.name" :value="item.id" /> -->
                        </span>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="completedMark" size="mini" type="textarea" rows="5" clearable />
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="completedTicketM">完成</el-button>
                <el-button @click="wcgdVisible = false">取消</el-button>
            </span>
        </el-dialog>

        <!-- 驳回 -->
        <el-dialog :title="isbohui" :visible.sync="bohuiVisible" width="600px" :close-on-click-modal="false" center>

            <el-form label-width="120px">
                <el-form-item label="内容">
                    <el-input v-model="rejectmark" size="mini" type="textarea" rows="5" clearable />
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="rejectFunction">确定</el-button>
                <el-button @click="bohuiVisible = false">取消</el-button>
            </span>
        </el-dialog>

        <!-- 工单流转 -->
        <el-dialog title="工单流转" :visible.sync="cxfpVisible" width="600px" :close-on-click-modal="false" center>
            <el-form label-width="120px">
                <el-form-item label="技能组">
                    <el-select v-model="assignedSkillGroup" style="width:300px" clearable>
                        <!-- multiple -->
                        <el-option v-for="item in skillGroups" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="upgradeRemark" size="mini" type="textarea" rows="5" clearable />
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cxfpVisible = false">取消</el-button>
                <el-button type="primary" @click="updateAssigned">确定</el-button>
            </span>
        </el-dialog>

        <!--重新打开工单 -->
        <el-dialog title="重新打开工单" :visible.sync="reopenVisible" width="600px" :close-on-click-modal="false" center>
            <!-- <h4>确定重新打开工单?</h4> -->
            <el-form label-width="120px">
                <el-form-item label="备注">
                    <el-input v-model="reopenRemark" size="mini" type="textarea" rows="5" clearable />
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="reopenVisible = false">取消</el-button>
                <el-button type="primary" @click="reopenTicket">确定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import {
    detail,
    selectTicketByMobile,
    memo,
    completedTicket,
    reject,
    upgrade,
    reopen,
} from "@/api/ticketHandle";
import { allSkillGroup } from "@/api/campaign";

// import dateutil from "@/components/utilcompent/dateutil.vue";

import customerInfoPage from "@/views/components/customerInfo.vue";
import ticketDetailCompentPage from "@/views/ticket/compent/ticketDetailCompent.vue";
import { allTicketResult } from "@/api/ticketResult";

export default {
    components: { customerInfoPage, ticketDetailCompentPage },
    data() {
        return {
            ticketId: this.$route.query.ticketId, //工单id
            customerId: this.$route.query.customerId, //客户id
            loginUserId: "",
            tjbzVisible: false, //添加备注显示
            memoMark: "",
            wcgdVisible: false, //完成工单显示
            completedMark: "",
            bohuiVisible: false, //驳回显示
            rejectmark: "", //驳回内容填写
            isbohui: "驳回", //撤消
            cxfpVisible: false, //工单流转
            assignedSkillGroup: "",
            upgradeRemark: "",
            skillGroups: [], //下拉选项技能组
            reopenVisible: false, //重新打开工单
            reopenRemark: "",
            ticketResultList: [], //工单处理结果
            ticketResulVal: "",
            ticketInfo: {
                customer: {},
                ticket: {},
                consults: {},
                actions: [],
                relations: {},
                order: {},
                lastSysUser: {},
                lastJzDepartment: { name: "" },
                lastContent: "",
            },
        };
    },
    created() {
        this.loginUserId = this.$store.state.user.id;
        this.loadTicketInfo(); //加载初始客户信息数据
        this.loadSkillGroup(); //技能组
        this.loadDmTicketResult(); //工单处理结果
    },
    activated() {},
    methods: {
        loadTicketInfo() {
            //默认进来工单详情
            detail({ id: this.ticketId })
                .then((response) => {
                    this.ticketInfo = response.data.data;
                    console.log(this.ticketInfo);

                    // alert(this.ticketInfo.ticket.handler==this.loginUserId);
                    if (this.ticketInfo.ticket.updateUser == this.loginUserId) {
                        this.isbohui = "撤消";
                    } else {
                        this.isbohui = "驳回";
                    }
                })
                .catch(() => {});
        },
        loadDmTicketResult() {
            // 工单处理结果
            allTicketResult().then((res) => {
                this.ticketResultList = res.data.data;
            });
        },
        loadSkillGroup() {
            //技能组
            allSkillGroup().then((res) => {
                this.skillGroups = res.data.data;
            });
        },
        updateAssigned() {
            //工单流转
            if (this.assignedSkillGroup == "") {
                this.$message.error("请选择流转到哪个技能组");
                return;
            }
            upgrade({
                id: this.ticketId,
                memo: this.upgradeRemark,
                skillGroupId: this.assignedSkillGroup,
            })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success(`操作成功`);
                        this.cxfpVisible = false;
                        //刷新数据
                        this.$refs.ticketDetailCompentPage.linkLoad(
                            this.ticketId
                        );
                        this.loadTicketInfo();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },

        rejectFunction() {
            if (this.rejectmark == "") {
                this.$message.error(this.isbohui + "内容不能为空");
                return;
            }

            reject({ id: this.ticketId, memo: this.rejectmark })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success(`操作成功`);
                        this.bohuiVisible = false;
                        //刷新数据
                        this.$refs.ticketDetailCompentPage.linkLoad(
                            this.ticketId
                        );
                        this.loadTicketInfo();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    // console.log('异常了',e);
                    this.$message.error(e.data.errmsg);
                });
        },
        completedTicketM() {
            //完成
            let that = this;
            if (that.ticketResulVal == "") {
                this.$message.error("请选择处理结果");
                return;
            }

            let boo = true;
            that.ticketResultList.forEach(function (e) {
                if (e.id == that.ticketResulVal && e.isNeedMemo == 1) {
                    if (that.completedMark == "") {
                        that.$message.error("备注不能为空");
                        boo = false;
                    }
                }
            });

            if (!boo) {
                return;
            }

            //取巧传了个默认的技能组-1    result
            completedTicket({
                id: this.ticketId,
                memo: this.completedMark,
                skillGroupId: -1,
                result: this.ticketResulVal,
            })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success(`操作成功`);
                        this.wcgdVisible = false;
                        //刷新数据
                        this.$refs.ticketDetailCompentPage.linkLoad(
                            this.ticketId
                        );
                        this.loadTicketInfo();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    // console.log('异常了',e);
                    this.$message.error(e.data.errmsg);
                });
        },
        saveMemo() {
            //添加备注
            if (this.memoMark == "") {
                this.$message.error("备注内容不能为空");
                return;
            }
            memo({ id: this.ticketId, memo: this.memoMark })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success(`添加成功`);
                        this.tjbzVisible = false;
                        //刷新数据
                        this.$refs.ticketDetailCompentPage.linkLoad(
                            this.ticketId
                        );
                        this.loadTicketInfo();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        reopenTicket() {
            //重新打开
            if (this.reopenRemark == "") {
                this.$message.error("备注内容不能为空");
                return;
            }
            reopen({ id: this.ticketId, memo: this.reopenRemark })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success(`操作成功`);
                        this.reopenVisible = false;
                        //刷新数据
                        this.$refs.ticketDetailCompentPage.linkLoad(
                            this.ticketId
                        );
                        this.loadTicketInfo();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        checkSikllGroup(skillGroupId) {
            let user_skill_id = this.$store.state.user.skillGroupIdsbyUserId;
            //console.log("用户技能组", user_skill_id);
            if (user_skill_id.length > 0) {
                let boo = false;
                user_skill_id.forEach(function (e) {
                    if (skillGroupId == e) {
                        boo = true;
                    }
                });
                if (boo) {
                    return true;
                }
            }
            return false;
        },
    },
};
</script>
<style scoped>
.hand_title {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    border-left: 5px solid #0eaefc;
    padding-left: 8px;
    margin: 15px 0px;
}

.client-address,
.client-name,
.client-tel {
    font-size: 14px;
    color: #646464;
}
.row-mp {
    padding: 0px 15px;
    margin: 3px 0px;
}
.card{
    text-align:center;
    margin-top:50px;
    position: fixed;
    bottom:5px;
    width:80%;
    border:0px;
    background: transparent;

}
</style>