<template>
  <div class="auto">
    <validator name='v'>
      <form novalidate class="form-horizontal">
        <p class="bg-info text-center" style="padding: 8px;">其他收费信息</p>
        <div class="row" style="margin-top:10px;">
          <div class="form-input-group col-sm-4">
            <label for="f_brand_spec" class="control-label col-sm-2 ">收费类型:</label>
            <div class="col-sm-2">
              <v-select id="f_brand_spec"
                        v-model="model.f_brand_spec"
                        placeholder='材料'
                        :value.sync="model.f_brand_spec"
                        :options='brandspec'
                        close-on-select clear-button>
              </v-select>
            </div>
          </div>
          <div class="form-input-group col-sm-4">
            <label for="f_paytype" class="control-label col-sm-2">付款方式:</label>
            <div class="col-sm-2">
              <v-select id="f_payment"
                        v-model="f_payment"
                        placeholder='请选择'
                        :value.sync="model.f_payment"
                        :options='paytype'
                        close-on-select clear-button>
              </v-select>
            </div>
          </div>
          <div class="form-input-group col-sm-4">
            <label for="f_print" class="control-label col-sm-2">打印格式:</label>
            <div class="col-sm-2">
              <v-select id="print"
                        v-model="f_print"
                        placeholder='请选择'
                        :value.sync="model.f_print"
                        :options='printstyle'
                        close-on-select clear-button>
              </v-select>
            </div>
          </div>

        </div>

        <div class="row" style="margin-top:10px;" v-if="model.f_brand_spec[0]=='其他费用'">
          <div class="form-input-group col-sm-4" :class="[$v.f_fee_type.required ? 'has-error' : 'has-success']">
            <input v-validate:f_fee_type='{required: true}' v-model="model.f_fee_type" v-show="false" />
            <label for="f_fee_type" class="control-label col-sm-2 ">其他收费类型:</label>
            <div class="col-sm-2">
              <v-select id="f_fee_type"
                        v-model="model.f_fee_type"
                        placeholder='请选择'
                        :value.sync="model.f_fee_type"
                        :options='feetype'
                        close-on-select clear-button>
              </v-select>
            </div>
          </div>

          <div class="form-input-group col-sm-4">
            <label for="f_fee_time" class="control-label col-sm-2">本次购买时间:</label>
            <div class="col-sm-2">
              <v-select id="f_fee_time"
                        v-model="model.f_fee_time"
                        placeholder='请选择'
                        :value.sync="model.f_fee_time"
                        :options='feetime'
                        close-on-select clear-button>
              </v-select>
            </div>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <div class="form-input-group col-sm-4" :class="[$v.f_unitprice.required || $v.f_unitprice.dctest? 'has-error' : 'has-success']">
            <label style="" for="f_unitprice" class=" col-sm-2 control-label">单价:</label>
            <div class="col-sm-2">
              <input  class="form-control" type="number" min = "1" v-validate:f_unitprice='{required: true, dctest: [0, ">" ] }'
                      v-model="model.f_unitprice" placeholder="单价" v-next-el='sl'>
            </div>
          </div>
          <div class="form-input-group col-sm-4" :class="[$v.f_number.required || $v.f_number.dctest? 'has-error' : 'has-success']">
            <label style="" for="f_number" class="col-sm-1  control-label">数量:</label>
            <div class="col-sm-2">
              <input  class="form-control" type="number" min='1'  v-validate:f_number='{required: true, dctest: [0, ">" ] }'
                      v-model="model.f_number" placeholder="数量" v-next-el='sk' v-el:sl>
            </div>
          </div>
          <div class="form-input-group col-sm-4" :class="[$v.f_collection.required ? 'has-error' : 'has-success']">
            <label for="f_collection" class="col-sm-2 control-label">收款:</label>
            <div class="col-sm-2">
              <input class="form-control " type="number" min = "0" v-model="model.f_collection"
                v-validate:f_collection='{required: true }' placeholder="0"  v-el:sk>
            </div>
          </div>
        </div>
        <div class="row" style="margin-top:10px;" v-if="model.f_payment[0].includes('POS')">
          <div class="form-group form-input-group col-sm-4">
            <label for="f_voucher_number" class="control-label col-sm-2">凭证号:</label>
            <input type="text" class="form-control col-sm-2" v-model="model.f_voucher_number" placeholder="凭证号">
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <div class="form-input-group col-sm-12" :class="[$v.f_note.required ? 'has-error' : 'has-success']">
            <label for="f_note" class=" col-sm-2 control-label">备注:</label>
            <div class="col-sm-10">
              <textarea class="form-control" v-model="model.f_note" rows="3"
              v-validate:f_note='{required: true }' placeholder="备注"></textarea>
            </div>
          </div>
        </div>
      </form>
      <print-bill :show="print" v-ref:printbill :bill-url='billUrl' v-on:toggle="close" :data='row'></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 style="text-align:right;margin-top:30px;margin-right:50px;">
        <button class="btn btn-success" @click="confirm()"  title="演示系统暂不支持" :disabled="true" id='components-comOpe-othCha-确认'>确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认</button>
        <button class="btn btn-default" @click="clean()" style="width:80px;margin-left:20px;" id='components-comOpe-othCha-取消'>取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消</button>
      </div>
    </validator>
  </div>
