<script>
import PieChart3D from "./PieChart3D.vue";
import Maintenance3D from "./Maintenance3D.vue";
import Overhaul3D from "./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) => {
          let list = res.data.rows;
          list = res.data.rows.map((item) => {
            return [
              {
                name: "专业维保",
                value: item.zywbs,
              },
              {
                name: "自主维保",
                value: item.zzwbs,
              },
              {
                name: "无（仅消火栓）",
                value: item.wjxhs,
              },
              {
                name: "无维保",
                value: item.wwbs,
              },
            ];
          });
          this.wbxsList = list[0];
        }
      );
    },
    // 管理形式
    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) => {
          let lists = res.data.rows;
          lists = res.data.rows.map((item) => {
            return [
            {
              name: '有',
              value: item.ydxjjsl,
            },
            {
              name: '无（消防设施无问题）',
              value: item.wdxjjxfsswwt,
            },
            {
              name: '无（消防设施有问题）',
              value: item.wdxjjxfssywt,
            },
            ]
          });
          this.dxjjList =lists[0];
        }
      );
    },
  },
  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  @click-item="value => $emit('click-item', {
        index: 0,
        value
      })" v-if="flag == 0" :glxsList="glxsList" />
      <Maintenance3D @click-item="value => $emit('click-item', {
        index: 1,
        value
      })" v-if="flag == 1" :wbxsList="wbxsList" />
      <Overhaul3D @click-item="value => $emit('click-item', {
        index: 2,
        value
      })"   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>
