<template>
    <!--服务信息--->
    <div>
        <el-row class="row-mp">
            <el-col :span="8">
                <span class="client-name">
                    服务地址: {{orderData.serviceInfo.serviceAddress}}
                </span>
            </el-col>
            <el-col :span="8">
                <span class="client-tel">是否需要任务打卡：{{orderData.employRelation.isNeedClock==1?"需要":"不需要"}}
                </span>
            </el-col>
            <el-col :span="8">
                <span class="client-tel">首次上门时间：{{formateDay(orderData.employRelation.firstServiceTime)}}
                </span>
            </el-col>
        </el-row>
        <el-row><br /></el-row>
        <el-row class="row-mp">
            <el-col :span="8">
                <span class="client-name">
                    保姆休息: {{orderData.serviceInfo.offDay}}
                </span>
            </el-col>
            <el-col :span="8">
                <span class="client-name">
                    服务阶段: {{datedifference(orderData.employRelation.firstServiceTime,new Date())}}
                </span>
            </el-col>
            <el-col :span="8">
                <span class="client-tel">雇主登录手机号：{{orderData.userCustomer.phone}}
                </span>
            </el-col>
        </el-row>
        <el-row><br /></el-row>
        <el-row class="row-mp">
            <el-col :span="8">
                <span class="client-name">
                    发薪方式: {{getSalaryType()}}
                </span>
            </el-col>
            <el-col :span="8">
                <span class="client-tel">薪资金额： {{getSalaryAmount()}}
                </span>
            </el-col>
            <el-col :span="8">
                <span class="client-tel">发薪日：{{orderData.serviceInfo.payday}}号
                </span>
            </el-col>
        </el-row>
        <el-row><br /></el-row>
        <el-row class="row-mp">
            <el-col :span="8">
                <span class="client-name">
                    法定节假日薪资倍数: {{orderData.serviceInfo.workerMultiple}}倍
                </span>
            </el-col>
            <el-col :span="8">
                <span class="client-tel">加班薪资：{{orderData.serviceInfo.offMultiple}}倍
                </span>
            </el-col>
            <el-col :span="8">
                <span class="client-tel">当月薪资：{{orderData.totalIncome}}
                    <a @click="clicshowSalary" style="color: #1890ff">&nbsp; &nbsp;查看历史薪资</a>
                </span>
            </el-col>
        </el-row>
        <el-row><br /></el-row>
        <el-row class="row-mp">
            <el-col :span="16">
                <span class="client-name">
                    休息日:
                    <!-- {{orderData.employRelation.restDay}} -->
                    <a @click="clicshowRestDay" style="color: #1890ff">&nbsp; &nbsp;查看休息日</a>
                </span>
            </el-col>
        </el-row>
        <el-row><br /></el-row>
        <el-row>
            <el-button type="primary" size="mini" @click="clickSupplementEdit">补充编辑</el-button>
            <el-button type="primary" size="mini" @click="clickEditRestDay">编辑休息日</el-button>
            <el-button type="primary" size="mini" @click="showinvitation = true">邀请雇主和保姆</el-button>
        </el-row>
        <el-row><br /></el-row>

        <!--服务信息编辑-->
        <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="showRestDay" width="700px" :close-on-click-modal="false" center>
            <el-form>
                <el-form-item>
                    <el-calendar>
                        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                        <template slot="dateCell" slot-scope="{date, data}">
                            <span v-if="false">{{date}}不报错</span>
                            <p :class="data.isSelected ? 'is-selected' : ''">
                                {{ data.day.split('-').slice(1).join('-') }} {{calendarFilter(data)?'✔️' : ''}}
                            </p>
                        </template>
                    </el-calendar>
                    <!-- <el-date-picker v-model="chooseRestDate" ref="refChooseRestDate" :picker-options="{'firstDayOfWeek': 1}" type="dates" @change="showRestDayChange" /> -->
                </el-form-item>
                <!-- <el-form-item label="已选休息日">
                    <span v-for="(item,index) in chooseRestDate" :key="index">{{formateDay(item)}} &nbsp;&nbsp;&nbsp;&nbsp;</span>
                </el-form-item> -->
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="showRestDay = false">关闭</el-button>
            </div>
        </el-dialog>

        <!--编辑休息日-->
        <el-dialog title="编辑休息日" :visible.sync="showEditRestDay" width="700px" :close-on-click-modal="false" center>
            <el-form style="align:center;">
                <el-form-item label="合同约定休息天数">
                    {{this.orderData.serviceInfo.monthRestDays}} 天
                </el-form-item>
                <el-form-item label="选择休息日">
                    <el-date-picker v-model="chooseRestDate" :picker-options="pickerOptions" type="dates" />
                    <el-button @click="chooseRestDate=[]">重新选择</el-button>
                </el-form-item>

                <el-form-item label="已选休息日">
                    <span v-for="(item,index) in chooseRestDate" :key="index">{{formateDay(item)}} &nbsp;&nbsp;&nbsp;&nbsp;</span>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="showEditRestDay = false">取消</el-button>
                <el-button type="primary" @click="saveRestDay">保存</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="showhistorysalary" width="600px" :close-on-click-modal="false" center>

            <el-row style="font-weight:bold;">
                <el-col :span="8">
                    <span class="client-name">
                       年月
                    </span>
                </el-col>
                <el-col :span="8">
                    <span class="client-name">状态
                    </span>
                </el-col>
                <el-col :span="8">
                    <span class="client-name">薪资
                    </span>
                </el-col>
            </el-row>
            <br/>
            <el-row v-for="(item,index) in historysalaryData" :key="index">
                <el-col :span="8">
                    <span class="client-name">
                        {{item.yyyyMM}}
                    </span>
                </el-col>
                <el-col :span="8">
                    <span class="client-name">{{item.description}}
                    </span>
                </el-col>
                <el-col :span="8">
                    <span class="client-name"> {{item.income}}
                    </span>
                </el-col>
            </el-row>
            <br />

            <div slot="footer" class="dialog-footer">
                <el-button @click="showhistorysalary = false">关闭</el-button>
            </div>
        </el-dialog>

    </div>

