<template>
    <!--管家跟进类任务 -->
    <div>
           <!-- 查询和其他操作 -->
        <div class="filter-container">
            <el-input v-model="myParentTaskId" clearable class="filter-item" style="width: 160px;" placeholder="任务编号id" />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getVisitList">查找</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 visitListData" :key="index" :name="index" style="margin-bottom: -5px;">
                <template slot="title">
                    <div class="hand_title2">
                        <span>任务编号：{{item.id}} </span>
                        <span class="firstbf">{{getTaskTypeName(item.taskType)}}</span>
                        <span class="smsj" v-if="getFirstVistTime(item.butlerTaskChildList)!=''">{{getFirstVistTime(item.butlerTaskChildList)}}</span>
                    </div>
                </template>
                <el-row>
                    <el-col :span="6">
                        <span class="client-name">
                            任务来源:系统
                        </span>
                    </el-col>
                    <el-col :span="6">
                        <span class="client-tel">任务状态：
                            <el-tag type="success">{{item.status==1?"已完成":"跟进中"}}</el-tag>
                        </span>
                    </el-col>
                    <el-col :span="6">
                        <span class="client-tel">当前任务跟进管家：{{employRelation.butlerName}}
                        </span>
                    </el-col>
                    <el-col :span="6" v-if="item.taskType==1">
                        <span class="client-tel">{{getFirstVistTime(item.butlerTaskChildList).replace("上门","拜访")}}
                            <a @click="clickUpdateVistTime(item.butlerTaskChildList)" style="color: #1890ff"> &nbsp;修改拜访时间</a>
                        </span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18">
                        <span v-if="checkLength(item.timeLine)" class="client-name" style="color:red;"><!--color:#1676FB;-->
                            任务日志
                        </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>
                    <el-button type="primary" v-if="checkChildTaskType(item.butlerTaskChildList,6)" size="mini" @click="fwxxbc(item.butlerTaskChildList)">服务信息补充编辑</el-button>
                    <el-button type="primary" v-if="checkChildTaskType(item.butlerTaskChildList,3)" size="mini" @click="yaoqing(item.butlerTaskChildList)">邀请雇主和保姆</el-button>
                    <el-button type="primary" v-if="checkChildTaskType(item.butlerTaskChildList,5)" size="mini" @click="toServantTaskSetting(item.butlerTaskChildList)">保姆任务清单设置</el-button>
                    <el-button type="primary" v-if="checkChildTaskType(item.butlerTaskChildList,2)" size="mini" @click="addTaskTeach(item.butlerTaskChildList)">添加跟教记录</el-button>
                    <el-button type="primary" v-if="item.status==0" size="mini" @click="complateTask(item.id)">完结任务</el-button>
                     <el-button type="primary" v-if="item.status==1" size="mini" @click="clickshowNewTask(item.id)">新建任务</el-button>
                </el-row>
            </el-collapse-item>
        </el-collapse>

        <!--修改拜访时间 -->
        <el-dialog title="修改拜访时间" :visible.sync="showUpdateVisitTime" width="400px" :close-on-click-modal="false" center>
            <el-form style="align:center;">
                <el-form-item label="拜访日期">
                    <el-date-picker v-model="visitTime" :picker-options="pickerOptions" value-format="yyyy-MM-dd" />
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showUpdateVisitTime = false">取消</el-button>
                <el-button type="primary" @click="saveVisitTime">保存</el-button>
            </div>
        </el-dialog>

        <!--服务信息编辑-->
        <el-dialog title="服务信息编辑" :visible.sync="supplementEdit" width="500px" :close-on-click-modal="false" center>
            <el-form label-width="150px">
                <el-form-item label="是否需要任务打卡">
                    <el-radio-group v-model="supplementData.isNeedClock">
                        <el-radio :label="1">需要</el-radio>
                        <el-radio :label="0">雇主明确标识不需要</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="雇主登陆手机号">
                    <el-input v-model="supplementData.mobile" placeholder="请输入手机号" clearable />
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="supplementEdit = false">取消</el-button>
                <el-button type="primary" @click="saveSupplement">保存</el-button>
            </div>
        </el-dialog>

        <!--邀请主顾双方使用小程序 -->
        <el-dialog title="邀请主顾双方使用小程序" :visible.sync="showinvitation" width="600px" :close-on-click-modal="false" center>

            <el-row>
                <el-col :span="8">
                    <span class="client-name">
                        保姆姓名：{{orderData.employRelation.servantName}}
                    </span>
                </el-col>
                <el-col :span="8">
                    <span class="client-name">保姆电话：{{orderData.userServant.phone}}
                    </span>
                </el-col>
            </el-row>
            <br />
            <el-row>
                <el-col :span="8">
                    <span class="client-name">
                        雇主姓名：{{orderData.employRelation.employerName}}
                    </span>
                </el-col>
                <el-col :span="8">
                    <span class="client-name">雇主电话：{{orderData.userCustomer.phone}}
                    </span>
                </el-col>
            </el-row>

            <div slot="footer" class="dialog-footer">
                <el-button @click="showinvitation = false">取消</el-button>
                <el-button type="primary" @click="sendInvation">邀请</el-button>
            </div>
        </el-dialog>

        <!--跟教保姆记录 -->
        <el-dialog title="跟教保姆记录" :visible.sync="showinTaskTeach" width="600px" :close-on-click-modal="false" center>
            <el-row>
                <span style="font-weight: 600;">跟教任务</span>
                <span style="margin-left: 40px; color: #7FD2EA;">跟教任务数量不得少于本日任务30%</span>
            </el-row>
            <br />
            <el-form>

                <el-form-item v-for="(item,index) in servantTaskTeachDto.butlerTaskTeach" :key="index" :name="index">
                    <el-col :span=4>
                        <el-checkbox v-model="item.isChoose">{{item.taskItemName}}</el-checkbox>
                    </el-col>
                    <el-col :span="20">
                        <el-input v-if="item.isChoose" v-model="item.employTaskComment" placeholder="请输入" clearable />
                    </el-col>
                </el-form-item>

                <el-form-item label="异常状况报备">
                    <el-select v-model="servantTaskTeachDto.abnormalRecord" placeholder="无" clearable>
                        <el-option value="雇主明确拒绝" label="雇主明确拒绝" />
                        <el-option value="物损" label="物损" />
                        <el-option value="其他" label="其他" />
                    </el-select>
                </el-form-item>
                <el-form-item label="跟教记录">
                    <el-input type="textarea" :rows="3" v-model="servantTaskTeachDto.teachRecord"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showinTaskTeach = false">取消</el-button>
                <el-button type="primary" @click="saveTaskTeach">确定</el-button>
            </div>
        </el-dialog>

        <!--新建任务 拜访-->
        <butlerTicketCreatPage :taskType="2"  @callFunction="getVisitList" ref="butlerTicketCreatPage" />

    </div>

