<template>
  <div class="col-sm-12">
    <criteria-paged :model="model" v-ref:cp>
      <criteria partial='criteria' @condition-changed='$parent.searchCondition' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <div class="form-group col-sm-3">
              <label class="font_normal_body">工程编号：</label>
              <input type="text" style="width:60%" class="input_search" placeholder='工程编号' v-model="model.f_apply_num"
                     v-on:keyup.enter="$parent.$parent.search()"
                     condition="f_apply_num = '{}'">
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">客户名称：</label>
              <input type="text" style="width:60%" class="input_search" v-model="model.f_user_name"
                     v-on:keyup.enter="$parent.$parent.search()" condition="u.f_user_name like '%{}%'" placeholder='客户名称'>
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">联系电话：</label>
              <input type="text" style="width:60%" class="input_search" placeholder='联系电话' v-model="model.f_phone"
                     v-on:keyup.enter="$parent.$parent.search()"
                     condition="f_phone like '%{}%'">
            </div>
            <div class="form-group col-sm-2 button-range">
              <button class="button_search button_spacing" @click="$parent.$parent.updateShowStatus()" v-el:cx>{{$parent.$parent.showStatus ? '已派单' : '未派单'}}</button>
              <button class="button_search button_spacing" @click="$parent.$parent.search()" v-el:cx>查询</button>
              <button class="button_search button_spacing" @click="$parent.$parent.loadPage()">返回</button>
              <button class="button_clear button_spacing"  @click="$parent.$parent.clear()">清空</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-3">
              <label class="font_normal_body">合同编号：</label>
              <input type="text" style="width:60%" class="input_search" placeholder='合同编号' v-model="model.f_contract_number"
                     v-on:keyup.enter="$parent.$parent.search()"
                     condition="f_contract_number = '{}'">
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">报建类型：</label>
              <v-select
                v-model="model.f_apply_type"
                placeholder='报建类型'
                condition="f_apply_type = '{}'"
                :value.sync="model.f_apply_type"
                :options='$parent.$parent.applytype'
                class="select select_list"
                :value-single="true"
                close-on-select ></v-select>
            </div>
            <div class="form-group col-sm-3" v-if="false">
              <label class="font_normal_body">报建性质：</label>
              <v-select
                v-model="model.f_apply_nature"
                placeholder='报建性质'
                condition="f_apply_nature = '{}'"
                :value.sync="model.f_apply_nature"
                :options='$parent.$parent.applyNatures'
                class="select select_list"
                :value-single="true"
                close-on-select ></v-select>
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">用户地址：</label>
              <input type="text" style="width:60%" class="input_search" placeholder='用户地址' v-model="model.f_address"
                     v-on:keyup.enter="$parent.$parent.search()"
                     condition="u.f_address like '%{}%'">
            </div>
            <div class="form-group col-sm-3">
              <label  for="startDate" class="font_normal_body">开始时间：</label>
              <datepicker id="startDate" placeholder="开始日期"
                          style="width: 60%!important;"
                          v-model="model.startDate"
                          :value.sync="model.startDate"
                          :format="'yyyy-MM-dd 00:00:00'"
                          :show-reset-button="true"
                          condition="f_apply_date >= '{}'">
              </datepicker>
            </div>
            <div class="form-group col-sm-3">
              <label for="endDate" class="font_normal_body">结束时间：</label>
              <datepicker id="endDate" placeholder="结束日期"
                          style="width: 60%!important;"
                          v-model="model.endDate"
                          :value.sync="model.endDate"
                          :format="'yyyy-MM-dd 23:59:59'"
                          :show-reset-button="true"
                          condition="f_apply_date <= '{}'">
              </datepicker>
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">来&emsp;&emsp;源：</label>
              <v-select
                v-model="model.f_apply_source"
                placeholder='来源'
                condition="u.f_apply_source = '{}'"
                :value.sync="model.f_apply_source"
                :options='$parent.$parent.sources'
                class="select select_list"
                :value-single="true"
                close-on-select >
              </v-select>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid v-if="$parent.showData" :model="model" partial='list' v-ref:grid class="list_area table_sy">
        <template partial='head'>
          <tr>
            <th style="white-space: nowrap;">序号</th>
            <th style="white-space: nowrap;">工程编号</th>
            <th style="white-space: nowrap;">客户名称</th>
            <th style="white-space: nowrap;">客户地址</th>
            <th style="white-space: nowrap;">供气合同编号</th>
            <th style="white-space: nowrap;">电话</th>
            <th style="white-space: nowrap;">报建类型</th>
            <th style="white-space: nowrap;">报建性质</th>
            <th style="white-space: nowrap;">已发卡数</th>
            <th style="white-space: nowrap;">未派发户数</th>
            <th style="white-space: nowrap;">未通气户数</th>
            <th style="white-space: nowrap;">报建日期</th>
          </tr>
        </template>
        <template partial='body'>
          <tr>
            <td @click="$parent.$parent.$parent.check(row)" style="text-align: center;">
              <nobr>{{$index+1}}</nobr>
            </td>
            <td style="text-align: center;">
              <nobr>{{row.f_apply_num}}</nobr>
            </td>
            <td @click="$parent.$parent.$parent.check(row)" style="text-align: center;">
              <nobr>{{row.f_user_name}}</nobr>
            </td>
            <td @click="$parent.$parent.$parent.check(row)" style="text-align: center;">
              <nobr>{{row.f_address}}</nobr>
            </td>
            <td @click="$parent.$parent.$parent.check(row)" style="text-align: center;">
              <nobr>{{row.f_contract_number}}</nobr>
            </td>
            <td @click="$parent.$parent.$parent.check(row)" style="text-align: center;">
              <nobr>{{row.f_phone}}</nobr>
            </td>
            <td @click="$parent.$parent.$parent.check(row)" style="text-align: center;">
              <nobr>{{row.f_apply_type}}</nobr>
            </td>
            <td @click="$parent.$parent.$parent.check(row)" style="text-align: center;">
              <nobr>{{row.f_apply_nature}}</nobr>
            </td>
            <td @click="$parent.$parent.$parent.check(row)" style="text-align: center;">
              <nobr>{{row.cardnum ? row.cardnum : 0}}</nobr>
            </td>
            <td @click="$parent.$parent.$parent.check(row)" style="text-align: center;">
              <nobr>{{row.f_install_count - (row.irnum ? row.irnum : 0)}}</nobr>
            </td>
            <td @click="$parent.$parent.$parent.check(row)" style="text-align: center;">
              <nobr>{{row.f_not_ventilate_households}}</nobr>
            </td>
            <td @click="$parent.$parent.$parent.check(row)" style="text-align: center;">
              <nobr>{{row.f_apply_date}}</nobr>
            </td>
          </tr>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>
