<template>
    <div class="content">
        <div class="container">
            <!-- <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="月份">
                    <el-date-picker v-model="month" type="month" placeholder="选择日期" value-format="yyyy-MM" />
                </el-form-item>
                <el-button icon="el-icon-search" type="primary" plan @click="getServant">查询</el-button>
            </el-form> -->
            <div style="color:red;font-size:11px">tips：只显示在职或离职一个月内的员工</div>
            <el-tabs v-model="activeName" @tab-click="tabclick">
                <el-tab-pane v-for="item in cityList" :key="item.id" :name="item.cityName"
                    :label="item.cityName"></el-tab-pane>
            </el-tabs>

            <div class="servant-area">
                <el-radio-group v-model="stationCode" @change="stationChange">
                    <el-radio-button label="全部" value="全部" key="全部"></el-radio-button>
                    <el-radio-button v-for="item in stations" :label="item" :value="item" :key="item"></el-radio-button>
                </el-radio-group>
                <!-- <div style="color: #666;font-size: 11px;padding: 10px;">{{ listQuery.nucleicDate }}：{{ title }}</div> -->
                <div style="display: flex;flex-wrap: wrap;cursor: pointer;overflow: auto;">
                    <div v-for="(item, index) in workerList" :key="index" @click="handleClickWorker(item)">
                        <div class="worker" v-if="stationCode == '全部' || stationCode == '' || item.station == stationCode">
                            <div class="worker_name" style="display:flex;justify-content: space-between;">
                                {{ item.workerName }}
                                <div style="font-size: 8px;font-weight: 400;margin-top: 8px;">{{ item.station }}</div>
                                <i v-if="item.state == 2" style="color:#09afff;font-size: 18px;" class="el-icon-user"></i>
                                <i v-else style="color:red;font-size: 18px;" class="el-icon-user"></i>
                            </div>
                            <div class="bbt"><span>当月单量</span><span class="bbt_v">{{ item.total }} 单</span></div>
                            <div class="bbt"><span>已服务单</span><span class="bbt_v">{{ item.serviced }} 单</span></div>
                            <div class="bbt"><span>当月复购</span><span class="bbt_v">开发中</span></div>
                        </div>
                    </div>
                    <div v-if="workerList.length == 0" style="text-align: center;"><span>无服务人员</span></div>
                </div>
            </div>

        </div>

        <!-- 点击每日工单 查看工单明细 -->
        <el-dialog :title="dialogTradeFormTitle + '工单明细'" :visible.sync="dialogTradeFormVisible" width="1180px">
            <!-- <div style="color:red">tips:此列表不包括已取消的工单</div> -->
            <el-calendar v-model="calendarDate">
                <template slot="dateCell" slot-scope="{date, data}">
                    <div :class="{ 'sche_cell_over': currDate > data.day.split('-').slice(1).join('-') }">
                        <div :class="{ 'sche_title': 1 == 1 }">{{ formatSchDate(data.day) }}</div>
                        <div style="margin-top:10px">
                            <div v-for="(item, index) in trades" :key="index">
                                <div class="sche_cell" v-if="data.day == item.bookDate">
                                    <div>{{ item.bookStartTime }}-{{ item.bookEndTime }} <span style="font-size:9px">{{
                                        item.statusTxt }}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </el-calendar>

            <div style="padding:0 20px 0">
                <el-table :data="bookDetails" v-loading="listLoading" border style="width: 100%" class="table">
                    <el-table-column prop="consignee" label="客户" width="100px"> </el-table-column>
                    <el-table-column prop="mobile" label="电话" width="120px"></el-table-column>
                    <el-table-column prop="address" label="服务地址"></el-table-column>
                    <el-table-column prop="goodsName" label="服务项" width="180px"></el-table-column>
                    <el-table-column prop="bookDate" label="上门时段" width="180px">
                        <template slot-scope="scope">
                            {{ scope.row.bookDate }}
                            {{ scope.row.bookStartTime }}- {{ scope.row.bookEndTime }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="servantName" label="服务人员"></el-table-column> -->
                    <el-table-column prop="statusTxt" label="工单状态" width="100px"></el-table-column>
                    <el-table-column align="center" label="操作" class-name="small-padding fixed-width" width="100px"
                        fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" icon="el-icon-edit"
                                @click="handleBook(scope.row)">去处理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTradeFormVisible = false">确定</el-button>
            </div>

        </el-dialog>

    </div>
</template>
<script>
import moment from "moment";
import { getUserCity } from "@/api/city";
import { getUserByCity, getBookList } from "@/api/orderServant";

export default {
    components: {},
    data() {
        return {
            month: moment(new Date()).format("YYYY-MM"),
            currDate: moment(new Date()).format("MM-dd"),//当前时间
            calendarDate: new Date(),
            activeName: "",
            listLoading: false,
            cityList: [], //城市 c
            workerList: [],
            dialogTradeFormVisible: false,
            dialogTradeFormTitle: '',
            trades: [],//工单信息 
            bookDetails: [],
            servantId: '',
            stationCode: '全部',
            stations: [],
            workers: []//查询后的缓存数据
        };
    },
    created() {
        this.getCity();
    },
    watch: {
        calendarDate(val, oldVal) {
            // console.info( moment(val).format("YYYY-MM-DD"))
            if (val && moment(val).format("YYYY-MM") != moment(oldVal).format("YYYY-MM")) {
                this.getBookList(moment(val).format("YYYY-MM"));
            }
            if (val && moment(val).format("YYYY-MM-DD") != moment(oldVal).format("YYYY-MM-DD")) {
                this.calendarClick(moment(val).format("YYYY-MM-DD"));
            }
        }
    },
    methods: {
        //获取登录用户的城市权限
        getCity() {
            getUserCity().then((res) => {
                this.cityList = res.data.data;
                this.activeName = this.cityList[0].cityName;
                this.getServant();
            });
        },
        handleBook(row) {
            this.dialogTradeFormVisible = false;
            this.$router.push({
                path: '/order/serviceorder',
                query: { orderId: row.orderId }
            })
        },
        getServant() {
            this.stationCode = '全部';
            let data = this.workers.filter(item => item.city == this.activeName);
            console.info(data)
            if (data.length > 0) {
                this.workerList = data[0].workers;
                this.stations = data[0].stations;
                return;
            }

            getUserByCity({ city: this.activeName, month: this.month }).then(res => {
                this.workerList = res.data.data.workers;
                this.stations = res.data.data.stations;
                this.workers.push({ city: this.activeName, workers: this.workerList, stations: this.stations });//保存到缓存
                console.info(this.workerList)
            })
        },
        stationChange() {
            console.info(this.stationCode)
        },
        handleClickWorker(item) {
            this.calendarDate = new Date(this.month + "-01");
            this.servantId = item.id;
            this.dialogTradeFormVisible = true;
            this.dialogTradeFormTitle = item.workerName;
            this.getBookList(this.month);
        },
        getBookList(month) {
            const params = {
                month: month,
                servantId: this.servantId
            }
            getBookList(params).then(res => {
                console.info(res);
                this.trades = res.data.data;
                this.bookDetails = [];
            })
        },
        calendarClick(day) {
            this.listLoading = true;
            console.info(day);
            this.bookDetails = this.trades.filter(item => item.bookDate == day);
            this.listLoading = false;
        },
        tabclick(e) {
            this.getServant();
        },
        formatSchDate(date) {
            let month = date.split("-")[1];
            let day = date.split("-")[2];
            return (
                parseInt(month).toString() + "月" + parseInt(day).toString() + "日"
            );
        }
    }
};
</script>
<style scoped>
.el-tabs__content {
    height: unset;
}

.content {
    padding: 10px;
}

.crumbs {
    margin: 10px 0;
}


.servant-area {
    padding: 10px;
    border: 1px solid #c0c4cc;
    border-radius: 10px;
    display: flex;
    height: 780px;
    flex-direction: column;
}

.worker {
    margin: 5px;
    border: 1px solid rgb(192, 196, 204);
    padding: 5px;
    width: 200px;
    height: 105px;
    border-radius: 5px;
    /* background-color: rgb(65, 73, 84) */
}

.worker_name {
    /* color: #fff; */
    padding: 3px 0 2px 0;
    border-bottom: 1px solid #cfc6c6;
    margin-bottom: 3px;
    font-weight: 600;
    font-size: 18px;
}

.bbt {
    font-size: 9px;
    padding: 5px 0 0;
    display: flex;
    justify-content: space-between;
}

.bbt_v {
    color: #09afff;
    font-weight: 600;
}

.el-dialog {
    width: 650px !important;
}

.el-table th.gutter {
    display: table-cell !important;
}

.el-select--medium {
    width: 300px !important;
}
</style>
  
  