<template>
  <div class="flex container-fluid" style="height:100%;">
      <div style="width: 100%;height:45%;">
        <h3 class="row" style="text-align: center;height:10%;">管网信息录入</h3>
        <div style="height:88%;margin-bottom: 2%;">
          <div class="col-sm-9" style="overflow-y: auto;">
            <div class="row" style="height: 15%;" v-for="(index,item) in netWorkAll">
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">类型</label>
                <v-select :value.sync="item.f_type" v-model="item.f_type"
                          title="参数: 管网类型(大屏信息录入)"
                          :options='networktype' placeholder='类型'
                          :value-single="true"
                          style="width:60%"
                          :search="false"
                          close-on-select></v-select>
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">已建数</label>
                <input type="text" style="width:60%" class="input_search" v-model="item.f_yijian"
                       placeholder="已建数">
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">在建数</label>
                <input type="text" style="width:60%" class="input_search" v-model="item.f_zaijian"
                       placeholder="在建数">
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">审批数</label>
                <input type="text" style="width:60%" class="input_search" v-model="item.f_shenpi"
                       placeholder="审批数">
              </div>
            </div>
          </div>
          <div class="col-sm-3" style="text-align: center;">
            <button class="button_clear button_spacing" @click="add(1)">+</button>
            <button class="button_clear button_spacing" @click="remove(1)">-</button>
            <button class="button_search button_spacing" @click="redactSave(1)">保存</button>
          </div>
        </div>
      </div>



    <div style="width: 100%;height:45%;margin-top: 2%">
      <h3 class="row" style="text-align: center;height: 10%;">收费信息录入</h3>
      <div style="height:88%;margin-bottom: 2%;">
        <div class="col-sm-9" style="overflow-y: auto;">
          <div class="row" style="height: 15%;" v-for="(index,item) in sellingAll">
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">营业厅</label>
              <v-select :value.sync="item.f_depname" v-model="item.f_depname"
                        :search="false"
                        :value-single="true"
                        title="参数: 营业厅(大屏信息录入)"
                        :options='depname' placeholder='营业厅'
                        style="width:60%"
                        close-on-select></v-select>
            </div>

<!--            <div class="col-sm-2 form-group">-->
<!--              <label class="font_normal_body">用户类型</label>-->
<!--              <v-select :value.sync="item.f_user_type" v-model="item.f_user_type"-->
<!--                        :search="false"-->
<!--                        :value-single="true"-->
<!--                        title="参数: 用户类型"-->
<!--                        :options='usertype' placeholder='用户类型'-->
<!--                        style="width:60%"-->
<!--                        close-on-select></v-select>-->

<!--            </div>-->
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">归属时间</label>
              <datepicker placeholder="归属时间"
                          v-model="item.f_date"
                          :value.sync="item.f_date"
                          :format="'yyyy-MM-dd HH:mm:ss'"
                          :show-reset-button="true">
              </datepicker>
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">地区</label>
              <v-select :value.sync="item.f_area" v-model="item.f_area"
                        :search="false"
                        :value-single="true"
                        title="参数: 地区(大屏信息录入)"
                        :options='area' placeholder='地区'
                        style="width:60%"
                        close-on-select></v-select>

            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">售气笔数</label>
              <input type="text" style="width:60%" class="input_search" v-model="item.f_count"
                     placeholder="售气笔数">
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">售气量</label>
              <input type="text" style="width:60%" class="input_search" v-model="item.f_gas"
                     placeholder="售气量">
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">售气金额</label>
              <input type="text" style="width:60%" class="input_search" v-model="item.f_money"
                     placeholder="售气金额">
            </div>
          </div>
        </div>
        <div class="col-sm-3" style="text-align: center;">
          <button class="button_clear button_spacing" @click="add(2)">+</button>
          <button class="button_clear button_spacing" @click="remove(2)">-</button>
          <button class="button_search button_spacing" @click="redactSave(2)">保存</button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import {HttpResetClass} from "vue-client";

