<template>
    <div id="unit" class="flex-row">
        <div class="basic-main" @keyup.enter="search">
            <div class="flex" v-if="!show">

                <criteria-paged :model="model" v-ref:paged @sort="sort">
                    <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="col-sm-2 form-group">
                                    <label for="startDate" class="font_normal_body">开始日期</label>
                                    <datepicker id="startDate" placeholder="开始日期" style="width:60%"
                                                v-model="model.startDate"
                                                :value.sync="model.startDate"
                                                :format="'yyyy-MM-dd HH:mm:ss'"
                                                :show-reset-button="true"
                                                condition="f_operate_date >= '{}'">
                                    </datepicker>
                                </div>
                                <div class="col-sm-2 form-group">
                                    <label for="endDate" class="font_normal_body">结束日期</label>
                                    <datepicker id="endDate" placeholder="结束日期" style="width:60%"
                                                v-model="model.endDate"
                                                :value.sync="model.endDate"
                                                :format="'yyyy-MM-dd HH:mm:ss'"
                                                :show-reset-button="true"
                                                condition="f_operate_date <= '{}'">
                                    </datepicker>
                                </div>
                                <div class="col-sm-2 form-group">
                                    <label class="font_normal_body">客户编号</label>
                                    <input type="text" style="width:60%" class="input_search" v-model="model.f_new_userinfo_code"
                                           condition="f_new_userinfo_code = '{}' " placeholder="客户编号">
                                </div>
                              <div class="col-sm-2 form-group">
                                <label class="font_normal_body" title="旧客户编号">旧客户编号</label>
                                <input type="text" style="width:60%" class="input_search" v-model="model.f_old_userinfo_code"
                                       condition="f_old_userinfo_code = '{}' " placeholder="旧客户编号">
                              </div>
                              <div class="col-sm-2 form-group">
                                <label class="font_normal_body">客户名称</label>
                                <input type="text" style="width:60%" class="input_search" v-model="model.f_user_name_new"
                                       condition=" f_user_name_new like '%{}%'" placeholder='旧客户名称'
                                       :size="model.f_user_name_new ? model.f_user_name_new.length * 2 : 1">
                              </div>
                              <div class="col-sm-2 form-group">
                                <label class="font_normal_body">旧客户名称</label>
                                <input type="text" style="width:60%" class="input_search" v-model="model.f_user_name"
                                       condition=" f_user_name = '{}'" placeholder='旧客户名称'
                                       :size="model.f_user_name ? model.f_user_name.length * 2 : 1">
                              </div>
                              <div class="col-sm-2 form-group">
                                <label class="font_normal_body">用户类型</label>
                                <v-select :value.sync="model.f_user_type"
                                          v-model="model.f_user_type"
                                          :options='$parent.$parent.userTypes' placeholder='请选择'
                                          condition="f_user_type = '{}'"
                                          close-on-select></v-select>
                              </div>
                              <div class="col-sm-2 form-group">
                                <label for="f_user_usetype" class="font_normal_body ">用气类型</label>
                                <v-select :value.sync="model.f_user_usetype" :search="false"
                                          @change="$parent.$parent.userUseTypeChange()"
                                          v-model="model.f_user_usetype"
                                          :options='$parent.$parent.userusetypes'
                                          condition="f_user_usetype = '{}'"
                                          placeholder='用气类型'
                                          value-single="true"
                                          close-on-select>
                                </v-select>
                              </div>
                              <div class="col-sm-2 form-group">
                                <label for="f_use_institution" class="font_normal_body">用气机构</label>
                                <v-select :value.sync="model.f_use_institution" :search="false"
                                          @change="$parent.$parent.userUseInstitutionChange()"
                                          v-model="model.f_use_institution"
                                          :options='$parent.$parent.useinstitutions'
                                          condition="f_use_institution = '{}'"
                                          placeholder='用气机构'
                                          value-single="true"
                                          close-on-select>
                                </v-select>
                              </div>
                              <div class="col-sm-2 form-group">
                                <label for="f_user_usenature" class="font_normal_body ">使用性质</label>
                                <v-select :value.sync="model.f_user_usenature" :search="false"
                                          v-model="model.f_user_usenature"
                                          :options='$parent.$parent.userusenatures'
                                          condition="f_user_usenature = '{}'"
                                          placeholder='使用性质'
                                          value-single="true"
                                          close-on-select>
                                </v-select>
                              </div>
                              <div class="span" style="float:right;">
                                  <button class="button_search button_spacing" @click="search()">查询</button>
                                  <button class="button_clear button_spacing" @click="$parent.$parent.clear()">清空</button>
                              </div>
                            </div>
                        </div>
                    </criteria>

                    <data-grid :model="model" partial='list' class="list_area table_sy" v-ref:grid>
                        <template partial='head'>
                            <tr>
                                <th>
                                    <nobr>客户编号</nobr>
                                </th>
                                <th>
                                    <nobr>客户名称</nobr>
                                </th>
                                <th>
                                    <nobr>客户电话</nobr>
                                </th>
                                <th>
                                  <nobr>用户地址</nobr>
                                </th>
                                <th>
                                    <nobr>旧客户编号</nobr>
                                </th>
                                <th>
                                  <nobr>旧客户名称</nobr>
                                </th>
                                <th>
                                  <nobr>旧客户电话</nobr>
                                </th>
                                <th>
                                    <nobr>旧地址</nobr>
                                </th>
                                <th>
                                    <nobr>旧表品牌型号</nobr>
                                </th>
                                <th>
                                    <nobr>操作人</nobr>
                                </th>
                                <th>
                                    <nobr>操作日期</nobr>
                                </th>
                            </tr>
                        </template>
                        <template partial='body'>
                            <td style="text-align: center;">
                              <nobr>{{row.f_new_userinfo_code}}</nobr>
                            </td>
                            <td style="text-align: center;">
                                <nobr>{{row.f_user_name_new}}</nobr>
                            </td>
                            <td style="text-align: center;">
                                <nobr>{{row.f_user_phone_new}}</nobr>
                            </td>
                            <td style="text-align: center;">
                                <nobr>{{row.f_address_new}}</nobr>
                            </td>
                            <td style="text-align: center;">
                              <nobr>{{row.f_old_userinfo_code}}</nobr>
                            </td>
                            <td style="text-align: center;">
                              <nobr>{{row.f_user_name}}</nobr>
                            </td>
                            <td style="text-align: center;">
                              <nobr>{{row.f_user_phone}}</nobr>
                            </td>
                            <td style="text-align: center;">
                                <nobr>{{row.f_address}}</nobr>
                            </td>
                            <td style="text-align: center;">
                                <nobr>{{row.f_meter_brand_style}}</nobr>
                            </td>
                            <td style="text-align: center;">
                                <nobr>{{row.f_operator}}</nobr>
                            </td>
                            <td style="text-align: center;">
                                <nobr>{{row.f_operate_date}}</nobr>
                            </td>
                        </template>
                        <template partial='foot'></template>
                    </data-grid>
                </criteria-paged>
            </div>
        </div>
    </div>
