<template>
  <div class="gasvalue">
    <div class="label">销售气量</div>
    <!--<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="td5"><span  class="td-title">民用气量销售&emsp;</span><span v-for="a in totalgasarrary" style="color: #62e7ff" track-by="$index">{{a}}</span><span class="span-unit" style="color: #62e7ff">{{unit}}方</span>
            </td>
          </tr>
          <tr>
            <td class="td5"><span  class="td-title">非民用销售&emsp;&emsp;</span><span v-for="a in totalgasarrary1" style="color: #f29961"  track-by="$index">{{a}}</span><span class="span-unit" style="color: #f29961" >{{unit}}方</span>
            </td>
          </tr>
          <tr>
            <td class="td5"><span  class="td-title">混合型气量销售</span><span v-for="a in totalgasarrary2" style="color: #748bf0"  track-by="$index">{{a}}</span><span class="span-unit" style="color: #748bf0" >{{unit}}方</span>
            </td>
          </tr>
        </table>
      </div>

    </div>
    <!--</div>-->
  </div>
</template>

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

  export default {
    name: "gasvalue",
    props: {
      f_filiale:String,
    },
    data() {
      return {
        sqlcondition: '',
        unit: '',
        resdata: '',
        resdata1: '',
        resdata2: '',
        totalgas:'',
        totalgas1:'',
        totalgas2:'',
        totalgasarrary:[],
        totalgasarrary1:[],
        totalgasarrary2:[],
      }
    },
    methods: {
      //请求后台数据
      searchdata(year) {
        console.log('searchdata--------------------------------------------------searchdata')
        console.log(DataSql.getData(this, 'pregas', {},'resdata'))
        let sqldata = DataSql.getData(this, 'pregas', {},'resdata')
        co(sqldata)
        let sqldata1 = DataSql.getData(this, 'civilgas', {},'resdata1')
        co(sqldata1)
        let sqldata2 = DataSql.getData(this, 'hybridgas', {},'resdata2')
        co(sqldata2)
      },
      getValueInt() {
        var index = this.totalgas.toString().indexOf('.');
        var s = 0
        if (index > -1) {
          s = this.totalgas.toString().substring(0, index);
        } else {
          s = this.totalgas
        }

        var a = s + ''
        if (a.length > 9) {
          a = a.substring(0, a.length - 8);
          this.unit = '亿'
        }
        if (a.length > 5) {
          a = a.substring(0, a.length - 4);
          this.unit = '万'
        }
        this.totalgasarrary = []
        for (var i = 0; i < a.length; i++) {
          this.totalgasarrary.push(a.charAt(i))
        }

      } ,
      getValueInt1() {
        var index = this.totalgas1.toString().indexOf('.');
        var s = 0
        if (index > -1) {
          s = this.totalgas1.toString().substring(0, index);
        } else {
          s = this.totalgas1
        }

        var a = s + ''
        if (a.length > 9) {
          a = a.substring(0, a.length - 8);
          this.unit = '亿'
        }
        if (a.length > 5) {
          a = a.substring(0, a.length - 4);
          this.unit = '万'
        }
        this.totalgasarrary1 = []
        for (var i = 0; i < a.length; i++) {
          this.totalgasarrary1.push(a.charAt(i))
        }

      } ,
      getValueInt2() {
        var index = this.totalgas2.toString().indexOf('.');
        var s = 0
        if (index > -1) {
          s = this.totalgas2.toString().substring(0, index);
        } else {
          s = this.totalgas2
        }

        var a = s + ''
        if (a.length > 9) {
          a = a.substring(0, a.length - 8);
          this.unit = '亿'
        }
        if (a.length > 5) {
          a = a.substring(0, a.length - 4);
          this.unit = '万'
        }
        this.totalgasarrary2 = []
        for (var i = 0; i < a.length; i++) {
          this.totalgasarrary2.push(a.charAt(i))
        }

      }
    },
    watch: {
      'resdata':{
        deep: true,
        handler(val) {
          console.log('------------民用销售气量===================民用销售气量----------------------------')
          console.log(this.resdata,'民用销售气量')
          console.log(this.resdata[0],'民用销售气量-----------------')
          if(this.resdata[0]!==undefined){
            this.totalgas=this.resdata[0].value

          }


        }
      },
      'resdata1':{
        deep: true,
        handler(val) {
          console.log('------------非民用销售气量非民用销售气量----------------------------')
          console.log(this.resdata1,'非民用销售气量')
          if(this.resdata1[0]!==undefined){
            this.totalgas1=this.resdata1[0].value

          }

          // this.resdata1=this.resdata1[0].value
        }
      },
      'resdata2':{
        deep: true,
        handler(val) {
          console.log('---混合销售气量------------------------混合销售气量-------------')
          console.log(this.resdata2,'混合销售气量')
          if(this.resdata2[0]!==undefined){
            this.totalgas2=this.resdata2[0].value

          }
        }
      },
      'totalgas'(val) {
        this.getValueInt()
        this.$parent.loaddata++
      },
      'totalgas1'(val) {
        this.getValueInt1()
        this.$parent.loaddata++
      },
      'totalgas2'(val) {
        this.getValueInt2()
        this.$parent.loaddata++
      },

      'f_filiale'(){
        var date = Util.toStandardDateString();
        var year = date.substring(0, 4)-4
        this.searchdata(year)
      }
    },
    ready() {
      // 拼接sql
      var date = Util.toStandardDateString();
      var year = date.substring(0, 4)-4
      this.searchdata(year)
    }
  }
</script>

<style scoped>
  @media screen and (max-width: 1920px) {/*标题样式*/
    .label {
      font-size: 1.85rem;
      color: #fff;
      height: 8%;
      width: 100%;
      margin-left: 6%;
    }
    table {
      width: 100%;
      height: 100%;
    }

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

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

    .td1 {
      width: 50%;
      font-size: 1.75rem;
      color: #ffffff;
    }

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

    .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: 1.4rem;
      width: 62px;
    }

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

    .gasdata {
      color: #f7cb32;
      font-size: 1.5rem;
      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: 90%;
    }

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

    .td-title{
      color: #ffffff;
      font-size: 1.6rem;
      border: none;
      background-color: rgba(1, 207, 242, 0);
    }}
  @media screen and (max-width: 1366px) {/*标题样式*/
    .label {
      font-size: 1.85rem;
      color: #fff;
      height: 8%;
      width: 100%;
      margin-left: 6%;
    }
    table {
      width: 100%;
      height: 100%;
    }

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

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

    .td1 {
      width: 50%;
      font-size: 1.4rem;
      color: #ffffff;
    }

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

    .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: 1rem;
      width: 62px;
    }

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

    .gasdata {
      color: #f7cb32;
      font-size: 1.1rem;
      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: 90%;
    }

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

    .td-title{
      color: #ffffff;
      font-size: 1.3rem;
      border: none;
      background-color: rgba(1, 207, 242, 0);
    }}


</style>
