<script>
import PieChart3D from "@/components/PieChart3D.vue";
import Maintenance3D from "@/components/Maintenance3D.vue";
import Overhaul3D from "@/components/Overhaul3D.vue";
import { getGlxs,getWbxs,getDxjj } from "@/api/index.js";
export default {
  name: "AutonomousManagement",
  components: {
    PieChart3D,
    Maintenance3D,
    Overhaul3D,
  },
  props:{
    qy:String
  },
  watch:{
    qy(){
      this.getMounList()
    this.getTypes()
    this.getWtype()
    }
  },
  data() {
    return {
      flag: 0,
      params:{
        pageSize:100,
        pageNum:1,
      },
      wbxsList:[],
      glxsList:[],
      dxjjList:[]
    };
  },
  
  methods: {
    change(index) {
      this.flag = index;
    },
    // 维保形式
    getMounList(){
      getWbxs({...this.params,qy:this.qy==="重庆市"?"":this.qy}).then(res=>{
        this.wbxsList=res.data.rows.map(item=>{
          return{
            name:item.wbxs,
            value:item.sl
          }
        })
      })
    },
    // 管理形式
    getTypes(){
      getGlxs({...this.params,qy:this.qy==="重庆市"?"":this.qy}).then(res=>{
        this.glxsList=res.data.rows.map(item=>{
          return{
            name:item.glxs,
            value:item.sl
          }
        })
      })
    },
    // 大修基金
    getWtype(){
      getDxjj({...this.params,qy:this.qy==="重庆市"?"":this.qy}).then(res=>{
        this.dxjjList=res.data.rows.map(item=>{
          return{
            name:item.dxjj,
            value:item.sl
          }
        })
      })
    }
  },
  created(){
    this.getMounList()
    this.getTypes()
    this.getWtype()
  }
};
</script>

<template>
  <div class="autonomous-management">
    <div class="autonomous-management_header">
      <button-group @change="change">
        <button-group-item> 管理形式 </button-group-item>
        <button-group-item> 维护形式 </button-group-item>
        <button-group-item>大修基金</button-group-item>
      </button-group>
    </div>
    <div>
      <PieChart3D v-if="flag == 0" :glxsList="glxsList" />
      <Maintenance3D v-if="flag == 1" :wbxsList="wbxsList" />
      <Overhaul3D v-if="flag == 2" :dxjjList="dxjjList" />
    </div>
  </div>
</template>

<style scoped lang="less">
.autonomous-management {
  padding: 10px 10px 0px 10px;
  .autonomous-management_header {
    border-bottom: 1px solid #154956;
    padding-bottom: 2px;
  }
}
</style>
