<template>
    <!--管家工单--跟进类 -->
    <div>
        <!-- 查询和其他操作 -->
        <div class="filter-container">
            <el-input v-model="searchQuery.myNoticeId" clearable class="filter-item" style="width: 160px;" placeholder="任务编号id" />
            <el-button  class="filter-item" type="primary" icon="el-icon-search" @click="getTaskListData">查找</el-button>
           <!-- v-permission="['GET /admin/customerOrder/list']"-->
            <!-- <el-button :loading="importLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleImport">导入盒马订单</el-button> -->
        </div>
        <el-collapse v-model="activeName" accordion style="bottom:0px;">

            <el-collapse-item v-for="(item,index) in ticketTaskListData" :key="index" :name="index" style="margin-bottom: -5px;">
                <template slot="title">
                    <div class="hand_title2">
                        <span>任务编号：{{item.id}} </span>
                        <!-- <span class="firstbf">{{item.relationOther.relationOtherName}}</span> -->
                        <span class="firstbf">{{noticeType[item.rType]}}</span>
                        <span class="smsj">生成日期 {{item.createTime}}</span>
                    </div>
                </template>
                <el-row>
                    <el-col :span="8">
                        <span class="client-name">
                            任务来源:{{ticketTaskSource[item.jzTicket==null?'':item.jzTicket.taskSource]}}
                        </span>
                    </el-col>
                    <el-col :span="8">
                        <span class="client-tel">任务状态：
                            <el-tag type="success" v-if="item.jzTicket !=null">{{item.jzTicket.status==2?"已完结":"跟进中"}}</el-tag>
                        </span>
                    </el-col>
                    <el-col :span="8">
                        <span class="client-tel">跟进管家：{{employRelation.butlerName}}
                        </span>
                    </el-col>
                </el-row>
                <br />
                <el-row>
                    <el-col :span="8">
                        <span class="client-name">
                            任务生成时间 {{item.createTime}}
                        </span>
                    </el-col>
                    <el-col :span="8">
                        <span class="client-tel">关联单据类型：
                            <el-tag>{{item.relationOther.relationOtherName}}</el-tag>
                        </span>
                    </el-col>
                    <el-col :span="8">
                        <span class="client-tel">关联单据：
                            <!--1是关联保姆打卡记录-->
                            <a style="color: #1890ff" v-if="item.relationOther.relationOtherType==1" @click="toServiceRecord(item.relationOther.relationOtherId)">
                                {{item.relationOther.relationOtherId}}
                            </a>
                            <!--2是拜访-->
                            <a style="color: #1890ff" v-if="item.relationOther.relationOtherType==2" @click="tobutlerTask(item.relationOther.relationOtherId)">
                                {{item.relationOther.relationOtherId}}
                            </a>
                            <!--3是跟进类工单-->
                            <a style="color: #1890ff" v-if="item.relationOther.relationOtherType==3" @click="toSelf(item.relationOther.relationOtherId)">
                                {{item.relationOther.relationOtherId}}
                            </a>
                        </span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18">
                        <span v-if="checkLength(item.timeLine)" class="client-name" style="color:red;">
                            任务日志
                        </span>
                        <br /><br />
                        <el-timeline>
                            <!--:icon="activity.icon" :type="activity.type"  -->
                            <el-timeline-item v-for="(activity, index) in item.timeLine" :key="index" :color="activity.color" :size="activity.size" :timestamp="activity.timestamp">
                                {{activity.content}}
                            </el-timeline-item>
                        </el-timeline>
                    </el-col>
                </el-row>
                <el-row v-if="item.jzTicket.handler==$store.state.user.id"><!-- v-if="item.jzTicket.handler==$store.state.user.id" -->
                    <el-button type="primary" size="mini" @click="showAddFlowUp(item.jzTicket.id)">添加跟进记录</el-button>
                    <el-button type="primary" v-if="item.jzTicket.status==1" size="mini" @click="showTicketUpgrade(item.jzTicket.id)">任务流转</el-button>
                    <el-button type="primary" v-if="item.jzTicket.status!=2" size="mini" @click="clickshowticketComplate(item.jzTicket.id)">完结任务</el-button>
                    <el-button type="primary"  v-if="item.jzTicket.status==2"  size="mini" @click="clickshowNewTask(item.id,item.jzTicket.id)">新建任务</el-button>
                   
                    <el-button type="primary" size="mini" v-if="item.jzTicket.status==1 && item.relationOther.relationOtherType==1"
                     @click="toupdateServantClock(item.id,item.relationOther.relationOtherId)">修改保姆服务记录</el-button>

                </el-row>
            </el-collapse-item>
        </el-collapse>
        <pagination v-show="searchQuery.total>0" :total="searchQuery.total" :page.sync="searchQuery.page" :limit.sync="searchQuery.limit" @pagination="getTaskListData" />

        <!--跟进记录 -->
        <el-dialog title="跟进记录" :visible.sync="showflowup" width="400px" :close-on-click-modal="false" center>
            <el-form label-width="100px">
                <el-form-item label="跟进类型">
                    <el-select v-model="flowupData.hmType" placeholder="请选择跟进类型" clearable>
                        <el-option v-for="(item,index) in ticketTaskDict.followType" :key="index" :name="index" :value="item.type" :label="item.typeName" />
                    </el-select>
                </el-form-item>

                <el-form-item label="雇主电话" v-if="flowupData.hmType==1||flowupData.hmType==2">
                    <el-input v-model="flowupData.phone" readonly placeholder="请输入电话" />
                </el-form-item>
                <el-form-item label="跟进记录">
                    <el-input type="textarea" :rows="3" v-model="flowupData.comment" placeholder="请输入跟进记录" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showflowup = false">取消</el-button>
                <el-button type="primary" @click="addFlowUp">确定</el-button>
            </div>
        </el-dialog>

        <!--任务流转 -->
        <el-dialog title="任务流转" :visible.sync="showUpgrade" width="400px" :close-on-click-modal="false" center>
            <el-form label-width="100px">
                <el-form-item label="技能组">
                    <el-select v-model="ticketUpgradeData.skillGroupId" placeholder="请选择技能组" @change="selectSkill" clearable>
                        <el-option v-for="(item,index) in skillGroupUser" :key="index" :name="index" :value="item.id" :label="item.label" />
                    </el-select>
                </el-form-item>

                <el-form-item label="受理人">
                    <el-select v-model="ticketUpgradeData.handler" placeholder="请先选择受理人" clearable>
                        <el-option v-for="(item,index) in gUsers" :key="index" :name="index" :value="item.id" :label="item.userName" />
                    </el-select>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input type="textarea" :rows="3" v-model="ticketUpgradeData.memo" placeholder="请输入备注" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showUpgrade = false">取消</el-button>
                <el-button type="primary" @click="saveUpgrade">确定</el-button>
            </div>
        </el-dialog>

        <!--工单完成 -->
        <el-dialog title="工单完成" :visible.sync="showticketComplate" width="400px" :close-on-click-modal="false" center>
            <el-form label-width="100px">
                <el-form-item label="处理结果">
                    <el-select v-model="ticketComplateData.result" placeholder="请选择处理结果" @change="selectSkill" clearable>
                        <el-option v-for="(item,index) in completeResult.ticketResult" :key="index" :name="index" :value="item.id" :label="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" :rows="3" v-model="ticketComplateData.memo" placeholder="请输入备注" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showticketComplate = false">取消</el-button>
                <el-button type="primary" @click="saveTicketComplate">确定</el-button>
            </div>
        </el-dialog>

        <!--新建任务 工单里-->
        <butlerTicketCreatPage @callFunction="getTaskListData" ref="butlerTicketCreatPage" />

        <!-- 修改打卡-->
        <updateServantClockPage @callFunction="getTaskListData" ref="updateServantClockPage" />

    </div>

