<template>
  <div class="auto">
    <validator name='v'>
      <form novalidate class="form-horizontal">

        <div class="row" style="margin-top:5px;">
          <span style="color:red ">您进行的业务是【{{ model.f_type }}】</span>
        </div>
        <div>
          <div class="col-sm-4" v-if="config.cardFee">
            <label class=" font_normal_body">卡&emsp;&emsp;费</label>
            <input class="input_search" style="width:60%" type="number" v-model="model.f_cardfees">
          </div>
        </div>
        <!--</div>-->
        <div class="row" style="margin-top:5px;">
          <label for="f_comments" class=" font_normal_body">备&emsp;&emsp;注</label>
          <input id="f_comments" class="input_search" style="width:87%" v-model="model.f_comments"
                 v-validate:f_comments='{required: true }'
                 :placeholder="`${model.f_type}备注`"/>

        </div>
      </form>
      <accept-bill :show="acceptprint" :bill-url='acceptUrl' v-on:toggle="close" :data='row' :billdata="printData"
                   @closeaccept="closeAccept" v-ref:acceptbill></accept-bill>
      <validate-bill v-if="hasValidateBill && lose" :data="model" @validate-bill="validateBill"></validate-bill>
      <print-bill :show="print" :bill-config='config' :bill-data='billData' v-on:toggle="close" @printok="printok"
                  :data='row' v-ref:printbill></print-bill>
      <div style="text-align:right;height:auto;margin-top:30px;margin-right:50px;">
        <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>
  <upload :blodid="blodid" v-if="config.showupload" isremark="true" fusetype="机表发卡"></upload>
</template>
<script>
/**
 *综合业务
 *补卡管理组件
 */

let asyncReplaceManage = async function (self) {
  await self.$getConfig(self, 'CiTiaoCardManage')
  console.log('补卡config', self)
  if (self.row.f_whether_hairpin === '已发' || self.row.f_card_id) {
    self.model.f_type = '补磁条卡'
  } else {
    self.model.f_type = '发磁条卡'
  }
  self.fillcardChange(self.model.f_type)
}

export default {
  title: '机表发卡',
  data () {
    return {
      config: {
        showupload: false, // 默认不显示上传附件
        hasPrint: false,  // 默认打票
        hasBillManage: false,  // 默认不启用发票管理
        cardFee: false,  // 默认不显示卡费
        payment: '现金缴费'
      },
      model: {
        f_comments: '',
        f_type: '发磁条卡',
        f_cardfees: 0,
        f_replace_time: ''
      },
      printData: {
        reason: '',
        cardfee: ''
      },
      cardallot: null,
      lose: true,
      blodid: '',
      print: false,
      billData: {
        url: 'rs/report/show_citiao_card',
        bill: ''
      },
      // 启用发票管理需要对票号进行验证
      hasValidateBill: false,
      validateOk: false,
      acceptprint: false,
      acceptUrl: ''
    }
  },
  props: ['row'],
  ready () {
    this.blodid = this.row.f_userinfo_id
    asyncReplaceManage(this).then(() => {
      this.$emit(ready())
    }).catch((error) => {
      this.$emit('error', error)
    })
  },
  watch: {
    'model.f_type' (val) {
      this.fillcardChange(val)
    }
  },
  methods: {
    confirm () {
      this.$dispatch('no-button')
      this.writeCard()
    },
    // 写卡保存数据 迁至此处
    writeCard () {
      if (!this.row.f_card_id) {
        this.row.f_card_id = this.row.f_userinfo_code
      }
      this.$dispatch('stop_citiao_search', '补卡管理')
      this.$CardService.replaceCiTiaoCard(this.model, this.row).then((res) => {
        if (this.config.hasPrint) {
          if (this.config.hasBillManage) {
            this.row.id = res.data.id
            this.row.f_bill_type = '补卡'
            this.row.f_bill_style = ''
            this.print = true
          } else {
            console.log('不保存打票记录')
            this.row.id = res.data.id
            this.print = true
          }
        } else {
          console.log('我没走打票')
          this.$dispatch('success', '补卡管理', this.row, res)
        }
      }
      ).catch(
        (error) => {
          if (error.status === 603) {
            this.$error('重复提交')
            return
          }
          this.$dispatch('error', '补卡管理', this.row, error)
        }
      )
    },
    closeAccept () {
      this.acceptprint = false
    },
    clean () {
      this.$dispatch('success', '补卡管理')
    },
    close () {
      this.print = false
      this.acceptprint = false
      this.clean()
    },
    validateBill (val) {
      this.validateOk = !val.isOk
      this.billData.bill = val.bill
    },
    printok () {
      // 收据打完，判断是否还有其他票据进行请求 TODO
      this.$dispatch('success', '补卡管理')
    },
    fillcardChange (val) {
      this.lose = true
    }
  }
}
</script>

<style>
</style>
