<template>
  <!--    划价-->
  <modal :show.sync="pricesplit" backdrop="false">
    <header slot="modal-header" class="modal-header">
      <h4 class="modal-title">自定义划价</h4>

    </header>
    <article slot="modal-body" class="modal-body">
      <p class="auto text-center">当前气量:{{showdata.f_oughtamount}},当前客户编号:{{showdata.f_userinfo_code}}</p>
      <div class="auto">
        <div class="row bg-info text-center text-center" style="height:35px">
          <div style="float: left">
            <label class="font_normal_body">新气价信息</label>
          </div>
        </div>
        <div class="row" style="margin-top: 2%">
          <div class="col-sm-3 flex-row" >
            <label class="control-label" style="line-height: 36px;">用户类型</label>
            <v-select :value.sync="newinfo.f_user_type"
                      :options='usertypes' placeholder='用户类型'
                      @change="userTypeChange()"
                      close-on-select></v-select>
          </div>
          <div class="col-sm-3 flex-row"
               :class="[$m.gas.required ? 'has-error' : '']">
            <label class="control-label" style="line-height: 36px;">用气性质</label>
            <!--              <input type="text" v-show="false" v-model="$refs.gas.selectedItems" v-validate:gas='{required: true }'>-->
            <v-select :value.sync="newinfo.f_gasproperties" v-model="newinfo.f_gasproperties"
                      :options='gasproperties' placeholder='用气性质'
                      close-on-select v-ref:gas></v-select>
          </div>
          <div class="col-sm-3 flex-row" :class="[$m.type.required ? 'has-error' : '']">
            <label class="control-label" style="line-height: 36px;">气价类型</label>
            <v-select :value.sync="newinfo.pricetype" v-model="newinfo.pricetype"
                      placeholder='气价类型' :options="pricetypes" @change="getPricename()"
                      close-on-select v-ref:type>
            </v-select>
            <!--              <input type="text" v-show="false" v-model="$refs.type.selectedItems" v-validate:type='{required: true }'>-->
          </div>
          <div class="col-sm-3 flex-row" :class="[$m.name.required ? 'has-error' : '']">
            <label class="control-label" style="line-height: 36px;">气价名称</label>
            <v-select :value.sync="newinfo.pricename" v-model="newinfo.pricename"
                      placeholder='气价名称' :options="pricenames" @change="splitprice()"
                      close-on-select :disabled='newinfo.pricetype.length === 0 ' v-ref:name></v-select>
          </div>
        </div>

        <table  class="table table-condensed" style="margin-top:15px; margin-left:5%; width:90%;text-algin:center;">
          <thead>
          <tr>
            <th style="text-align:center"><nobr>阶梯数</nobr></th>
            <th style="text-align:center"><nobr>气量</nobr></th>
            <th style="text-align:center"><nobr>单价</nobr></th>
            <th style="text-align:center"><nobr>金额</nobr></th>
            <th style="text-align:center"><nobr>时间</nobr></th>
            <th style="text-align:center"><nobr>操作</nobr></th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(index,row) in stairmodel">
            <td v-if='!row.f_price_name'>
              <v-select :value.sync="row.ladder" v-model="row.ladder" width="100%"
                        placeholder='请选择' :options="ladderLen" @change="setprice(row)"
                        close-on-select  v-ref:name></v-select>
            </td>
            <td v-if='row.f_price_name'>{{row.f_price_name}}</td>
            <td style="text-align:center">
              <input class="input_search" style="width: 100px" type="number" v-model="row.f_gas" :disabled="isDisable"
                     placeholder="气量" @blur="computedStyle(index)">
            </td>
            <td style="text-align:center">
              <input class="input_search" style="width: 100px" type="number" v-model="row.f_price" :disabled="isDisable"
                     placeholder="单价" @blur="computedStyle(index)" :readonly="true" >
            </td>
            <td style="text-align:center">
              <input class="input_search" style="width: 100px" type="number" v-model="row.f_all" :readonly="true" :disabled="isDisable"
                     placeholder="金额">
            </td>
            <td style="text-align:center">
              <datepicker placeholder="时间"
                          style="width:60%"
                          v-model="row.f_perform_date"
                          :value.sync="row.f_perform_date"
                          :format="'yyyy-MM-dd HH:mm:ss'"
              ></datepicker>
            </td>
            <td style="text-align:center">
              <div style="width:80px;">
                <span @click="putAddGas(row)" class="glyphicon glyphicon-plus"></span>
                <span v-if="stairmodel.length>1" class="glyphicon glyphicon-minus" @click="delGas($index)"></span>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <p class="auto text-right">总金额:{{allprices}}</p>
    </article>

    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-default" @click='saveandCloseSplit(false)' >取消</button>
      <button type="button" class="btn btn-default" @click='saveandCloseSplit(true)' :disabled="clickFlag">保存</button>
    </footer>
  </modal>
