<template>
  <div class="auto basic-main" style="height:95%">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
          <div  class="form-group col-sm-2">
            <label class="font_normal_body">客户编号</label>
            <input  type="text" class="form-control" v-model="model.f_userinfo_code" style="width:60%"
                    condition="f_userinfo_code = '{}' "  placeholder="客户编号"
            >
          </div>
          <div  class="form-group col-sm-2">
            <label class="font_normal_body">用户姓名</label>
            <input  type="text" class="form-control" v-model="model.f_user_name" style="width:60%"
                    condition="f_user_name = '{}'" placeholder="用户姓名"
            >
          </div>
          <div  class="form-group col-sm-2" >
            <label class="font_normal_body">业务类型</label>
            <v-select id="f_charge_type"
                      style="width:60%"
                      v-model="model.f_type"
                      placeholder='业务类型'
                      condition="f_type ='{}'"
                      :value.sync="model.f_type"
                      :options='$parent.$parent.chargetypes'
                      close-on-select clear-button>
            </v-select>
          </div>

          <div style="float: right">
            <button class="btn button_search"  @click="search()">查 询</button>
            <button class="btn btn-success"  @click="$parent.$parent.openCustETicket">自定义开票</button>
            <button class="btn btn-success"  @click="$parent.$parent.open_eTicket()">开票</button>
            <div
              :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
              @click="$parent.$parent.criteriaShow=!$parent.$parent.criteriaShow"
              class="button_spacing"
              style="float: right"></div>
            </div>
          </div>
          <div class="row" v-show="$parent.$parent.criteriaShow">
            <div class="form-group col-sm-2">
              <label class="font_normal_body">开票时间</label>
              <datepicker id="startDate" placeholder="开始时间"
                          v-model="model.startDate"
                          :value.sync="model.startDate"
                          style="width: 60%"
                          condition="f_operate_date >='{}'"
                          :format="'yyyy-MM-dd 00:00:00'"
              >
              </datepicker>
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body">&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
              <datepicker id="endDate" placeholder="结束时间"
                          style="width: 60%"
                          v-model="model.endDate"
                          :value.sync="model.endDate"
                          condition="f_operate_date <='{}'"
                          :format="'yyyy-MM-dd 23:59:59'"
                          :show-reset-button="reset">
              </datepicker>
            </div>
            <div  class="form-group col-sm-2">
              <label class="font_normal_body">是否开票</label>
              <v-select id="f_bill_null"
                        style="width:60%"
                        v-model="model.f_bill_null"
                        placeholder='是否开票'
                        condition="f_bill_null  in {}"
                        :value.sync="model.f_bill_null"
                        :options='$parent.$parent.billNull'
                        close-on-select
              >
              </v-select>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid  :model="model" partial='list'  class="list_area table_sy" v-ref:grid>
        <template partial='head'>
          <tr>
            <th>
              <input type="checkbox"  @click="$parent.$parent.$parent.addOrRemove($parent.$parent.$parent.selectAll)" :checked="$parent.$parent.$parent.selectAll">
            </th>
            <th>序号</th>
            <th>客户编号</th>
            <th>用户姓名</th>
            <th>用户地址</th>
            <th>气量</th>
            <th>应交金额</th>
            <th>实收金额</th>
            <th>收费类型</th>
            <th>是否开票</th>
            <th>收费时间</th>
          </tr>
        </template>
        <template partial='body'  >
          <td style="text-align:center">
            <input type="checkbox" v-model="$parent.$parent.$parent.selecteds" :value="row">
          </td>
          <td style="text-align:center">{{$index+1}}</td>
          <td style="text-align:center">{{row.f_userinfo_code}}</td>
          <td style="text-align:center">{{row.f_user_name}}</td>
          <td style="text-align:center">{{row.f_address}}</td>
          <td style="text-align:center">{{row.f_pregas}}</td>
          <td style="text-align:center">{{row.f_preamount}}</td>
          <td style="text-align:center">{{row.f_collection}}</td>
          <td style="text-align:center">{{row.f_type}}</td>
          <td style="text-align:center">{{row.f_bill_null}}</td>
          <td style="text-align:center">{{row.f_operate_date}}</td>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>
  <modal :show.sync="eticket_msg" v-ref:modal large backdrop="false" :width="900">
    <header slot="modal-header" class="modal-header">
      <button type="button" class="close" @click="closeEticket()"><span>&times;</span></button>
      <h4 class="modal-title">{{diytick?'自定义':''}}发票信息</h4>
    </header>
    <article slot="modal-body" class="modal-body">
      <div class="auto select-overspread form-horizontal">
        <div class="row auto">
          <div class="col-sm-6 form-group form-input-group" v-if="diytick">
            <label class="control-label">用户编号:</label>
            <input class="form-control col-sm-2" @keydown.enter="searchUserByCode"
                   v-model="row.f_userinfo_code" placeholder="用户编号">
          </div>
          <div class="col-sm-6 form-group form-input-group" v-if="diytick">
            <span style="width:100%;text-align: center" class="control-label">请输入用户编号敲击回车查找用户信息<br/>如信息不正确请前往档案管理中修改</span>
          </div>
          <div class="col-sm-6 form-group form-input-group" :class="[!row.name ? 'has-error' : '']" v-if="diytick">
            <label class="control-label">项目名称:</label>
            <input class="form-control col-sm-2"
                   v-model="row.name" placeholder="项目名称">
          </div>
          <div class="col-sm-6 form-group form-input-group" :class="[!row.money ? 'has-error' : '']" v-if="diytick">
            <label class="control-label">项目金额:</label>
            <input class="form-control col-sm-2" type="number"
                   v-model="row.money" placeholder="项目金额">
          </div>
          <div class="col-sm-6 form-group form-input-group" v-if="diytick">
            <label class="control-label">项目数量:</label>
            <input class="form-control col-sm-2" @change="moneychange" type="number"
                   v-model="row.amount" placeholder="项目数量">
          </div>
          <div class="col-sm-6 form-group form-input-group" v-if="diytick">
            <label class="control-label">项目单价:</label>
            <input class="form-control col-sm-2" @change="moneychange" type="number"
                   v-model="row.price" placeholder="项目单价">
          </div>
          <div class="col-sm-6 form-group form-input-group" :class="[!row.f_paper_name ? 'has-error' : '']">
            <label class="control-label">开票名称:</label>
            <input class="form-control col-sm-2"
                   v-model="row.f_paper_name" placeholder="开票名称">
          </div>
          <div class="col-sm-6 form-group form-input-group">
            <nobr><label class="control-label">是否征税:</label></nobr>
            <v-select v-model="invoice_is_pax"
                      placeholder='请选择'
                      :value.sync="invoice_is_pax"
                      close-on-select
                      :width="60"
                      :disabled="disabled"
                      :value-single="true"
                      :search="false"
                      :options='is_pax' clear-button>
            </v-select>
          </div>
          <div class="col-sm-6 form-group form-input-group" :class="[!invoice_type ? 'has-error' : '']">
            <label class="control-label">发票种类:</label>
            <v-select v-model="invoice_type"
                      placeholder='请选择'
                      :value.sync="invoice_type"
                      close-on-select
                      :width="60"
                      :value-single="true"
                      :search="false"
                      :options='invoice_types' clear-button>
            </v-select>
          </div>
          <div class="col-sm-12 form-group form-input-group">
            <label class="control-label">开户行及账号:</label>
            <input class="form-control col-sm-2"
                   v-model="row.f_paper_account" placeholder="购方开户行及账号">
          </div>
          <div class="col-sm-12 form-group form-input-group" >
            <label class="control-label">纳税人识别号:</label>
            <input class="form-control col-sm-2"
                   v-model="row.f_taxpayer_id" placeholder="纳税人识别号">
          </div>
