<template>
  <div class="auto">
    <modal :show.sync="show" v-ref:modal large backdrop="false">
      <header slot="modal-header" class="modal-header">
        <h3 style="color: black" class="modal-title">欠费详情</h3>
      </header>
      <article slot="modal-body" class="modal-body">
        <validator name="v">
          <form class="form-horizontal select-overspread">
            <div class="row" style="margin-top: 20px">
              <div class="col-sm-6 form-input-group">
                <label class="control-label col-sm-3">用户名称</label>
                <input
                  type="text"
                  v-model="arrearsData.f_user_name"
                  placeholder="用户名称"
                  readonly
                />
              </div>
              <div class="col-sm-6 form-input-group">
                <label class="control-label col-sm-3">加气枪</label>
                <input
                  type="text"
                  v-model="arrearsData.f_adjustable_id"
                  placeholder="加气枪"
                  readonly
                />
              </div>
            </div>
            <div class="row" style="margin-top: 20px">
              <div class="col-sm-6 form-input-group">
                <label class="control-label col-sm-3">充装量</label>
                <input
                  type="text"
                  v-model="arrearsData.f_pregas"
                  placeholder="充装量"
                  readonly
                />
              </div>
              <div class="col-sm-6 form-input-group">
                <label class="control-label col-sm-3">加气金额</label>
                <input
                  type="text"
                  v-model="arrearsData.f_preamount"
                  placeholder="加气金额"
                  readonly
                />
              </div>
            </div>
            <div class="row" style="margin-top: 20px">
              <div class="col-sm-6 form-input-group">
                <label class="control-label col-sm-3">气价</label>
                <input
                  type="text"
                  v-model="arrearsData.f_price"
                  placeholder="气价"
                  readonly
                />
              </div>
              <!--              <div class="col-sm-6 form-input-group">-->
              <!--                <label class="control-label col-sm-3">已支付</label>-->
              <!--                <input type="text" v-model="arrearsData.f_collection" placeholder="已支付">-->
              <!--              </div>-->
              <div class="col-sm-6 form-input-group">
                <label class="control-label col-sm-3">欠费金额</label>
                <input
                  type="text"
                  v-model="arrearsData.f_arrears"
                  placeholder="欠费金额"
                  readonly
                />
              </div>
            </div>
<!--            <div class="row" style="margin-top: 20px">-->
<!--              <div class="col-sm-6 form-input-group">-->
<!--                <label class="control-label col-sm-3">气价名称</label>-->
<!--                <input-->
<!--                  type="text"-->
<!--                  v-model="arrearsData.price_name"-->
<!--                  placeholder="气价名称"-->
<!--                />-->
<!--              </div>-->
<!--            </div>-->

            <div class="row" style="margin-top: 20px">
              <div class="col-sm-6 form-input-group">
                <label class="control-label col-sm-3">付款方式</label>
                <v-select
                  id="f_payment"
                  style="height: 27px"
                  v-model="arrearsData.f_payment"
                  placeholder="请选择"
                  :value.sync="arrearsData.f_payment"
                  :options="paytype"
                  value-single
                  close-on-select
                  clear-button
                >
                </v-select>
              </div>
              <div class="col-sm-6 form-input-group">
                <label class="control-label col-sm-3">打印格式</label>
                <v-select
                  id="print"
                  style="height: 27px"
                  v-model="f_print"
                  placeholder="请选择"
                  :multiple="mulPrint"
                  :value.sync="arrearsData.f_print"
                  :options="printstyle"
                  value-single
                  close-on-select
                  clear-button
                >
                </v-select>
              </div>
            </div>
            <div class="row" style="margin-top: 20px">
              <div class="col-sm-12 form-input-group">
                <label for="f_comments" class="control-label"
                  >备&nbsp;&nbsp;注</label
                >
                <input
                  class="input_search"
                  style="width: 100%"
                  v-model="arrearsData.f_comments"
                  placeholder="备注"
                />
              </div>
            </div>
          </form>
        </validator>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button class="btn btn-success" @click="confirm">确认</button>
        <button class="btn btn-default" @click="cancel">取消</button>
      </footer>
    </modal>
    <modal :show.sync="show2" v-ref:modal large backdrop="false">
      <header slot="modal-header" class="modal-header">
        <h3 style="color: black" class="modal-title">扫码支付</h3>
      </header>
      <article slot="modal-body" class="modal-body">
        <validator name="v">
          <form class="form-horizontal select-overspread">
            <div class="row" style="margin-top: 20px">
              <div class="col-sm-6 form-input-group">
                <label class="control-label col-sm-3">扫码枪</label>
                <input
                  type="text"
                  v-model="arrearsData.scan"
                  placeholder="扫码枪编号"
                  @keypress.enter="onEnterPressed"
                  v-el:scan
                />
              </div>
            </div>
          </form>
        </validator>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button class="btn btn-success" @click="scanConfirm">确认</button>
        <button class="btn btn-default" @click="show2=false">取消</button>
      </footer>
    </modal>
  </div>
