<template>
    <div id="passRate" class="card">
        <date @change="onChangeDate" :showRight="true" @rightAction="onRightAction"></date>
        <div class="info">
            <div class="process">
                <el-progress class="custom-process" type="circle" color="#3A8FEA" :width="processWidth" :stroke-width="processLineWidth" :percentage="percent"></el-progress>
                <span>合格率</span>
            </div>
            <div class="txt pointer" @click="onShowTableDialog">
                <span>不合格数</span>
                <span>{{num}}</span>
            </div>
        </div>
        <div class="wave card-mt" id="wave" :style="waveStyle"></div>
    </div>
</template>

<script>
import Date from './Date.vue';
import showWave from '../config/wave';

import moment from 'moment';
import { getJobTotal, getJobByTime } from '@/api/home';
import homeMixin from '@/mixin/home';
import { getElementWidth } from '@/utils/tool';

export default {
    components: {
        Date,
    },
    mixins: [homeMixin],
    data () {
        return {
            num: 0,
            percent: 0.0,
            dateRange: [],
            jobType: '',
            waveHeight: 100,
            waveData: null,
        }
    },
    computed: {
        waveStyle() {
            return {
                height: `${this.waveHeight}px`,
                maxHeight: `${this.waveHeight}px`,
            }
        },
        processWidth() {
            return parseInt(getElementWidth(78));
        },
        processLineWidth() {
            return parseInt(getElementWidth(16));
        },
    },
    methods: {
        onChangeDate(range) {
            this.dateRange = range;
            this.loadData();
            const vm = this;
            window.onresize = function() {
                vm.resize();
            };
            this.resize();
        },
        resize() {
            const e = document.querySelector('#passRate');
            let h = 200;
            if (document.body.clientWidth < 1600) {
                h = 160;
            }
            if (document.body.clientWidth < 1400) {
                h = 130;
            }
            this.waveHeight = Math.max(0, e.clientHeight - h);
        },
        onRightAction(data) {
            this.jobType = data || '';
            this.loadData();
        },
        loadData() {
            let start = '', end = '';
            if (this.dateRange && this.dateRange.length > 1) {
                start = this.dateRange[0];
                end = this.dateRange[1];
            }
            const params = {
                start_date: start,
                end_date: end,
                enforce_org_id: this.orgId,
                job_type: this.jobType,
            };
            getJobTotal(params).then(res => {
                if (res && res.data) {
                    const pass = parseInt(res.data.passed_num || '0');
                    const done = parseInt(res.data.done || '0');
                    this.percent = done > 0 ? parseInt(pass / done * 100) : 0;
                    this.num = res.data.not_passed_num;
                }

                this.loadTimeData();
            });
        },
        loadTimeData() {
            if (this.waveData && this.waveData.length > 0) {
                return;
            }

            const start = moment().subtract(11, 'months').format('YYYY-MM-DD'), end = moment().format('YYYY-MM-DD');
            const params = {
                start_date: start,
                end_date: end,
                enforce_org_id: this.orgId,
                job_type: this.jobType,
            };
            getJobByTime(params).then(res => {
                if (res && res.data) {
                    this.waveData = res.data;
                    let legend = [], list = [];
                    res.data.map(item => {
                        legend.push(item.stat_month.replace('-','.'));
                        list.push(parseInt(item.job_num));
                    });
                    showWave('wave', {
                        legendData: legend,
                        seriesData: list,
                    });
                }
            });
        },
        onShowTableDialog() {
            this.$emit('table-action', this.dateRange);
        },
    }
}
</script>

<style lang="scss">
.custom-process {
    .el-progress__text {
        font-size: 14px;
    }
}
</style>

<style lang="scss" scoped>
.card {
    background: #FFFFFF;
    border: 1px solid #E9EAF8;
    border-radius: 4px;
    padding: 10px;
}
.info {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .process {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        &>span {
            margin-top: 3px;
            font-size: 14px;
            font-weight: 400;
            color: #778CA2;
        }
    }
    .txt {
        margin-right: 20px;
        height: 50px;
        line-height: 50px;
        background: #FFF4F2;
        border: 1px dashed #EB623B;
        border-radius: 4px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        &>span:first-child {
            color: #333333;
            font-size: 14px;
            font-weight: 400;
        }
        &>span:last-child {
            margin-left: 15px;
            font-size: 26px;
            font-family: 'FZZongYi-M05S';
            font-weight: 400;
            color: #FF8162;
        }
    }
}
@media screen and (min-width: 1608px) {
    .card {
        margin-top: 10px;
    }
    .info {
        margin-top: 20px;
    }
}
@media screen and (max-width: 1600px) {
    .card {
        margin-top: 5px;
    }
    .info {
        margin-top: 10px;
    }
}
@import '@/styles/home.scss';
</style>