let load = async (self) => {

  await self.loadParam(self)
}
export default {
  title: '大屏编辑',
  data() {
    return{
      forNum: 1,
      param: [],
      netWorkAll:[
        {
          f_type: '',
          f_yijian: 0,
          f_zaijian: 0,
          f_shenpi: 0,
          f_state: '有效'
        }
      ],
      sellingAll:[
        {
          f_gas: 0.00,
          f_money: 0.00,
          f_depname: '',
          // f_user_type: '',
          f_area: '',
          f_date: '',
          f_count: 0,
          f_state: '有效'
        }
      ]
    }
  },
  methods: {
    loadParam (self) {
      let http = new HttpResetClass()
      let a = []
      http.load('POST', 'api/af-revenue/sql/singleTableParam', {data:{
          items: 'p.name,v.name value',
          tablename:'t_parameter p left join t_paramvalue v on p.id = v.processid',
          condition: '1 = 1'
        }
      }, {
        resolveMsg: null,
        rejectMsg: null
      }).then(res =>{
        self.param = res.data
      })
    },
    getParam(name){
      return this.param.filter(item => item.name == name).map(obj =>{return {label: obj.value, value: obj.value}})
    },
    add(val){
      if(val === 1){
        this.netWorkAll.push({
          f_type: '',
          f_yijian: 0,
          f_zaijian: 0,
          f_shenpi: 0,
          f_state: '有效'
        })
        console.log('dddd', this.netWorkAll)
      }else{
        this.sellingAll.push({
          f_gas: 0.00,
          f_money: 0.00,
          f_depname: '',
          // f_user_type: '',
          f_area: '',
          f_date: '',
          f_count: 0,
          f_state: '有效'
        })
      }

    },
    remove(val){
      if(val === 1){
        if (this.netWorkAll.length === 1) return
        this.netWorkAll.splice(this.netWorkAll.length-1, 1)
      }else{
        if (this.sellingAll.length === 1) return
        this.sellingAll.splice(this.sellingAll.length-1, 1)
      }
    },
    redactSave(flag){
      let http = new HttpResetClass();
      let data = {
        state: flag,
        message: []
      }
      if (flag === 1) {
        data.message = this.netWorkAll
      } else {
        data.message = this.sellingAll
      }
      http.load('POST', 'rs/logic/RedactSave', {data: data}, {
        resolveMsg: null,
        rejectMsg: null
      }).then(res =>{
        console.log('55555555555', res)
        if(res.data === 200) {
          this.$showAlert('保存成功', 'success', 2000)
          if (flag === 1) {
            this.netWorkAll = [{
              f_type: '',
              f_yijian: 0,
              f_zaijian: 0,
              f_shenpi: 0,
              f_state: '有效'
            }]
          } else {
            this.sellingAll = [{
              f_gas: 0.00,
              f_money: 0.00,
              f_depname: '',
              // f_user_type: '',
              f_area: '',
              f_date: '',
              f_count: 0,
              f_state: '有效'
            }]
          }
        }

      })
    }
  },
  ready () {
    load(this)

  },
  watch:{
  },
  props: ['changeshow'],
  computed: {
    networktype(){
      return this.getParam('管网类型(大屏信息录入)')
    },
    usertype(){
      return this.getParam('用户类型')
    },
    depname(){
      return this.getParam('营业厅(大屏信息录入)')
    },
    area(){
      return this.getParam('地区(大屏信息录入)')
    }
  },
}
</script>






  /*关键设置 tbody出现滚动条*/
  #tableLast tbody {
    display: block;
    height: 45px;

  }

  #tableLast thead,
  #tbodyLast tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    border: 1px;
    background-color: #012C45;
    margin-top: 4px;
  }
  #tbodyLast tr td {
    text-align: left;
    color: #00F6FF;
  }



  .font-14-medium1{
    color: #ffffff;
    line-height: 24px;
    font-size: 16px;
    font-family: font-pingfang-medium;
  }
  .scada-font-title {
    margin-right: 1em;
    font-family: tRends;
    font-size: 25px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    letter-spacing: 0px;
  }
  .font-14 {
    font-size: 14px;
    font-family: tRends;
  }
  #top-left {
    /*padding: 1em;*/
    width: 32%;
    height: 100%;
  }

  #top-mid {
    /*padding: 1em;*/
    width: 30%;
    height: 100%;
  }

  #top-right {
    width: 37%;
    height: 100%;
  }

  .title-font {
    font-family: HYk2gj;
    font-size: 40px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 26px;
    letter-spacing: 2px;
    color: #ffffff;
  }

  .title-main {
    margin: 0 auto;
  }

  .flex-inline {
    display: inline-flex;
    justify-content: space-around;
  }

  #pie-one {
    height: 100%;
    width: 35%;
  }

  #weiruhu {
    font-family: tRends;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: #00f6ff;
  }

  #anjian {
    font-family: tRENDS;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: #ffc21f;
  }

  .qinhuamap {
    position: absolute;
    top: 2%;
    left: 35%;
    width: 28%;
    height: 57%;
  }
  .scroll-content {
    position: relative;
    transition: top 0.825s;
  }

}
@media screen and (max-width: 1440px) {
  .main {
    height: 100%;
    padding: 1em;
    flex: 1 1 auto;
    flex-direction: column;
    display: flex;
  }

  #top-left {
    /*padding: 1em;*/
    width: 32%;
    height: 100%;
  }

  #top-mid {
    /*padding: 1em;*/
    width: 30%;
    height: 100%;
  }

  #top-right {
    width: 37%;
    height: 100%;
  }

  .title-font {
    font-family: HYk2gj;
    font-size: 30px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 22px;
    letter-spacing: 2px;
    color: #ffffff;
  }

  .title-main {
    margin: 0 auto;
  }

  .flex-inline {
    display: inline-flex;
    justify-content: space-around;
  }

  #pie-one {
    height: 100%;
    width: 35%;
  }

  #weiruhu {
    font-family: tRends;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 22px;
    letter-spacing: 0px;
    color: #00f6ff;
  }

  #anjian {
    font-family: tRENDS;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 22px;
    letter-spacing: 0px;
    color: #ffc21f;
  }

  .qinhuamap {
    position: absolute;
    top: 2%;
    left: 35%;
    width: 28%;
    height: 57%;
  }
  .font-14-medium{
    color: #ffffff !important;
    line-height: 18px;
    font-size: 12px;
    font-family: font-pingfang-medium;
  }
  .scroll-content {
    position: relative;
    transition: top 0.825s;
  }
}
</style>

