<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
                v-model="model.mid"
                placeholder='是否有票'
                condition="is_bill = '{}'"
                :value.sync="model.mid"
                :options='$parent.$parent.mid'
                close-on-select></v-select>
            </div>
            <div class="row" width="100%">
              <div class="col-sm-4 col-sm-2">
                <label class="font_normal_body">&nbsp;开始时间</label>
                <datepicker :format="'yyyy-MM-dd'" :value.sync="model.f_start_date"
                            class="datepicker"
                            condition="f_operate_date >= '{} 00:00:00'"
                            placeholder="起始时间"
                            style="width:60%"
                            v-model="model.f_start_date"
                ></datepicker>
              </div>
              <div class="col-sm-4 col-sm-2">
                <label class="font_normal_body">结束时间</label>
                <datepicker :format="'yyyy-MM-dd'" :value.sync="model.f_end_date"
                            class="datepicker"
                            condition="f_operate_date <= '{} 23:59:59'"
                            placeholder="结束时间"
                            style="width:60%"
                            v-model="model.f_end_date"
                ></datepicker>
              </div>
              <div style="float: right">
                <button class="button_search" @click="search()">查 询</button>
                <button class="button_search" @click="$parent.$parent.open_eTicket()">开票</button>
              </div>
            </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)"
                     style="width: 22px;height: 22px"    :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>
            <th>操作</th>
          </tr>
        </template>
        <template partial='body' :model="model">
          <tr>
            <td style="text-align:center">
              <input type="checkbox" v-model="$parent.$parent.$parent.selecteds" :value="row"
                     style="width: 22px;height: 22px"    @click="$parent.$parent.$parent.checkbox($index, $event)">
            </td>
            <th style="text-align:center">{{ row.f_userinfo_code }}</th>
            <th style="text-align:center">{{ row.f_user_name }}</th>
            <th style="text-align:center">{{ row.f_address }}</th>
            <th style="text-align:center">{{ row.f_user_phone }}</th>
            <th style="text-align:center">{{ row.f_type }}</th>
            <th style="text-align:center">{{ row.f_collection }}</th>
            <th style="text-align:center">{{ row.f_operator }}</th>
            <th style="text-align:center">{{ row.f_depname }}</th>
            <th style="text-align:center">{{ row.is_bill }}</th>
            <th style="text-align:center">{{ row.f_operate_date }}</th>
            <th>
              <button class="btn btn-link" @click="$parent.$parent.$parent.kp(row)">开具发票
            </button></th>
          </tr>
        </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="eticket_msg = false"><span>&times;</span></button>
      <h4 class="modal-title">发票信息</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" :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" :class="[!row.f_paper_type ? 'has-error' : '']">
            <label class="control-label">发票种类:</label>
            <v-select v-model="row.f_paper_type"
                      placeholder='请选择'
                      :value.sync="row.f_paper_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" :class="[!row.f_paper_account ? 'has-error' : '']">
            <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" :class="[!row.f_taxpayer_id ? 'has-error' : '']">
            <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"
                   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_email" 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_remarks" placeholder="备注">
          </div>
        </div>
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="btn button_search"
              :disabled="!(row.f_paper_name&&row.f_address_phone&&row.f_paper_account&&row.f_taxpayer_id)"
              @click='confirm'>确认收费
      </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 * as Util from '../../../Util'
