<template>
  <div class="auto">
    <div>
      <div class="main-content-area">
        <hw-custom-criteria ref="cri" @condition-changed="search">
          <form>
            <!-- 第一行 -->
            <div class="row">
              <!-- 卡号 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">卡号：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <input class="search_input input-font" v-model="model.fCardId" placeholder="请输入卡号"/>
                </div>
              </div>

              <!-- 表号 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">表号：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <input class="search_input input-font" v-model="model.fMeternumber" placeholder="请输入表号"/>
                </div>
              </div>
            </div>

            <!-- 第二行 -->
            <div class="row">
              <!-- 行政区域 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">行政区域：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <v-select placeholder="请选择行政区域" style="margin-top: 8px"
                            v-model="model.fPcd"
                            :value.sync="model.fPcd"
                            :options="fAdministrativeAreas"
                            close-on-select clear-button></v-select>
                </div>
              </div>

              <!-- 运营区域 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">运营区域：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <v-select placeholder="请选择运营区域" style="margin-top: 8px"
                            v-model="model.fOperaArea"
                            :value.sync="model.fOperaArea"
                            :options="fOperationalAreas"
                            close-on-select clear-button></v-select>
                </div>
              </div>
            </div>

            <!-- 第三行 -->
            <div class="row">
              <!-- 街道名称 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">街道名称：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <input class="search_input input-font" v-model="model.fStreet" placeholder="请输入街道名称"/>
                </div>
              </div>

              <!-- 小区名称 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">小区名称：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <input class="search_input input-font" v-model="model.fResidentialArea" placeholder="请输入用户小区（可模糊查询）"/>
                </div>
              </div>
            </div>

            <!-- 第四行 -->
            <div class="row">
              <!-- 楼号 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">楼号：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <input class="search_input input-font" v-model="model.fBuilding" placeholder="请输入用户楼号"/>
                </div>
              </div>

              <!-- 单元 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">单元：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <input class="search_input input-font" v-model="model.fUnit" placeholder="请输入用户单元"/>
                </div>
              </div>
            </div>

            <!-- 第五行 -->
            <div class="row">
              <!-- 楼层 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">楼层：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <input class="search_input input-font" v-model="model.fFloor" placeholder="请输入用户楼层"/>
                </div>
              </div>

              <!-- 门牌号 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">门牌号：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <input class="search_input input-font" v-model="model.fRoom" placeholder="请输入用户门牌号"/>
                </div>
              </div>
            </div>

            <!-- 第六行 -->
            <div class="row">
              <!-- 气价名称 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">气价名称：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <input class="search_input input-font" v-model="model.fPriceName" placeholder="请输入气价名称"/>
                </div>
              </div>

              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">问题表：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <v-select placeholder="问题表" style="margin-top: 8px"
                            v-model="model.problemUser"
                            :value.sync="model.problemUser"
                            :options="problemUser"
                            close-on-select clear-button></v-select>
                </div>
              </div>

              <!-- 表具状态 -->
              <!--              <div class="col-xs-12 col-sm-6 col-md-6 app-row">-->
              <!--                <div class="col-xs-4 col-sm-4 col-md-4">-->
              <!--                  <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">-->
              <!--                  <label class="font text-left">表具状态：</label>-->
              <!--                </div>-->
              <!--                <div class="col-xs-8 col-sm-8 col-md-8">-->
              <!--                  <v-select placeholder="表具状态" style="margin-top: 8px"-->
              <!--                            v-model="model.fTableState"-->
              <!--                            :value.sync="model.fTableState"-->
              <!--                            :options="fTableStates"-->
              <!--                            close-on-select clear-button></v-select>-->
              <!--                </div>-->
              <!--              </div>-->
            </div>

            <!-- 第七行 -->
            <div class="row">
              <!-- 在用状态 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">用户状态：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <v-select placeholder="用户状态" style="margin-top: 8px"
                            v-model="model.fUserState"
                            :value.sync="model.fUserState"
                            :options="fUserStates"
                            close-on-select clear-button></v-select>
                </div>
              </div>

              <!-- 燃气管家姓名 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">燃气管家姓名：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <input class="search_input input-font" v-model="model.rqgjName" placeholder="燃气管家姓名"/>
                </div>
              </div>
            </div>

            <!-- 第八行 -->
            <div class="row">
              <!-- 燃气管家电话 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">燃气管家电话：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <input class="search_input input-font" v-model="model.rqgjLink" placeholder="燃气管家电话"/>
                </div>
              </div>

              <!-- 用户隐患 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">用户隐患：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <v-select placeholder="用户隐患" style="margin-top: 8px"
                            v-model="model.dangerUserType"
                            :value.sync="model.dangerUserType"
                            :options="dangerUserType"
                            :search="true"
                            close-on-select clear-button></v-select>
                </div>
              </div>
            </div>

            <!-- 第九行 -->
            <div class="row">
              <!-- 用户隐患明细 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">用户隐患明细：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <v-select placeholder="用户隐患明细" style="margin-top: 8px"
                            v-model="model.dangerUserTypeDevice"
                            :value.sync="model.dangerUserTypeDevice"
                            :options="dangerUserTypeDevices"
                            :disabled="!model.dangerUserType || (Array.isArray(model.dangerUserType) ? model.dangerUserType.length === 0 : false)"
                            :search="true"
                            :multiple="true"></v-select>
                </div>
              </div>

              <!-- 重点用户 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">重点用户：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <v-select placeholder="重点用户" style="margin-top: 8px"
                            v-model="model.keyUser"
                            :value.sync="model.keyUser"
                            :options="keyUser"
                            close-on-select clear-button></v-select>
                </div>
              </div>
            </div>

            <!-- 第十行 -->
            <div class="row">
              <!-- 长期未检 -->
              <div class="col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-4">
                  <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label class="font text-left">长期未检：</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                  <v-select placeholder="长期未检" style="margin-top: 8px"
                            v-model="model.longTimeUser"
                            :value.sync="model.longTimeUser"
                            :options="longTimeUser"
                            close-on-select clear-button></v-select>
                </div>
              </div>

              <!-- 问题表 -->
              <!--              <div class="col-xs-12 col-sm-6 col-md-6 app-row">-->
              <!--                <div class="col-xs-4 col-sm-4 col-md-4">-->
              <!--                  <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">-->
              <!--                  <label class="font text-left">问题表：</label>-->
              <!--                </div>-->
              <!--                <div class="col-xs-8 col-sm-8 col-md-8">-->
              <!--                  <v-select placeholder="问题表" style="margin-top: 8px"-->
              <!--                            v-model="model.problemUser"-->
              <!--                            :value.sync="model.problemUser"-->
              <!--                            :options="problemUser"-->
              <!--                            close-on-select clear-button></v-select>-->
              <!--                </div>-->
              <!--              </div>-->
            </div>

            <!--            &lt;!&ndash; 第十一行 &ndash;&gt;-->
            <!--            <div class="row">-->
            <!--              &lt;!&ndash; 长期未检 &ndash;&gt;-->
            <!--              <div class="col-xs-12 col-sm-6 col-md-6 app-row">-->
            <!--                <div class="col-xs-4 col-sm-4 col-md-4">-->
            <!--                  <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">-->
            <!--                  <label class="font text-left">在用状态：</label>-->
            <!--                </div>-->
            <!--                <div class="col-xs-8 col-sm-8 col-md-8">-->
            <!--                  <v-select placeholder="在用状态" style="margin-top: 8px"-->
            <!--                            v-model="model.usageState"-->
            <!--                            :value.sync="model.usageState"-->
            <!--                            :options="fUseStates"-->
            <!--                            close-on-select clear-button></v-select>-->
            <!--                </div>-->
            <!--              </div>-->

            <!--            </div>-->

            <div class="row col-xs-12 col-sm-12 col-md-6 text-center" style="margin-top: 20px;">
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="search">查询
              </button>
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="clean">清除
              </button>
            </div>
            <div style="height:30px;"></div>
          </form>
        </hw-custom-criteria>

        <hw-custom-list :model="model" :current-page="currentPage" ref="hwList" @page-change="onPageChange"
                        @search="hwSearch">
          <div>
            <div v-for="row in model.rows" :key="row.f_card_id" @click="inspect(row)" class="auto app-text">
              <div class="panel" style="padding: 10px 10px 5px 10px;"
                   :class="{
                   'panel-orange': row.f_emphasis_user === '星级用户',
                   'panel-sky'   : row.f_emphasis_user === '行业内用户',
                   'panel-green' : row.f_emphasis_user === '职工用户'
                 }">
                <div class="panel-body panel-self">
                  <div class="row col-xs-12 col-sm-6 col-md-6">
                    <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">卡号</p>
                    <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{ row.f_card_id }}</p>
                  </div>
                  <div class="row col-xs-12 col-sm-6 col-md-6">
                    <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">用户名称</p>
                    <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{ row.f_user_name }}</p>
                  </div>
                  <div class="row col-xs-12 col-sm-6 col-md-6">
                    <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">用户类型</p>
                    <p class="panel-title col-xs-8 col-sm-8 col-md-8-8 text-left input-font">{{ row.f_user_type }}</p>
                  </div>
                  <div class="row col-xs-12 col-sm-6 col-md-6">
                    <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">表具状态</p>
                    <p class="panel-title col-xs-8 col-sm-8 col-md-8-8 text-left input-font">{{ row.f_table_state }}</p>
                  </div>
                  <div class="row col-xs-12 col-sm-6 col-md-6">
                    <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">开户状态</p>
                    <p class="panel-title col-xs-8 col-sm-8 col-md-8-8 text-left input-font">{{
                        row.archives_state
                      }}</p>
                  </div>
                  <div class="row col-xs-12 col-sm-6 col-md-6">
                    <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">用户电话</p>
                    <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">
                      {{ row.f_user_phone2 ? row.f_user_phone2 : row.f_user_phone }}</p>
                  </div>
                  <div class="row col-xs-12 col-sm-6 col-md-6">
                    <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">小区名称</p>
                    <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{
                        row.f_residential_area
                      }}</p>
                  </div>
                  <div class="row col-xs-12 col-sm-6 col-md-6">
                    <p class="panel-title col-xs-4 col-sm-4 col-md-4-4 text-left font">用户地址</p>
                    <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{ row.f_address }}</p>
                  </div>
                  <div class="row col-xs-12 col-sm-6 col-md-6">
                    <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">最后安检日期</p>
                    <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{
                        row.f_last_check_date
                      }}</p>
                  </div>
                  <div class="row col-xs-12 col-sm-6 col-md-6">
                    <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">最后安检状态</p>
                    <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{
                        row.f_last_check_state
                      }}</p>
                  </div>
                  <div class="row col-xs-12 col-sm-6 col-md-6">
                    <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font"
                       :style="{color:isYearDifference(3,row.f_last_check_date)?'red':''}">最后入户日期</p>
                    <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font"
                       :style="{color:isYearDifference(3,row.f_last_ruhu_date)?'red':''}">{{ row.f_last_ruhu_date }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </hw-custom-list>
      </div>

      <!-- 加载遮罩 -->
      <div v-if="model.loading" class="loading-overlay">
        <div class="loading-spinner"></div>
        <span>正在查询 请稍等。。。</span>
      </div>
    </div>
    <back-page :need-back="true" @flag="$back()"></back-page>
  </div>
</template>

<script>
import Vue from 'vue'
import $ from '../../../static/jquery'
import HwCustomList from './HwCustomList.vue'
import HwCustomCriteria from './HwCustomCriteria.vue'

export default {
  title: 'HwAddPlanItem',
  components: {
    HwCustomList,
    HwCustomCriteria
  },
  data() {
    return {
      currentPage: 1,
      model: {
        loading: false,
        fPcd: '',
        fOperaArea: ''
      },
      hwModel: {
        token: '',
        operatorId: 'aofeng@2025',
        queryData: {
          fCardId: '',
          fMeternumber: '',
          fPcd: '',
          fOperaArea: '',
          fStreet: '',
          fResidentialArea: '',
          fBuilding: '',
          fUnit: '',
          fFloor: '',
          fRoom: '',
          fPriceName: '',
          fTableState: '',
          fUserState: '',
          rqgjName: '',
          rqgjLink: '',
          dangerUserType: '',
          dangerUserTypeDevice: [],
          f_entry: '',
          usageState: ''
        }
      },
      hwUrl: 'http://124.114.152.14:1002'
    }
  },
  computed: {
    fTableStates() {
      return [
        {label: '全部', value: ''},
        {label: '正常', value: '正常'},
        {label: '停用', value: '停用'}
      ]
    },
    fUserStates() {
      return [
        {label: '全部', value: ''},
        {label: '正常', value: '正常'},
        {label: '隐患', value: '隐患'}
      ]
    },
    fUseStates() {
      return [
        {label: '全部', value: ''},
        {label: '在用', value: ' '},
        {label: '已发卡', value: 'true'},
        {label: '已开户', value: 'false'}
      ]
    },
    fAdministrativeAreas() {
      return [
        {label: '全部', value: ''},
        {label: '航天', value: '航天'},
        {label: '曲江', value: '曲江'},
        {label: '高新', value: '高新'},
        {label: '长安', value: '长安'},
        {label: '雁塔', value: '雁塔'},
        {label: '沣东', value: '沣东'},
        {label: '沣西', value: '沣西'},
        {label: '浐灞生态区', value: '浐灞生态区'}
      ]
    },
    fOperationalAreas() {
      return [
        {label: '全部', value: ''},
        {label: '航天', value: '航天'},
        {label: '韦曲', value: '韦曲'},
        {label: '高新', value: '高新'},
        {label: '沣东', value: '沣东'},
        {label: '中心站', value: '中心站'}
      ]
    },
    dangerUserType() {
      return [
        {
          label: '全部',
          value: ''
        },
        {
          label: '表具故障',
          value: '表具故障',
          children: [
            {label:'死表',value:'死表'},
            {label:'常通',value:'常通'},
            {label:'表体漏气',value:'表体漏气'},
            {label:'接口漏气',value:'接口漏气'},
            {label:'偷气',value:'偷气'},
            {label:'反装',value:'反装'},
            {label:'气量不符',value:'气量不符'},
            {label:'其他',value:'其他'}
          ]
        },
        {
          label: '表具隐患类型',
          value: '表具隐患类型',
          children: [
            {label:'挂物',value:'挂物'},
            {label:'包裹',value:'包裹'},
            {label:'不便维修',value:'不便维修'},
            {label:'封闭包裹',value:'封闭包裹'},
            {label:'与电源或火源过近',value:'与电源或火源过近'},
            {label:'气量不符',value:'气量不符'},
            {label:'常通',value:'常通'},
            {label:'死表',value:'死表'},
            {label:'表前管漏气',value:'表前管漏气'},
            {label:'表体漏气',value:'表体漏气'}
          ]
        },
        {
          label: '是否通电',
          value: '是否通电',
          children: [
            {label:'否',value:'否'}
          ]
        },
        {
          label: '电磁阀接口漏气',
          value: '电磁阀接口漏气',
          children: [
            {label:'是',value:'是'}
          ]
        },
        {
          label: '立管隐患类型',
          value: '立管隐患类型',
          children: [
            {label:'私改',value:'私改'},
            {label:'挂物',value:'挂物'},
            {label:'不便维修',value:'不便维修'},
            {label:'包裹',value:'包裹'},
            {label:'封闭包裹',value:'封闭包裹'},
            {label:'穿越禁止区域',value:'穿越禁止区域'},
            {label:'严重锈蚀',value:'严重锈蚀'},
            {label:'一般锈蚀',value:'一般锈蚀'},
            {label:'未固定',value:'未固定'},
            {label:'与电源或火源过近',value:'与电源或火源过近'},
            {label:'立管阀门漏气',value:'立管阀门漏气'},
            {label:'立管伸缩结漏气',value:'立管伸缩结漏气'},
            {label:'立管活结漏气',value:'立管活结漏气'},
            {label:'立管变径漏气',value:'立管变径漏气'},
            {label:'立管三通漏气',value:'立管三通漏气'},
            {label:'立管引入管接口漏气',value:'立管引入管接口漏气'},
            {label:'立管其他漏气',value:'立管其他漏气'}
          ]
        },
        {
          label: '表前阀',
          value: '表前阀',
          children: [
            {label:'失效',value:'失效'},
            {label:'漏气',value:'漏气'},
            {label:'漏气拒换',value:'漏气拒换'}
          ]
        },
        {
          label: '灶前阀',
          value: '灶前阀',
          children: [
            {label:'失效',value:'失效'},
            {label:'漏气',value:'漏气'},
            {label:'漏气拒换',value:'漏气拒换'}
          ]
        },
        {
          label: '自闭阀',
          value: '自闭阀',
          children: [
            {label:'失效',value:'失效'},
            {label:'漏气',value:'漏气'},
            {label:'漏气拒换',value:'漏气拒换'},
            {label:'缺失',value:'缺失'}
          ]
        },
        {
          label: '表后管隐患类型',
          value: '表后管隐患类型',
          children: [
            {label:'私改',value:'私改'},
            {label:'挂物',value:'挂物'},
            {label:'不便维修',value:'不便维修'},
            {label:'包裹',value:'包裹'},
            {label:'封闭包裹',value:'封闭包裹'},
            {label:'穿越禁止区域',value:'穿越禁止区域'},
            {label:'软三通',value:'软三通'},
            {label:'用户私拉乱接',value:'用户私拉乱接'},
            {label:'多个燃气具',value:'多个燃气具'},
            {label:'使用非家用燃气具',value:'使用非家用燃气具'},
            {label:'严重锈蚀',value:'严重锈蚀'},
            {label:'一般锈蚀',value:'一般锈蚀'},
            {label:'未固定',value:'未固定'},
            {label:'缺管卡',value:'缺管卡'},
            {label:'与电源或火源过近',value:'与电源或火源过近'},
            {label:'其他',value:'其他'},
            {label:'表后管弯头漏气',value:'表后管弯头漏气'},
            {label:'表后管对丝漏气',value:'表后管对丝漏气'},
            {label:'表后管三通自闭阀接口漏气',value:'表后管三通自闭阀接口漏气'},
            {label:'表后管三通热水器接口漏气',value:'表后管三通热水器接口漏气'}
          ]
        },
        {
          label: '灶具连接管隐患类型',
          value: '灶具连接管隐患类型',
          children: [
            {label:'漏气',value:'漏气'},
            {label:'接口漏气',value:'接口漏气'},
            {label:'无管夹',value:'无管夹'},
            {label:'多根对接',value:'多根对接'},
            {label:'破损',value:'破损'},
            {label:'严重老化',value:'严重老化'},
            {label:'穿墙或吊顶',value:'穿墙或吊顶'},
            {label:'暗埋',value:'暗埋'},
            {label:'非燃气专用胶管',value:'非燃气专用胶管'},
            {label:'非燃气专用配件',value:'非燃气专用配件'},
            {label:'一般老化',value:'一般老化'},
            {label:'过长',value:'过长'},
            {label:'安全间距不够',value:'安全间距不够'},
            {label:'其他',value:'其他'}
          ]
        },
        {
          label: '灶具连接管安装类型',
          value: '灶具连接管安装类型',
          children: [
            {label:'胶皮管',value:'胶皮管'},
          ]
        },
        {
          label: '灶具隐患类型',
          value: '灶具隐患类型',
          children: [
            {label:'超期使用',value:'超期使用'},
            {label:'无熄火保护或熄火保护失效',value:'无熄火保护或熄火保护失效'},
            {label:'漏气',value:'漏气'}
          ]
        },
        {
          label: '热水器隐患类型',
          value: '热水器隐患类型',
          children: [
            {label:'超期使用',value:'超期使用'},
            {label:'软管连接',value:'软管连接'},
            {label:'直排',value:'直排'},
            {label:'烟道未排出室外',value:'烟道未排出室外'},
            {label:'烟道破损',value:'烟道破损'},
            {label:'无烟道',value:'无烟道'},
            {label:'安装不规范',value:'安装不规范'},
            {label:'热水器球阀漏气',value:'热水器球阀漏气'},
            {label:'热水器机身接口漏气',value:'热水器机身接口漏气'},
            {label:'热水器三通接口漏气',value:'热水器三通接口漏气'},
            {label:'热水器机身漏气',value:'热水器机身漏气'}
          ]
        },
        {
          label: '壁挂锅炉隐患类型',
          value: '壁挂锅炉隐患类型',
          children: [
            {label:'超期使用',value:'超期使用'},
            {label:'软管连接',value:'软管连接'},
            {label:'直排',value:'直排'},
            {label:'烟道未排出室外',value:'烟道未排出室外'},
            {label:'烟道破损',value:'烟道破损'},
            {label:'无烟道',value:'无烟道'},
            {label:'安装不规范',value:'安装不规范'},
            {label:'壁挂锅炉球阀漏气',value:'壁挂锅炉球阀漏气'},
            {label:'壁挂锅炉三通接口漏气',value:'壁挂锅炉三通接口漏气'},
            {label:'壁挂锅炉机身接口漏气',value:'壁挂锅炉机身接口漏气'},
            {label:'壁挂锅炉机身漏气',value:'壁挂锅炉机身漏气'}
          ]
        },
        {
          label: '其他',
          value: '其他',
          children: [
            {label:'密闭式厨房',value:'密闭式厨房'},
            {label:'开放式厨房',value:'开放式厨房'},
            {label:'多种火源',value:'多种火源'},
            {label:'需转维修',value:'需转维修'}
          ]
        },
        {
          label: '更改厨房用途',
          value: '更改厨房用途',
          children: [
            {label:'卧室',value:'卧室'},
            {label:'客厅',value:'客厅'},
            {label:'卫生间',value:'卫生间'}
          ]
        }
      ]
    },
    dangerUserTypeDevices() {
      const typeList = this.dangerUserType
      const selected = Array.isArray(this.model.dangerUserType) ? this.model.dangerUserType[0] : this.model.dangerUserType
      if (!selected) return []
      const found = typeList.find(t => t.value === selected)
      if (!found || !Array.isArray(found.children)) return []
      return found.children.map(c => ({ label: c.label, value: c.value }))
    },
    keyUser() {
      return [
        {label: '全部', value: ''},
        {label: '气量出入', value: '气量出入'},
        {label: '孤寡老人', value: '孤寡老人'},
        {label: '职工用户', value: '职工用户'},
        {label: '行业内用户', value: '行业内用户'},
        {label: '星级用户', value: '星级用户'},
        {label: '重大隐患', value: '重大隐患'},
        {label: '民改商', value: '民改商'},
        {label: '临街商铺', value: '临街商铺'},
        {label: '村内餐饮', value: '村内餐饮'},
        {label: '小区大锅灶', value: '小区大锅灶'}
      ]
    },
    longTimeUser() {
      return [
        {label: '全部', value: ''},
        {label: '一年', value: '1'},
        {label: '二年', value: '2'},
        {label: '三年', value: '3'}
      ]
    },
    problemUser() {
      return [
        {label: '全部', value: ''},
        {label: '常通', value: '常通'},
        {label: '气量不符', value: '气量不符'},
        {label: '死表', value: '死表'}
      ]
    }
  },
  watch: {
    'model.dangerUserType': {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.model.dangerUserTypeDevice = [];
        }
      },
      deep: true
    },
    // 'model.fResidentialArea': {
    //   handler(newVal, oldVal) {
    //     if (newVal !== oldVal) {
    //       this.fetchBuildings()
    //       this.model.fBuilding = ''
    //       this.model.fUnit = ''
    //       this.model.fFloor = ''
    //     }
    //   },
    //   deep: true
    // },
    // 'model.fBuilding': {
    //   handler(newVal, oldVal) {
    //     if (newVal !== oldVal) {
    //       this.fetchUnits()
    //       this.model.fUnit = ''
    //       this.model.fFloor = ''
    //     }
    //   },
    //   deep: true
    // },
    // 'model.fUnit': {
    //   handler(newVal, oldVal) {
    //     if (newVal !== oldVal) {
    //       this.fetchFloors()
    //       this.model.fFloor = ''
    //     }
    //   },
    //   deep: true
    // },
    'model': {
      handler(newVal) {
        console.log(newVal)
        this.hwModel.queryData = {
          fCardId: newVal.fCardId,
          fMeternumber: newVal.fMeternumber,
          fPcd: newVal.fPcd[0],
          fOperaArea: newVal.fOperaArea[0],
          fStreet: newVal.fStreet,
          fResidentialArea: newVal.fResidentialArea,
          fBuilding: newVal.fBuilding,
          fUnit: newVal.fUnit,
          fFloor: newVal.fFloor,
          fRoom: newVal.fRoom,
          fPriceName: newVal.fPriceName,
          // fTableState: newVal.fTableState[0],
          fUserState: newVal.fUserState[0],
          rqgjName: newVal.rqgjName,
          rqgjLink: newVal.rqgjLink,
          dangerUser: [
            newVal.dangerUserType,
            (newVal.dangerUserTypeDevice || []).join(',')
          ]
            .filter(Boolean)
            .join(':') || '',
          keyUser: newVal.keyUser ? newVal.keyUser[0] : '',
          longTimeUser: newVal.longTimeUser ? newVal.longTimeUser[0] : '',
          problemUser: newVal.problemUser ? newVal.problemUser[0] : '',
          // usageState: newVal.usageState ? newVal.usageState[0] : ''
        }
      },
      deep: true
    }
  },
  methods: {
    search() {
      // 直接调用hwSearch方法进行查询
      this.hwSearch(1, 10)
    },
    clean() {
      if (this.model.total > 0 && this.model.total){
        this.$showMessage('确认进行清除吗,当前页面存在查询条件', ['cancel', 'confirm']).then(
          async (response) => {
            if (response == 'confirm') {
              let rows = this.model.rows
              let total = this.model.total
              let pages = this.model.pages
              this.model = {
                rows:rows,
                total:total,
                pages:pages,
                loading: false,
                fCardId: '',
                fMeternumber: '',
                fPcd: '',
                fOperaArea: '',
                fStreet: '',
                fResidentialArea: '',
                fBuilding: '',
                fUnit: '',
                fFloor: '',
                fRoom: '',
                fPriceName: '',
                fTableState: '',
                fUserState: '',
                rqgjName: '',
                rqgjLink: '',
                dangerUserType: '',
                dangerUserTypeDevice: [],
                f_entry: ''
              }
            }
          })
      }else {
        let rows = this.model.rows
        let total = this.model.total
        let pages = this.model.pages
        this.model = {
          rows:rows,
          total:total,
          pages:pages,
          loading: false,
          fCardId: '',
          fMeternumber: '',
          fPcd: '',
          fOperaArea: '',
          fStreet: '',
          fResidentialArea: '',
          fBuilding: '',
          fUnit: '',
          fFloor: '',
          fRoom: '',
          fPriceName: '',
          fTableState: '',
          fUserState: '',
          rqgjName: '',
          rqgjLink: '',
          dangerUserType: '',
          dangerUserTypeDevice: [],
          f_entry: ''
        }
      }
    },

    onPageChange(page) {
      this.currentPage = page
      this.hwSearch(page, 10)
    },
    async fetchResidentialAreas() {
      try {
        const res = await this.$resetpost(Vue.dataUrl + 'rs/sql/singleTable', {
          data: {
            tablename: 'T_USER_ADDRES',
            fields: 'DISTINCT F_RESIDENTIAL_AREA'
          }
        })
        if (res.data) {
          const areas = res.data.map(item => ({ label: item.F_RESIDENTIAL_AREA, value: item.F_RESIDENTIAL_AREA }))
          this.hwModel.residentialAreaOptions = [{ label: '全部', value: '' }, ...areas]
        } else {
          this.hwModel.residentialAreaOptions = [{ label: '全部', value: '' }]
        }
      } catch (error) {
        console.error('获取小区数据失败:', error)
        this.hwModel.residentialAreaOptions = [{ label: '全部', value: '' }]
      }
    },
    async fetchBuildings() {
      try {
        if (!this.model.fResidentialArea) {
          this.hwModel.buildingOptions = [{ label: '全部', value: '' }]
          return
        }
        const res = await this.$resetpost(Vue.dataUrl + 'rs/sql/singleTable', {
          data: {
            tablename: 'T_USER_ADDRES',
            fields: 'DISTINCT F_BUILDING',
            condition: `F_RESIDENTIAL_AREA = '${this.model.fResidentialArea}'`
          }
        })
        if (res.data) {
          const buildings = res.data.map(item => ({ label: item.F_BUILDING, value: item.F_BUILDING }))
          this.hwModel.buildingOptions = [{ label: '全部', value: '' }, ...buildings]
        } else {
          this.hwModel.buildingOptions = [{ label: '全部', value: '' }]
        }
      } catch (error) {
        console.error('获取楼号数据失败:', error)
        this.hwModel.buildingOptions = [{ label: '全部', value: '' }]
      }
    },
    async fetchUnits() {
      try {
        if (!this.model.fResidentialArea || !this.model.fBuilding) {
          this.hwModel.unitOptions = [{ label: '全部', value: '' }]
          return
        }
        const res = await this.$resetpost(Vue.dataUrl + 'rs/sql/singleTable', {
          data: {
            tablename: 'T_USER_ADDRES',
            fields: 'DISTINCT F_UNIT',
            condition: `F_RESIDENTIAL_AREA = '${this.model.fResidentialArea}' AND F_BUILDING = '${this.model.fBuilding}'`
          }
        })
        if (res.data) {
          const units = res.data.map(item => ({ label: item.F_UNIT, value: item.F_UNIT }))
          this.hwModel.unitOptions = [{ label: '全部', value: '' }, ...units]
        } else {
          this.hwModel.unitOptions = [{ label: '全部', value: '' }]
        }
      } catch (error) {
        console.error('获取单元数据失败:', error)
        this.hwModel.unitOptions = [{ label: '全部', value: '' }]
      }
    },
    async fetchFloors() {
      try {
        if (!this.model.fResidentialArea || !this.model.fBuilding || !this.model.fUnit) {
          this.hwModel.floorOptions = [{ label: '全部', value: '' }]
          return
        }
        const res = await this.$resetpost(Vue.dataUrl + 'rs/sql/singleTable', {
          data: {
            tablename: 'T_USER_ADDRES',
            fields: 'DISTINCT F_FLOOR',
            condition: `F_RESIDENTIAL_AREA = '${this.model.fResidentialArea}' AND F_BUILDING = '${this.model.fBuilding}' AND F_UNIT = '${this.model.fUnit}'`
          }
        })
        if (res.data) {
          const floors = res.data.map(item => ({ label: item.F_FLOOR, value: item.F_FLOOR }))
          this.hwModel.floorOptions = [{ label: '全部', value: '' }, ...floors]
        } else {
          this.hwModel.floorOptions = [{ label: '全部', value: '' }]
        }
      } catch (error) {
        console.error('获取楼层数据失败:', error)
        this.hwModel.floorOptions = [{ label: '全部', value: '' }]
      }
    },

    async hwSearch(pageIndex = 1, pageSize = 10) {
      if (this.model.total > 0 && this.model.total){
        this.$showMessage('确认进行查询吗,当前页面存在查询数据', ['cancel', 'confirm']).then(
          async (response) => {
            if (response == 'confirm') {
              try {
                this.model.loading = true; // 开始加载
                // 使用传入的分页参数

                // 获取token
                const tokenResponse = await $.ajax({
                  url: this.hwUrl + '/aofeng/queryToken',
                  type: 'POST',
                  contentType: 'application/json',
                  data: JSON.stringify({
                    operatorId: this.hwModel.operatorId
                  })
                })

                if (tokenResponse.code !== '200') {
                  throw new Error('获取token失败')
                }

                this.hwModel.token = tokenResponse.data.accessToken

                const filterValidFields = (obj) =>
                  Object.fromEntries(
                    Object.entries(obj).filter(([_, v]) => {
                      if (v === null || v === undefined) return false;
                      if (typeof v === 'string' && v.trim() === '') return false;
                      return true;
                    })
                  );
                // 复制查询条件
                const reqData = {
                  ...filterValidFields(this.hwModel.queryData),
                  pageSize,
                  pageNum: pageIndex,
                  operatorId: this.hwModel.operatorId
                }

                // 查询数据
                const queryResponse = await $.ajax({
                  url: this.hwUrl + '/aofeng/queryData',
                  type: 'POST',
                  contentType: 'application/json',
                  headers: {
                    'Authorization': 'Bearer ' + this.hwModel.token
                  },
                  data: JSON.stringify(reqData)
                })

                if (queryResponse.code !== '200') {
                  throw new Error('查询数据失败')
                }

                // 使用Vue.set确保响应式更新
                Vue.set(this.model, 'rows', queryResponse.rows || [])
                Vue.set(this.model, 'total', queryResponse.total || 0)
                Vue.set(this.model, 'pages', queryResponse.pages || 0)

                // 确保DOM更新后再触发事件
                this.$nextTick(() => {
                  if (this.$refs.hwList) {
                    this.$refs.hwList.$emit('data-loaded')
                  }
                })

              } catch (error) {
                console.error('查询失败:', error)
                this.$showMessage('查询失败: ' + error.message)
              } finally {
                this.model.loading = false; // 结束加载
              }
            }
          })
      }else {
        try {
          this.model.loading = true; // 开始加载
          // 使用传入的分页参数

          // 获取token
          const tokenResponse = await $.ajax({
            url: this.hwUrl + '/aofeng/queryToken',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
              operatorId: this.hwModel.operatorId
            })
          })

          if (tokenResponse.code !== '200') {
            throw new Error('获取token失败')
          }

          this.hwModel.token = tokenResponse.data.accessToken

          const filterValidFields = (obj) =>
            Object.fromEntries(
              Object.entries(obj).filter(([_, v]) => {
                if (v === null || v === undefined) return false;
                if (typeof v === 'string' && v.trim() === '') return false;
                return true;
              })
            );
          // 复制查询条件
          const reqData = {
            ...filterValidFields(this.hwModel.queryData),
            pageSize,
            pageNum: pageIndex,
            operatorId: this.hwModel.operatorId
          }

          // 查询数据
          const queryResponse = await $.ajax({
            url: this.hwUrl + '/aofeng/queryData',
            type: 'POST',
            contentType: 'application/json',
            headers: {
              'Authorization': 'Bearer ' + this.hwModel.token
            },
            data: JSON.stringify(reqData)
          })

          if (queryResponse.code !== '200') {
            throw new Error('查询数据失败')
          }

          // 使用Vue.set确保响应式更新
          Vue.set(this.model, 'rows', queryResponse.rows || [])
          Vue.set(this.model, 'total', queryResponse.total || 0)
          Vue.set(this.model, 'pages', queryResponse.pages || 0)

          // 确保DOM更新后再触发事件
          this.$nextTick(() => {
            if (this.$refs.hwList) {
              this.$refs.hwList.$emit('data-loaded')
            }
          })

        } catch (error) {
          console.error('查询失败:', error)
          this.$showMessage('查询失败: ' + error.message)
        } finally {
          this.model.loading = false; // 结束加载
        }
      }
    },

    inspect(info) {
      const selectedTypes = [];
      if (this.hwModel.queryData.dangerUser && this.hwModel.queryData.dangerUser !== '') selectedTypes.push('用户隐患');
      if (this.hwModel.queryData.keyUser && this.hwModel.queryData.keyUser !== '') selectedTypes.push('重点用户');
      if (this.hwModel.queryData.longTimeUser && this.hwModel.queryData.longTimeUser !== '') selectedTypes.push('长期未检');
      if (this.hwModel.queryData.problemUser && this.hwModel.queryData.problemUser !== '') selectedTypes.push('问题表');

      if (selectedTypes.length !== 1) {
        this.$showMessage('请选择一个且仅一个跟进类型')
        return;
      }

      info.id = '';
      info.f_state = '未检';
      info.f_no_checkplan = selectedTypes[0] + '跟进单';

      if (info.f_user_type == '民用') {
        this.$goto('paper-set', {item: info, role: 'inspect'}, 'self', this.reload);
      } else {
        this.$goto('paper-set-noncivil', {item: info, role: 'inspect'}, 'self', this.reload);
      }
    },

    isYearDifference(years, date) {
      if (!date) return false
      const lastDate = new Date(date)
      const now = new Date()
      return now.getFullYear() - lastDate.getFullYear() >= years
    }
  },
  // mounted() {
  //   this.fetchResidentialAreas()
  // }
}
</script>

<style scoped>
/* 星级用户 → 橙黄边框 */
.panel-orange {
  border: 2px solid #FFA940 !important; /* 橙黄色 */
  border-radius: 10px;
}

/* 行业内用户 → 天蓝色边框 */
.panel-sky {
  border: 2px solid #40A9FF !important; /* 天蓝色 */
  border-radius: 10px;
}

/* 职工用户 → 绿色边框 */
.panel-green {
  border: 2px solid #52C41A !important; /* 绿色 */
  border-radius: 10px;
}
.auto {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 0 10px;
}

.app-text {
  font-size: 14px;
}

.app-row {
  margin-top: 10px;
}

.font {
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px;
}

.input-font {
  font-size: 14px;
  margin-top: 10px;
}

.search_input {
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn-font {
  font-size: 14px;
  font-weight: bold;
}

.btn-color {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

.panel-self {
  padding: 0;
}

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