<!--          <div class="col-sm-12 form-group form-input-group" :class="[!row.f_address_phone ? 'has-error' : '']">-->
<!--            <label class="control-label">开票地址电话:</label>-->
<!--            <input class="form-control col-sm-2" :disabled="diytick"-->
<!--                   v-model="row.f_address_phone" placeholder="开票地址">-->
<!--          </div>-->
          <div class="col-sm-12 form-group form-input-group">
            <label class="control-label">开票地址:</label>
            <input class="form-control col-sm-2"
                   v-model="row.f_buy_address" placeholder="开票地址">
          </div>
          <div class="col-sm-12 form-group form-input-group">
            <label class="control-label">开票电话:</label>
            <input class="form-control col-sm-2"
                   v-model="row.f_buy_phone" placeholder="开票电话">
          </div>
          <div class="col-sm-12 form-group form-input-group">
            <label class="control-label">邮箱推送:</label>
            <input class="form-control col-sm-2"
                   v-model="row.f_email" placeholder="邮箱推送">
          </div>
        </div>
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="btn button_search"
              v-if="!diytick"
              :disabled="!(row.f_paper_name&&row.f_buy_address&&row.f_buy_phone)"
              @click='confirm'>确认收费
      </button>
      <button type="button" class="btn button_search"
              v-if="diytick"
              :disabled="diytick && !(row.f_paper_name&&row.name&&row.money&&invoice_type)"
              @click='openCustETicket'>确认收费
      </button>
    </footer>
  </modal>
  <ticket-print :show="eticket_show" @toggle="eticket_toggle" v-ref:eticketbill></ticket-print>