</template>
<script>
import Pagination from "@/components/Pagination";
import butlerTicketCreatPage from "@/views/order/include/butlerTicketCreat.vue";
import updateServantClockPage from "@/views/order/include/updateServantClock.vue";
import {
    getTaskList,
    getTicketTaskDict,
    addTicketAction,
    getSkillGroupUser,
    ticketUpgrade,
    ticketCompleted,
    ticketCompletedResult,
} from "@/api/customertask";
export default {
    components: { Pagination, butlerTicketCreatPage, updateServantClockPage },
    props: {
        orderId: "",
        employRelation: {},
        orderData: {
            employRelation: {},
            fns: [],
            orderInfo: {},
            serviceInfo: {},
            user: {},
            userCustomer: {},
            userServant: {},
            customerOrder: {},
            userButler: {},
            customerClue: {},
        },
    },
    data() {
        return {
            // taskType:3,//弹窗新建任务
            activeName: 0,
            ticketTaskListData: [],
            searchQuery: {
                total: 0,
                page: 1,
                limit: 10,
                myNoticeId: "",
            },
            ticketTaskDict: {
                taskType: [],
                taskSourceType: [],
                followType: [],
            },
            showflowup: false, //添加跟进记录显示
            flowupData: {
                //添加跟进记录
                ticketId: "",
                hmType: "",
                phone: "",
                comment: "",
            },
            showUpgrade: false, //任务流转显示
            ticketUpgradeData: {
                //任务流转
                id: "",
                skillGroupId: "",
                memo: "",
                handler: "",
                adminId: "",
            },
            skillGroupUser: [], //技能组和用户
            gUsers: [], //被选技能组的用户
            showticketComplate: false,
            ticketComplateData: {
                id: "",
                result: "",
                memo: "",
                skillGroupId: "",
                adminId: "",
            },
            completeResult: {
                //任务完成时，处理结果
                ticket: {},
                skillGroupId: "",
                ticketResult: [],
            },
            noticeType: {
                //通知类型
                5: "保姆任务未完成",
                6: "保姆考勤问题",
                7: "保姆服务质量质疑",
                8: "保姆服务记录差评",
                11: "管家服务质量质疑-拜访类",
                12: "雇主反馈其他问题",
                13: "保姆反馈其他问题",
                14: "管家服务质量质疑-跟进类",
            },
            ticketTaskSource: {
                //工单任务来源
                //任务来源(盒马小程序创建任务)0默认系统1雇主电话反馈,2保姆电话反馈,3雇主到店反馈,4保姆到店反馈,5雇主线下反馈
                0: "SYSTEM",
                1: "雇主电话反馈",
                2: "保姆电话反馈",
                3: "雇主到店反馈",
                4: "保姆到店反馈",
                5: "雇主线下反馈",
            },
        };
    },
    created() {
        // this.getTaskListData();
        this.getDict();
    },
    activated() {},
    methods: {
        toServiceRecord(clockId) {
            //关联保姆服务记录
            this.$emit("toTab5", clockId);
        },
        tobutlerTask(parentTaskId) {
            //拜访类任务
            this.$emit("toTab3", parentTaskId);
        },
        toSelf(noticeId) {
            //关联自己
            this.searchQuery.myNoticeId = noticeId;
            this.getTaskListData();
        },
        toupdateServantClock(noticeId, clockId) {
            //修改保姆打卡
            this.$refs.updateServantClockPage.updateServantClock(
                noticeId,
                clockId
            );
        },
        clickshowNewTask(noticeId, ticketid) {
            //点击创建任务，因为是手动创建工单
            this.$refs.butlerTicketCreatPage.clickshowNewTask(
                3, //3工单（雇主反馈，保姆反馈其他问题）
                noticeId,
                this.employRelation.id,
                this.employRelation.userButlerId,
                ticketid
            );
        },
        saveTicketComplate() {
            //工单完成时，保存
            if (this.ticketComplateData.result == "") {
                this.$message.error("请选择处理结果");
                return;
            }
            if (this.ticketComplateData.memo == "") {
                this.$message.error("请输入备注");
                return;
            }

            ticketCompleted(this.ticketComplateData)
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success("操作成功");
                        this.showticketComplate = false;
                        this.getTaskListData();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        clickshowticketComplate(ticketid) {
            //点击任务流转
            this.showticketComplate = true;

            ticketCompletedResult({
                ticketId: ticketid,
                userId: this.$store.state.user.id,
            })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.completeResult = res.data.data;
                        this.ticketComplateData = {
                            id: ticketid,
                            result: "",
                            memo: "",
                            skillGroupId: this.completeResult.skillGroupId,
                            adminId: this.$store.state.user.id,
                        };
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        saveUpgrade() {
            //工单升级流转
            if (this.ticketUpgradeData.skillGroupId == "") {
                this.$message.error("请选择技能组");
                return;
            }
            if (this.ticketUpgradeData.handler == "") {
                this.$message.error("请选择受理人");
                return;
            }
            if (this.ticketUpgradeData.memo == "") {
                this.$message.error("请输入备注");
                return;
            }

            ticketUpgrade(this.ticketUpgradeData)
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success("操作成功");
                        this.showUpgrade = false;
                        this.getTaskListData();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        selectSkill(obj) {
            //下拉框选择技能组
            // console.log(obj);
            let that = this;
            this.skillGroupUser.forEach(function (e) {
                if (e.id == obj) {
                    that.gUsers = e.userList;
                }
            });
            that.ticketUpgradeData.handler = "";
        },
        showTicketUpgrade(ticketid) {
            //点击任务流转
            this.showUpgrade = true;
            this.ticketUpgradeData = {
                id: ticketid,
                skillGroupId: "",
                memo: "",
                handler: "",
                adminId: this.$store.state.user.id,
            };

            getSkillGroupUser()
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.skillGroupUser = res.data.data;
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        addFlowUp() {
            //添加跟进记录保存
            if (this.flowupData.hmType == "") {
                this.$message.error("请选择跟进类型");
                return;
            }
            if (this.flowupData.comment == "") {
                this.$message.error("请填写跟进记录");
                return;
            }
            addTicketAction(this.flowupData)
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success("添加成功");
                        this.showflowup = false;
                        this.getTaskListData();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        showAddFlowUp(ticketid) {
            //点击添加跟进记录
            this.showflowup = true;
            this.flowupData = {
                ticketId: ticketid,
                hmType: "",
                phone: this.orderData.userCustomer.phone,
                comment: "",
            };
        },
        getDict() {
            getTicketTaskDict()
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.ticketTaskDict = res.data.data;
                        //  console.log(this.ticketTaskDict);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        getTaskListData() {
            let reqData = {
                orderId: this.orderId,
                page: this.searchQuery.page,
                limit: this.searchQuery.limit,
            };
            if (this.searchQuery.myNoticeId != "") {
                reqData.noticeId = this.searchQuery.myNoticeId;
            }
            getTaskList(reqData)
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.ticketTaskListData = res.data.data.list;
                        this.searchQuery.total = res.data.data.total;
                        //    ticketTaskListData
                        this.eachLog();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        eachLog() {
            //遍历 日志条 时间线
            this.ticketTaskListData.forEach((e) => {
                if (e.noticeUserList.length > 0) {
                    let myactivities = [];
                    for (let i = 0; i < e.noticeUserList.length; i++) {
                        if (i == 0) {
                            let tu = {
                                content: e.noticeUserList[i].noticeContent,
                                timestamp: e.noticeUserList[i].createTime,
                                size: "large",
                                type: "primary",
                                color: "#1676FB",
                            };
                            myactivities.push(tu);
                        } else {
                            let tu = {
                                content: e.noticeUserList[i].noticeContent,
                                timestamp: e.noticeUserList[i].createTime,
                            };
                            myactivities.push(tu);
                        }
                    }
                    //加入属性 时间线
                    e.timeLine = myactivities;
                }
            });
            
        },
          checkLength(data){
            if(data==undefined){
                return false;
            }
            if(data.length>0){
                return true;
            }
            return false;
        }
    },
};
</script>
<style scoped>
.hand_title2 {
    font-size: 13px;
    font-weight: 700;
    color: #000;
    border-left: 5px solid #0eaefc;
    padding-left: 5px;
    height: 20px;
    line-height: 20px;
    width: 100%;
    background: #ecf8ff;
}
.firstbf {
    background: #eee3d4;
    color: #ee984c;
    font-size: 10px;
    border-radius: 7px;
    border: 4px solid #eee3d4;
    margin-left: 20px;
}
.smsj {
    background: #c5edff;
    color: #c68d90;
    font-size: 10px;
    border-radius: 7px;
    border: 4px solid #c5edff;
    margin-left: 20px;
}
</style>