<template>

    <div>
          <!-- 查询和其他操作 -->
        <div class="filter-container">
            <el-input v-model="listQuery.clockId" clearable class="filter-item" style="width: 160px;" placeholder="打卡id" />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">查找</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-table :data="listdata" element-loading-text="正在查询中。。。" border fit highlight-current-row>

            <el-table-column align="center" label="服务id" prop="id" />
            <el-table-column align="center" label="保姆" prop="servantName" />
            <el-table-column align="center" label="服务记录状态" prop="status">
                <template slot-scope="scope">
                    {{filterClockState(scope.row.status)}}
                </template>
            </el-table-column>
            <el-table-column align="center" label="服务开始时间" prop="startWorkTime" />
            <el-table-column align="center" label="服务结束时间" prop="endWorkTime" />
            <el-table-column align="center" label="用户评价" prop="star">
                <template slot-scope="scope">{{scope.row.star==null?"":scope.row.star+"星"}} </template>
            </el-table-column>
            <el-table-column align="center" label="是否为工作日" prop="isRestday">
                <template slot-scope="scope">{{scope.row.isRestday==1?"休息日":"工作日"}}</template>
            </el-table-column>

            <el-table-column align="center" label="操作" min-width="100" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <!-- <el-button v-permission="['GET /admin/customerOrder/detail']" type="primary" size="mini" @click="handleDetail(scope.row)">详情</el-button> -->
                    <el-button  type="primary" size="mini" @click="handleDetail(scope.row)">详情</el-button>

                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

        <!--保姆服务记录详情 -->
        <el-dialog title="保姆服务记录详情" :visible.sync="showDetail" width="700px" :close-on-click-modal="false" center>
            <el-row>
                服务开始时间：{{detailInfo.hmEmployClock.startWorkTime}}
            </el-row>
            <br />
            <el-row>
                服务结束时间：{{detailInfo.hmEmployClock.endWorkTime}}
            </el-row>
            <br />
            <el-row>
                <el-row>
                    任务打卡记录
                </el-row>
                <br />
                <el-row>
                    <span class="dalei">日任务</span><br />
                    <div class="renwu">
                        <span v-for="(items,indexs) in detailInfo.dayTask" :key="indexs">
                            {{items.item_name}} &nbsp;&nbsp; {{filterTaskState(items.state)}}
                            <span v-if="items.state==2" style="color:#40ccf7"> > </span>
                            {{filterinCompleteReason(items.incomplete_reason)}}
                            <br />
                        </span>
                    </div>
                </el-row>

                <el-row>
                    <span class="dalei">周任务</span><br />
                    <div class="renwu">
                        <span v-for="(items,indexs) in detailInfo.weekTask" :key="indexs">
                            {{items.item_name}} &nbsp;&nbsp; {{filterTaskState(items.state)}}
                            <span v-if="items.state==2" style="color:#40ccf7"> > </span>
                            {{filterinCompleteReason(items.incomplete_reason)}}
                            <br />
                        </span>
                    </div>
                </el-row>

                <el-row>
                    <span class="dalei">月任务</span><br />
                    <div class="renwu">
                        <span v-for="(items,indexs) in detailInfo.monthTask" :key="indexs">
                            {{items.item_name}} &nbsp;&nbsp; {{filterTaskState(items.state)}}
                            <span v-if="items.state==2" style="color:#40ccf7"> > </span>
                            {{filterinCompleteReason(items.incomplete_reason)}}
                            <br />
                        </span>
                    </div>
                </el-row>

            </el-row>
            <br />

            <el-row>
                评价星级：{{detailInfo.hmComment==null?"":detailInfo.hmComment.star}}星
            </el-row>
            <br />

            <el-row>
                评价内容：{{detailInfo.hmComment==null?"":detailInfo.hmComment.comments}}
            </el-row>

            <div slot="footer" class="dialog-footer" style="text-align: center;">
                 <el-button type="primary" size="mini" @click="clickshowNewTask">新建任务</el-button>
                <el-button @click="showDetail = false">关闭</el-button>
            </div>
        </el-dialog>

        <!--新建任务 保姆打卡任务-->
        <butlerTicketCreatPage :taskType="1" @callFunction="getList" ref="butlerTicketCreatPage" />
    </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import { taskClockList, taskClockDetail } from "@/api/customerorder";
import butlerTicketCreatPage from "@/views/order/include/butlerTicketCreat.vue";
//0未打卡，1上班，2下班，3发起请假,4请假中，5到了时间就缺勤
const clockState = {
    0: "未打卡",
    1: "打卡-上班",
    2: "打卡-下班",
    3: "发起请假",
    4: "请假中",
    5: "缺勤",
};
const incompleteReasons = {
    1: "任务太多",
    2: "我不会",
    3: "任务不详细",
};

const taskState = {
    0: "未完成",
    1: "已完成",
    2: "无法完成",
    3: "已过期",
};
export default {
    components: { Pagination,butlerTicketCreatPage },
    props: {
        orderId: "",
        employRelation:{},
    },
    data() {
        return {
            showDetail: false,
            listdata: [],
            total: 0,
            listQuery: {
                page: 1,
                limit: 10,
                id: "",
                clockId:'',
            },
            detailInfo: {
                hmEmployClock: {},
                dayTask: [],
                weekTask: [],
                monthTask: [],
                hmComment: {},
            },
        };
    },
    created() {
        // this.getList();
    },
    activated() {},
    methods: {
           clickshowNewTask() {
               if( this.detailInfo.hmEmployClock==null){
                    this.$message.error("关联打卡id数据异常");
                   return;
               }
            //点击创建任务，因为是手动创建工单 
            this.$refs.butlerTicketCreatPage.clickshowNewTask(
                1,  // 1（保姆任务类） 
                this.detailInfo.hmEmployClock.id,
                this.employRelation.id,
                this.employRelation.userButlerId,
                null
            );
        },
        toGetList(clockId){
            //从其他tab页跳转
            this.listQuery.clockId=clockId;
            this.getList();
        },
        getList() {
            this.listQuery.id = this.orderId;
 
            taskClockList(this.listQuery)
                .then((res) => {
                    this.listdata = res.data.data.list;
                    this.total = res.data.data.total;
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        handleDetail(row) {
            this.showDetail = true;
            taskClockDetail({ id: row.id })
                .then((res) => {
                    this.detailInfo = res.data.data;
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        filterClockState(state) {
            return clockState[state];
        },
        filterinCompleteReason(reason) {
            return incompleteReasons[reason];
        },
        filterTaskState(state) {
            return taskState[state];
        },
    },
};
</script>
<style scoped>
.renwu {
    margin-left: 80px;
    line-height: 30px;
}
.dalei {
    margin-left: 40px;
    font-weight: bold;
}
</style>