<template>
    <div class="content">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>服务力看板</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- gmv目标 gmv数据 -->
        <div class="gmv-board">
            <div class="card-module gmv-goal">
                <p class="stock-title">
                    <span class="card-title">近14天城市库存利用率</span>
                    <span>库存利用率=已占用小时数 / 日排班小时数</span>
                    <span>更新时间：{{ freshTime }}</span>
                </p>
                <el-table height="400" border :data="tableStockCity">
                    <el-table-column label="城市" prop="city"></el-table-column>
                    <el-table-column label="保洁" prop="bj"></el-table-column>
                    <el-table-column label="品类" prop="pl"></el-table-column>
                </el-table>
            </div>

            <div class="card-module gmv-goal">
                <p class="stock-title">
                    <span class="card-title">服务站库存利用率</span>
                    <el-select v-model="listQuery1.city" multiple clearable placeholder="请选择城市" @change="cityChange">
                        <el-option v-for="(item, index) in cityList" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                </p>
                <!-- 服务站库存剩余率看板/门店库存剩余率看板 -->
                <el-table :data="tableStockStation" height="400">
                    <el-table-column label="城市" prop="city"></el-table-column>
                    <el-table-column label="服务站" prop="station"></el-table-column>
                    <el-table-column label="1-3天" prop="stock13"></el-table-column>
                    <el-table-column label="4-14天" prop="stock414"></el-table-column>
                    <el-table-column label="15天以上" prop="stock15"></el-table-column>
                </el-table>
            </div>

        </div>

        <div class="gmv-board">
            <!-- 各城市汇总服务人数 -->
            <div class="card-module gmv-goal" style="width:100%">
                <p class="stock-title">
                    <span class="card-title">各城市汇总服务人数</span>
                </p>

                <div class="stock-table">
                    <el-table height="300" border :data="tableServant">
                        <el-table-column label="城市" prop="city"></el-table-column>
                        <el-table-column label="保洁" prop="bj"></el-table-column>
                        <el-table-column label="品类" prop="pl"></el-table-column>
                        <!-- <el-table-column label="保姆" prop="pl_rate"></el-table-column> -->
                        <el-table-column label="合计" prop="total"></el-table-column>
                    </el-table>

                </div>
            </div>

        </div>
    </div>
</template>
  
<script>
import Service from "../../script/api/service";

export default {
    name: "douyinServant",
    data() {
        return {
            cityList: [],
            stationList: [],
            tableStockCity: [],
            tableStockStation: [],
            tableServant: [],
            freshTime: '',
            listQuery1: {
                city: ''
            }
        };
    },
    mounted() {
        this.cityList = JSON.parse(window.localStorage.getItem("allHmCity"));
        this.getServant();
        this.get14DayStock();
        this.getStationStock();
    },
    methods: {
        getServant() {
            Service.$axiosGetDYServantlList().then(res => {
                this.tableServant = res.data.data
            })
        },
        get14DayStock() {
            Service.$axiosGetDYCityStockList()
                .then((res) => {
                    this.tableStockCity = res.data.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        getStationStock() {
            Service.$axiosGetDYStationStockList({ city: this.listQuery1.city.join(',') })
                .then((res) => {
                    this.tableStockStation = res.data.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        cityChange() {
            this.getStationStock();
        }
    },
};
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.crumbs {
    margin: 0 0 10px 0;
}

h1,
h2 {
    font-weight: normal;
}

.el-card {
    overflow-x: scroll;
    min-width: 1200px;
    border-radius: 8px;
}

.module-wrapper {
    display: flex;
    min-width: 1200px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.card-left {
    flex: 1;
    margin-right: 10px;
}

.card-right {
    flex: 1;
}

.gmv-board,
.sale-board {
    margin: 0 0 10px;
    /* min-width: 1200px; */
}

/* .sale-board {
    height: 300px;
    overflow-y: scroll;
  } */
.stock-table {
    height: 300px;
    overflow-y: auto;
}

.card-module {
    border-radius: 8px;
    background: #fff;
    padding: 20px;
    border: 1px solid #ebeef5;
}

.gmv-board {
    display: flex;
    justify-content: space-between;
}

.gmv-goal {
    margin-right: 10px;
    width: 50%;
}

.card-title {
    font-weight: 600;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}

.data-progress {
    border-radius: 12px;
    min-height: 116px;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    margin: 20px 0 0;
    font-size: 13px;
    background: #4dd99b;
    /* background: linear-gradient(315deg, #4dd99b 0%, #79d54e 100%); */
    /* max-width: 800px; */
}

.stock-title {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #aaa;
    align-items: flex-end;
    margin-bottom: 10px;
}

.card-title {
    color: #333;
    font-size: 16px;
}

#container {
    height: 900px;
    width: 100%;
}
</style>
<style>
.amap-cluster {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}

.showName {
    font-size: 14px;
}

.showCount,
.showName {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 80%;
}
</style>
  