<template>
  <div class="progress" :style="styleColor">
    <el-progress class="progress-content" :strokeWidth="dataList.strokeWidth"
      :showText="dataList.showText" :textInside="dataList.textInside" :color="dataList.color" :percentage="dataList.percentage" v-if="isRouterAlive" ></el-progress>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: "WidgetProgress",
  components: {},
  props: {
    value: Object,
    ispreview: Boolean
  },
  created() {
    this.options = this.value;
  },
  provide(){
    return{
      reload:this.reload
    }
  },
  data() {
    return {
      options: {},
      flagInter: null,
      isRouterAlive:true
    };
  },
  beforeDestroy() {
    clearInterval(this.flagInter);
  },
  computed: {
    ...mapState('dataSource', ['staticData','staticRefreshTime']),
    transStyle() {
      const obj = this.objToOne(this.options);
      return obj;
    },
    styleColor() {
      let result = {
        position: this.ispreview ? "absolute" : "static",
        background: this.transStyle.background,
        "text-align": this.transStyle.textAlign,
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        right: this.transStyle.right + "px",
        "border-radius": this.transStyle.borderRadius + 'px',
        "--percent-font-size": this.transStyle.percentFontSize + 'px',
        "--percent-color": this.transStyle.percentColor,
        "--under-color": this.transStyle.underColor
      };

      const { color1, color2, color3, color4, color5 } = this.transStyle;
      const gradientList = [color1, color2, color3, color4, color5];
      const gradientList1 = [];
      gradientList.forEach(item => {
        item && gradientList1.push(item);
      });
      if (gradientList1.length) {
        if (gradientList1.length === 1) {
          gradientList1.push(gradientList1[0]);
        }
        result["--line-gradient"] = `linear-gradient(to right, ${gradientList1.toString()})`;
      }
      return result;
    },
    dataList() {
      let result = {
        strokeWidth: this.transStyle.strokeWidth || 6,
        showText: this.transStyle.showText,
        textInside: this.transStyle.textInside,
        color : this.transStyle.color,
        percentage : 40
      };
      let percentage = this.getShowText();
      const slectedDataColor = this.getColor();
      if (this.isNotNull(percentage)) {
        let percentageValue = parseInt(percentage);
        percentage = (percentageValue>100)?100:percentageValue;
        result.percentage= percentage;
      }else{
        result.percentage =0;
      }
      result.color = slectedDataColor;
      return result;
    }
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.setOptionsData();
      },
      deep: true
    }
  },
  mounted() {
    this.setOptionsData();
  },
  methods: {
    // 数据解析
    setOptionsData() {
      const {slectedDataType} = this.transStyle;
      if(this.isNotBlank(slectedDataType)){
        const refreshTime = this.staticRefreshTime || 300000;
        this.dynamicDataFn(refreshTime);
      }
    },
    dynamicDataFn(refreshTime) {
      if (this.ispreview) {
        this.flagInter = setInterval(() => {
          this.getEchartData();
        }, refreshTime);
      } else {
        this.getEchartData();
      }
    },
    getEchartData() {
      this.setShowText();

    },
    setShowText() {
      let val = this.getShowText();
      val=this.isBlank(val)?0:(parseInt(val)>100)?100:parseInt(val);
      const color = this.getColor();
      this.dataList.percentage = val;
      this.dataList.color = color;
      this.reload();
    },
    // vue hack 之强制刷新组件
    reload(){
      this.isRouterAlive=false;
      this.$nextTick(function(){
        this.isRouterAlive=true;
      })
    },
    getShowText() {
      const {slectedDataType} = this.transStyle;
      return this.staticData[slectedDataType] || 0;
    },
    getColor() {
      const {slectedDataColor} = this.transStyle;
      return this.staticData[slectedDataColor] || this.transStyle.color;
    },
  }
};
</script>

<style scoped lang="scss">
.progress {
  display: flex;
  align-items: center;
  justify-content: center;

  .progress-content {
    display: flex;
    align-items: center;
    width: 100%;

    :deep(.el-progress-bar__outer) {
      background-color: var(--under-color, #EBEEF5);
    }

    :deep(.el-progress-bar__inner) {
      background: var(--line-gradient, linear-gradient(90deg, #409EFF, #66b1ff));
    }

    :deep(.el-progress-bar__innerText),
    :deep(.el-progress__text) {
      font-size: var(--percent-font-size, 14px) !important;
      color: var(--percent-color, #333);
    }
  }
}
</style>