</template>

<script>
  /**
   *发票冲红管理
   */
  import {HttpResetClass, PagedList} from 'vue-client'
  import Vue from 'vue'
  export default {
    title: '结算开票',
    data () {
      return {
        criteriaShow: false,
        disabled: false,
        diytick: false,
        last_money: 0,
        invoice_types: this.$appdata.getParam('发票种类'),
        invoice_type: '',
        model: new PagedList('rs/sql/openSellelent', 50, {}),
        f_outlets: Vue.$login.f.f_parentname,
        f_filiale: Vue.$login.f.f_fengongsi,
        f_operator: Vue.$login.f.name,
        f_orgstr: Vue.$login.f.orgpathstr,
        f_filialeids: Vue.$login.f.f_orgids,
        invoice_is_pax: '不征税',
        is_pax: [{label: '征税', value: '征税'}, {label: '不征税', value: '不征税'}],
        selecteds: [],
        eticket_show: false,
        eticket_msg: false,
        invoice_show_gas: '否',
        billNull: [{label: '否', value: '否'}, {label: '是', value: '是'}],
        show_gas: [{label: '是', value: '是'}, {label: '否', value: '否'}],
        row: {
          f_buy_address: '',
          f_buy_phone: ''
        },
        mid: [{label: '全部', value: ''}, {label: '是', value: ' > 0 '}, {label: '否', value: ' is null'}],
        custModel: {

        }
      }
    },
    ready () {
      this.$refs.paged.$refs.cri.model.f_bill_null = ['否']
      this.$refs.paged.$refs.cri.model.startDate = this.$login.toStandardDateString() + ' 00:00:00'
      this.$refs.paged.$refs.cri.model.endDate = this.$login.toStandardDateString() + ' 23:59:59'
    },
    methods: {
      closeEticket () {
        this.eticket_msg = false
        this.diytick = false
        this.disabled = false
      },
      async open_eTicket () {
        if (this.selecteds.length > 1) {
          this.$showAlert('选中条数大于一条，请重新修改！！', 'warning', 2000)
          return
        }
        let HttpReset = new HttpResetClass()
        let row = await HttpReset.load('POST', 'rs/sql/sale_getUser', {
          data: {
            orderitem: 'f_userinfo_code',
            condition: `f_userinfo_code = '${[...new Set(this.selecteds.map(item => item.f_userinfo_code))][0]}'`
          }
        }, {resolveMsg: null, rejectMsg: '获取地址失败!'})
        this.row = Object.assign(row.data[0], this.row)
        this.invoice_show_gas = this.row.f_collection_type = '按气量' ? '是' : '否'
        if (!this.row.f_taxpayer_id) {
          this.row.f_taxpayer_id = this.row.f_idnumber
        }
        this.row.f_paper_name = this.row.f_user_name
        this.row.f_buy_address = this.row.f_address
        if (!this.row.f_buy_phone) {
          this.row.f_buy_phone = this.row.f_phone
        }
        if (!this.row.f_email) {
          this.row.f_email = this.row.f_email
        }
        if (this.selecteds.map(item => item.f_type).toString() == '其他收费') {
          this.disabled = true
        }
        this.eticket_msg = true
      },
      async searchUserByCode () {
        new HttpResetClass().load('POST', 'rs/sql/sale_getUser', {
          data: {
            orderitem: 'f_userinfo_code',
            condition: `f_userinfo_code = '${this.row.f_userinfo_code}'`
          }
        }, {resolveMsg: null, rejectMsg: '获取地址失败!'}).then(
          res => {
            this.row = Object.assign({}, {
              f_userinfo_code: res.data[0].f_userinfo_code,
              f_paper_name: res.data[0].f_paper_name,
              f_paper_account: res.data[0].f_paper_account,
              f_taxpayer_id: res.data[0].f_taxpayer_id,
              f_address_phone: res.data[0].f_address_phone,
              f_user_id: res.data[0].f_user_id,
              f_userinfo_id: res.data[0].f_userinfo_id,
              f_userfiles_id: res.data[0].f_userfiles_id,
              f_buy_phone: res.data[0].f_user_phone,
              f_buy_address: res.data[0].f_address
            }
            )
          }
        )
      },
      moneychange () {
        if (this.row.price && this.row.amount) {
          this.row.amount = Number(parseFloat(this.row.amount).toFixed(8))
          this.row.price = Number(parseFloat(this.row.price).toFixed(6))
          this.row.money = Number((this.row.amount * this.row.price).toFixed(2))
        }
      },
      openCustETicket () {
        if (this.diytick) {
          if (this.last_money !== this.row.money) {
            this.eticket_show = true
            this.eticket_msg = false
            this.last_money = this.row.money
            this.$refs.eticketbill.openCustETicket(this.row, this.invoice_is_pax)
          } else {
            this.$showMessage('本次金额与上次开票金额一致，是否继续进行开票？', ['confirm', 'cancel']).then((res) => {
              if (res !== 'confirm') {
                this.eticket_show = true
                this.eticket_msg = false
                this.last_money = this.row.money
                this.$refs.eticketbill.openCustETicket(this.row, this.invoice_is_pax)
              }
            })
          }
        } else {
          Object.assign(this, {diytick: true, eticket_msg: true, row: {}})
        }
      },
      confirm () {
        this.eticket_msg = false
        this.disabled = false
        this.eticket_show = true
        if (this.selecteds.map(item => item.f_type).toString() == '其他收费' || this.selecteds.map(item => item.f_type).toString() == '卡表收费' || this.selecteds.map(item => item.f_type).toString() == '发卡售气') {
          this.invoice_show_gas = '是'
        }
        this.$refs.eticketbill.openETicket(this.selecteds.map(item => item.id), this.row, this.invoice_show_gas, this.invoice_is_pax, this.selecteds.map(item => item.f_type)[0], this.invoice_type)
      },
      eticket_toggle () {
        this.eticket_show = false
        this.search()
      },
      async selfSearch (args) {
        await this.model.search(args.condition, this.model)
        console.log('res', this.model)
      },
      search () {
        this.$refs.paged.$refs.cri.search()
        this.$dispatch('refresh')
      },
      addOrRemove (is) {
        this.selecteds = []
        if (!is) { // 添加本页所有数据到ids中
          this.model.rows.forEach((row) => {
            this.selecteds.push(row)
          })
          this.selectAll = true
        } else { // 从ids中取消所有的数据
          this.selecteds = []
          this.selectAll = false
        }
        console.log('selectdde', this.selecteds)
      }
    },
    computed: {
      chargetypes () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('收费类型')]
      }
    },
    watch: {
      selecteds () {
        console.log('框框的长度', this.selecteds.length)
        if (this.selecteds.length > 0 && (this.selecteds.map(item => item.f_type).toString() == '其他收费' || this.selecteds.map(item => item.f_type).toString() == '补卡费' || this.selecteds.map(item => item.f_type).toString() == '换表费')) {
          console.log('是的', this.selecteds)
          this.invoice_is_pax = '征税'
          this.disabled = true
        } else {
          console.log('否则', this.selecteds)
          this.invoice_is_pax = '不征税'
          this.disabled = false
        }
      }
    }
  }
</script>