</template>

<script>
    import {PagedList} from 'vue-client'

    let readySomething = async function (self) {
      self.$refs.paged.$refs.cri.model.startDate = self.data ? self.data.startDate : self.$login.toStandardDateString() + ' 00:00:00'
      self.$refs.paged.$refs.cri.model.endDate = self.data ? self.data.endDate : self.$login.toStandardDateString() + ' 23:59:59'
    }
    export default {
      props:['data'],
      title: '档案合并查询',
        data() {
            return {
                model: new PagedList('api/af-revenue/sql/mergeFileQuery', 20),
              useinstitutions: [],
              userusenatures: []
            }
        },
        ready() {
            readySomething(this).then(() => {
                this.$emit('ready')
            }).catch((error) => {
                this.$emit('error', error)
            })
        },
        methods: {
          userUseInstitutionChange () {
            this.userusenatures = []
            this.$refs.paged.$refs.cri.model.f_user_usenature = ''
            if (this.$refs.paged.$refs.cri.model.f_use_institution) {
              let str = this.$refs.paged.$refs.cri.model.f_use_institution + '使用性质'
              this.userusenatures = this.$appdata.getParam(str)
            }
          },
          userUseTypeChange () {
            this.useinstitutions = []
            this.$refs.paged.$refs.cri.model.f_use_institution = ''
            if (this.$refs.paged.$refs.cri.model.f_user_usetype) {
              let str = this.$refs.paged.$refs.cri.model.f_user_usetype + '机构'
              this.useinstitutions = this.$appdata.getParam(str)
            }
          },
            search() {
                this.$refs.paged.$refs.cri.search()
            },
            selfSearch(args) {
              if (this.data) {
                this.$parent.$parent.$parent.data.startDate=this.$refs.paged.$refs.cri.model.startDate
                this.$parent.$parent.$parent.data.endDate=this.$refs.paged.$refs.cri.model.endDate
              }
                this.model.search(args.condition, args.model)
            },

            clear() {
                Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
                    this.$refs.paged.$refs.cri.model[key] = []
                })
            },
            hidden() {
                this.criteriaShow = !this.criteriaShow
            }
        },
      computed: {
        userusetypes () {
          return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气类型')]
        },
        userTypes() {
          return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
        },
      }
    }
</script>
