<template>
    <div class="pandect">
        <div>
            <p class="device">当前设备总体运行状态&nbsp;&nbsp;&nbsp;
                <span class="states" v-if="eqIntactRate>=99">优</span>
                <span class="states" v-if="99>eqIntactRate>=98">良好</span>
                <span class="states" v-if="98>eqIntactRate>=95">中</span>
                <span class="states" v-if="eqIntactRate<95">差</span>
            </p>
            <!-- <div v-if="groupByCate.length==0 && sum==0">
                <Spin fix>
                    <Icon type="ios-loading" size=40 class="demo-spin-icon-load"></Icon>
                    <div>Loading</div>
                </Spin>
            </div>  -->
            <Tabs type="card"   @on-click="getData">
                <TabPane :label="`设备设施总数 ${sum}`">
                    <card :isShow="false" :groupByCate='groupByCate'></card>
                </TabPane>
                <TabPane :label="`设备完好率 ${eqIntactRate}%`"> 
                    <card :isShow="true" :groupByCate='groupByCate'></card>
                </TabPane>
                <TabPane :label="`保修及时率 ${maintTimelinessRate}%`"> 
                    <card :isShow="true"></card>
                </TabPane>
                <TabPane :label="`超期服役率 ${overdueServiceRate}%`"> 
                    <card :isShow="true"></card>
                </TabPane>
                <TabPane :label="`运行偏差率 ${operatingDeviationRate}%`"> 
                    <card :isShow="true"></card>
                </TabPane>
            </Tabs>
        </div>
        <div class="my-bottom">
            <div class="pie">
                <span class="remark-icon"></span><p class="my-title">设备专业分类</p>
                <div id="pieImg" style="height:279px;width:368px" ref="mayPieCharts"></div>
                <table class="description">
                <tr class="normal" v-for="(item, index) in groupByMajor" :key="index">
                    <td><i :style="`background-color: ${item.itemStyle.color}`"></i>{{item.name}}</td>
                    <td>{{((item.value / groupByMajorTotalValue)*100).toFixed(2)}}%</td>
                </tr>
                </table>
            </div>
            <div class="my-table">
                <span class="remark-icon"></span><p class="my-title">近12个月已维修过的设备数量</p>
                <div id="barImg" style="height:340px;width:100%" ref="mayBarCharts"></div>
                <div class="legend">
                    <span class="good"><i style="background:#4A9EF9"></i> 维修中的</span>
                </div>
            </div>
        </div>
        <div class="attention">
            <span class="remark-icon"></span><p class="my-title">重点关注设备</p>
            <i-Table stripe :columns="columns1" :data="data1" size="large"></i-Table>
        </div>
        <div class="mask-bg" @click="closeLay"></div>
       <div class="mask-lay" :style="`width: ${maskWidth}`">
         <detail></detail>
       </div>
    </div>
</template>

