<template>
  <div class="progress" :style="styleColor">
    <el-progress class="progress-content" :percentage="dataList.percentage" :strokeWidth="dataList.strokeWidth"
      :showText="dataList.showText" :textInside="dataList.textInside" :color="dataList.color"></el-progress>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: "WidgetProgress",
  components: {},
  props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      options: {}
    };
  },
  computed: {
    ...mapState('dataSource', ['staticData']),
    transStyle() {
      return this.objToOne(this.options);
    },
    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: 0
      };
      const percentage = this.staticData[this.transStyle.slectedDataType];
      const slectedDataColor = this.staticData[this.transStyle.slectedDataColor];
      if (percentage) {
        result.percentage = parseInt(percentage);
      }else{
        result.percentage =0;
      }
      if (slectedDataColor) {
        result.color = slectedDataColor;
      }
      return result;
    }
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
      },
      deep: true
    }
  },
  created() {
    this.options = this.value;
  },
  mounted() { },
  methods: {}
};
</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, initial);
    }

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