<template>
    <div class="container">
        <!-- 头部 -->
        <div class="head">
            <div>覆盖率统计</div>
        </div>
        <!-- 主体 -->
        <div class="app-container calendar-list-container">
            <!-- 条件搜索 -->
            <div class="filter-container">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="省份" clearable>
                        <el-select v-model="searchForm.areaCode">
                        <el-option
                            v-for="(item, index) in provinceList"
                            :key="index"
                            :label="item.name"
                            :value="item.admincode"
                        ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="统计类型" clearable>
                        <el-select v-model="searchForm.type" @change="typeChange">
                            <el-option label="默认" :value="undefined"></el-option>
                            <el-option label="月份" :value="2"></el-option>
                            <el-option label="年份" :value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="年份">
                        <el-select  :disabled='isShow' v-model="searchForm.dateYear" @change="yearChange" placeholder="请选择" clearable>
                            <el-option
                                v-for="item in years"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="月份">
                        <el-select :disabled='disabled' v-model="searchForm.dateMonth" @change="monthChange" placeholder="请选择" clearable>
                            <el-option
                                v-for="item in monthList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                        type="primary"
                        plain
                        icon="el-icon-search"
                        @click="search"
                        >搜索</el-button
                        >
                        <el-button type="primary" plain @click="clearFilterData"
                        >清除搜索</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>

            <!-- 数据列表 -->
            <el-table
                :data="list"
                v-loading.body="listLoading"
                border
                fit
                highlight-current-row
                style="width: 100%"
            >
                <!-- <el-table-column align="center" label="序号" width="65">
                    <template slot-scope="scope">
                        {{ scope.row.index }}
                    </template>
                </el-table-column> -->
                 <el-table-column align="center" label="序号" type="index" width="65">
                </el-table-column>
                <el-table-column align="center" label="省份">
                    <template slot-scope="scope">
                        <span>{{scope.row.areaName}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="统计类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type == 2">月份</span>
                        <span v-if="scope.row.type == 3">年份</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="年份">
                    <template slot-scope="scope">
                        <span>{{scope.row.dateYear}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="月份">
                    <template slot-scope="scope">
                        <span>{{scope.row.dateMonth}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="覆盖率">
                    <template slot-scope="scope">
                        <span>{{scope.row.ratio}}%</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column align="center" label="统计时间">
                    <template slot-scope="scope">
                        {{ getStatus(scope.row.status) }}
                    </template>
                </el-table-column> -->
                <!-- <el-table-column align="center" label="操作" width="250">
                    <template slot-scope="scope">
                        <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                        <el-button type="text" @click="changeParams(scope.row, 'status')">{{
                        scope.row.status === 1 ? "下架" : "上架"
                        }}</el-button>
                        <el-button type="text" @click="changeParams(scope.row, 'isDel')"
                        >删除</el-button
                        >
                    </template>
                </el-table-column> -->
            </el-table>

            <!-- 分页 -->
            <div class="page-foot">
                <el-pagination
                    style="text-align: center"
                    @size-change="handleSizeChange"
                    @current-change="currentChange"
                    :current-page.sync="searchForm.page"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="searchForm.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { banner } from "@/utils/formDatas.js"; //表单数据
import { getAreaList, bgPages } from "@/api/coverage"; //接口

import CustomForm from "@/components/CustomForm"; //自定义表单组件

export default {
    name: "coverageStatistics",
    components: {
        CustomForm,
        ElImageViewer,
    },
    data() {
        return {
            data: null, //原数据
            list: null, //赋值数据 | 过滤数据
            total: null, //总个数
            listLoading: true, //请求加载状态
            //搜索表单
            searchForm: {
                page: 1,
                limit: 10,
                areaCode: undefined,
                dateYear: undefined,
                dateMonth: undefined,
                type:undefined
            },
            provinceList:[],
            years:[],
            monthList:[],
            disabled : true,
            isShow : true,
        };
    },
    mounted() {
        this.getList(); //获取数据
        this.getPromise();
        this.init();
    },
    methods: {
        handleSizeChange(val) {
            this.searchForm.limit = val;
            this.getList();
        },
        //省份列表
        getPromise(){
            getAreaList({parentId: "000000"}).then(res=>{
                this.provinceList = res.data
                console.log(187,this.provinceList)
            })  
        },
        init(){
            var myDate = new Date;
            var year = myDate.getFullYear();//获取当前年
            this.initSelectYear(year)
            this.initSelectMonth()
            // this.searchForm.dateYear = year;
            // this.searchForm.dateMonth = myDate.getMonth() + 1;
        },
        //年份
        initSelectYear(year){
            this.years = [];
            for(let i = 0;i<30;i++){
                this.years.push({value:(year - i),label:(year - i)+ "年"});
            }
        },
        //月份
        initSelectMonth(){
            this.monthList = [];
            for(let i = 0;i <12;i++){
                this.monthList.push({value:(1 + i),label:(1 + i)+ "月"});
            }
        },
        //切换省份
        typeChange(value){
            if(value == undefined){
                console.log(216,value);
                this.disabled = true
                this.isShow = true
            }else if(value == 2){
                this.searchForm.dateYear = undefined
                this.disabled = false
                this.isShow = false
            }else if(value == 3){
                this.searchForm.dateMonth = undefined
                this.disabled = false
                this.isShow = false
            }
        },
        //切换年份
        yearChange(value){
            this.searchForm.dateYear = value
            console.log(215,this.searchForm.dateYear);
        },
        //切换月份
        monthChange(value){
            this.searchForm.dateMonth = value
        },
        //搜索按钮
        search() {
            if(this.searchForm.dateYear == ""){
                this.searchForm.dateYear = undefined
            }else if(this.searchForm.dateMonth == ""){
                this.searchForm.dateMonth = undefined
            }else if(this.searchForm.areaCode == ""){
                this.searchForm.areaCode = undefined
            }else if(this.searchForm.type == ""){
                this.searchForm.type = undefined
            }
            this.getList();
        },
        //清除搜索
        clearFilterData() {
            this.searchForm = {
                page: 1,
                limit: 10,
                areaCode: undefined,
                dateYear: undefined,
                dateMonth: undefined,
                type:undefined
            };
            this.getList();
        },
        //切换页码
        currentChange(val) {
            this.searchForm.page = val;
            this.getList();
        },
        //获取覆盖率列表
        getList() {
            this.listLoading = true;
            bgPages(this.searchForm).then((res) => {
                console.log(357,res);
                this.list = res.data.data;
                this.data = res.data.data;
                this.total = res.data.totalCount;
                this.listLoading = false;
            })
            .catch((err) => {
                this.listLoading = false;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  width: 100%;
  border-bottom: 1px solid #e6e6e6;
}
.cover {
  width: 50px;
  height: 50px;
  object-fit: cover;
  cursor: pointer;
}
.page-foot {
  margin-top: 20px;
}
</style>
