<template>
    <div>
        <el-form ref="reportForm" class="form-header" :model="formData" label-position="right" label-width="auto"
            size="small">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="取件日期">
                        <el-date-picker class="formItem" v-model="formData.pickUpDate" type="date" placeholder="选择日期"
                            value-format="yyyy-MM-dd" clearable>
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="区域">
                        <el-select v-model="formData.regionArray" class="formItem" filterable multiple clearable
                            placeholder="不限">
                            <el-option v-for="item in selectOptionList.region" :label="item" :value="item" :key="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="地区">
                        <el-select v-model="formData.areaArray" class="formItem" filterable multiple clearable
                            placeholder="不限">
                            <el-option v-for="item in selectOptionList.area" :label="item" :value="item" :key="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="URSA">
                        <el-select v-model="formData.ursas" class="formItem" filterable multiple clearable placeholder="不限">
                            <el-option v-for="item in selectOptionList.ursaList" :label="item" :value="item" :key="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="Service Type">
                        <el-select v-model="formData.serviceTypeArray" class="formItem" filterable multiple clearable
                            placeholder="不限">
                            <el-option v-for="item in selectOptionList.serviceType" :label="item.chineseName"
                                :value="item.chineseName" :key="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="ml20 mt20 mb20">
            <el-button type="primary" icon="el-icon-search" size="mini" :loading="loading" @click="select(0)">查 询
            </el-button>
        </div>
        <div style="padding:10px">
            <el-form label-position="right" label-width="auto" size="small">
                <el-form-item label="类型">
                    <el-radio-group v-model="formData.dimensionName" @change="typeChange">
                        <el-radio label="region">区域</el-radio>
                        <el-radio label="area">地区</el-radio>
                        <el-radio label="ursa">URSA</el-radio>
                        <el-radio label="serviceType">Service Type</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div v-for="(item, index) in barChartData" :key="index">
                <Chart :className="'chart' + index.toString()" :chartData="item" height="350px" style="margin-bottom:10px"
                    :loading="loading" />
            </div>
        </div>
    </div>
</template>

<script>
import Chart from '@/components/echarts/echarts-series.vue'
import { findDmPreMdeCondition, findPreMdeReport } from "@/api/preMdeConfig";

export default {
    components: {
        Chart
    },
    data() {
        return {
            formData: {
                ursas: [],
                serviceTypeArray: [],
                regionArray: [],
                areaArray: [],
                pickUpDate: null,
                dimensionName: 'region',
            },
            tableHeader: this.tableHeaders['report'],
            barChartData: [],
            selectOptionList: {
                ursaList: ["A_", "B_", "C_", "D_", "E_", "F_", "G_", "H_", "I_", "J_", "K_", "L_", "M_", "N_", "O_", "P_", "Q_", "R_", "S_", "T_", "U_", 'V_', "W_", "X_", "Y_", "Z_", '1_', '2_', '3_', '4_', '5_', '6_', '7_', '8_', '9_'],
                serviceType: [],
                region: [],
                area: [],
            },
            tableHeight: null,
            totalCount: 10,
            loading: false
        }
    },
    created() {
        this.formData.pickUpDate = this.nowDate()
        this.getOption()
        this.select()
    },
    activated() {
        this.select()
    },
    mounted() {
        this.tableHeight = window.innerHeight - this.$refs.reportForm.$el.offsetHeight - 240
    },
    methods: {
        getOption() {
            findDmPreMdeCondition().then(res => {
                if (res.code === 200) {
                    this.selectOptionList.serviceType = res.data.serviceType
                    this.selectOptionList.region = res.data.region
                    this.selectOptionList.area = res.data.area
                } else {
                    this.msgWarning(res.msg)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        select(val) {
            this.loading = true
            let obj = {}
            if (this.formData.ursas.length > 0) {
                obj.ursas = this.formData.ursas
            } else {
                obj.ursas = null
            }
            if (this.formData.serviceTypeArray.length > 0) {
                obj.serviceTypeArray = this.formData.serviceTypeArray
            } else {
                obj.serviceTypeArray = null
            }
            if (this.formData.regionArray.length > 0) {
                obj.regionArray = this.formData.regionArray
            } else {
                obj.regionArray = null
            }
            if (this.formData.areaArray.length > 0) {
                obj.areaArray = this.formData.areaArray
            } else {
                obj.areaArray = null
            }
            obj.pickUpDate = this.formData.pickUpDate
            obj.dimensionName = this.formData.dimensionName
            findPreMdeReport(obj).then(res => {
                this.loading = false
                if (res.code === 200) {
                    if (res.data.dimensionList && res.data.dimensionList.length > 0) {
                        this.dataHandle(res.data.dimensionList, 8)
                    } else {
                        this.msgWarning('未查询到数据')
                    }
                } else {
                    this.msgWarning(res.msg)
                }
            }).catch(err => {
                this.loading = false
                console.log(err)
            })
        },
        typeChange(val) {
            this.select()
        },
        dataHandle(val, num) {
            this.barChartData = []
            let obj = {
                names: [],
                data1: [],
                data2: [],
                data3: []
            }
            val.forEach(item => {
                obj.names.push(item.name)
                obj.data1.push(item.totalPcs)
                obj.data2.push(item.total)
                obj.data3.push(item.totalWeight)
            })
            this.arrList(obj.names, num).forEach((item, index) => {
                let objItem = {
                    names: [],
                    data1: [],
                    data2: [],
                    data3: [],
                }
                objItem.names = item
                objItem.data1 = this.arrList(obj.data1, num)[index]
                objItem.data2 = this.arrList(obj.data2, num)[index]
                objItem.data3 = this.arrList(obj.data3, num)[index]
                this.barChartData.push(objItem)
            })
        },
        arrList(list, last) {
            let index = 0
            let arr = []
            if (list.length < last) {
                arr.push(list)
            } else {
                while (index < list.length) {
                    arr.push(list.slice(index, index += last))
                    index++
                }
            }
            return arr
        },
        currentChange(val) {
            this.formData.page = val.page
            this.select()
        }
    }

}
</script>

<style></style>