<template>
  <div class="module-corner workflow">
    <div style="padding: .05rem 0; overflow:hidden;">
      <div class="col-30" v-for="(value,index) in workflow" :key="index">
        <LitterTitle :title="value.title" />
        <div style="margin: 0 1% 0 3%;">
          <div :id="'echart-workflow-box'+(index+1)">
            <EchartLineNoY
              :id="value.data.id" 
              :width="value.data.width" 
              :height="value.data.height"
              :legend="value.data.legend"
              :xAxisData="value.data.xAxisData"
              :yAxisData="value.data.yAxisData"
            />
          </div>
        </div>
      </div>
    </div>
    <Corner2 />
  </div>
</template>
<script>
import Corner2 from "@/components/Corner2"
import LitterTitle from "@/components/title/LitterTitle"
import EchartLineNoY from '@/components/echart/EchartLineNoY'
export default {
  components:{
    Corner2,
    LitterTitle,
    EchartLineNoY
  },
  data() {
    return {
      color:['213,50,35','3,179,177','216,50,218','242,92,33','33,140,254','28,254,0'],
      workflow:[
        // {
        //   title: '请假',
        //   data:{
        //     id: 'echart-gardensMaintain1',
        //     width: 0,
        //     height: 0,
        //     xAxisData:["待审批","审批中","不通过","已通过"],
        //     yAxisData: [
        //       {name:'总数量',data:[855, 2078, 856, 1865], color:'213,50,35'}
        //     ]
        //   },
        // },
      ],
    };
  },
  mounted() {
    // 获取工作流程数据
    this.getWorkflow();
    
  },
  methods: {
    getWorkflow(){
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1077'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params,
      }).then(res => {
        this.workflow = [];
        res.data.forEach((item,index)=>{
          this.workflow.push(
            {
              title: item.LX,
              data:{
                id: 'echart-workflow'+(index+1),
                width: 0,
                height: 0,
                xAxisData:["审批中","不通过","已通过"],
                yAxisData: [
                  {name:'总数量',data:[item.SPZSL, item.BTGSL, item.YTGSL],color:this.color[index]}
                ]
              },
            }
          )
        })
        //工作流程
        setTimeout(() => {
          this.callEchart("echart-workflow-box1", this.workflow[0].data, 2.3);
          this.callEchart("echart-workflow-box2", this.workflow[1].data, 2.3);
          this.callEchart("echart-workflow-box3", this.workflow[2].data, 2.3);
          this.callEchart("echart-workflow-box4", this.workflow[3].data, 2.3);
        }, 200);
        
      })
    },
    callEchart(idBox, data, offset) {
      const _width = document.getElementById(idBox).clientWidth;
      this.$set(data,'width',_width);
      this.$set(data,'height', _width/offset);
    },
  }
};
</script>

<style scoped>
.row{
  width: 100%;
  overflow: hidden;
  margin: 0.07rem 0;
}
.col-30{
  width: 33%; 
  float: left;
}
.workflow{
  padding: .03rem .02rem;
}
</style>
<style>
.workflow .litter-title img{
  height: .05rem;
  margin-top: .02rem;
}
</style>