</template>
<script>
  import {HttpResetClass} from 'vue-client'
  import {PagedList} from 'vue-client'
  export default {
    title: '自定义划价',
    props: ['showdata', 'pricesplit'],
    data () {
      return {
        model: '',
        showmodel: false,
        splitpriceValue: [],
        isEdit: false,
        f_isheat: '',
        stairmodel: [],
        addflag: true,
        allPricess: 0,
        clickFlag: true,
        gasproperties: [],
        newinfo: {
          f_user_type: '',
          f_gasproperties: '',
          pricetype: '',
          pricename: '',
          f_perform_date: this.$login.toStandardTimeString() // 操作时间
        },
        f_filialeid: this.$login.f.orgid,
        gasproperties2: this.$appdata.getParam('用气性质') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')] : [],
        usertypes: this.$appdata.getParam('用户类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')] : [],
        pricetypes: this.$appdata.getParam('气价类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('气价类型')] : [],
        orderitem: 'f_price_id',
        pricenames: [],
        // 存储阶梯
        ladderLen: [],
        // 存储气价值
        pricevalueLen: []
      }
    },
    async ready () {
      let data = {
        condition: 'f_filialeid  in (' + this.$login.f.orgid + ')',
        orderitem: this.orderitem
      }
      let res = await this.$resetpost('rs/sql/getGasPriceInfo', {'data': data}, {
        resolveMsg: null,
        rejectMsg: '保存失败！！'
      })
      this.model = res.data
  },
  compiled () {
    console.log('aaaa')
},
  methods: {
    // 设置气价
    setprice (row) {
      if (this.pricevalueLen.length > 0 && row.ladder >= 0) {
        row.f_price = this.pricevalueLen[row.ladder]
      }
    },
    // 点击增加按钮触发事件:增加阶梯
    putAddGas (row) {
      if (this.pricevalueLen.length > 0 && row.ladder >= 0) {
        this.addGas(this.pricevalueLen[row.ladder])
      } else {
        this.$showAlert('当前气价无阶梯', warning, 1000)
      }
    },
    delGas (index) {
      if (this.stairmodel.length > 1) {
        this.stairmodel.splice(index, 1)
      }
    },
    async splitprice () {
      this.stairmodel = []
      let count = 0
      let data = {
        price_type: this.newinfo.pricetype[0],
        f_user_type: this.newinfo.f_user_type[0],
        f_gasproperties: this.newinfo.f_gasproperties[0],
        f_price_name: this.newinfo.pricename[0]
      }
      let res = await this.$resetpost('rs/sql/getPriceMoney', {'data': data}, {
        resolveMsg: null,
        rejectMsg: '保存失败！！'
      })
      this.pricevalueLen = []
      this.ladderLen = []
      for (let i = 0; i < res.data.length; i++) {
        this.ladderLen.push({label: '阶梯' + (i + 1), value: (i + 1)})
        this.pricevalueLen.push(res.data[i].f_price)
        if (i == 0) {
          this.addGas(res.data[i].f_price)
        }
      }
    },
    getPricename () {
      let gasproperties = []
      this.pricenames = {}
      for (let i = 0; i < this.model.length; i++) {
        if (this.model[i].f_user_type == this.newinfo.f_user_type[0]) {
          if (this.model[i].f_price_type == this.newinfo.pricetype[0]) {
            if (this.model[i].f_gasproperties == this.newinfo.f_gasproperties[0]) {
              gasproperties.push({label: this.model[i].f_price_name, value: this.model[i].f_price_name})
            }
          }
        }
      }
      this.pricenames = gasproperties
  },
    getPricenames () {
      console.log('气价。，。。', this.newinfo.pricetype, this.newinfo.f_user_type, this.newinfo.f_gasproperties)
      let rs = []
      if (this.newinfo.f_user_type.length === 1 && this.newinfo.f_gasproperties.length === 1 && this.newinfo.pricetype.length === 1) {
        let params = {
          f_user_type: this.newinfo.f_user_type[0],
          f_gasproperties: this.newinfo.f_gasproperties[0],
          f_price_type: this.newinfo.pricetype[0],
          filter: this.f_filialeid
        }
        rs = this.$GetSaleParam.getPrice(params)
      }
      if (rs.length === 0) {
        this.newinfo.f_price_name = ''
      }
      return rs
    },
    userTypeChange () {
      this.gasproperties = []
      if (this.newinfo.f_user_type.length === 1) {
        this.gasproperties = this.$appdata.getParam(this.newinfo.f_user_type[0])
        console.log('获取的气价:' + JSON.stringify(this.gasproperties))
      }
    },
    computedStyle (index) {
      console.log('触发事件' + index)
      if (this.stairmodel.length == 1) {
        if (this.stairmodel[0].f_gas == '') {
          this.stairmodel[0].f_gas = 0
        }
        if (this.stairmodel[0].f_price == '') {
          this.stairmodel[0].f_price = 0
        }
        this.stairmodel[0].f_all = parseFloat(this.stairmodel[0].f_gas) * parseFloat(this.stairmodel[0].f_price)
        this.stairmodel[0].f_all = this.stairmodel[0].f_all.toFixed(2)
        if (this.stairmodel[0].f_gas > parseFloat(this.showdata.f_oughtamount)) {
          this.$showAlert('已经超过气量', 'info', 1000)
          this.stairmodel[0].f_gas = 0
          this.stairmodel[0].f_all = 0
          this.addflag = false
        } else {
          this.addflag = true
        }
        if (this.stairmodel[0].f_gas == parseFloat(this.showdata.f_oughtamount)) {
          this.clickFlag = false
        } else {
          this.clickFlag = true
        }
      } else {
        let gasAll = 0
        for (let i = 0; i < this.stairmodel.length; i++) {
          if (this.stairmodel[i].f_gas == '') {
            this.stairmodel[i].f_gas = 0
          }
          if (this.stairmodel[i].f_price == '') {
            this.stairmodel[i].f_price = 0
          }

          this.stairmodel[i].f_all = parseFloat(this.stairmodel[i].f_gas) * parseFloat(this.stairmodel[i].f_price)
          gasAll = parseFloat(this.stairmodel[i].f_gas) + parseFloat(gasAll)
        }
        if (gasAll > parseFloat(this.showdata.f_oughtamount)) {
          this.$showAlert('已经超过气量', 'info', 1000)
          this.stairmodel[index].f_gas = 0
          this.stairmodel[index].f_all = 0
          this.addflag = false
        } else {
          this.addflag = true
        }
        if (gasAll == parseFloat(this.showdata.f_oughtamount)) {
          this.clickFlag = false
        } else {
          this.clickFlag = true
        }
      }
    },

    clearNowRow (index) {
      if (index > this.stairmodel.length - 1 || index < 0) {

  } else {
        this.stairmodel[index].f_gas = 0
        this.stairmodel[index].f_price = 0
        this.stairmodel[index].f_all = 0
      }
  },
    // 关闭划价模块
    async saveandCloseSplit (row) {
      // this.$parent.priceSplit=false
      let resultArr
      let data = {}
      if (row) {
        // 需要保存
        // 去掉价格为0的
        resultArr = this.stairmodel.filter(function (item) {
          return item.f_all != 0
        })
        data.model = this.showdata
        data.allprice = this.allPricess
        data.splitprice = resultArr
        console.log('将要保存的值:' + data)
        let res = await this.$resetpost('rs/logic/addSplitPrice', data, {
          resolveMsg: null,
          rejectMsg: '保存失败！！'
        })
        this.$showAlert('保存成功', 'success', 1000)
        this.$parent.priceSplit = false
      } else {
        this.$parent.priceSplit = false
      }
      this.showdata = {}
      this.stairmodel = []
  },
    addGas (price) {
      this.stairmodel.push({
        ladder: '',
        f_price_name: '',
        f_gas: '',
        f_price: price,
        f_all: '',
        f_perform_date: ''
      })
    }

  },
  computed: {
    allprices () {
      let allprice = 0
      for (let i = 0; i < this.stairmodel.length; i++) {
        if (this.stairmodel[i].f_all == '') {
          this.stairmodel[i].f_all = 0
        }
        allprice = parseFloat(allprice) + parseFloat(this.stairmodel[i].f_all)
      }
      this.allPricess = allprice
      return allprice
  }
  }

  }
</script>