<script>
import axios from "axios";
var echarts = require("echarts");
import card from "./Card.vue";
import detail from './Detail.vue'
export default {
  components: {
    card,
    detail
  },

  mixins: [],

  props: {},

  data() {
    return {
      isShow: true,
      sum: 0,
      eqIntactRate: 100,
      maintTimelinessRate: 80,
      operatingDeviationRate: 80,
      overdueServiceRate: 80,
      rateMajor: [],
      maskWidth:"0px",
      columns1: [
        {
          title: "设备本地编号",
          key: "name"
        },
        {
          title: "设备本地名称",
          key: "position"
        },
        {
          title: "安装位置",
          key: "craft"
        },
        {
          title: "运行状态",
          key: "performance"
        },
        {
          title: "近30天维修次数",
          key: "wage",
          sortable: true
        },
        {
          title: "未关闭的工单",
          key: "mark",
          sortable: true
        },
        {
          title: "报警数量 ",
          key: "ontime",
          sortable: true
        },
        {
          title: "操作",
          key: "operation",
          className: "table-btn-column",
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "text",
                  size: "large"
                },
                on: {
                  click: () => {
                    document.querySelector("body").style.overflow = "hidden";
                    document.querySelector('.mask-bg').style.display = 'block';
                    this.maskWidth = "450px;"
                  }
                }
              },                                                                                                             "查看详情"
            );
          }
        }
      ],
      data1: [
        {
          name: "GCWK-8-JKZF",
          position: "2#风冷热泵",
          craft: "8号楼-JC-制冷机房",
          performance: "开启",
          wage: 0,
          mark: 0,
          ontime: 0
        },
        {
          name: "GCWK-8-JKZF",
          position: "1#离心泵",
          craft: "8号楼-JC-制冷机房",
          performance: "开启",
          wage: 0,
          mark: 0,
          ontime: 0
        },
        {
          name: "GCWK-8-JKZF",
          position: "7#给水加压泵",
          craft: "8号楼-B1F-生活水泵房",
          performance: "开启",
          wage: 0,
          mark: 0,
          ontime: 1
        },
        {
          name: "GCWK-8-GPS",
          position: "1#紫外线消防器",
          craft: "8号楼-B1F-生活水泵房",
          performance: "开启",
          wage: 0,
          mark: 0,
          ontime: 0
        },
        {
          name: "GCWK-8-B1-RCC",
          position: "挡杆",
          craft: "8号楼-车库出口",
          performance: "开启",
          wage: 0,
          mark: 1,
          ontime: 0
        }
      ],
      groupByCate: [],
      groupByMajor: [],
      groupByMajorTotalValue: 100,
      colors: {
        SE: "#4A9EF9", // 强电
        WE: "#6ECAF7", // 弱电【key值待修改】
        AC: "#73DA99", // 空调
        WS: "#F3E171", // 给排水
        FF: "#FABA53", // 消防
        SP: "#EF8DCC", // 安防【key值待修改】
        OT: "#63ADE2" ,// 综合专业（接口里叫其他专业）
        ST:"#DEFB92",
        ID:"#E2F516",
        DW:"#BFEA2B"
      }
    };
  },

  computed: {},
  mounted() {
    this.getTotal();
    this.getEqTotal();
    this.drawBar();
  },

  methods: {
    //弹窗关闭事件
    closeLay(){
       document.querySelector("body").style.overflow = "auto";
       document.querySelector('.mask-bg').style.display = 'none';
       this.maskWidth = "0px;"
    },
    //每个卡片头的点击事件
    getData(name){
      if(name==0){
        this.getEqTotal();
      }else if(name==1){
        this.getRate();
      }
    },
    //近12个月已维修过的设备数量图
    drawBar() {
      let mayBarCharts = echarts.init(document.getElementById("barImg"));
      var dataAxis = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
      var data = [8, 10, 5, 6, 8, 12, 10, 5, 7, 9, 9, 8];
      var yMax = 14;
      var dataShadow = [];

      for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }

      mayBarCharts.setOption({
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : dataAxis,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'维修中',
                type:'bar',
                barWidth: '60%',
                data:data
            }
        ]
      });
       
      // Enable data zoom when user click bar.
      var zoomSize = 6;
    },
    //设备专业分类图
    drawPie() {
      let mayPieCharts = echarts.init(document.getElementById("pieImg"));
      mayPieCharts.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        series: [
          {
            name: "",
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "",
            data: this.groupByMajor,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              },
              normal: {
                label: {
                  show: false //隐藏标示文字
                },
                labelLine: {
                  show: false //隐藏标示线
                }
              }
            }
          }
        ]
      });
      setTimeout(() => {
         window.onresize = function () {
          mayPieCharts.resize()
        }
      }, 10)
    },
    //设备专业分类数据
    getEqTotal() {
       this.groupByCate = [];
      axios
        .get(`/equipment/info-mng-backend/eq/getAll?projectId=${this.$store.state.projectId}`)
        .then(res => {
          if (res.data.result == "success") {
            let data = res.data.data;
            this.groupByCate = data.groupByCate;
            this.groupByMajor = this.formatMajor(data.groupByMajor);
            this.groupByMajorTotalValue = this.calculationMajorTotalValue(
              data.groupByMajor
            );
            this.drawPie();
          }
        });
    },
    //设备设施总数，完好率
    getTotal() {
      axios
        .get(`/equipment/info-mng-backend/saas/getEqStatistics?projectId=${this.$store.state.projectId}`)
        .then(res => {       
          if (res.data.result == "success") {
            let data = res.data.data;
            this.sum = data.eqCount;
            this.overdueServiceRate = data.overdueServiceRate;
            this.operatingDeviationRate = data.operatingDeviationRate;
            this.maintTimelinessRate = data.maintTimelinessRate;
            this.eqIntactRate = data.eqIntactRate;
          }
        });
    },
    getRate() {
      this.groupByCate = [];
      axios
        .get(`/equipment/info-mng-backend/saas/getEqIntactRate?projectId=${this.$store.state.projectId}`)
        .then(res => {
          if (res.data.result == "success") {
            let data = res.data.data;
            this.groupByCate = data.groupByMajor;
          }
        });
    },
    formatMajor(groupByMajor) {
      return groupByMajor.map(item => {
        return {
          name: item.name,
          value: item.count,
          itemStyle: {
            color: this.colors[item.major]
          }
        };
      });
    },
    calculationMajorTotalValue(groupByMajor) {
      let total = 0;
      groupByMajor.forEach(i => {
        total += parseFloat(i.count);
      });
      return total;
    }
  }
};
</script>

