<template>
  <div v-show='!isShowDetailInfo' id="file-user-files" class="binary">
    <div :class="{'basic-main': !createFile,'binary-left': createFile}" >
      <div class="flex" style="flex: 1;">
        <div style="flex: 1.2">
          <criteria-paged :model="model" v-ref:paged  @sort="sort">
            <criteria @condition-changed="$parent.selfSearch" partial='criteria' v-ref:criteria>
              <div class="form-horizontal select-overspread container-fluid auto" novalidate partial>
                <div class="row">

                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group"
                          v-if="$parent.$parent.clientWidth>1600">
                    <label class="font_normal_body">客户编号</label>
                    <input class="input_search" condition="f_userinfo_code = '{}'"
                           placeholder='客户编号'
                           style="width:60%" type="text" v-model="model.f_userinfo_code">
                  </div>
                  <res-select-group v-if="$parent.$parent.clientWidth<1600&&!$parent.$parent.createFile" :style="$parent.$parent.createFile?'col-sm-4':'col-sm-2'" :initres="$parent.$parent.initres"  :show-component="['company','department','operator']" @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>

                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group"
                          v-if="$parent.$parent.clientWidth<1600&&!$parent.$parent.createFile">
                    <label class="font_normal_body">客户编号</label>
                    <input class="input_search" condition="f_userinfo_code = '{}'"
                           placeholder='客户编号'
                           style="width:60%" type="text" v-model="model.f_userinfo_code">
                  </div>

                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group" v-if="!$parent.$parent.createFile">
                    <label class="font_normal_body">客户名称</label>
                    <input class="input_search" condition="f_user_name like '%{}%'"
                           placeholder='客户姓名'
                           style="width:60%" type="text" v-model="model.f_user_name">
                  </div>
                  <div
                    :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                    class="form-group">
                    <label class="font_normal_body">合同编号</label>
                    <input class="input_search" condition="f_contract_id = '{}'"
                           v-model="model.f_contract_id"
                           placeholder='合同编号'
                           style="width:60%" type="text" >
                  </div>
                  <div
                          :class="{'col-sm-3':$parent.$parent.clientWidth>1600||!$parent.$parent.createFile,'col-sm-4':$parent.$parent.clientWidth<1600&&$parent.$parent.createFile}"
                          class="form-group button-range">
                    <!--<button class="button_search button_spacing" style="width: 90px" @click="$parent.$parent.showFileInfo()">查看批量状态-->
                    <!--</button>-->
                    <button class="button_search button_spacing" type="button" @click="$parent.$parent.goChargeManage()">去收费</button>

                    <button @click="search(), $parent.$parent.clean()" class="button_search button_spacing"
                            style="float: right">查询
                    </button>
                    <button @click="$parent.$parent.clear()" class="button_clear button_spacing"
                            style="float: right">清空
                    </button>
                    <button @click="$parent.$parent.createnewfile()" class="button_search button_spacing"
                            style="float: right">单户建档
                    </button>
                    <button class="button_search button_spacing" style="width: 90px" @click="$parent.$parent.createInfoForFile()">批量建档
                    </button>
                    <button @click="$parent.$parent.importFile" class="button_export button_spacing"
                            style="float: right" v-if="false">导入
                    </button>
                    <!--                    <button class="button_search" style="width: 90px" @click=" $parent.$parent.selectaddress()">选择地址</button>-->
                    <button @click="$parent.$parent.xiaohu()"
                            class="button_delete button_spacing"
                            style="float: right"
                            v-if="$parent.$parent.rows  && $parent.$parent.rows.length > 1 && this.$login.r.includes('批量销户')">
                      批量销户
                    </button>
                    <import-excel v-if="$parent.$parent.bacthPin === '销户导入'" template-btn-name= "销户模板" template-name= "销户模板" btn-name="导入销户" logic-name="batchpinusers" import-json="pinuser.json"></import-excel>
                    <button  @click="$parent.$parent.bulkOperations('批量销户', 'batch-cancellation')"
                            class="button_delete button_spacing"
                            style="float: right"
                            v-if="$parent.$parent.rows && $parent.$parent.rows.length === 1 && $parent.$parent.rows[0].f_user_state === '正常'">
                      销户
                    </button>
                    <button @click="$parent.$parent.bulkOperations('批量启用', 'batch-enable')"
                            class="button_search button_spacing"
                            style="float: right"
                            v-if="$parent.$parent.rows && $parent.$parent.rows.length === 1 && $parent.$parent.rows[0].f_user_state === '销户'">
                      启用
                    </button>
                    <button @click="$parent.$parent.openBatchModal()" class="button_clear button_spacing"
                            style="float: right">批量修改调压箱
                    </button>
                    <div
                            :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                            @click="$parent.$parent.hidden()"
                            class="button_spacing"
                            style="float: right"></div>
                  </div>
                </div>
                <div class="row" v-if="$parent.$parent.criteriaShow">

                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group"
                          v-if="$parent.$parent.clientWidth<1600&&$parent.$parent.createFile">
                    <label class="font_normal_body">客户编号</label>
                    <input class="input_search" condition="f_userinfo_code = '{}'"
                           placeholder='客户编号'
                           style="width:60%" type="text" v-model="model.f_userinfo_code">
                  </div>
                  <res-select-group  v-if="$parent.$parent.clientWidth<1600&&$parent.$parent.createFile" :style="$parent.$parent.createFile?'col-sm-4':'col-sm-2'" :initres="$parent.$parent.initres"  :show-component="['company','department','operator']" @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>
                  <res-select-group v-if="$parent.$parent.clientWidth>=1600" :style="$parent.$parent.createFile?'col-sm-4':'col-sm-2'" :initres="$parent.$parent.initres"  :show-component="['company','department','operator']" @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>

                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group" v-if="$parent.$parent.createFile">
                    <label class="font_normal_body">客户名称</label>
                    <input class="input_search" condition="f_user_name like '%{}%'"
                           placeholder='客户姓名'
                           style="width:60%" type="text" v-model="model.f_user_name">
                  </div>
                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group">
                    <label class="font_normal_body">旧客户号</label>
                    <input class="input_search" condition="f_olduserinfo_code = '{}'" placeholder='客户编号'
                           style="width:60%"
                           type="text"
                           v-model="model.f_olduserinfo_code">
                  </div>
                  <div
                    :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                    class="form-group">
                    <label class="font_normal_body">客户类型</label>
                    <v-select :options='$parent.$parent.user_type' :value.sync="model.f_user_type"
                              close-on-select condition="f_user_type='{}'"
                              placeholder='客户类型' v-model="model.f_user_type"></v-select>
                  </div>
                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group">
                    <label class="font_normal_body">用气性质</label>
                    <v-select :options='$parent.$parent.gasproperties' :value.sync="model.f_gasproperties"
                              close-on-select condition="f_gasproperties='{}'"
                              placeholder='用气性质' v-model="model.f_gasproperties"></v-select>
                  </div>
                  <div
                    :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                    class="form-group">
                    <label class="font_normal_body">气表类型</label>
                    <v-select :options='$parent.$parent.meter_classify' :value.sync="model.f_meter_classify"
                              close-on-select condition="f_meter_classify='{}'"
                              placeholder='气表类型' v-model="model.f_meter_classify"></v-select>
                  </div>
                  <div  class="form-group" :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}">
                    <label class="font_normal_body">气表品牌</label>
                    <v-select :value.sync="model.f_meter_brand" multiple
                              v-model="model.f_meter_brand"
                              :options='$parent.$parent.meterbrands' placeholder='请选择'
                              condition="f_meter_brand in {}"
                              close-on-select></v-select>
                  </div>
                  <div  class="form-group" :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}">
                    <label class="font_normal_body">现场表具型号</label>
                    <v-select :value.sync="model.f_xc_meter_style" multiple
                              v-model="model.f_xc_meter_style"
                              :options='$parent.$parent.metermodels' placeholder='请选择'
                              condition="f_xc_meter_style in {}"
                              close-on-select></v-select>
                  </div>
