<template>

    <div>
        <!--修改保姆服务记录 -->
        <el-dialog title="修改保姆服务记录" :visible.sync="showUpdateClock" width="800px" :close-on-click-modal="false" center>
            <el-form label-width="100px">

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="服务记录id">
                            <el-input style="  width: 220px;" v-model="updateClockData.id" placeholder disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名">
                            <el-input style="  width: 220px;" v-model="updateClockData.servantName" placeholder disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="服务开始时间">
                            <el-date-picker v-model="updateClockData.startWorkTime" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="  服务结束时间">
                            <el-date-picker v-model="updateClockData.endWorkTime" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="打卡结果">
                            <!-- <el-input v-model="updateClockData.status" placeholder disabled></el-input> -->
                            <el-select v-model="updateClockData.status" clearable>
                                <el-option v-for="(item,index) in clockType" :key="index" :name="index" :value="item.a" :label="item.b"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <!-- <el-form-item :label="updateClockData.isRestday==1?'休息日':'工作日'">
                        </el-form-item> -->
                        <span style="color:#0eaefc;font-weight:bold;line-height: 40px;">
                            {{updateClockData.isRestday==1?'休息日':'工作日'}}
                        </span>
                    </el-col>
                </el-row>

                <el-row>
                    <el-row>
                        <span style="color:#0eaefc;font-weight:bold;">每日任务</span>
                    </el-row>
                    <el-row>
                        <el-form-item :label="item.taskName" v-for="(item,index) in updateClockData.ervryDayList" :key="index">
                            <el-radio-group v-model="item.status">
                                <el-radio :label="1">已完成</el-radio>
                                <el-radio :label="2">无法完成</el-radio>
                                <el-radio :label="0">未完成</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-row>
                </el-row>
                <el-row v-if="updateClockData.ervryDayList==null||updateClockData.ervryDayList.length==0">
                    <br />
                </el-row>

                <el-row>
                    <el-row>
                        <span style="color:#0eaefc;font-weight:bold;">每周任务</span>
                    </el-row>
                    <el-row>
                        <el-form-item :label="item.taskName" v-for="(item,index) in updateClockData.ervryWeekList" :key="index">
                            <el-radio-group v-model="item.status">
                                <el-radio :label="1">已完成</el-radio>
                                <el-radio :label="2">无法完成</el-radio>
                                <el-radio :label="0">未完成</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-row>
                </el-row>
                <el-row v-if="updateClockData.ervryWeekList==null||updateClockData.ervryWeekList.length==0">
                    <br />
                </el-row>

                <el-row>
                    <el-row>
                        <span style="color:#0eaefc;font-weight:bold;">每月任务</span>
                    </el-row>
                    <el-row>
                        <el-form-item :label="item.taskName" v-for="(item,index) in updateClockData.ervryMonthList" :key="index">
                            <el-radio-group v-model="item.status">
                                <el-radio :label="1">已完成</el-radio>
                                <el-radio :label="2">无法完成</el-radio>
                                <el-radio :label="0">未完成</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-row>
                </el-row>

            </el-form>

            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="showUpdateClock = false">取消</el-button>
                <el-button type="primary" @click="saveUpdateServantClock">确认修改</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {
    getServantClockInfo,
    updateServantClockInfo,
} from "@/api/customerorder";
export default {
    components: {},
    props: {},
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now()-1 * 24 * 3600 * 1000||time.getTime()> Date.now();
                },
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    // {
                    //     text: "明天",
                    //     onClick(picker) {
                    //         const date = new Date();
                    //         date.setTime(date.getTime() + 3600 * 1000 * 24);
                    //         picker.$emit("pick", date);
                    //     },
                    // },
                    // {
                    //     text: '一周后',
                    //     onClick(picker) {
                    //         const date = new Date();
                    //         date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                    //         picker.$emit('pick', date);
                    //     }
                    // }
                ],
            },
            showUpdateClock: false, //修改保姆打卡
            updateClockData: {
                //修改保姆打卡数据信息展示
            },
            clockType: [
                { a: 2, b: "已完成" },
                { a: 5, b: "缺勤" },
                { a: 4, b: "请假" },
            ],
            noticeId: "",
        };
    },
    created() {},
    activated() {},
    methods: {
        saveUpdateServantClock() {
            let reqData = {
                employClockId: this.updateClockData.employRelationId,
                startWorkTime: this.updateClockData.startWorkTime,
                endWorkTime: this.updateClockData.endWorkTime,
                status: this.updateClockData.status,
                noticeId: this.noticeId,
                ervryDayList: this.updateClockData.ervryDayList,
                ervryWeekList: this.updateClockData.ervryWeekList,
                ervryMonthList: this.updateClockData.ervryMonthList,
            };
            updateServantClockInfo(reqData)
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success("修改成功");
                        this.showUpdateClock = false;
                        this.$emit("callFunction");
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        updateServantClock(noticeId, clockId) {
            //修改保姆服务记录
            this.showUpdateClock = true;
            this.noticeId = noticeId; //关联通知
            getServantClockInfo({ employClockId: clockId })
                .then((res) => {
                    this.updateClockData = res.data.data;
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
    },
};
</script>
