<template>
    <div>
        <!--客户和保姆信息,订单信息-->
        <customerAndOrderPage :orderId="orderId" :orderData="orderData" :channels="channels" ref="customerAndOrderPage" />

        <el-card class="orderinfoclass">
            <el-row>
                <!-- <div class="hand_title">关联信息</div> -->

                <el-tabs style="margin-top:-20px;" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="服务信息" name="1">
                        <customerServiceInfoPage @getCustomerOrderdetail="getCustomerOrderdetail" :orderId="orderId" :orderData="orderData" :channels="channels" ref="customerServiceInfoPage" />
                    </el-tab-pane>

                    <el-tab-pane label="保姆任务清单" name="2">
                        <servantTaskSettingPage :orderId="orderId" :taskChildId="taskChildId" ref="servantTaskSettingPage" />
                    </el-tab-pane>

                    <el-tab-pane label="管家拜访" name="3">
                        <butlerTaskPage @getCustomerOrderdetail="getCustomerOrderdetail" @toTab2="toTab2" :orderId="orderId" :employRelation="orderData.employRelation" :orderData="orderData" ref="butlerTaskPage" />
                    </el-tab-pane>

                    <el-tab-pane label="管家工单" name="4">
                        <butlerTicketTaskPage @toTab5="toTab5" @toTab3="toTab3" @getCustomerOrderdetail="getCustomerOrderdetail" :orderId="orderId" :employRelation="orderData.employRelation" :orderData="orderData" ref="butlerTicketTaskPage" />

                    </el-tab-pane>
                    <el-tab-pane label="保姆服务记录" name="5">
                        <servantServiceRecordPage :orderId="orderId" :employRelation="orderData.employRelation" ref="servantServiceRecordPage" />
                    </el-tab-pane>

                </el-tabs>

            </el-row>
        </el-card>

    </div>

</template>
<script>
import { customerOrderdetail } from "@/api/customerorder";
import { allChannel } from "@/api/channel";
import customerAndOrderPage from "@/views/order/include/customerAndOrder.vue";
import customerServiceInfoPage from "@/views/order/include/customerServiceInfo.vue";
import servantTaskSettingPage from "@/views/order/include/servantTaskSetting.vue";
import servantServiceRecordPage from "@/views/order/include/servantServiceRecord.vue";
import butlerTaskPage from "@/views/order/include/butlerTask.vue";
import butlerTicketTaskPage from "@/views/order/include/butlerTicketTask.vue";

export default {
    components: {
        customerAndOrderPage,
        customerServiceInfoPage,
        servantTaskSettingPage,
        servantServiceRecordPage,
        butlerTaskPage,
        butlerTicketTaskPage,
    },
    data() {
        return {
            orderId: this.$route.query.orderId,
            orderData: {
                employRelation: {},
                fns: [],
                orderInfo: {},
                serviceInfo: {},
                user: {},
                userCustomer: {},
                userServant: {},
                customerOrder: {},
                userButler: {},
                customerClue: {},
            },
            channels: [],
            activeName: "1",
            taskChildId: "",
        };
    },
    created() {
        this.getChannel();
        this.getCustomerOrderdetail();
    },
    activated() {},
    methods: {
        toTab3(parentTaskId) {
            //从子页面跳 管家拜访任务
            this.activeName = "3";
            this.$refs.butlerTaskPage.toGetVisitList(parentTaskId);
        },
        toTab2(taskChildId) {
            //从子页面跳 保姆任务清单
            this.taskChildId = taskChildId;
            this.activeName = "2";
            console.log(2222);
        },
        toTab5(clockId) {
            //从子页面跳 保姆服务记录
            this.activeName = "5";
            this.$refs.servantServiceRecordPage.toGetList(clockId);
        },
        getCustomerOrderdetail() {
            //客户信息，保姆信息，订单信息
            customerOrderdetail({ id: this.orderId })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.orderData = res.data.data;
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        getChannel() {
            allChannel().then((res) => {
                this.channels = res.data.data;
            });
        },
        handleClick(tab, event) {
            console.log(tab);
            this.activeName = tab.name;
            if (tab.name == "2") {
                this.$refs.servantTaskSettingPage.getTaskItemList(1);
                this.$refs.servantTaskSettingPage.getTaskItemList(2);
                this.$refs.servantTaskSettingPage.getTaskItemList(3);
            }
            if (tab.name == "3") {
                this.$refs.butlerTaskPage.getVisitList();
            }
            if (tab.name == "4") {
                this.$refs.butlerTicketTaskPage.getTaskListData();
            }
            if (tab.name == "5") {
                this.$refs.servantServiceRecordPage.getList();
            }
        },
    },
};
</script>
<style scoped>
.hand_title {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    border-left: 5px solid #0eaefc;
    padding-left: 8px;
    margin-bottom: 15px;
    margin-top: -5px;
}
.card-margins {
    margin: 10px;
}
.orderinfoclass {
    margin: 0px 10px 10px 10px;
    /* border-top: 0px; */
}
</style>