<script>
import {PagedList} from 'vue-client'
import {isEmpty} from '../../Util'
export default {
  title: '点火详情',
  props: ['showData'],
  data () {
    return {
      model: new PagedList('rs/sql/getIgnitionList', 20, {
        data: {
          f_filiale: this.$login.f.f_fengongsi
        }
      }),
      applytype: [{label: '全部', value: ''}, ...this.$appdata.getParam('报建类型')],
      criteriaShow: false,
      sources: [{label: '微信公众号', value: '微信公众号'}, {label: '线下发起', value: '线下发起'}],
      showStatus: true
    }
  },
  ready () {
    // 调用查询
    this.search()
  },
  events: {
  },
  methods: {
    updateShowStatus () {
      this.showStatus = !this.showStatus
      this.search()
    },
    loadPage () {
      this.$dispatch('loadPage')
    },
    searchCondition (args) {
      if (this.showStatus) {
        args.condition = args.condition + ` and (irnum is null or irnum < u.f_install_count)`
      } else {
        args.condition = args.condition + ` and irnum != 0`
      }
      if (args.condition.includes('民用报建')) {
        args.condition = args.condition.replace('f_apply_type = \'民用报建\'', '(f_apply_type = \'民用报建\' or f_apply_type = \'分户挂表\')')
      }
      console.log('args.condition', args.condition)
      this.model.search(args.condition, args.model)
    },
    // 查询
    search () {
      this.$dispatch('search')
    },
    check (val) {
      this.$dispatch('apply', val)
    },
    clear () {
      Object.keys(this.$refs.cp.$refs.cri.model).forEach((key) => {
        this.$refs.cp.$refs.cri.model[key] = null
      })
    }
  },
  computed: {
  }
}
</script>
<style scoped>
</style>
