<template>
  <div class="gasvalue">
    <!--<div>-->
    <!--<div class="div-select">-->
    <!--<select v-model="date" >-->
    <!--<option :value="date" v-for="s in date">{{s}}</option>-->
    <!--</select>-->
    <!--</div>-->
    <div class="d1">
      <div class="d11">
        <table class="backgroundimg">
          <tr>
            <td class="td2">总供气量</td>
          </tr>
          <tr>
            <td class="td3"><span v-for="a in totalgasarrary" track-by="$index">{{a}}</span><span class="span-unit">{{unit}}</span>
            </td>
          </tr>
          <tr>
            <td class="td4"></td>
          </tr>
        </table>
      </div>
      <div class="d12">
        <table class="backgroundimg">
          <tr>
            <td class="td2">总销气量</td>
          </tr>
          <tr>
            <td class="td3"><span v-for="a in totalgasarrary" track-by="$index">{{a}}</span><span class="span-unit">{{unit}}</span>
            </td>
          </tr>
          <tr>
            <td class="td4"></td>
          </tr>
        </table>
      </div>
    </div>
    <!--</div>-->
  </div>
</template>

<script>
  import * as DataSql from '../../../stores/DataSql'
  import * as Util from '../../../stores/Util'
  import co from 'co'

  export default {
    name: "gasvalue",
    data() {
      return {
        totalgas: '',
        totalgasarrary: [],
        date: [2018, 2017, 2016],
        sqlcondition: '',
        result: [],
        unit: '',
        resdata: []
      }
    },
    methods: {
      //请求后台数据
      searchdata(year) {
        let sqldata = DataSql.getData(this, 'pregas',{startDate:year}, 'resdata')
        co(sqldata)
      },
      // 将数值打碎成数组
      gasValueStyle(s) {
        this.totalgasarrary = []
        for (var i = 0; i < s.length; i++) {
          this.totalgasarrary.push(s.charAt(i))
        }
      },
      // 数据增加单位
      datafix(data) {
        var s = data + ''
        if (s.length > 9) {
          s = s.substring(0, s.length - 8);
          this.unit = '亿'
        }
        if (s.length > 5) {
          s = s.substring(0, s.length - 4);
          this.unit = '万'
        }
        this.gasValueStyle(s)
      },
      //取整
      getValueInt() {
        var index = this.totalgas.toString().indexOf('.');
        var s = 0
        if (index > -1) {
          s = this.totalgas.toString().substring(0, index);
        } else {
          s = this.totalgas
        }
        this.datafix(s)
      }
    },
    watch: {
      'resdata':{
        deep: true,
        handler(val) {
          this.totalgas = this.resdata[0].value
        }
      },
      'totalgas'(val) {
        this.getValueInt()
        this.$parent.loaddata++
      }
    },
    ready() {
      // 拼接sql
      var date = Util.toStandardDateString();
      var year = date.substring(0, 4)
      this.searchdata(year)
    }
  }
</script>

<style scoped>
  table {
    width: 100%;
    height: 100%;
  }

  span {
    border: solid 1px #00f7ff;
    /*margin: 0px 5px;*/
    /*padding: 1px 6px;*/
    background-color: #01363f;
    color: #f7cb32;
    font-size: 1.5em;
    /*width: 30px;*/
    /*height: 44px;*/
    margin: 0% 2%;
    padding: 0.5% 2%;
    border-radius: 4px;
  }

  .backgroundimg td {
    text-align: center;
    /*width: 486px;*/
    height: 40%;
    width: 100%;
    color: #ffffff;
    font-size: 1em;
  }

  .td1 {
    width: 50%;
    font-size: 0.75em;
    color: #ffffff;
  }

  .td2 {
    /*height: 24px;*/
    /*height: 10%;*/
    font-size: 1em;
  }

  .td3 {
    /*height: 76px;*/
    /*height: 40%;*/
    padding-left: 4%;
    text-align: center;
  }

  .td4 {
    /*height: 40px;*/
    /*width: 100px*/
    /*height: 10%;*/
    /*width: 24%;*/
  }

  .div-select {
    height: 9%;
    margin-left: 10%;
    margin-top: 2%;
  }

  select {
    padding-left: 6px;
    border: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: #001521 url('../../../../static/ManageHomePic/图层5拷贝4.png') no-repeat right center;
    color: #15dce2;
    font-size: 14px;
    width: 62px;
  }

  .span-unit {
    margin-left: 1px;
    font-size: 1.5em;
    color: #f7cb32;
    border: none;
    background-color: rgba(1, 207, 242, 0);
  }

  .gasdata {
    color: #f7cb32;
    font-size: 1.5em;
    background-size: 60% 20%;
    background: url('../../../../static/ManageHomePic/椭圆6拷贝3.png') no-repeat bottom;
  }

  .backgroundimg {
    /*background-image: url('../../../../static/ManageHomePic/gasborder.png');*/
    background-size: 90% 75%;
    background: no-repeat center;
  }

  .d1 {
    /*height: 250px;*/
    width: 100%;
    height: 100%;
    padding-top: 5%;
  }

  .d11 {
    /*height: 140px*/
    width: 100%;
    height: 45%;
  }

  .d12 {
    /*height: 114px;*/
    width: 100%;
    height: 45%;
  }

</style>
