<template>
<!--客户信息和订单信息 -->
    <div>
        <!--客户和保姆信息 -->
        <div class="panel-wrapper1">
            <!--客户信息 -->
            <div class="left_customer">
                <el-card>
                    <div class="hand_title">雇主信息</div>
                    <el-row class="row-mp">
                        <el-col :span="7">
                            <span class="client-name">
                                客户名称: {{orderData.employRelation.employerName}}
                            </span>
                        </el-col>
                        <el-col :span="7">
                            <span class="client-tel">客户身份：客户
                            </span>
                        </el-col>
                        <el-col :span="10">
                            <span class="client-tel">联系方式： {{orderData.userCustomer.phone}}
                            </span>
                        </el-col>
                    </el-row>
                    <el-row class="row-mp">
                        <br />
                    </el-row>
                    <el-row class="row-mp">
                        <el-col :span="7">
                            <span class="client-name"> 
                                渠道: {{channelsFilter(orderData.user.channelId) }}
                            </span>
                        </el-col>
                        <el-col :span="7">
                            <span class="client-tel">来源：{{source[orderData.user.source]}}
                            </span>
                        </el-col>
                    </el-row>

                </el-card>
            </div>

            <!--保姆信息 -->
            <div class="right_servant">
                <el-card>
                    <div class="hand_title">保姆信息</div>
                    <el-row class="row-mp">
                        <el-col :span="8">
                            <span class="client-name">
                                保姆名称:{{orderData.employRelation.servantName}}
                            </span>
                        </el-col>
                        <el-col :span="8">
                            <span class="client-tel">保姆身份：保姆
                            </span>
                        </el-col>
                    </el-row>

                    <el-row class="row-mp">
                        <br />
                    </el-row>

                    <el-row class="row-mp">
                        <el-col :span="16">
                            <span class="client-tel">联系方式： {{orderData.userServant.phone}}</span>
                        </el-col>
                    </el-row>

                </el-card>
            </div>
        </div>

        <!--订单信息 -->
        <el-collapse v-model="activeName" accordion style="bottom:0px;">
            <el-collapse-item name="1" style="margin-bottom: -5px;">
                <template slot="title">
                    <div class="hand_title2">
                        订单编号：{{orderData.customerOrder.orderNo}} 
                        <el-tag type="success">{{customerOrderStatusFilter(orderData.customerOrder.state)}}</el-tag>
                    </div>
                </template>
                <el-card class="orderinfoclass">

                    <el-row class="row-mp">
                        <el-col :span="8">
                            <span class="client-name">
                                订单渠道: {{orderData.customerClue.resource}} 
                            </span>
                        </el-col>
                        <el-col :span="8">
                            <span class="client-tel">订单来源：星海系统
                            </span>
                        </el-col>
                        <el-col :span="8">
                            <span class="client-tel">订单负责管家：{{orderData.orderInfo.charge_name}}
                            </span>
                        </el-col>
                    </el-row>
                    <el-row><br /></el-row>
                    <el-row class="row-mp">
                        <el-col :span="8">
                            <span class="client-name">
                                居间合同状态: 
                                 <el-tag type="success">{{contractStateFilter(orderData.orderInfo.contract_state)}}</el-tag>
                            </span>
                        </el-col>
                        <el-col :span="8">
                            <span class="client-tel">合同期限：{{formateDay(orderData.serviceInfo.serviceStartTime)}} ~ 
                                {{formateDay(orderData.serviceInfo.serviceEndTime)}}
                            </span>
                        </el-col>
                        <el-col :span="8">
                            <span class="client-tel">合同金额：{{orderData.orderInfo.contract_amount}}
                            </span>
                        </el-col>
                    </el-row>
                    <el-row><br /></el-row>
                    <el-row class="row-mp">
                        <el-col :span="8">
                            <span class="client-name">
                                服务模式:{{serviceModelFilter(orderData.customerClue.serviceModel)}}
                            </span>
                        </el-col>
                         
                        <el-col :span="8">
                            <span class="client-tel">城市：{{orderData.orderInfo.city_name}}
                            </span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-collapse-item>
        </el-collapse>

    </div>

</template>
<script>
import { customerOrderdetail } from "@/api/customerorder";
import { allChannel } from "@/api/channel";
const customerOrderStatus = {
    0: "待签约 ",
    1: "待上户",
    2: "上户中",
    3: "已解约",
    4: "已到期",
    
};
const contractState = {
    0: "生效中 ",
    1: "已解约",
    2: "待审核",
    3: "签署失败",
    4: "待签署",
    5: "解约中",
    6: "已到期",
    
}; 
const serviceModel={ 
    1: "钟点工",
    2: "白班保姆",
    3: "住家保姆",
    4: "月嫂",
    5: "代班保姆-终点工",
    6: "代班保姆-保姆",
}
export default {
    components: {},
    props: {
        orderId: "",
        orderData: {
                employRelation: {},
                fns: [],
                orderInfo: {},
                serviceInfo: {},
                user: {},
                userCustomer: {},
                userServant: {},
                customerOrder:{},
                userButler:{},
                customerClue:{},
            },
            channels:Array,
    },
    data() {
        return {
            activeName: "1",  
            source: {
                xinghai: "星海",
                saasmall: "saas商城",
                jzmall: "鲸致商城",
                hema: "盒马",
                IB: "进电",
                OB: "外拨",
                IM: "聊天工具",
                EMAILL: "邮件",
                APP: "APP",
                H5: "H5",
                Other: "其他",
            },
             customerOrderStatus,
            contractState,
            serviceModel,
        };
    },
    created() {
      
    },
    activated() {},
    methods: {
       
        channelsFilter(value) {
            let nm = "";
            this.channels.forEach((item) => {
                if (item.id == value) {
                    nm = item.name;
                }
            });
            return nm;
        },
        customerOrderStatusFilter(row) { 
             return customerOrderStatus[row];
        },
         contractStateFilter(row){
            return contractState[row];
        },
        serviceModelFilter(row){
            return serviceModel[row];
        }
    },
};
</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;
}
.hand_title2 {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    border-left: 5px solid #0eaefc; 
    margin-left: 15px;
    padding-left: 8px;
    height: 25px;
    line-height: 25px;
}
.panel-wrapper1 {
    display: flex;
    margin-top: 10px;
    width: 100%;
    height: 150px;
    /* border: 1px solid red; */
}
.left_customer {
    flex: 1.1;
    margin: 10px;
}

.right_servant {
    flex: 0.9;
    /* min-width: 300px; */
    margin: 10px;
}
.card-margins {
    margin: 10px;
}
.orderinfoclass {
    margin: 0px 10px 10px 10px;
    border-top: 0px;
}
</style>