<template lang="html">
  <div class="">
    <!-- <div class="cardtitle-info" slot="media"> -->
      <div class="subtitle">{{appUrl.app_desc}}</div>
      <div class="icon-card" v-if="((!(appUrl.tileType === 'api')) && (!(appUrl.tileType === 'charts')))">
        <i :class="appUrl.appIcon + ' iconfont_form'" class="appIcon" v-if="(appUrl.iconContent==='') || (appUrl.iconContent === null)"></i>
        <img :src="appUrl.iconContent" alt="" v-else>
      </div>
      <div class="charts-card" :id="'appecharts_' + appUrl.id" v-if="(appUrl.tileType === 'charts') && (!(appUrl.chartType === 'appProgress'))">
      </div>
      <div  class="pro-card" v-if="appUrl.chartType === 'appProgress'" >
        <div class="" style="width:100%" v-if="isPercentage">
          <div class="pro-card-info" v-for="item in appProgressData" >
            <span>{{item.name}}</span>
            <el-progress :id="'appPro_' + appUrl.id" :percentage="item.value" :stroke-width="4"></el-progress>
          </div>
        </div>
          <ifbp-tile-progress :tile-data="appProgressData" :tile-bar="4" v-if="!isPercentage" style="width:100%"></ifbp-tile-progress>
      </div>
      <!-- <el-progress :id="'appPro_' + appUrl.id" :percentage="percentage" class="charts-card" v-if="appUrl.chartType === 'appProgress'" ></el-progress> -->
      <div class="api-card api"  v-if="appUrl.tileType === 'api'">
        <span :class="apiColor" :id="'appApi_' +appUrl.id"></span>
        <span :class="apiColor +' '+'apiFont'" >{{appUrl.numberUnit}}</span>
        <!-- <span :class="apiColor" :id="'appApi_' +appUrl.id">{{appUrl.numberUnit}}</span> -->
      </div>
      <div class="card-footer"> {{appUrl.footer}}</div>
    <!-- </div> -->
  </div>

</template>
<script>
import echarts from 'echarts';
export default {
  name: 'appContent',
  data() {
    return {
      percentage:0,
      apiColor:this.appUrl.numberColor,
      appProgressData:[],
      isPercentage:true,
      tileBar:'top'
    }
  },
  props: ['appUrl'],
  methods:{
    //请求图表的数据
    requestCharts(item){
      this.$http({
        url: item.chartUrl,
        type: 'GET',
        dataType: 'json',
      }).then((res) => {
        if(res.data.status === true){
          this.options = res.data.option;
          // debugger;
          this.$nextTick(() => {
            var myChart = echarts.init(document.getElementById('appecharts_' + item.id));
            myChart.setOption(this.options);
          });
        }
      }).catch(() => {
        this.$message({
          message: '信息获取失败',
          type: 'error'
        });
      });
    },
    //请求数值的数据
    requestNumber(item){
      this.$http({
        url: item.numberUrl,
        type: 'GET',
        dataType: 'json',
      }).then((res) => {
        // debugger;
        if(res.data.status === true){
          this.numberData = res.data.data.numberData;
          switch (item.numberCondition) {
            case 1:{
                if(this.numberData > item.numberValue){
                  this.apiColor = item.numberConditionColor;
                }
              }
              break;
            case 2:{
              if(this.numberData < item.numberValue){
                this.apiColor = item.numberConditionColor;
              }
            }
            break;
            case 3:{
              if(this.numberData === item.numberValue){
                this.apiColor = item.numberConditionColor;
              }
            }
            break;
            case 4:{
              if(this.numberData >= item.numberValue){
                this.apiColor = item.numberConditionColor;
              }
            }
            break;
            case 5:{
              if(this.numberData <= item.numberValue){
                this.apiColor = item.numberConditionColor;
              }
            }
            break;
            default:{
              this.apiColor = item.numberColor;
            }

          }
          this.$nextTick(() => {
            // debugger;
            var myApi = document.getElementById('appApi_' + item.id);
            var myApiValue = document.getElementById('appApi_' + item.id).innerHTML;
            myApi.innerHTML = this.numberData +myApiValue;
            console.log(myApi);
          });
        }
      }).catch(() => {
        this.$message({
          message: '信息获取失败',
          type: 'error'
        });
      });
    },
    //请求进度条的数值
    requestProgress(item){
      // debugger;
      // var vm = self || this;
      this.$http({
        url: item.chartUrl,
        type: 'GET',
        dataType: 'json',
      }).then((res) => {
        if(res.data.status === true){
          // debugger;
          this.appProgressData = res.data.data;
          this.isPercentage = res.data.isPercentage;
          // if(this.isPercentage === true) {
          //   this.
          // }
          console.log(this.appProgressData);
          // this.$nextTick(() => {
          //   var myProgress = document.getElementById('appPro_' + item.id);
          //   var myAttr=myProgress.getAttribute('percentage');
          //   console.log("aaaa" +myProgress);
          // });
        }
      }).catch(() => {
        this.$message({
          message: '信息获取失败',
          type: 'error'
        });
      });
    }
  },
  mounted() {
    if(this.appUrl.tileType === "charts" && this.appUrl.chartType !== 'appProgress') {
        this.requestCharts(this.appUrl);
    }
    if(this.appUrl.tileType === "charts" && this.appUrl.chartType === 'appProgress' ){
      this.requestProgress(this.appUrl);
    }
    if(this.appUrl.tileType === "api"){
      this.requestNumber(this.appUrl);
    }
  },
  created() {

  }

}
</script>

<style lang="css">
</style>
