<template>
  <div class="app-container">
    
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      
      <el-form-item label="保税区">
        <el-select v-model="queryParams.cbIdArr" multiple placeholder="请选择保税区">
          <el-option
            v-for="item in regionList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="指标名称">
        <el-select v-model="queryParams.normFeeId" placeholder="请选择指标名称">
          <el-option
            v-for="item in normFeelistAll"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
       </el-select>
      </el-form-item>

      <el-form-item label="时间类型">

        <el-select v-model="queryParams.dateType" placeholder="请选择" clearable filterable class="se" @change="selectChange">
          <el-option v-for="t in datelist" :key="t.value" :label="t.label" :value="t.value" />
        </el-select>

        <el-select v-if="queryParams.dateType == 1" v-model="queryParams.dateValue" placeholder="选择月" clearable filterable class="se" style="margin-left: 10px;">
          <el-option v-for="t in 12" :key="t.value" :label="t + '月'" :value="t" />
        </el-select>

        <el-select v-if="queryParams.dateType == 2" v-model="queryParams.dateValue" placeholder="选择季度" clearable filterable class="se" style="margin-left: 10px;">
          <el-option v-for="t in jdlist" :key="t.value" :label="t.label" :value="t.value"/>
        </el-select>

        <el-date-picker v-if="queryParams.dateType == 3" v-model="queryParams.dateValue" type="year" placeholder="选择年" value-format="yyyy" format="yyyy 年" style="margin-left: 10px;"></el-date-picker>

      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>

      <el-form-item label="图形类型">
        <el-select v-model="contentType" placeholder="请选择图形类型">
          <el-option
            v-for="item in contentTypelist"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
       </el-select>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="dataList" height="500px" v-if="contentType == 1">
      <el-table-column label="保税区" align="center" prop="cbName">
        <template slot-scope="scope">
          {{ scope.row.cbName }}
        </template> 
      </el-table-column>
      <el-table-column label="所得分数" align="center" prop="colValue">
        <template slot-scope="scope">
          {{ scope.row.colValue }}
        </template>
      </el-table-column>

    </el-table>

    <circle-chart v-else-if="contentType == 2" :chartData="dataList"  style="width: 100%;"></circle-chart>
    <category-chart v-else-if="contentType == 3" itemName="所得分数"  :chartData="dataList" style="width: 100%"></category-chart>
    <line-chart v-else-if="contentType == 4" :chartData="dataList" style="width: 100%"> </line-chart>
  </div>
</template>

<script>
import { getDFZL,normFeelistAll,bondedList } from '@/api/portal/figure/figure.js';
import circleChart from '../dashboard/DFZLcircleChart.vue';
import categoryChart from '../dashboard/DFZLcategoryChart.vue';
import lineChart from '../dashboard/DFZLlineChart.vue';
export default {
  name: 'DFZL',
  components:{
    circleChart,
    categoryChart,
    lineChart

  },
  data() {
    return {
      categoryChartData: {},
      contentType:'1',
      contentTypelist:[
        { label: '列表', value: '1' },
        { label: '饼状', value: '2' },
        { label: '柱状', value: '3' },
        { label: '折线', value: '4' },
      ],
      datelist:[
        { label: '月', value: '1' },
        { label: '季度', value: '2' },
        { label: '年', value: '3' },
      ],
      jdlist:[
        { label: '第一季度', value: '1' },
        { label: '第二季度', value: '2' },
        { label: '第三季度', value: '3' },
        { label: '第四季度', value: '4' },
      ],
      dialogVisible: false,
      fileList: [],
      // 根路径
      baseURL: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 系统管理表格数据
      dataList: [],
      // 查询参数
      queryParams: {
        cbIdArr:[],  //保税区id集合
        dateType:'',  //查询时间类型(1=月，2=季度，3=年)
        dateValue:'', //查询时间值
        normFeeId:'',  //指标明细id
      },
      normFeelistAll:[],  //指标列表
      regionList:[],  //保税区列表
    };
  },
  created() {
    this.bondedList()
    this.getNormFeelistAll()
  },
  methods: {
    selectChange(val){
      this.queryParams.dateValue = ''
    },
    getList() {
      this.loading = true;
      getDFZL(this.queryParams).then(response => {
        this.dataList = []
        this.dataList = response.data;
        this.loading = false;
      });
    },
    bondedList(){
      this.regionList = []
      bondedList().then(res=>{
        for (const i in res.data) {
          this.regionList.push({ 
            label:res.data[i].deptName,
            value:res.data[i].deptId,
           })
        }
      })
    },
    getNormFeelistAll(){
      this.normFeelistAll = []
      normFeelistAll().then(res=>{
        for (const i in res.data) {
          this.normFeelistAll.push({ 
            label:res.data[i].fname,
            value:res.data[i].id,
           })
        }
        this.getList();
      })
    },
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.cbIdArr = [];
      this.queryParams.dateType = '';
      this.queryParams.dateValue = '';
      this.queryParams.normFeeId = '';
      this.resetForm('queryForm');
    },
  }
};
</script>