</template>
<script>
import {
    visitList,
    updateVisitTime,
    invitationUseApp,
    getServantTaskTeach,
    addServantTaskTeach,
    completeParentTask,
} from "@/api/customertask";
import { editServiceInfo, editServantRestDay } from "@/api/customerorder";
import butlerTicketCreatPage from "@/views/order/include/butlerTicketCreat.vue";
export default {
    components: {butlerTicketCreatPage},
    props: {
        orderId: "",
        employRelation: {},
        orderData: {
            employRelation: {},
            fns: [],
            orderInfo: {},
            serviceInfo: {},
            user: {},
            userCustomer: {},
            userServant: {},
            customerOrder: {},
            userButler: {},
            customerClue: {},
        },
    },
    data() {
        return {
            // activities: [
            //     {
            //         content: "支持使用图标",
            //         timestamp: "2018-04-12 20:46",
            //         size: "large",
            //         type: "primary",
            //         // type: "info",
            // icon: 'el-icon-more'
            //     },
            //     {
            //         content: "默认样式的节点",
            //         timestamp: "2018-04-03 20:46",
            //     },
            // ],
            pickerOptions: {
                firstDayOfWeek: 1,
                disabledDate(time) {
                    return time.getTime() <= Date.now() - 8.64e7; //-;
                },
            },
            activeName: 0,
            visitListData: [],
            tempChildId: "",
            visitTime: "", //拜访时间
            showUpdateVisitTime: false,
            supplementEdit: false, //服务信息补充编辑
            supplementData: {
                orderId: "",
                isNeedClock: "",
                mobile: "",
                taskChildId: "",
            },
            showinvitation: false, //邀请主顾双方使用小程序弹窗
            showinTaskTeach: false,
            checked: true,
            servantTaskTeachDto: {
                //添加跟进记录
                taskChild: {},
                butlerTaskTeach: [],
                abnormalRecord: "",
                teachRecord: "",
            },
            myParentTaskId:'',
        };
    },
    created() {
        // this.getVisitList();
    },
    activated() {},
    methods: {
         clickshowNewTask(parentTaskId) {
            //点击创建任务，因为是手动创建工单 
            this.$refs.butlerTicketCreatPage.clickshowNewTask(
                2,  // 2（管家服务资料质疑-拜访类） 
                parentTaskId,
                this.employRelation.id,
                this.employRelation.userButlerId,
                null
            );
        },
        complateTask(parentTaskId) {
            //完成拜访任务
            this.$confirm("确认已完成任务?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    // completeParentTask
                    completeParentTask({ parentTaskId: parentTaskId })
                        .then((res) => {
                            if (res.data.errno == 0) {
                                this.$message.success("操作成功");
                                this.getVisitList();
                            } else {
                                this.$message.error(res.data.errmsg);
                            }
                        })
                        .catch((e) => {
                            this.$message.error(e.data.errmsg);
                        });
                })
                .catch(() => {});
        },
        saveTaskTeach() {
            //添加跟进记录
            if (this.servantTaskTeachDto.teachRecord == "") {
                this.$message.error("跟教记录不能为空");
                return;
            }
            // if(this.servantTaskTeachDto.butlerTaskTeach.length>0){
            //     let boo=true;
            //    this.servantTaskTeachDto.butlerTaskTeach.forEach(function(e){
            //         if(e.isChoose&&e.employTaskComment==""){
            //             boo=false;
            //         }
            //     })
            //       this.$message.error("勾选的跟教任务需填写记录");
            //     return;
            // }
            let reqData = {
                taskTeah: this.servantTaskTeachDto.butlerTaskTeach,
                taskChildId: this.tempChildId,
                abnormalRecord: this.servantTaskTeachDto.abnormalRecord,
                teachRecord: this.servantTaskTeachDto.teachRecord,
            };
            addServantTaskTeach(reqData)
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success("操作成功");
                        this.getVisitList();
                        this.showinTaskTeach = false;
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        addTaskTeach(butlerTaskChildList) {
            //添加上门跟教
            this.showinTaskTeach = true;
            let id = "";
            butlerTaskChildList.forEach((e) => {
                if (e.taskDictId == 2) {
                    //上门跟教
                    id = e.id;
                }
            });
            this.tempChildId = id;
            getServantTaskTeach({ taskChildId: id })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.servantTaskTeachDto = res.data.data;
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        sendInvation() {
            //邀请主顾双方使用小程序
            invitationUseApp({ taskChildId: this.tempChildId })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success(`通知发送成功`);
                        this.showinvitation = false;
                        this.getVisitList();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        yaoqing(butlerTaskChildList) {
            this.showinvitation = true;
            let id = "";
            butlerTaskChildList.forEach((e) => {
                if (e.taskDictId == 3) {
                    //邀请使用小程序
                    id = e.id;
                }
            });
            this.tempChildId = id;
        },
        toServantTaskSetting(butlerTaskChildList) {
            //跳转到 保姆任务清单 设置
            let id = "";
            butlerTaskChildList.forEach((e) => {
                if (e.taskDictId == 5) {
                    //任务设置 日 周 月
                    id = e.id;
                }
            });
            this.$emit("toTab2", id);
            console.log(111);
        },
        fwxxbc(butlerTaskChildList) {
            //服务信息补充编辑
            let id = "";
            butlerTaskChildList.forEach((e) => {
                if (e.taskDictId == 6) {
                    id = e.id;
                }
            });
            //点击 补充编辑
            this.supplementEdit = true;
            this.supplementData = {
                orderId: this.orderData.customerOrder.id,
                isNeedClock: this.orderData.employRelation.isNeedClock,
                mobile: this.orderData.userCustomer.phone,
                taskChildId: id,
            };
        },
        saveSupplement() {
            //保存服务信息编辑
            console.log(this.supplementData);
            if (
                this.supplementData.mobile == "" ||
                this.supplementData.mobile.length != 11
            ) {
                this.$message.error("请输入正确的手机号");
                return;
            }
            editServiceInfo(this.supplementData)
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success(`操作成功`);
                        this.supplementEdit = false;
                        //刷新数据
                        this.$emit("getCustomerOrderdetail");
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        saveVisitTime() {
            //修改拜访日期
            if (this.visitTime == "" || this.visitTime == null) {
                this.$message.error("请选择拜访日期");
                return;
            }
            updateVisitTime({
                taskChildId: this.tempChildId,
                date: this.visitTime,
            })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success("操作成功");
                        this.showUpdateVisitTime = false;
                        this.getVisitList();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        clickUpdateVistTime(butlerTaskChildList) {
            //点击修改首次拜访时间
            let id = "";
            let time = "";
            butlerTaskChildList.forEach((e) => {
                if (e.taskDictId == 1) {
                    id = e.id;
                    if (e.taskChildName.indexOf(":") != -1) {
                        time = e.taskChildName.substring(
                            e.taskChildName.length - 10,
                            e.taskChildName.length
                        );
                    }
                }
            });
            this.tempChildId = id;
            this.visitTime = time;
            console.log(time);
            this.showUpdateVisitTime = true;
        },
        toGetVisitList(parentTaskId){
            this.myParentTaskId=parentTaskId;
            this.getVisitList();
        },
        getVisitList() {
            console.log("this.orderId " + this.orderId);
            let reqData={ orderId: this.orderId };
            if(this.myParentTaskId!=''){
                reqData.parentTaskId=this.myParentTaskId;
            }
            visitList(reqData)
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.visitListData = res.data.data;
                        this.eachLog();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        eachLog() {
            //遍历 日志条 时间线
            this.visitListData.forEach((e) => {
                if (e.butlerTaskLogList.length > 0) {
                    let myactivities = [];
                    for (let i = 0; i < e.butlerTaskLogList.length; i++) {
                        if (i == 0) {
                            let tu = {
                                content: e.butlerTaskLogList[i].operateContent,
                                timestamp: e.butlerTaskLogList[i].createTime,
                                size: "large",
                                type: "primary",
                                color: "#1676FB",
                            };
                            myactivities.push(tu);
                        } else {
                            let tu = {
                                content: e.butlerTaskLogList[i].operateContent,
                                timestamp: e.butlerTaskLogList[i].createTime,
                            };
                            myactivities.push(tu);
                        }
                    }
                    //加入属性 时间线
                    e.timeLine = myactivities;
                }
            });
        },
        getTaskTypeName(taskType) {
            //1首次，2周，3月
            if (taskType == 1) {
                return "保姆首次拜访任务";
            }
            if (taskType == 2) {
                return "保姆周期拜访任务";
            }
            if (taskType == 3) {
                return "保姆月度拜访任务";
            }
        },
        getFirstVistTime(datalist) {
            //获取首次拜访时间字符串
            if (datalist.length > 0) {
                let str = "";
                datalist.forEach((e) => {
                    if (e.taskDictId == 1) {
                        str = e.taskChildName;
                    }
                });
                return str;
            }
            return "";
        },
        checkChildTaskType(butlerTaskChildList, taskType) {
            //服务信息补充编辑
            let boo = false;
            butlerTaskChildList.forEach((e) => {
                if (e.taskDictId == taskType && e.status == 1) {
                    //存在且未完成
                    boo = true;
                }
            });
            return boo;
        },
        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>