</template>
<script>
import {
    editServiceInfo,
    editServantRestDay,
    getHistoryIncome,
} from "@/api/customerorder";
import { invitationUseAppByOrder } from "@/api/customertask";
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 {
            currentDay: new Date(),
            pickerOptions: {
                firstDayOfWeek: 1,
                disabledDate(time) {
                    // return time.getTime() < Date.now()- 8.64e7; //-;
                    return (
                        time.getTime() > Date.now() + 60 * 24 * 60 * 60 * 1000
                    );
                },
            },
            showEditRestDay: false, //编辑休息日
            showRestDay: false, //查看休息日
            chooseRestDate: [],
            showchooseRestDate: [],
            supplementData: {
                orderId: "",
                isNeedClock: "",
                mobile: "",
            },
            supplementEdit: false, //补充编辑
            activeName: "1",
            source: {
                xinghai: "星海",
                saasmall: "saas商城",
                jzmall: "鲸致商城",
                hema: "盒马",
                IB: "进电",
                OB: "外拨",
                IM: "聊天工具",
                EMAILL: "邮件",
                APP: "APP",
                H5: "H5",
                Other: "其他",
            },
            customerOrderStatus,
            contractState,
            serviceModel,
            showinvitation: false, //邀请雇主保姆使用小程序
            showhistorysalary: false,
            historysalaryData: [],
        };
    },
    created() {},
    activated() {},
    methods: {
        clicshowSalary() {
            //查看历史薪资
            this.showhistorysalary = true;
            getHistoryIncome({ id: this.orderId })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.historysalaryData = res.data.data;
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        sendInvation() {
            //邀请主顾双方使用小程序
            invitationUseAppByOrder({
                orderNo: this.orderData.serviceInfo.orderNo,
            })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success(`通知发送成功`);
                        this.showinvitation = false;
                        this.$emit("getCustomerOrderdetail");
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        saveRestDay() {
            //保存休息日；
            let str = "";
            if (this.chooseRestDate.length > 0) {
                // if (
                //     this.chooseRestDate.length >
                //     this.orderData.serviceInfo.monthRestDays
                // ) {
                //     this.$message.error("所选休息天数超过合同约定天数");
                //     return;
                // }

                this.chooseRestDate.forEach((e) => {
                    str = str + this.formateDay(e) + ",";
                });
                str = str.substring(0, str.length - 1);
            }
            console.log(str);
            editServantRestDay({
                employRelationId: this.orderData.employRelation.id,
                restDay: str,
            })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success(`操作成功`);
                        this.showEditRestDay = false;
                        //刷新数据
                        this.$emit("getCustomerOrderdetail");
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        clickEditRestDay() {
            //点击编辑休息日
            this.showEditRestDay = true;
            if (this.orderData.employRelation.restDay != "") {
                let restd = this.orderData.employRelation.restDay.split(",");
                this.chooseRestDate = [];
                restd.forEach((e) => {
                    this.chooseRestDate.push(
                        new Date(new Date(e).setHours(0, 0, 0, 0))
                    );
                });
            }
        },
        showRestDayChange(e) {
            //不许他点击
            if (this.orderData.employRelation.restDay != "") {
                let restd = this.orderData.employRelation.restDay.split(",");
                this.chooseRestDate = [];
                restd.forEach((e) => {
                    this.chooseRestDate.push(
                        new Date(new Date(e).setHours(0, 0, 0, 0))
                    );
                });
            }
        },
        clicshowRestDay() {
            //点击查看休息日
            this.showRestDay = true;
            if (this.orderData.employRelation.restDay != "") {
                this.showchooseRestDate = this.orderData.employRelation.restDay.split(
                    ","
                );
            }
            // let that = this;
            // setTimeout(() => {
            //     that.$refs.refChooseRestDate.focus(); //聚焦到时间
            // }, 200);
        },
        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);
                });
        },
        clickSupplementEdit() {
            //点击 补充编辑
            this.supplementEdit = true;
            this.supplementData = {
                orderId: this.orderData.customerOrder.id,
                isNeedClock: this.orderData.employRelation.isNeedClock,
                mobile: this.orderData.userCustomer.phone,
            };
        },
        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];
        },
        calendarFilter(date) {
            //展示日历打勾
            console.log(date);
            let boo = false;
            this.showchooseRestDate.forEach((e) => {
                if (e == date.day) {
                    boo = true;
                }
            });
            return boo;
        },
        getSalaryType() {
            if (this.orderData.serviceInfo.monthlySalary > 0) {
                return "月薪";
            }
            if (this.orderData.serviceInfo.daySalary > 0) {
                return "日薪";
            }
            if (this.orderData.serviceInfo.hourlySalary > 0) {
                return "时薪";
            }
        },
        getSalaryAmount() {
            if (this.orderData.serviceInfo.monthlySalary > 0) {
                return this.orderData.serviceInfo.monthlySalary;
            }
            if (this.orderData.serviceInfo.daySalary > 0) {
                return this.orderData.serviceInfo.daySalary;
            }
            if (this.orderData.serviceInfo.hourlySalary > 0) {
                return this.orderData.serviceInfo.hourlySalary;
            }
        },
        datedifference(sDate1, sDate2) {
            //sDate1和sDate2是2006-12-18格式
            var dateSpan, tempDate, iDays;
            sDate1 = Date.parse(sDate1);
            sDate2 = Date.parse(sDate2);
            dateSpan = sDate2 - sDate1;
            dateSpan = Math.abs(dateSpan);
            iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
            if (iDays > 30) {
                return "稳定期客户";
            }
            return "磨合期客户";
        },
    },
};
</script>
<style >
.el-calendar-table .el-calendar-day {
    height: 40px;
    line-height: 5px;
    padding-left: 10px;
}
</style>
<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;
}
.is-selected {
    color: #1989fa;
}
</style>