<!-- 测报灯控制 -->
<template>
  <div class>
    <div class="equipId">设备ID：{{equipId}}</div>
    <div class="subTitle">sim卡流量</div>
    <div class="simCodeBox">
      <div class="simCodeTitle">ICCID：{{ sim.iccid }}</div>
      <div class="simCodeTitle">状态：{{ sim.account_status | simStatus }}</div>
      <div class="simCodeTitle">套餐：{{ sim.data_plan }}MB</div>
      <div class="simCodeTitle">已用流量：{{ sim.data_usage }}MB</div>
      <div class="simCodeTitle">剩余流量：{{ sim.data_balance }}MB</div>
      <div class="simCodeTitle">到期时间：{{ (sim.expiry_date * 1000) | formatTime }}</div>
    </div>
    <div>
      <highcharts :options="options2" v-if="Object.keys(options2).length > 0"></highcharts>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import HighCharts from "highcharts";
export default {
  props: ["equipId", "equipType", "d_id"],
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // sim卡
      sim: {
        iccid: "",
        account_status: 0, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
        data_plan: 0, //套餐大小
        data_usage: 0, //当月用量
        data_balance: 0, //剩余流量
        expiry_date: 0 //到期日期
      },
      options2: {}
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
     // 设置hightcharts配置
    refreshData() {
      HighCharts.setOptions({
        // 所有语言文字相关配置都设置在 lang 里
        lang: {
          resetZoom: "刷新",
          resetZoomTitle: "重置缩放比例",
        },
      });
    },
    simSet() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.send_control.device_sim",
        data: this.qs.stringify({
          d_id: this.d_id,
          type: "sim"
        })
      }).then(res => {
        if (res.data.message == "") {
          this.sim.iccid = res.data.data[0].iccid;
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=forecast.send_control.sim_query",
            data: this.qs.stringify({
              iccid: this.sim.iccid
            })
          }).then(res => {
            if (res.data.message == "") {
              let data = eval("(" + res.data.data.data + ")");
              // let cardInfo = data.data.card_list[0]
              let cardInfo = data.data;
              this.sim = cardInfo;
              this.chartPieInit([{name:"已用",y:this.sim.data_usage},{name:"剩余",y:this.sim.data_balance}])
            }
          });
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    //饼状图初始化
    chartPieInit(arr) {
      var _this = this;
      (this.options2 = {
        chart: {
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 60,
            beta: 0
          }
        },
        credits: {
          enabled: false
        },
        title: {
          text: "",
          align: "left"
        },
        tooltip: {
          headerFormat: "{series.name}<br>",
          pointFormat: "{point.name}: <b>{point.y}MB</b>"
        },
        colors: ["#00e29d", "#6cbbff", "#ff3f3f"],
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              format: "<b>{point.name}</b>: {point.percentage:.1f} %"
            },
            point: {
              events: {
                mouseOver: function(e) {
                  // 鼠标滑过时动态更新标题
                  // console.log(e)
                  // console.log(this.setTitle())
                  // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
                  // VueHighcharts.setTitle({
                  //    text: e.target.name+ '\t'+ e.target.y + ' %'
                  // });
                },
                click(e) {
                  // 同样的可以在点击事件里处理
                }
              }
            }
          }
        },
        series: [
          {
            type: "pie",
            innerSize: "80%",
            name: "流量比例",
            data: arr
          }
        ]
      }),
        function(c) {
          // 图表初始化完毕后的会掉函数
          // 环形图圆心
          var centerY = c.series[0].center[1],
            titleHeight = parseInt(c.title.styles.fontSize);
          // 动态设置标题位置
          c.setTitle({
            y: centerY + titleHeight / 2
          });
        };
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.simSet();
    this.refreshData();
  },
  filters: {
    simStatus(val) {
      switch (val) {
        case 0:
          return "未知";
        case 1:
          return "测试期";
        case 2:
          return "沉默期";
        case 3:
          return "使用中";
        case 4:
          return "停机";
        case 5:
          return "停机保号";
        case 6:
          return "预销号";
        case 7:
          return "销号";
      }
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.equipId {
  line-height: 33px;
  text-align: center;
  background: #eee;
}
.subTitle {
  margin: 15px 0;
  line-height: 22px;
  font-size: 14px;
  border-left: 4px solid #0295ff;
  padding-left: 10px;
}
.simCodeTitle {
  line-height: 40px;
  font-size: 14px;
  margin-left: 11px;
  position: relative;
  padding-left: 16px;
}
.simCodeTitle::before {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  background: #0295ff;
  left: 0;
  top: 16px;
}
</style>