<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;">
          <!--<label class="radio-inline col-sm-2" v-if="row.f_meter_type !== '机表'">-->
          <!--<input type="radio" value="IC卡坏" v-model="model.f_fillcard_type" checked class="magic-radio" id="type_one">-->
          <!--&lt;!&ndash; <strong>IC卡坏</strong> &ndash;&gt;-->
          <!--<label for="type_one">IC卡坏</label>-->
          <!--</label>-->
          <label class="radio-inline col-sm-2">
            <input type="radio" value="IC卡丢失或损坏" v-model="model.f_fillcard_type" class="magic-radio" id="type_two">
            <label for="type_two">IC卡丢失或损坏</label>
            <!-- <strong>IC卡丢失或损坏</strong> -->
          </label>
          <label class="radio-inline col-sm-2" v-if="row.f_meter_type !== '机表'">
            <input type="radio" value="IC卡信息错乱" v-model="model.f_fillcard_type" class="magic-radio" id="type_three">
            <label for="type_three">IC卡信息错乱</label>
            <!-- <strong>IC卡信息错乱</strong> -->
          </label>
          <label class="radio-inline col-sm-2" v-if="row.f_meter_type !== '机表'">
            <input type="radio" value="其他" v-model="model.f_fillcard_type" class="magic-radio" checked id="type_four">
            <label for="type_four">其他</label>
            <!-- <strong>其他</strong> -->
          </label>
        </div>

        <div class="row" style="margin-top:30px;"  v-if='this.lose == true'>
          <label for="f_cardfees" class=" col-sm-2 control-label">卡费:</label>
          <div class="col-sm-2">
            <input class="form-control" type="number" v-model="model.f_cardfees">
          </div>
        </div>
        <div class="row" style="margin-top:10px;" v-if="model.f_fillcard_type === '其他'" :class="[$v.f_reason.required ? 'has-error' : 'has-success']">
          <label for="f_reason" class=" col-sm-2 control-label">补卡原因:</label>
          <div class="col-sm-9">
            <textarea class="form-control" v-model="model.f_reason" v-validate:f_reason='{required: true }'
                      rows="3" placeholder="补卡原因" ></textarea>
          </div>
        </div>
      </form>
      <!--<machine-card-bill :show="print" v-ref:printbill :data='row' v-on:toggle="close"></machine-card-bill>-->
      <print-bill :show="print" :bill-manager='config.hasBillManage' :bill-url='billUrl' v-on:toggle="close" :data='row' v-ref:printbill></print-bill>
      <div style="text-align:right;height:auto;margin-top:30px;margin-right:50px;">
        <button class="btn btn-success" @click="confirm()"  title="演示系统暂不支持" :disabled="true">确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认</button>
        <button class="btn btn-default" @click="clean()" style="width:80px;margin-left:20px;">取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消</button>
      </div>
    </validator>
  </div>
</template>
<script>
  /**
   *综合业务
   *补卡管理组件
   */

   let asyncReplaceManage = async function(self){
       await self.$getConfig(self,'ReplaceCardManage')
       console.log('补卡config', self.config)
   }


  export default {
    title: '补卡管理',
    data () {
      return {
        config: {
          hasPrint : false,  //默认打票
          hasBill : false,  //默认不取票号
          hasBillManage :false  //默认不启用发票管理
        },
        model: {
          f_reason: '',
          f_fillcard_type: '其他',
          f_cardfees: '',
          f_replace_time: ''
        },
        cardallot: null,
        lose: false,
        print: false,
        billUrl: ''
      }
    },
    props: ['row'],
    ready () {
      asyncReplaceManage(this).then(()=>{
        this.$emit(ready())
      }).catch((error)=>{
        this.$emit('error',error)
      })
    },
    watch: {
      'model.f_fillcard_type' (val) {
        if (val === 'IC卡丢失或损坏') {
          this.lose = true
          this.model.f_cardfees = this.$appdata.getSingleValue('默认卡费')
        } else {
          this.lose = false
        }
      }
    },
    methods: {
      confirm () {
        if (this.config.hasBillManage) {
          this.$showMessage(`您现在可以使用的卡号为:${this.cardallot.f_now_number},卡类型为:${this.cardallot.f_card_type},请确定您即将使用的是本卡号`,
            ['confirm', 'cancel']).then((res) => {
            if (res === 'confirm') {
              this.writeCard()
            }
          })
        } else {
          this.writeCard()
        }
      },
      // 写卡保存数据 迁至此处
      writeCard () {
        this.$CardService.replaceCard(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.row.f_preamount = `${this.model.f_cardfees}$`
                  this.row.f_collection = `${this.model.f_cardfees}$`
                  this.billUrl = 'rs/report/replace_sell'
                  this.print = true
                } else{
                  console.log('不保存打票记录')
                  this.row.id = res.data.id
                  this.billUrl = 'rs/report/replace_sell'
                  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)
          }
        )
      },
      clean () {
        this.$dispatch('refresh')
      },
      close () {
        this.print = false
        this.clean()
      }
    }
  }
</script>

<style>
</style>