</template>
<script>
export default {
  title: '欠费收费详情',
  data () {
    return {
      model: {
        f_third_pay: '0',
        f_time_type: '按月',
        f_time_value: '',
        f_limit_type: '气量',
        f_limit_value: 0
      },
      limitshow: false,
      thirdPays: [
        { label: '支持', value: '1' },
        { label: '不支持', value: '0' }
      ],
      timeTypes: [
        { label: '按月', value: '按月' },
        { label: '按日', value: '按日' }
      ],
      limitTypes: [
        { label: '气量', value: '气量' },
        { label: '金额', value: '金额' }
      ],
      row: {},
      show2: false,
      paytype: this.$appdata.getParam('缴费类型'),
      printstyle: this.$appdata.getParam('打印格式')
    }
  },
  props: ['arrearsData', 'show', 'f_price_id', 'f_userinfo_id'],
  ready () {
    this.getLimitData()
    this.row = this.arrearsData
  },
  watch: {
    f_price_id () {
      this.getLimitData()
    },
    f_userinfo_id () {
      this.getLimitData()
    }
  },
  methods: {
    getLimitData () {
      console.log('获取限购配置。。', this.f_price_id, this.f_userinfo_id)
      if (this.f_price_id || this.f_userinfo_id) {
        // eslint-disable-next-line no-undef
        getLimitDataGen(this)
      }
    },
    onEnterPressed (event) {
      // if (this.arrearsData.scan === '') {
      event.preventDefault() // 阻止默认事件
        // return false
      // }
      this.scanConfirm()
    },
    confirm () {
      if (this.arrearsData.f_payment === '扫码枪支付') {
        this.show2 = true
        setTimeout(() => {
          this.$els.scan.focus() // 聚焦到 input 元素
        }, 100)
        return
      }
      this.$showMessage(
        `对其进行收费，确定要进行该操作吗？?`,
        ['confirm', 'cancel']
      ).then((res) => {
        this.$resetpost('rs/logic/arrearsCharge', this.arrearsData, {
          resolveMsg: null,
          rejectMsg: '获取修改明细出错!'
        }).then((res) => {
          this.limitshow = false
          this.$emit('cancel-show', this.arrearsData)
          this.$parent.search()
        })
      })
    },
    scanConfirm () {
      console.log(this.arrearsData)
      this.$resetpost('rs/logic/arrearsCharge', this.arrearsData, {
        resolveMsg: null,
        rejectMsg: '获取修改明细出错!'
      }).then((res) => {
        this.limitshow = false
        this.$emit('cancel-show', this.arrearsData)
        this.$parent.search()
      })
      this.arrearsData.scan = ''
      this.show2 = false
      this.show = false
    },
    cancel () {
      this.show = false
    }
  }
}
</script>
<style scoped>
input {
  text-indent: 0.6em;
}
</style>
