<template>
  <div class="flex-row auto">
    <div class="span auto" style="height: 90%">
      <validator name='v'>
        <form novalidate class="form-horizontal">
            <div style="margin-top:10px;" v-for="row in model.gaslossdetail">
              <div class="panel panel-primary datapanel" style="background-color: #f4f6f8">
                <div class="col-sm-4 form-group" :class="{'has-success':row.f_type,'has-error':!row.f_type}">
                  <label for="f_brand_spec" class="font_normal_body" title="参数名称：气损分类">气损分类</label>
                  <v-select placeholder='气损分类'
                            v-model="row.f_type"
                            :value.sync="row.f_type"
                            :options='types'
                            :value-single="true"
                            close-on-select clear-button>
                  </v-select>
                </div>
                <div class="col-sm-4 form-group" :class="{'has-success':row.f_loss_type,'has-error':!row.f_loss_type}">
                  <label for="f_brand_spec" class="font_normal_body" title="参数名称：气损类型">气损类型</label>
                  <v-select id="f_brand_spec"
                            placeholder='气损类型'
                            v-model="row.f_loss_type"
                            :value.sync="row.f_loss_type"
                            :options='losstypes'
                            :value-single="true"
                            close-on-select clear-button>
                  </v-select>
                </div>
                <div class="col-sm-4 form-group" :class="{'has-success':row.f_unitprice,'has-error':!row.f_unitprice}">
                  <label style="" for="f_unitprice" class=" font_normal_body">单&emsp;&emsp;价</label>
                  <input class="input_search" style="width:60%" type="number" min="0"
                         v-validate:f_unitprice='{required: true, dctest: [0, ">" ] }'
                         @blur.prevent="getcollection()"
                         v-model="row.f_unitprice"
                         placeholder="单价" >
                </div>
                <div class="col-sm-4 form-group" :class="{'has-success':row.f_number,'has-error':!row.f_number}">
                  <label style="" for="f_number" class="font_normal_body">数&emsp;&emsp;量</label>
                  <input class="input_search"  style="width:60%" type="number" min='1' @blur.prevent="getcollection()"
                         v-validate:f_number='{required: true, dctest: [0, ">" ] }'
                         v-model="row.f_number"
                         placeholder="数量" >
                </div>
                <div class="form-group" style="display: flow-root;width: 60px">
                  <button type="button" class="glyphicon glyphicon-minus btn-danger" @click.stop="delthisdetail($index)"></button>
                  <button type="button" class="glyphicon glyphicon-plus btn-success" @click.stop="addadetail()"></button>
                </div>
              </div>
            </div>
        </form>
        <validate-bill v-if="hasValidateBill" :data="model" @validate-bill="validateBill"></validate-bill>
        <print-bill :show="print" :data='row' :bill-config='config' :bill-data='billData' v-on:toggle="close" @printok="printok" v-ref:printbill></print-bill>
        <!-- <print-other-charge-bill :show="print" v-ref:printbill :row='row' :logic='model' v-on:success="close" v-on:toggle="close"></print-other-charge-bill> -->
        <!-- <tax-other-bill :show="taxprint"  v-ref:taxprintbill :row='row' :logic='model' v-on:success="close" v-on:toggle="close"></tax-other-bill> -->
        <div class="col-sm-12 form-group" style="text-align:right;height: 25%;">
<!--          <payment-code-button :clickable="!$v.valid || validateOk"-->
<!--                               :payment.sync="model.f_payment" :payment-data="paytype"-->
<!--                               @confirm-payment="confirm()">-->
<!--          </payment-code-button>-->
          <button class="button_search btn-gn" @click="confirm()" :disabled='!$v.valid || validateOk'>确认</button>
          <button class="button_clear btn-gn" @click="clean()">取消</button>
        </div>

      </validator>

    </div>

<!--    <payment-code v-ref:paymentcode :payment="model.f_payment" :row="row" :money="model.f_collection"></payment-code>-->

  </div>
<!--  <div class="auto">-->
<!--    <upload isremark="true" fusetype="气损收费"></upload>-->
<!--  </div>-->
</template>