let asyncReadyGen = async function (self) {
  self.$refs.paged.$refs.cri.model.f_start_date = Util.toStandardDateString().substr(0, 5) + '01-01'
  self.$refs.paged.$refs.cri.model.f_end_date = Util.toStandardDateString()
  await self.search()
}
export default {
  title: '发票管理',
  data () {
    return {
      model: new PagedList('rs/sql/iot_eticket_query', 20,
        {}),
      criteriaShow: false,
      getfield: {},
      f_orgid: '',
      other: [],
      footer: [],
      invoice_types: this.$appdata.getParam('发票种类'),
      initres: {
        org: [this.$login.f.orgid],
        dep: [],
        user: []
      },
      eticket_show: false,
      selectAll: false,
      selecteds: [],
      orgCondtionStr: '',
      // 合计数据
      sumsmodel: {},
      msg: [],
      orgname: [],
      depname: [],
      eticket_msg: false,
      invoice_show_gas: '否',
      show_gas: [{label: '是', value: '是'}, {label: '否', value: '否'}],
      row: {},
      mid: [{label: '全部', value: ''}, {label: '是', value: '是'}, {label: '否', value: '否'}]
    }
  },
  ready () {
    asyncReadyGen(this)
  },
  methods: {
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    async kp (row) {
      let HttpReset = new HttpResetClass()
      let _row = await HttpReset.load('POST', 'rs/sql/sale_getUser', {
        data: {
          orderitem: 'f_userinfo_code',
          condition: `f_userinfo_code = '${row.f_userinfo_code}'`
        }
      }, {resolveMsg: null, rejectMsg: '获取地址失败!'})
      this.row = _row.data[0]
      this.row.id = row.id
      this.selecteds = [{id: row.id}]
      this.invoice_show_gas = this.row.f_collection_type === '按气量' ? '是' : '否'
      if (!this.row.f_taxpayer_id) {
        this.row.f_taxpayer_id = this.row.f_idnumber
      }
      if (!this.row.f_paper_name) {
        this.row.f_paper_name = this.row.f_user_name
      }
      if (!this.row.f_address_phone) {
        this.row.f_address_phone = this.row.f_address + ' ' + this.row.f_user_phone
      }
      if (!this.row.f_email) {
        this.row.f_email = this.row.f_email
      }
      this.invoice_type = this.row.f_paper_type
      this.eticket_msg = true
    },
    async open_eTicket () {
      if ([...new Set(this.selecteds.map(item => item.f_userinfo_code))].length > 1) {
        this.$showAlert('所选择用户不是同一用户！！', 'warning', 2000)
        return
      }
      if (this.selecteds.filter(item => item.is_bill === '是').length >= 1) {
        return this.$showAlert('已结算的记录不能再次结算开票', 'warning', 3000)
      }
      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 = row.data[0]
      this.invoice_show_gas = this.row.f_collection_type === '按气量' ? '是' : '否'
      if (!this.row.f_taxpayer_id) {
        this.row.f_taxpayer_id = this.row.f_idnumber
      }
      if (!this.row.f_paper_name) {
        this.row.f_paper_name = this.row.f_user_name
      }
      if (!this.row.f_address_phone) {
        this.row.f_address_phone = this.row.f_address + ' ' + this.row.f_user_phone
      }
      if (!this.row.f_email) {
        this.row.f_email = this.row.f_email
      }
      this.eticket_msg = true
    },
    confirm () {
      this.eticket_msg = false
      this.eticket_show = true
      this.$refs.eticketbill.openETicket(this.selecteds.map(item => item.id), this.row, this.invoice_show_gas, '不征税', '物联网收费', this.row.f_paper_type)
    },
    selfSearch (args) {
      this.selecteds = []
      // let f_orgstr = this.orgCondtionStr
      // args.condition = `${args.condition} ` + f_orgstr
      this.model.search(args.condition, args.model)
    },
    eticket_toggle () {
      this.eticket_show = false
      this.search()
    },
    addOrRemove (is) {
      this.selecteds = []
      if (!is) { // 添加本页所有数据到ids中
        this.model.rows.forEach((row) => {
          this.selecteds.push(row)
        })
        this.selectAll = true
      } else { // 从ids中取消所有的数据
        this.model.rows.forEach((row, index) => {
          if (index <= this.maxIndex) {
            this.selecteds.push(row)
          }
        })
        this.selectAll = false
      }
    },
    checkbox (val, event) {
      // this.selecteds = []
      if (event.target.checked === true) {
        // for (let i = 0; i <= val; i++) {
        this.selecteds.push(this.model.rows[val])
        // }
      } else if (event.target.checked === false) {
        // for (let i = 0; i <= val - 1; i++) {
        this.selecteds.splice(this.selecteds.findIndex(item => item.id === this.model.rows[val].id), 1)
        // }
      }
      this.selectAll = (this.selecteds.length === this.model.rows.length)
    }
  },
  computed: {
    getPayee () {
      return this.$GetSaleParam.getPayee()
    },
    getReviewer () {
      return this.$GetSaleParam.getReviewer()
    },
    getDrawer () {
      return this.$GetSaleParam.getDrawer()
    }
  },
  events: {
    'search' () {
      this.search()
    }
  },
  watch: {}
}
</script>
