<!--
 * @Description: 管线长度规划
 * @Author: 王晓颖
 * @Date:2020-11-30 17:07:53
 -->
<template>
  <chart-layout title="地下管线" @click="getData">
    <div class="block-container" style="padding-right: 2%">
    <!--<div style="width: 100%;height:100%;padding:0.1rem">-->
      <div class="block" style="width: 50%;">
        <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
        <div v-for="(value,index) in data1" :key="index">
          <ProgressBar2 :data="value" :labelWidth=".4" />
        </div>
      </div>
      <div class="block" style="width: 50%;">
        <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
        <div v-for="(value,index) in data2" :key="index">
          <ProgressBar2 :data="value" :labelWidth=".4" />
        </div>
      </div>
    </div>
    <corner1 slot="corner"/>
  </chart-layout>
</template>

<script>
import Legend from '@/components/legend/Legend'
import ProgressBar2 from '@/components/progressBar/ProgressBar2'
import {fetchPipeLength} from '@/api/cityManage'
export default {
  name: 'pipeLengthBar',
  components: {ProgressBar2, Legend},
  data () {
    return {
      data1: [
        {title: '雨水管线', num2: 0, num1: 1582, percentage: 100},
        {title: '污水管线', num2: 0, num1: 1321, percentage: 100},
        {title: '给水管线', num2: 0, num1: 238, percentage: 100},
        {title: '燃气管线', num2: 0, num1: 306, percentage: 100},
        {title: '通讯管线', num2: 0, num1: 334, percentage: 100}
      ],
      data2: [
        {title: '其他', num2: 0, num1: 550, percentage: 100}
      ]
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      // fetchPipeLength().then(response => {
      //   if (response.code === 200) {
      //     const dataFilter = []
      //     const data = response.data
      //     for (const item of data) {
      //       dataFilter.push({
      //         title: item.name,
      //         num1: item.complete,
      //         num2: item.plan,
      //         percentage: 100 * item.complete / item.plan
      //       })
      //     }
      //     this.data1 = []
      //     this.data2 = []
      //     for (let i = 0; i < dataFilter.length; i++) {
      //       if (i < 5) {
      //         this.data1.push(dataFilter[i])
      //       } else {
      //         this.data2.push(dataFilter[i])
      //       }
      //     }
      //   }
      // })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .block-container{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0.04rem;
    /*padding:0.1rem;*/
    .block{

    }
  }
</style>