</template>
<script>
  let otherChargeGen = async function (self) {
    try {
      let res = await self.$LogicService.otherCharge(self.model, self.row)
      console.log('其他收费返回id', res)
      if (self.config.hasPrint) {
        if (self.config.printType === '普通收据') {
          if (self.config.hasBillManage) {
            self.row.id = res.data.id
            self.row.f_bill_type = '其他收费'
            self.row.f_bill_style = self.model.f_print[0]
            self.billUrl = 'rs/report/otherCharge_bill'
            self.print = true
          } else {
            self.row.id = res.data.id
            self.billUrl = 'rs/report/otherCharge_bill'
            self.print = true
          }
        } else if (self.config.printType === '国税发票') {
          // TODO
        } else if (self.config.printType === '电子发票') {
          // TODO
        }
      } else {
        self.$dispatch('success')
      }
    } catch (error) {
      self.$showAlert(error,'danger', 0)
      self.$dispatch('refresh')
    }
  }

  let asyncOtherCharge = async function(self){
    await self.$getConfig(self,'OtherCharge')
    self.model.f_print = self.config.printType instanceof Array ? self.config.printType : [self.config.printType]
    self.model.f_payment = [self.config.payment]
    self.model.f_brand_spec = [self.config.brandspec]
  }
export default {
  title: '其他收费',
  data () {
    return {
      config: {
        hasPrint : true,  //默认打票
        hasBillManage :false,  //默认不启用发票管理
        printType: '普通收据', // 收据/电子票/专用发票/国税发票
        payment: '现金缴费',  // 付款方式
        brandspec: '材料费' // 收费类型
      },
      model: {
        f_brand_spec: ['材料费'],
        f_print: [],
        f_payment: '现金缴费',
        f_number: 0,
        f_unitprice: 0,
        f_collection: 0,
        f_note: '',
        f_voucher_number: '',
        //用户其他费用信息
        t_userfees: '',
        f_fee_type: [],
        f_fee_time: ['12'],
      },
      print: false,
      taxprint: false,
      billUrl: '',


      brandspec: this.$appdata.getParam('品名及规格'),
      printstyle: this.$appdata.getParam('打印格式'),
      paytype: this.$appdata.getParam('付款方式'),
      feetype: this.$appdata.getParam('其他费用')
    }
  },
  props: ['row'],
  ready () {
    // this.model.f_unitprice = this.$appdata.getSingleValue('置换气费')
    asyncOtherCharge(this)
  },
  watch: {
    'model.f_unitprice' (val) {
      this.model.f_collection = (((val - 0) * (this.model.f_number - 0)) - 0).toFixed(2)
    },
    'model.f_number' (val) {
      this.model.f_collection = (((val - 0) * (this.model.f_unitprice - 0)) - 0).toFixed(2)
    },
    'model.f_brand_spec' (val) {
      if (val[0]) {
        this.model.f_unitprice = this.$appdata.getSingleValue(val[0]) ? this.$appdata.getSingleValue(val[0]) : 0
      }
    },
    'model.f_fee_type'(val){
      if(val[0]){
        this.userfees(this.row.f_userinfo_id,val[0])
      }
    }
  },
  methods: {
    confirm () {
      otherChargeGen(this)
    },
    clean () {
      this.$dispatch('clean', this.row)
    },
    close () {
      this.taxprint = false
      this.print = false
      this.clean()
    },
    async userfees(userinfoid,feetype){
      this.model.t_userfees = await this.$resetpost('rs/sql/saleSingleTable', {data: {tablename: 't_userfees', condition:`f_userinfo_id=${userinfoid} and f_fee_type='${feetype}'` }},{resolveMsg: null, rejectMsg: '查询用户其他费用失败!'})
    }
  },
  computed: {
    feetime(){
      return [{label: '一个月', value: '1'},{label: '三个月', value: '3'},{label: '六个月', value: '6'},{label: '一年', value: '12'}]
    }
  }
}
</script>

<style>
</style>