<!--                  <div-->
<!--                    :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"-->
<!--                    class="form-group">-->
<!--                    <label class="font_normal_body">气表品牌</label>-->
<!--                    <v-select :options='$parent.$parent.meter_brand' :value.sync="model.f_meter_brand"-->
<!--                              close-on-select condition="f_meter_brand='{}'"-->
<!--                              placeholder='气表品牌' v-model="model.f_meter_brand"></v-select>-->
<!--                  </div>-->
                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group">
                    <label class="font_normal_body">客户电话</label>
                    <input class="input_search" condition="f_user_phone = '{}'" placeholder='客户电话' style="width:60%"
                           type="text"
                           v-model="model.f_user_phone">
                  </div>
                  <div
                    :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                    class="form-group">
                    <label class="font_normal_body">小&emsp;&emsp;区</label>
                    <input class="input_search" condition="f_residential_area like '%{}%'" placeholder='小区' style="width:60%"
                           type="text" v-model="model.f_residential_area">
                  </div>
                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group">
                    <label class="font_normal_body">客户地址</label>
                    <input class="input_search" condition="f_address like '%{}%'" placeholder='客户地址' style="width:60%"
                           type="text" v-model="model.f_address">
                  </div>
                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group">
                    <label class="font_normal_body">客户状态</label>
                    <v-select :options='$parent.$parent.userstates' :value.sync="model.f_user_state"
                              close-on-select condition="f_user_state='{}'"
                              placeholder='客户状态' v-model="model.f_user_state"></v-select>
                  </div>
                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group">
                    <label class="font_normal_body">发卡状态</label>
                    <v-select :options='$parent.$parent.f_whether_hairpin' :value.sync="model.f_whether_hairpin"
                              close-on-select condition="f_whether_hairpin = '{}'"
                              placeholder='发卡状态' v-model="model.f_whether_hairpin"></v-select>
                  </div>
                  <div
                    :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                    class="form-group">
                    <label class="font_normal_body">卡&emsp;&emsp;号</label>
                    <input class="input_search" condition="f_card_id = '{}'" placeholder='卡号' style="width:60%"
                           type="text" v-model="model.f_card_id">
                  </div>
                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group">
                    <label class="font_normal_body">用&nbsp;&nbsp;气&nbsp;点</label>
                    <input class="input_search" condition="f_userfiles_address like '%{}%'" placeholder='用气点名称' style="width:60%"
                           type="text" v-model="model.f_userfiles_address">
                  </div>
                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group">
                    <label class="font_normal_body" style="width: auto">天然气证</label>
                    <v-select :options='$parent.$parent.usegas' :value.sync="model.f_send_usegas_card"
                              close-on-select condition="f_send_usegas_card='{}'"
                              placeholder='天然气使用证' v-model="model.f_send_usegas_card"></v-select>
                  </div>
                  <div
                    :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                    class="form-group">
                    <label class="font_normal_body">区&emsp;&emsp;域</label>
                    <v-select :options='$parent.$parent.adjustarea' :search='true'
                              :value.sync="model.f_region_id" multiple
                              condition="f_region_id in {}"
                              close-on-select
                              placeholder='区域'
                              v-model='model.f_region_id'></v-select>
                  </div>
                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group">
                    <label class="font_normal_body">调&ensp;压&ensp;箱</label>
                    <v-select :options='$parent.$parent.adjustables' :search='true'
                              :value.sync="model.f_adjustable_id"
                              close-on-select
                              condition="f_adjustable_id = '{}'" placeholder='调压箱'
                              v-model='model.f_adjustable_id'></v-select>
                  </div>
                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group" >
                    <label class="font_normal_body">使用类型</label>
                    <v-select :options='$parent.$parent.useoptions' :search='true'
                              :value.sync="model.f_usetype"
                              close-on-select
                              condition="f_usetype = '{}'" placeholder='使用类型'
                              v-model='model.f_usetype'></v-select>
                  </div>
                  <div
                          :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                          class="form-group" >
                    <label class="font_normal_body" title="参数名称:用户等级">客户等级</label>
                    <v-select :options='$parent.$parent.userlevel' :search='true'
                              :value.sync="model.userlevel"
                              close-on-select
                              condition="f_user_level = '{}'" placeholder='客户等级'
                              v-model='model.userlevel'></v-select>
                  </div>
                  <div
                    :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                    class="form-group" >
                    <label class="font_normal_body">工业备注</label>
                    <v-select :options='$parent.$parent.industrycomments' :value.sync="model.f_gongye_type"
                              close-on-select condition="f_gongye_type='{}'"
                              placeholder='工业备注' v-model="model.f_gongye_type"></v-select>
                  </div>
                  <div :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                       class="form-group">
                    <label class="font_normal_body" title="建档开始时间">开始时间</label>
                    <datepicker :format="'yyyy-MM-dd'" :value.sync="model.f_start_date"
                                class="datepicker"
                                condition="f_createfile_date >= '{} 00:00:00' "
                                placeholder="建档开始时间"
                                style="width:60%"
                                v-model="model.f_start_date"
                    ></datepicker>
                  </div>
                  <div :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                       class="form-group">
                    <label class="font_normal_body" title="建档结束时间">结束时间</label>
                    <datepicker :format="'yyyy-MM-dd'" :value.sync="model.f_end_date"
                                class="datepicker"
                                condition="f_createfile_date <= '{} 23:59:59' "
                                placeholder="建档结束时间"
                                style="width:60%"
                                v-model="model.f_end_date"
                    ></datepicker>
                  </div>
                  <div
                    :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                    class="form-group">
                    <label class="font_normal_body">表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                    <input class="input_search" condition="f_meternumber ='{}'" placeholder='表号' style="width:60%"
                           type="text" v-model="model.f_meternumber">
                  </div>
                  <div
                    :class="{'col-sm-2':!$parent.$parent.createFile,'col-sm-4':$parent.$parent.createFile}"
                    class="form-group">
                    <label class="font_normal_body">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</label>
                    <input class="input_search" condition="f_comments like '%{}%'" placeholder='备注' style="width:60%"
                           type="text" v-model="model.f_comments">
                  </div>
                </div>
              </div>
            </criteria>
            <data-grid :model="model" class="list_area table_sy" @dblclick="$parent.modifyUser" v-ref:grid partial='list' optional>
              <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  v-if="!$parent.$parent.$parent.isOper">
                    <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 v-if="!$parent.$parent.$parent.createFile">
                    <nobr>用气点名称</nobr>
                  </th>
                  <th v-if="!$parent.$parent.$parent.createFile">
                    <nobr>状态</nobr>
                  </th>
                  <th v-if="!$parent.$parent.$parent.createFile">
                    <nobr>开户时间</nobr>
                  </th>
                  <th>
                    <nobr>备注</nobr>
                  </th>
                  <th >
                    <nobr>客户等级</nobr>
                  </th>
                  <!--<th>-->
                  <!--<nobr v-if="this.$login.r.includes('通知单打印')||this.$login.r.includes('流程表打印') ">下载</nobr>-->
                  <!--</th>-->
                  <th>
                    <nobr>操作</nobr>
                  </th>
                </tr>
              </template>
              <template partial='body'>
                <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_olduserinfo_code}}</td>
                <td style="text-align: center;">
                  <span @click="$parent.$parent.$parent.dealmsg(row)"><a><b>{{row.f_user_name}}</b></a></span>
                </td>
                <td style="text-align: center;">{{row.f_contract_id}}</td>
                <td style="text-align: center;">{{row.f_meternumber}}</td>
                <td style="text-align: center;">{{row.f_card_id}}</td>
                <td style="text-align: center;">{{row.f_user_phone}}</td>
                <td style="text-align: center;">{{row.f_area}}</td>
                <td style="text-align: center;">{{row.f_adjustable_name}}</td>
                <td style="text-align: center;" v-if="!$parent.$parent.$parent.isOper">{{row.f_address_detail ? row.f_address + row.f_address_detail :
                  row.f_address}}
                </td>
                <td style="text-align: center;">{{row.f_user_type}}</td>
                <td style="text-align: center;">{{row.f_gasproperties}}</td>
                <td style="text-align: center;">{{row.f_meter_classify}}</td>
                <td style="text-align: center;">{{row.f_meter_brand}}</td>
                <td style="text-align: center;">{{row.f_xc_meter_style}}</td>
                <td style="text-align: center;">{{row.f_whether_hairpin}}</td>
                <td style="text-align: center;" v-if="!$parent.$parent.$parent.createFile">{{row.f_userfiles_address}}</td>
                <td style="text-align: center;" v-if="!$parent.$parent.$parent.createFile">{{row.f_user_state}}</td>
                <td style="text-align: center;" v-if="!$parent.$parent.$parent.createFile">{{row.f_open_date}}</td>
                <td style="text-align: center;" >{{row.f_comments}}</td>
                <td style="text-align: center;" >{{row.f_user_level}}</td>
                <td style="text-align: center;">
                  <button type="button" name="button" class="button_search-2 button_spacing width-60"
                          v-if="row.f_user_state === '正常' || row.f_user_state==='预备'"
                          @click.stop="$parent.$parent.$parent.modifyUser(row)">修正
                  </button>
                </td>
              </template>
            </data-grid>
          </criteria-paged>
        </div>

        <modal v-if="batcan || batenable" :show.sync="batcan || batenable" width="1500px" v-ref:modal large backdrop="false">
          <article slot="modal-body" class="modal-body">
            <batch-cancellation v-if="batcan" :useraccount="model.rows" @clean="batchClean"
                                @success="batchSuccess"></batch-cancellation>
            <batch-enable v-if="batenable" :useraccount="model.rows" @clean="batchClean"
                          @success="batchSuccess"></batch-enable>
          </article>
          <footer slot="modal-footer" class="modal-footer">
          </footer>
        </modal>


      </div>
    </div>
    <div class="binary-right" :style="{width:'70%'}" v-if="createFile">
      <div class="auto" style="height: 100%; margin-top: 1%" >
        <file-user-general-info  :f_filialeid="f_filialeid" :row="row" :areainfo="areainfo"
                                 :haslimit="config.hasLimit" @success="renew" @clean="clean"
                                 :isedit="isedit"
                                 @build-success="buildFileSuccess" v-ref:info></file-user-general-info>
      </div>
    </div>

    <modal :show.sync="show" width="500px" title="文件导入" v-ref:modal large backdrop="false">
      <article slot="modal-body" class="modal-body">
        <file-upload class="my-file-uploader " name="UploadFile" class="btn btn-success" style="border-radius: 2px;"
                     action="rs/file/uploadFile" tagname="导入档案" v-ref:file :headers="headers"></file-upload>
      </article>
      <footer slot="modal-footer" class="modal-footer">
      </footer>
    </modal>
    <modal :show.sync="batchMeterShow" width="570px" title="文件导入" v-ref:modal large backdrop="false">
      <article slot="modal-body" class="modal-body">
        <file-upload class="my-file-uploader col-sm-9" name="useraddressUploadFile" action="rs/file/uploadFile" tagname="确定" multiple v-ref:file></file-upload>
        <button  class="button_clear btn-gn"  style="margin-top: 10px;background-color: #6aa6e2;"  @click="downloadFiles()">模板下载
        </button>
      </article>
      <footer slot="modal-footer" class="modal-footer">
      </footer>
    </modal>

    <modal :show.sync="xiaohushow" width="500px" title="批量销户" v-ref:modal large backdrop="false">
      <article slot="modal-body" class="modal-body" style="height: 70px">
        <div>
          <label class="font_normal_body" style="line-height: 20px">销户原因</label>
          <input class="input_search"
                 placeholder='销户原因'
                 type="text" v-model="xiaohureason">
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button class="button_search button_spacing" type="button" @click="batchCancellation()">确认</button>
        <button class="button_search button_spacing" type="button" @click="closexiaohu()">取消</button>
      </footer>
    </modal>
    <modal :show.sync="resshow" width="500px" title="建档成功" v-ref:modal large backdrop="false">
      <article slot="modal-body" class="modal-body" style="height: 70px">
        <div>
          <label class="font_normal_body" style="line-height: 20px">客户编号</label>
          <input class="input_search" condition="f_userinfo_code = '{}'"
                 placeholder='客户编号' disabled
                 type="text" v-model="resdata">
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button class="button_search button_spacing" type="button" @click="goChargeManage()">去收费</button>
        <button class="button_search button_spacing" type="button" @click="doCopy()">复制</button>
        <button class="button_search button_spacing" type="button" @click="close2()">取消</button>
      </footer>
    </modal>
    <!--<user-flow-sheet :show="printflag" :bill-config='configs' :bill-data='billData' :data='newdata' v-on:toggle="close" @printok="printok" v-ref:printbill></user-flow-sheet>-->
    <modal :show.sync="showModifyAdjustables" width="500px" title="批量修改调压箱"  large backdrop="false">
      <article slot="modal-body" class="modal-body" style="height: 70px">
        <label class="font_normal_body">调&ensp;压&ensp;箱</label>
        <v-select :options='adjustablesNew' :search='true'
                  :value.sync="f_adjustable_id"
                  close-on-select
                  placeholder='调压箱'
                  v-model='f_adjustable_id'></v-select>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button class="button_search button_spacing" :disabled="!f_adjustable_id || f_adjustable_id.length < 1 " type="button" @click="batchModifyAdjustables()">确认</button>
        <button class="button_search button_spacing" type="button" @click="closeBatchAdjustables()">取消</button>
      </footer>
    </modal>

    <work-busy :is-busy="iswork" v-show="iswork"></work-busy>
  </div>
  <div v-if="isShowDetailInfo">
    <user-info-detail-manage-new :f_userinfo_id="rowData.f_userinfo_id" @cancel-main="cancel"></user-info-detail-manage-new>
  </div>