<script>

  import {HttpResetClass} from 'vue-client'
  import Vue from 'vue'

  let gasLossGen = async function (self) {
    try {
      // 加入扫码盒付款码支付流水号
      // self.model.f_serial_id = self.$refs.paymentcode.paymentCodeReturnData.f_out_trade_no
      // let resid = await self.$LogicService.otherCharge(self.model, self.row)
      let http = new HttpResetClass()
      self.model.f_describe=`${Vue.$login.f.name}对${self.model.f_charge_person}进行气损收费`
      let resid = await http.load('POST', 'rs/entity/t_gasloss', self.model, {resolveMsg: '气损收费成功', rejectMsg: '气损收费失败'})
      console.log('收费返回id', resid)
      self.clean()
      // if (self.config.hasPrint) {
      //   if (self.model.f_print[0] != '电子发票') {
      //     if (self.config.hasBillManage) {
      //       self.row.id = resid.data
      //       self.row.f_bill_type = '其他收费'
      //       self.row.f_bill_style = self.model.f_print[0]
      //       self.print = true
      //     } else {
      //       self.row.id = resid.data
      //       self.print = true
      //     }
      //   } else if (self.model.f_print[0] === '国税发票') {
      //     // TODO
      //     self.$dispatch('success')
      //   } else if (self.model.f_print[0] === '电子发票') {
      //     self.$CommonService.openEticket(resid.data, '其他收费')
      //     self.$dispatch('success')
      //   }
      // } else {
      //   self.$dispatch('success')
      // }
    } catch (error) {
      self.$showAlert(error, 'danger', 0)
      self.$dispatch('refresh')
    }
  }

  let asyncGasLoss = async function (self) {
    await self.$getConfig(self, 'gasLossCharge')
    self.model.f_print = self.config.printType
    self.model.f_payment = self.config.payment
    self.model.f_use_type = self.config.billType
    self.model.f_bill_type = self.config.f_print
    self.hasValidateBill = self.config.hasBillManage
    self.model.f_type = self.config.f_type
    self.model.f_loss_type = self.config.f_loss_type
  }
  export default {
    title: '其他收费',
    data () {
      return {
        config: {
          showupload: false,
          hasPrint: false,  // 默认打票
          hasBillManage: false,  // 默认不启用发票管理
          billType: '其他费用',   // 票据类型（燃气费，其他费用，调用的发票代码不同）
          printType: '普通收据', // 收据/电子票/专用发票/国税发票
          payment: '现金缴费',  // 付款方式
          f_type: '', // 气损分类
          f_loss_type: '' // 气损类型

        },
        model: {
          f_collection: 0,
          f_payment: '',
          f_bill_style: '',
          f_comments: '',
          f_charge_person: '',
          f_charge_phone: '',
          f_charge_address: '',
          f_state: '有效',
          f_operator: Vue.$login.f.name,
          f_operatorid: Vue.$login.f.id,
          f_orgid: Vue.$login.f.orgid,
          f_orgname: Vue.$login.f.orgs,
          f_depid: Vue.$login.f.depids,
          f_depname: Vue.$login.f.deps,
          f_operat_type: '气损收费',
          gaslossdetail:[{}]
        },
        print: false,
        taxprint: false,
        billData: {
          url: 'rs/report/otherCharge_bill',
          bill: ''
        },

        // 启用发票管理需要对票号进行验证
        hasValidateBill: false,
        validateOk: false,
        types: this.$appdata.getParam('气损分类'),
        printstyle: this.$appdata.getParam('打印格式'),
        paytype: this.$appdata.getParam('付款方式'),
        feetype: this.$appdata.getParam('其他费用'),
        services: this.$appdata.getParam('服务人员')
      }
    },
    props: ['row'],
    ready () {
      asyncGasLoss(this)
    },

    methods: {
      clean(){
        this.model={
          f_collection: 0,
          f_payment: '',
          f_bill_style: '',
          f_comments: '',
          f_charge_person: '',
          f_charge_phone: '',
          f_charge_address: '',
          f_state: '有效',
          f_operator: Vue.$login.f.name,
          f_operatorid: Vue.$login.f.id,
          f_orgid: Vue.$login.f.orgid,
          f_orgname: Vue.$login.f.orgs,
          f_depid: Vue.$login.f.depids,
          f_depname: Vue.$login.f.deps,
          f_operat_type: '气损收费',
          gaslossdetail:[{}]
        }
      },
      async confirm () {
        // // 先调用付款码支付组件流程
        // let ss = await this.$refs.paymentcode.flowPath()
        // this.$refs.paymentcode.paymentCodeShow = false
        // console.log('付款码操作返回', ss)
        // if (!ss.result) return

        gasLossGen(this)
      },
      close () {
        this.taxprint = false
        this.print = false
        this.clean()
      },
      printok () {
        this.$dispatch('success')
      },
      validateBill (val) {
        this.validateOk = !val.isOk
        this.billData.bill = val.bill
      },
      getcollection () {
        let money = 0
        this.model.gaslossdetail.forEach((item) => {
          if (item.f_unitprice && item.f_number) {
            money += ((item.f_unitprice - 0) * (item.f_number - 0)) - 0
          }
        })

        if (money != 0) {
          this.model.f_collection = money.toFixed(4)
        }
      },
      addadetail () {
        this.model.gaslossdetail.push({})
      },
      delthisdetail (index) {
        if (this.model.gaslossdetail.length > 1) {
          this.model.gaslossdetail.splice(index, 1)
          this.getcollection()
        }
      },
    },
    computed: {
      losstypes(){
        console.log("this.model.f_type:",this.model.f_type)
        if (this.model.f_type) {
          return this.$appdata.getParam(this.model.f_type)
        } else {
          return []
        }
      }
    }
  }
</script>

<style>
</style>
