<template>
  <div>
    <titlesection title="地磁"></titlesection>
    <totalsection :totalNum="totalVal"></totalsection>
    <ul class="flexfm dici-wrap">
      <li v-for="(item, index) in diciList" :key="index">
        <div>{{item.name}}</div>
        <div><span :style="{width : item.percentage}"></span></div>
        <div>{{item.count | formatNum}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import titlesection from '../components/titlesection'
import totalsection from '../components/total'
import { formatNum } from '../filters/filters'
import {fetchList} from '../api/api'

export default {
  name: 'dicisection',
  components: {
    titlesection,
    totalsection
  },
  data() {
    return {
      totalVal: '219734',
      diciList:[
        {
          name: '正常',
          count: '23454',
          percentage: '80%'
        },
        {
          name: '异常',
          count: '12192',
          percentage: '60%'
        },
        {
          name: '正常',
          count: '6235',
          percentage: '40%'
        }
      ]
    }
  },
  created() {
  },
  methods: {
    getList() {
      fetchList()
      .then(res => {
        console.log(res);

      });
    },
  }
}
</script>

<style lang="scss"  scoped>
  @mixin textStyle($color){
    padding-right: 23px;
    text-align: left;
    font-size: 12px;
    color: $color;
  }
  @mixin borderStyle($color) {
    flex: 1;
    height: 12px;
    border:1px solid $color;
    position: relative;
  }
  @mixin fillStyle{
    position: absolute;
    display: inline-block;
    height: 10px;
    top:0;
    left: 0;
  }
  @mixin countStyle($color){
    width: 80px;
    padding-left: 23px;
    text-align: left;
    font-size: 14px;
    color: $color;
  }
  .dici-wrap{
    height: 100%;
    display: flex;
    flex-direction: column;
    li{
      flex: 1;
      padding: 0  23px;
      display: flex;
      font-size: 14px;
      &:nth-of-type(1){
        div{
          &:nth-of-type(1){
            @include textStyle(#59AAF7)
          }
          &:nth-of-type(2){
            @include borderStyle(#59AAF7);
            span{
              @include fillStyle;
              background:linear-gradient(90deg,rgba(0,202,254,1),rgba(39,114,244,1));
            }
          }
          &:nth-of-type(3){
            @include countStyle(#59AAF7)
          }
        }
      }
      &:nth-of-type(2){
        div{
          &:nth-of-type(1){
            @include textStyle(#FFB700)
          }
          &:nth-of-type(2){
            @include borderStyle(#59AAF7);
            span{
              @include fillStyle;
              background:linear-gradient(-90deg,rgba(255,186,0,1),rgba(255,129,0,1));
            }
          }
          &:nth-of-type(3){
            @include countStyle(#FFB700)
          }
        }
      }
      &:nth-of-type(3){
        div{
          &:nth-of-type(1){
            @include textStyle(#FD4B15)
          }
          &:nth-of-type(2){
            @include borderStyle(#59AAF7);
            span{
              @include fillStyle;
              background:linear-gradient(-90deg,rgba(255,129,90,1),rgba(237,60,5,1));
            }
          }
          &:nth-of-type(3){
            @include countStyle(#FD4B15)
          }
        }
      }
    }


  }
</style>