</template>

<script>
  import {PagedList, HttpResetClass} from 'vue-client'
  import Vue from 'vue'
  import co from 'co'
  import axios from 'axios'

let loadParamGem = async function (self) {
    await self.$getConfig(self, 'UserFiles')
    self.headers.username = Vue.$login.f.name
    self.headers.username = Vue.$login.guid()
    await self.$LoadParams.loadParam(self.f_filialeid)
    // await self.$LoadParams.loadMeterBook(self.f_filialeid)
    // await self.search()
    await self.initAdjustArea()
    await self.initAdjustables()
  }

  let addressInfoGen = async function (self, areainfo) {
    areainfo.isEdit = false
    if (areainfo.file_num > 0 && !areainfo.f_userinfo_id) {
      // 完善
      // 将表档案信息带入，完善客户信息
      let getMetersInfo = await self.$resetpost('rs/logic/sale_getMeterByAddress', {
        data: {
          f_useraddress_id: areainfo.id
        }
      }, {resolveMsg: null, rejectMsg: '获取表信息出错'})
      areainfo.meter = getMetersInfo.data[0]
    }
    if (areainfo.file_num > 0 && areainfo.f_userinfo_id) {
      // 添加 将客户信息带入
      let getUserinfo = await self.$resetpost('rs/sql/saleSingleTable', {
        data: {
          tablename: 't_userinfo',
          condition: `f_userinfo_id = '${areainfo.f_userinfo_id}'`
        }
      }, {resolveMsg: null, rejectMsg: '获取档案出错'})

      areainfo.user = getUserinfo.data[0]
    }
    self.bulidFiles(areainfo)
  }

  export default {
    'title': '档案信息',
    data () {
      return {
        iswork: false,
        isShowDetailInfo: false,
        config: {
          createType: ['address', 'area'],  // 建档方式： address-地址建档  area-小区建档
          hasLimit: true
        },
        bacthPin: '',
        model: new PagedList('rs/sql/filemanage_getUserfies', 30, {orderitem: '"f_userinfo_id DESC"'}),
        row: null, // 选择一条客户信息，对其进行修改
        areainfo: null, // 小区批量建档使用的数据
        adjustarea: [],
        rows: [], // 客户档案选择一条时，将只显示一条信息，rows用来存放整页的数据
        headers: {'username': this.$login.f.name, 'blodid': this.$login.guid()},
        contract: [{label: '全部', value: ' is null or f_contract_id is not null'}, {
          label: '有',
          value: ' is not null'
        },
          {label: '无', value: ' is null'}],
        orderDefault: 'f_createfile_date desc',
        orderFields: {
          f_userinfo_id: 'no'
        },
        initres: {
          org: [this.$login.f.orgid],
          dep: [],
          user: []
        },
        orgcondition: `and f_orgid = '${this.$login.f.orgid}'`,
        createFile: false,

        curorgid: [this.$login.f.orgid],
        f_filialeid: this.$login.f.orgid,

        // 销户启用
        batcan: false,
        batenable: false,
        version: '',
        xiaohureason: '',
        xiaohushow: false,
        inputtores: this.$appdata.getParam('抄表员'),
        adjustables: [],
        adjustablesNew: [],
        f_adjustable_id: '',

        // 导入组件
        show: false,

        // 点击建档或修正时控制列表展示， 防止拥挤
        isOper: false,

        criteriaShow: false,
        industrycomments: this.$appdata.getParam('工业备注') ? [{
          label: '全部',
          value: ''
        }, ...this.$appdata.getParam('工业备注')] : [],
        gasproperties: this.$appdata.getParam('用气性质') ? [{
          label: '全部',
          value: ''
        }, ...this.$appdata.getParam('用气性质')] : [],
        user_type: this.$appdata.getParam('用户类型') ? [{
          label: '全部',
          value: ''
        }, ...this.$appdata.getParam('用户类型')] : [],
        meter_classify: this.$appdata.getParam('气表类型') ? [{
          label: '全部',
          value: ''
        }, ...this.$appdata.getParam('气表类型')] : [],
        meterbrands: [],
        metermodels: [],
        f_whether_hairpin: this.$appdata.getParam('发卡状态') ? [{
          label: '全部',
          value: ''
        }, ...this.$appdata.getParam('发卡状态')] : [],
        showselectaddress: false,
        isedit: false,
        clientWidth: document.body.clientWidth,
        showModifyAdjustables: false,
        batchMeterShow: false,
        billData: {
          url: 'rs/report/userignition',
          bill: ''
        },
        configs: {
          hasPrint: false,  // 默认打票
          hasBillManage: false  // 默认不启用发票管理
        },
        printflag: false,
        newdata: {},
        resdata: '',
        resshow: false,
        batchpinshow: false, // 导入销户
        titleShow: true, // 是否显示部分档案信息类的筛选框
        useoptions: this.$appdata.getParam('使用类型'),

        userlevel: this.$appdata.getParam('用户等级') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('用户等级')] : []
      }
    },
    ready () {
      loadParamGem(this)
      this.titleShow = this.$appdata.getSingleValue('是否显示筛选框') == null ? true : this.$appdata.getSingleValue('是否显示筛选框')
      this.getAuthority()
    },
    compiled () {
      window.onresize = () => {
        return (() => {
          this.clientWidth = document.body.clientWidth
        })()
      }
  },
    methods: {
      closeBatchAdjustables () {
        this.showModifyAdjustables = false
      },
      async openBatchModal () {
        let rowdata = this.$refs.paged.$refs.grid.getRowData()
        if (rowdata.length <= 0) {
          this.$showMessage('不选择具体档案将批量修改所有满足条件的档案!')
        }
        const getAdjustables = await this.$resetpost('rs/sql/singleTable_OrderBy', {
          data: {
            tablename: 't_adjustablebox',
            items: 'f_adjustable_name as label, id as value',
            condition: `f_filialeid = '${this.f_filialeid}'`,
            orderitem: 'id desc'
          }
        })
        console.log('调压箱数据', getAdjustables)
        this.adjustablesNew = getAdjustables.data
        this.showModifyAdjustables = true
      },
      async batchModifyAdjustables () {
        let rowdata = this.$refs.paged.$refs.grid.getRowData()
        let userfilesIds = rowdata.map(item => item.f_userfiles_id)
        console.log('已选择的数据', userfilesIds)
        console.log('已选择的调压箱', this.f_adjustable_id)
        let model = {
          f_adjustable_id: this.f_adjustable_id,
          f_userfiles_ids: userfilesIds
        }
        await this.$resetpost('rs/logic/batchModifyAdjustables', model, {
          resolveMsg: null,
          rejectMsg: '批量修改调压箱失败'
        }).then((res) => {
          if (res && res.data) {
            this.$showMessage(`本次批量修改:  ${res.data}户`)
          }
          this.closeBatchAdjustables()
          this.selfSearch()
        })
      },
      getAuthority () {
        if (this.$login.r.find(value => value == '销户导入')) {
          this.bacthPin = '销户导入'
        }
      },
      getRes (obj) {
        console.log('-----------------')
        this.orgcondition = obj
        if (this.$refs.paged.$refs.criteria.$refs.sel.depresid.length > 0) {
          this.f_filialeid = this.$refs.paged.$refs.criteria.$refs.sel.depresid[0]
        } else {
          this.f_filialeid = this.$login.f.orgid
        }
      },
      downloadFiles () {
        let downurl = 'rs/downloadfile/file?filename=批量建档导出Excel模板'
        this.$downFile(downurl, '批量建档导出Excel模板.xlsx')
      },
      /**
       * 退出用户详细信息页面
       */
      cancel () {
        this.isShowDetailInfo = false
      },
      /**
       * 展示用户详细信息
       * @param obj 传递的row
       */
      dealmsg (obj) {
        console.log('==================>', obj)
        this.isShowDetailInfo = true
        this.rowData = obj
      },
      goChargeManage () {
        try {
          this.$goto('charge-manage', {f: this.$login.f}, 'main')
        } catch (e) {
        }
        try {
          window.parent.dispatchEvent(new CustomEvent('gotoChargeManage', {detail: 'Hello from iframe'}))
        } catch (e) {
        }
      },
      async doCopy () {
        await this.$copyText(this.resdata)
        this.resshow = false
        this.$showAlert(`内容已复制到剪切板！`, 'success', 2000)
      },
      close () {
        this.printflag = false
        this.clean()
      },
      close2 () {
        this.resshow = false
      },
      closemodal () {
        this.batchMeterShow = false
      },
      createInfoForFile () {
        this.batchMeterShow = true
      },
      hidden () {
        this.criteriaShow = !this.criteriaShow
      },
      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      // selectdata () {
      //
      // },
      modifyUser (row) {
        this.isOper = true
        this.createFile = true
        this.isedit = true
        this.row = row
        this.areainfo = null
        this.row.version = row.version
      },
      clean () {
        this.createFile = false
        this.row = null
        this.isOper = false
        this.areainfo = null
        // this.$refs.paged.$refs.grid.select(null)
        this.$refs.paged.$refs.grid.model.rows = this.rows
      },
      createnewfile () {
        this.isOper = true
        this.createFile = true
        this.isedit = false
        this.row = null
        this.areainfo = null
        // this.$refs.info.clearinfo()
      },
      renew () {
        this.row = null
        this.areainfo = null
        this.isOper = false
        this.$refs.info.clearinfo()
        this.clearCondition()
        this.search()
        // 建档或修正档案成功刷新地址列表
        this.$refs.addressfiles.$refs.paged.$refs.cri.search()
      },
      clearCondition () {
        Object.keys(this.$refs.paged.$refs.criteria.model).forEach((key) => {
          this.$refs.paged.$refs.criteria.model[key] = ''
        })
      },

      bulkOperations (name, type) {
        if (name === '批量销户') {
          this.batcan = true
          this.batenable = false
          this.newArea = false
        } else if (name === '批量启用') {
          this.batenable = true
          this.batcan = false
          this.newArea = false
        }
      },
      closexiaohu () {
        this.xiaohushow = false
      },
      xiaohu () {
        this.xiaohushow = true
      },
      batchCancellation () {
        this.$showMessage('此操作无法还原，是否确定要批量销户？', ['confirm', 'cancel']).then(async (res) => {
          if (res === 'confirm') {
            var infoIds = []
            var count = 0
            this.model.rows.forEach((item) => {
              item.f_state = '有效'
              item.f_user_state = item.f_user_state
              item.f_operat_type = '销户'
              item.f_operator = Vue.$login.f.name
              item.f_operatorid = Vue.$login.f.id
              item.f_orgid = Vue.$login.f.orgid
              item.f_orgname = Vue.$login.f.orgs
              item.f_depid = Vue.$login.f.depids
              item.f_depname = Vue.$login.f.deps
              item.f_describe = `${Vue.$login.f.name}对${item.f_user_name}进行批量销户`
              item.f_comments = this.xiaohureason
              infoIds.push(item)
              count++
            })
            await this.$resetpost('rs/logic/saveCancellation', {infoIds: infoIds}, {resolveMsg: null, rejectMsg: '批量销户失败'}).then((res) => {
              if (res && res.data) {
                this.$showMessage(`本次批量销户总计:  ${res.data.allnum}户  ,成功:  ${res.data.successnum}户  ,失败(已经销户):  ${res.data.errornum2}  户,失败(待审核):  ${res.data.errornum1}户 `)
              }
              this.xiaohushow = false
              this.close()
              this.search()
            })
          }
        })
      },
      batchSuccess () {
        this.clearCondition()
        this.batchClean()
      },
      batchClean () {
        this.batcan = false
        this.batenable = false
        this.newArea = false
        this.search()
      },
      buildFile (row) {
        // console.log('我是建档。。。', row)
        this.row = row
      },
      // 小区批量建档
      bulidFiles (row) {
        this.row = null
        this.areainfo = row
        // 将列表的数据清空
        this.$refs.paged.$refs.grid.model.rows = []
      },
      // 小区批量建档成功
      buildFileSuccess (data) {
        // console.log('建档案成功', data)
        this.model.rows.unshift(data)
      },
      selfSearch (args) {
        this.$refs.paged.$refs.grid.selectInit()
        args.condition = `${args.condition} ` + this.orgcondition
        this.criteriaShow = false
        this.$refs.paged.$refs.grid.$el.scrollTop = 0
        this.model.search(args.condition, args.model)
        this.clean()
      },
      // printok () {
      //   console.log("======================")
      //   //this.$dispatch('success')
      // },
      sort (field, rule) {
        // 将所有排序方式设为不排序，实现相互排斥
        for (let key in this.orderFields) {
          if (key === field) {
            this.orderFields[key] = rule
          } else {
            this.orderFields[key] = 'no'
          }
        }
        // 如果新规则不排序，还原为默认排序
        if (rule === 'no') {
          this.model.paramSource.orderitem = `'${this.orderDefault}'`
        } else {
          this.model.paramSource.orderitem = `'${field} ${rule}'`
        }

        this.search()
      },

      getLocation (row) {
        // 可能会存在添加，完善，建档
        addressInfoGen(this, row)
      },
      areaFiles (row) {
        row.isEdit = true
        row.f_residential_area_id = row.id
        // row.id = null
        delete row.id
        this.bulidFiles(row)
      },
      async initAdjustArea () {
        let area = await this.$resetpost('rs/sql/singleTable_OrderBy', {data: { tablename: 't_region',
          items: 'f_name label, id as value',
          condition: `f_name is not null`,
          orderitem: 'id desc'
        }}, {resolveMsg: '', rejectMsg: ''})
        console.log(area)
        this.adjustarea = [{label: '全部', value: ''}, ...area.data]
      },
      async initAdjustables () {
        console.log('初始化调压箱', this.$GetSaleParam)
        let arr = []
        let filter = this.$login.f.orgid
        this.$GetSaleParam.getAdjustable(filter).forEach((item) => {
          let temp = {}
          temp.label = `[${item.value.f_adjustable_id}]-${item.label}`
          temp.value = `${item.value.id}`
          arr.push(temp)
        })
        this.adjustables = [{label: '全部', value: ''}, ...arr]
        this.adjustablesNew = arr
          // 初始化气表品牌
        let brandArr = []
        this.$GetSaleParam.getGasbrand().forEach((item) => {
          let temp1 = {}
          temp1.label = item.label
          temp1.value = item.value.f_meter_brand
          brandArr.push(temp1)
        })
        this.meterbrands = [{label: '全部', value: ''}, ...brandArr]

        // 初始化现场表具型号：从后端查询 t_userfiles.f_xc_meter_style 去重
        try {
          const result = await this.$resetpost('rs/sql/singleTable_OrderBy', {
            data: {
              tablename: 't_userfiles',
              items: 'distinct f_xc_meter_style as label',
              condition: "f_xc_meter_style is not null and f_xc_meter_style != ''",
              orderitem: 'f_xc_meter_style'
            }
          }, {resolveMsg: null, rejectMsg: '获取现场表具型号失败'})
          const options = []
          for (let row of result.data) {
            if (row.label) options.push({label: row.label, value: row.label})
          }
          this.metermodels = [{label: '全部', value: ''}, ...options]
        } catch (e) {
          console.error('获取现场表具型号失败', e)
          this.metermodels = [{label: '全部', value: ''}]
        }
      },
      importFile () {
        this.show = true
      },
      pin () {
        this.batchpinshow = true
      },
      clear () {
        Object.keys(this.$refs.paged.$refs.criteria.model).forEach((key) => {
          this.$refs.paged.$refs.criteria.model[key] = []
        })
      },
      getorg (val) {
        this.f_filialeid = val[0]
      }
    },
    computed: {
      userstates () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('客户状态')]
      },
      usegas () {
        return [{label: '全部', value: ''}, {label: '是', value: '是'}, {label: '否', value: '否'}]
      },
      areas () {
        let rs = []
        for (let i = 0; i < this.$login.f.f_allArea.length; i++) {
          let temp = {
            label: this.$login.f.f_allArea[i].label,
            value: this.$login.f.f_allArea[i].label
          }
          rs.push(temp)
        }
        return [{label: '全部', value: ''}, ...rs]
      },
      firestates () {
        return [
          {label: '全部', value: ''},
          {label: '点火', value: '1'},
          {label: '未点火', value: '0'}
        ]
      },
      jurisdiction () {
        return this.$login.r
      }
    },
    watch: {
      // 每次查询将查询到的数据存储起来，供选择操作后的替换
      'model.state' (val) {
        if (val === '正确') {
          this.rows = this.model.rows
        }
      },
      'f_filialeid' (val) {
        loadParamGem(this)
      }
    },
    events: {
      FileUpload: function (file, res) {
        let data = {
          tablename: 't_userinfo',
          filepath: res.path
        }
        this.$resetpost('rs/logic/import', data, {resolveMsg: null, rejectMsg: '上传失败'}).then((res) => {
          this.close()
          this.$showAlert(`一共上传${res.data.total}条数据, 成功${res.data.successnum}条`, 'success', 2000)
          this.search()
        })
      },
      'onFileUpload': async function (file, res) {
        if (this.batchMeterShow) {
          this.iswork = true
        // 当前上传的是批量导入的档案
          let param = {
            filepath: res.f_downloadpath,
            f_operator: this.$login.f.name,
            f_operatorid: this.$login.f.id,
            f_orgid: this.$login.f.orgid,
            f_orgname: this.$login.f.orgs,
            f_depid: this.$login.f.depids,
            f_depname: this.$login.f.deps
          }
          let self = this
          try {
            await axios.post('rs/logic/newSettleFileImport',
              {data: param}, {timeout: 10 * 60 * 1000}).then((res) => {
                if (res.data) {
                  self.$showMessage(`本次上传共上传${res.data.totalsum}条数据, 成功${res.data.successnum}条,失败${res.data.errorsum}条，具体失败数据请在稽查查询错误查询中查看！！`)
                  self.iswork = false
              // this.$showAlert('导入成功','success',2000)
                }
              })
          } catch (error) {
            if (error.response) {
              if (error.response.status == 500) {
                this.$showAlert('服务繁忙,请重试!!!', 'danger', 3000)
              } else if (error.response.status == 404) {
                this.$showAlert('服务运行中,请耐心等待后进行重试!!', 'danger', 3000)
              } else {
                this.$showAlert(error.response.data, 'danger', 2000)
              }
              console.log(error.response.data)
              console.log(error.response.status)
              console.log(error.response.headers)
            } else if (error.request) {
              console.log(error.request)
              this.$showAlert(error.request, 'danger', 2000)
            } else {
              console.log('Error', error.message)
              this.$showAlert(error.message, 'danger', 2000)
            }
            this.iswork = false
          }
          this.batchMeterShow = false
          // this.$showAlert(`一共上传${res.data.total}条数据, 成功${res.data.successnum}条`, 'success', 2000)
          this.search()
        } else {
          let data = {
            tablename: 't_userinfo',
            filepath: res.f_downloadpath,
            f_operator: this.$login.f.name,
            f_operatorid: this.$login.f.id,
            f_orgid: this.$login.f.orgid,
            f_orgname: this.$login.f.orgs,
            f_depid: this.$login.f.depids,
            f_depname: this.$login.f.deps
          }
          this.$resetpost('rs/logic/sale_userfilesImp', {data: data}, {
            resolveMsg: null,
            rejectMsg: '上传失败'
          }).then((res) => {
            this.show = false
            this.$showAlert(`一共上传${res.data.total}条数据, 成功${res.data.successnum}条`, 'success', 2000)
            this.search()
          })
        }
      },
      'confirmaddress' (res) {
        console.log('选定地址', res)
      }
    }
  }
</script>
<style>
  .nav-tabss ul > li > a {
    padding: 5px 10px;
  }
  // 两个字符占用4个字符距离
  .w2 {
    letter-spacing:2em; /*如果需要y个字两端对齐，则为(x-y)/(y-1),这里是（4-2）/(2-1)=2em */
    margin-right:-2em; /*同上*/
  }
  // 三个字符占用4个字符距离
  .w3 {
    letter-spacing: 0.5em;
    margin-right: -0.5em
  }
</style>
