<template>
    <div id="normal" class="card">
        <date @change="onChangeDate"></date>
        <el-row class="card-mt" :gutter="8">
            <el-col :span="8">
                <div class="item">
                    <span>{{total}}</span>
                    <span>日常抽查总数</span>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item pointer" @click="onShowTableDialog(1)">
                    <span>{{finish}}</span>
                    <span>已完成</span>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item pointer" @click="onShowTableDialog(2)">
                    <span>{{todo}}</span>
                    <span>待完成</span>
                </div>
            </el-col>
        </el-row>
        <el-row class="card-mt15 card-mb">
            <el-col :span="12">
                <div id="normalLabelPie" :style="pieStyle"></div>
            </el-col>
            <el-col :span="12">
                <div id="normalPlacePie" :style="pieStyle"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Date from './Date.vue';

import showPie from '../config/pie';
import { getJobTotal, getJobByPlace, getJobByTag } from '@/api/home';
import homeMixin from '@/mixin/home';

export default {
    components: {
        Date,
    },
    mixins: [homeMixin],
    data () {
        return {
            total: 0,
            finish: 0,
            todo: 0,
            dateRange: [],
            pieHeight: 100,
            pieWidth: 100,
        }
    },
    computed: {
        pieStyle() {
            return {
                height: `${this.pieHeight}px`,
                maxHeight: `${this.pieHeight}px`,
                width: `${this.pieWidth}px`,
                maxWidth: `${this.pieWidth}px`,
            }
        },
    },
    methods: {
        onChangeDate(range) {
            this.dateRange = range;
            this.loadData();
            const vm = this;
            window.onresize = function() {
                vm.resize();
            };
            this.resize();
        },
        resize() {
            const e = document.querySelector('#normal');
            let h = 170;
            if (document.body.clientWidth < 1600) {
                h = 130;
            }
            if (document.body.clientWidth < 1400) {
                h = 100;
            }
            this.pieHeight = e.clientHeight - h;
            this.pieWidth = e.clientWidth / 2;
        },
        loadData() {
            let start = '', end = '';
            if (this.dateRange && this.dateRange.length > 1) {
                start = this.dateRange[0];
                end = this.dateRange[1];
            }
            getJobTotal({
                job_type: 'NORMAL',
                start_date: start,
                end_date: end,
                enforce_org_id: this.orgId,
            }).then(res => {
                if (res && res.data) {
                    this.total = res.data.total;
                    this.finish = res.data.done;
                    this.todo = res.data.not_done;
                }

                this.loadTagData(start, end);
            });
        },
        loadTagData(start, end) {
            getJobByTag({
                job_type: 'NORMAL',
                start_date: start,
                end_date: end,
                enforce_org_id: this.orgId,
            }).then(res => {
                if (res && res.data) {
                    let legend = [], list = [];
                    res.data.map(item => {
                        legend.push(item.tag_name);
                        list.push({
                            name: item.tag_name,
                            value: item.job_num,
                        });
                    });
                    showPie('normalLabelPie', {
                        legendData: legend,
                        seriesData: list,
                    });
                }

                this.loadPlaceData(start, end);
            });
        },
        loadPlaceData(start, end) {
            getJobByPlace({
                job_type: 'NORMAL',
                start_date: start,
                end_date: end,
                enforce_org_id: this.orgId,
            }).then(res => {
                if (res && res.data) {
                    let legend = [], list = [];
                    res.data.map(item => {
                        legend.push(item.type_name);
                        list.push({
                            name: item.type_name,
                            value: item.job_num,
                        });
                    });
                    showPie('normalPlacePie', {
                        legendData: legend,
                        seriesData: list,
                    });
                }
            });
        },
        onShowTableDialog(type) {
            this.$emit('table-action', this.dateRange, type == 1);
        },
    }
}
</script>

<style lang="scss" scoped>
.card {
    background: #FFFFFF;
    border: 1px solid #E9EAF8;
    border-radius: 4px;
    padding: 10px;
}
.item {
    background: #EFF2FA;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    &>span:first-child {
        font-weight: bold;
        color: #252631;
    }
    &>span:last-child {
        font-weight: 400;
        color: #778CA2;
    }
}
@media screen and (min-width: 1608px) {
    .item {
        padding: 10px 0;
        &>span:first-child {
            font-size: 24px;
        }
        &>span:last-child {
            font-size: 14px;
        }
    }
}

@media screen and (max-width: 1600px) {
    .item {
        padding: 6px 0;
        &>span:first-child {
            font-size: 18px;
        }
        &>span:last-child {
            font-size: 12px;
        }
    }
}
@import '@/styles/home.scss';
</style>