<template>
    <div class="app-container">

        <!-- 查询和其他操作 -->
        <div class="filter-container" style="display: flex;">
            <el-input v-model="listQuery.address" clearable class="filter-item" style="width: 550px;"
                placeholder="请输入服务地址" />
            <el-select v-model="listQuery.skillId" style="width:200px" placeholder="服务人员需要具备的技能" clearable>
                <el-option v-for="item in skills" :key="item.id" :label="item.itemName" :value="item.id" />
            </el-select>
            <el-date-picker v-model="listQuery.month" type="month" class="filter-item" style="width:120px"
                value-format="yyyy-MM" :picker-options="{}" />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">查找</el-button>
        </div>

        <el-table :data="dataList" border v-loading="listLoading">
            <el-table-column property="workerId" label="服务者id" width="80" fixed></el-table-column>
            <el-table-column property="workerName" label="服务者姓名" width="100" fixed></el-table-column>
            <el-table-column v-for="(item, index) in dayList" :property="item" :label="item" :key="index" width="180">
                <template slot-scope="scope">
                    <div v-for="(item2, index2) in scope.row.dayStock[item]" :key="index2">
                        <div>
                            {{ item2.startTime }}-{{ item2.endTime }}
                            <i class="el-icon-success" v-if="item2.isChecked && item2.isOccupy == 0"
                                style="color:#09afff;font-size:22px;"></i>
                            <i class="el-icon-success" v-if="!item2.isChecked && item2.isOccupy == 0"
                                style="color:#ccc;font-size:22px;"></i>
                            <span v-if="item2.isOccupy == 1" style="font-size:10px;color:#ccc">{{ item2.cooupyEvent
                            }}</span>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>


        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize"
            @pagination="getList" />


    </div>
</template>

<script>
import {
    getSkills,
} from "@/api/goods";
import moment from "moment";
import { getStockByAddress } from "@/api/address"
import BackToTop from "@/components/BackToTop";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { formatDate } from "@/utils/date";
let vm;
export default {
    name: "addressCheck",
    components: { BackToTop, Pagination },
    beforeCreate() {
    },
    data() {
        return {
            skills: [],
            dataList: [],
            dayList: [],
            total: 0,
            listLoading: false,
            listQuery: {
                pageIndex: 1,
                pageSize: 5,
                address: "",
                skillId: "",
                month: moment(new Date()).format("YYYY-MM")
            },
            rules: {
                address: [
                    { required: true, message: "请输入服务地址", trigger: "blur" }
                ],

                skillId: [
                    { required: true, message: "请选择技能项", trigger: "blur" }
                ]
            },
        };
    },
    created() {
        this.getSkills();
    },
    methods: {
        getList() {
            if (this.listQuery.address == '' || this.listQuery.skillId == '') {
                this.$notify.error({
                    title: "提醒",
                    message: "请输入服务地址，选择服务项",
                });
                return;
            }
            this.listLoading = true;
            this.dataList = [];
            this.dayList = [];
            // this.total = 0;
            getStockByAddress(this.listQuery).then(response => {
                this.listLoading = false; 
                this.total = response.data.data.total;
                this.dataList = response.data.data.dataList;
                this.dayList = response.data.data.dayList;
                 
              
            }).catch(e=>{
                this.listLoading = false;
                this.total = 0;
                this.dataList =[];
                this.dayList = [];
                this.$message({
                    message: e.data.errmsg,
                    type: 'error'
                    })
            }) 
        },
        getSkills() {
            getSkills().then((res) => {
                this.skills = res.data.data;
            })
        }
    }
}
</script>



<style>
.detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
}

.operate-container {
    background: #f2f6fc;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
}

.operate-button-container {
    float: right;
    margin-right: 20px;
}

.table-layout {
    margin-top: 20px;
    border-left: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;
}

.table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
}

.table-cell-title {
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    padding: 10px;
    background: #f2f6fc;
    text-align: center;
    font-size: 14px;
    color: #303133;
}

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

.color-danger {
    color: #f56c6c;
    font-size: 18px;
}
</style>