<style scoped lang="less" >
.pandect {
  background: #fff;
  padding: 20px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  .device {
    color: #3b4254;
    padding-bottom: 30px;
    font-size: 18px;
    font-weight: bold;
    .states {
      font-weight: bold;
      font-size: 30px;
      color: #73da99;
    }
  }
  .my-bottom {
    display: flex;
    margin: 64px 0 20px 0;
    .pie {
      width: 452px;
      margin-right: 20px;
      border: 1px solid #dbdde4;
      border-radius: 1px;
      position: relative;
      .my-title {
        height: 40px;
        font-size: 18px;
        font-weight: bold;
        display: inline-block;
      }
      #pieImg {
        top: -40px;
        margin: 0 auto;
      }
      .description {
        margin-left: 20px;
        margin-top: -60px;
        display: flex;
        flex-wrap: wrap;
        tr {
          width: 50%;
          padding: 3px 0;
        }
        i {
          width: 8px;
          height: 8px;
          display: inline-block;
          background: #000;
          border-radius: 50%;
          margin-right: 10px;
        }
        td {
          height: 18px;
          color: #62697b;
          &:nth-child(2n) {
            padding-left: 5px;
          }
        }
      }
      .remark-icon {
        padding: 7px 3px;
        display: inline-block;
        background: #4a9ef9;
        margin: 20px 10px 0 20px;
      }
    }
    .my-table {
      width: 1288px;
      border: 1px solid #dbdde4;
      border-radius: 1px;
      position: relative;
      .my-title {
        height: 40px;
        font-size: 18px;
        font-weight: bold;
        display: inline-block;
      }
      .remark-icon {
        padding: 7px 3px;
        display: inline-block;
        background: #4a9ef9;
        margin: 20px 10px 0 20px;
      }
      .legend {
        position: absolute;
        top: 59px;
        right: 115px;
        i {
          width: 10px;
          height: 10px;
          display: inline-block;
          background: #000;
          margin-right: 8px;
        }
        .good {
          padding-right: 20px;
        }
      }
    }
  }
  .attention {
    width: 100%;
    border: 1px solid #dbdde4;
    border-radius: 1px;
    padding: 0 20px;
    .my-title {
      height: 40px;
      display: inline-block;
      font-size: 18px;
      font-weight: bold;
    }
    .remark-icon {
      padding: 7px 3px;
      display: inline-block;
      background: #4a9ef9;
      margin: 20px 10px 0 0;
    }
  }
  .mask-bg{
    position: fixed;
    top: 0;
    bottom:0;
    right: 0;
    left: 0;
    z-index: 9999;
    display: none ;
    opacity: 0.4;
  }
  .mask-lay{
    position: fixed;
    top: 50px;
    bottom:0;
    right: 0;
    z-index: 99999;
    transition: all 0.5s ease-in-out;
    background:#fff;
  }
}
</style>
<style lang="less">
.pandect {
  .ivu-tabs-bar {
    margin-bottom: 0;
  }
  .ivu-tabs-nav-container{
    font-size:16px;
  }
 .ivu-table-large {
    font-size:16px;
  }
  .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
    background: #fff;
  }
  .ivu-tabs .ivu-tabs-tabpane {
    border: 1px solid #dbdde4;
    border-top: none;
  }
  .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab,.ivu-tabs .ivu-tabs-content-animated{
   transform:none;
   transition:none;
  }
  .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
    background: #f4f5f8;
  }
  .ivu-table .ivu-table-tbody .table-info-column {
    color: #faba53;
  }
  .ivu-table-wrapper {
    border: none;
  }
  .ivu-table:before {
    height: 0;
  }
  .ivu-table:after {
    width: 0;
  }
  .ivu-table td,
  .ivu-table th {
    border: none;
  }
  .ivu-table .ivu-table-tbody .ivu-btn-text {
    color: #57a4f7;
  }
}
</style>

