<template>
  <div class="pos-gic">
    <div class="min100">
      <nav-path :navpath="navpath"></nav-path>
      <div class="posmember-part">
        <div class="gic-people">
          <h2 class="adpot-container">
            适用人群
          </h2>
          <div class="people-box">
            <vue-gic-people
              :projectName="projectName"
              :sceneValue="sceneValue"
              ref="peopleFilter"
              @findFilter="findFilter"
              @editHide="editHide"
              @editShow="editShow"
              @hideBtn="hideBtn"
            >
            </vue-gic-people>
            <div
              class="people-button"
              v-if="toggleTag"
            >
              <el-button
                size="small"
                type="primary"
                @click="getData"
              >确定</el-button>
              <el-button
                size="small"
                @click="cancelFilter"
              >取消</el-button>
            </div>
          </div>

        </div>
        <div class="handler">
          <p
            class="multiple"
            v-if="multipleList.length == page.pageSize"
          >
            <span v-if="selectAll == false">已勾选本页 {{ multipleList.length }} 个会员，</span>
            <span v-else>已勾选 {{ page.totalCount }} 个会员，</span>
            <span
              @click="selectAllmultipleList"
              class="multiple-all pointer"
              v-if="selectAll == false"
            >勾选全部 {{ page.totalCount }} 个会员</span>
            <span
              @click="selectAllmultipleList"
              class="multiple-all pointer"
              v-else
            >取消勾选</span>
          </p>

          <div class="handler-search">
            会员共{{page.totalCount}}人
            <!-- <Navbar :memberType="2"></Navbar> -->
            <el-input
              placeholder="输入会员姓名/昵称/手机号码"
              v-model="phoneNameCard"
              @keyup.native.enter="handleSearch"
              style="width: 249px;"
              maxlength="32"
              clearable
            >
              <i
                slot="prefix"
                class="el-input__icon el-icon-search"
              ></i>
            </el-input>
            <div class="handler-setting">
              <!-- <el-button type="">人群定向</el-button> -->
              <el-select
                v-model="batchValue"
                style="width: 120px;"
                placeholder="批量操作"
                @change="handleFocusBatch"
                @visible-change="handleVisibleBatch"
              >
                <el-option
                  key="integral"
                  label="调整积分"
                  value="integral"
                  v-if="showHandleScoreBtn"
                ></el-option>
                <el-option
                  key="bulkIntegral"
                  label="批量导入"
                  value="bulkIntegral"
                ></el-option>
                <el-option
                  key="grade"
                  label="调整会员等级"
                  value="grade"
                ></el-option>
                 <el-option
                  key="mainstore"
                  label="修改主门店"
                  value="mainstore"
                ></el-option>
                <el-option
                  key="store"
                  label="修改协管门店"
                  value="store"
                ></el-option>
              </el-select>
              <el-button
                type="primary"
                icon="el-icon-setting"
                @click="handleMemberFields"
                style="width: 32px; line-height: 30px; padding: 0px; margin: 0 5px;"
              ></el-button>
              <el-popover
                placement="top-start"
                :width="popWidth"
                trigger="hover"
                @show="callProcess"
              >
                <div v-if="processList.length > 0">
                  <div
                    v-for="(item, index) in processList"
                    :key="index"
                  >
                    <span class="process-span">{{item.name}}</span>
                    <div style="display: inline-block; width: 300px">
                      <el-progress :percentage="item.taskCount == 0 ? 100 : (+((item.finishCount*100/item.taskCount).toFixed(2)))"></el-progress>
                    </div>
                  </div>
                </div>

                <div
                  v-else
                  style="text-align: center;"
                >
                  暂无批量处理数据
                </div>
                <el-badge
                  slot="reference"
                  :is-dot="isdot"
                  class="item"
                >
                  <el-button
                    type="primary"
                    icon="el-icon-time"
                    style="width: 32px; line-height: 30px; padding: 0px;"
                  ></el-button>
                </el-badge>
              </el-popover>
            </div>
          </div>
          <div class="tablecontent">
            <el-table
              :data="memberData"
              v-loading="load"
              tooltip-effect="dark"
              ref="multipleTable"
              @selection-change="handleSelectionChange"
              @sort-change='sortChange'
            >
              <el-table-column
                type="selection"
                width="50"
                fixed
              > </el-table-column>
              <div
                v-for="(item, index) in fieldsStr"
                :key="index"
              >
                <el-table-column
                  :fixed="item === 'name'"
                  :width="item == 'name' ? '150' : ''"
                  v-if="item == 'name' || item == 'grade' || item == 'status' || item == 'channel' || item == 'frozenStatus'"
                  :prop="item"
                  :label="item | formatField"
                >
                  <template slot-scope="scope">
                    <div
                      v-if="item == 'name'"
                      class="tablecontent-cell"
                      @click="linkDetail(scope.row.memberId)"
                    >
                      <User-info-card
                        :scopeData="scope.row"
                        @showSingleInfo="showSingleInfo(scope.row.memberId)"
                        @linkDetail="linkDetail(scope.row.memberId)"
                        :singleInfo="singleInfo"
                      ></User-info-card>
                      <span class="fix-block">{{ scope.row.memberName | formatMember }}</span>
                    </div>
                    <span v-else-if="item == 'grade'">{{ scope.row.gradeName }}</span>
                    <span v-else-if="item == 'status'">
                      <span
                        :title="scope.row.wxStatus == 0 ? '未使用小程序' : scope.row.wxStatus == 1 ? '已使用小程序' : ''"
                        class="channelicon"
                        :class="scope.row.wxStatus == 0 ? 'xcxicongray' : scope.row.wxStatus == 1 ? 'xcxicon' : ''"
                      ></span>
                      <span
                        :title="scope.row.status == 0 ? '取消关注公众号' : scope.row.status == 1 ? '已关注公众号' : '未关注公众号'"
                        class="channelicon"
                        :class="scope.row.status == 0 ? 'gzhiconcanclegray' : scope.row.Status == 1 ? 'gzhicon' : 'gzhicongray'"
                      ></span>
                    </span>
                    <span v-else-if="item == 'channel'">
                      <span
                        class="channelicon"
                        :class="scope.row.channelTaobao == 0 ? 'taobaoicongray' : scope.row.channelTaobao == 1 ? 'taobaoicon' : ''"
                      ></span>
                      <span
                        class="channelicon"
                        :class="scope.row.channelJd == 0 ? 'jdicongray' : scope.row.channelJd == 1 ? 'jdicon' : ''"
                      ></span>
                      <span
                        class="channelicon"
                        :class="scope.row.channelWei == 0 ? 'vipicongray' : scope.row.channelWei == 1 ? 'vipicon' : ''"
                      ></span>
                    </span>
                    <div v-else-if="item == 'frozenStatus'">
                      <span
                        class="dm-status--success"
                        v-if="scope.row.frozenStatus == 0"
                      >正常</span>
                      <span
                        class="dm-status--warning"
                        v-if="scope.row.frozenStatus == 1"
                      >冻结</span>
                    </div>

                    <div v-else-if="item == 'crateCardDateString'">
                      <div>{{ scope.row.crateCardDateString | formatTimeYMD }}</div>
                      <div>{{ scope.row.crateCardDateString | formatTimeHMS }}</div>
                    </div>
                    <div v-else-if="item == 'createTime'">
                      <div>{{ scope.row.createTime | formatTimeYMD }}</div>
                      <div>{{ scope.row.createTime | formatTimeHMS }}</div>
                    </div>
                    <div v-else-if="item == 'attentionDate'">
                      <div>{{ scope.row.attentionTime | formatTimeYMD }}</div>
                      <div>{{ scope.row.attentionTime | formatTimeHMS }}</div>
                    </div>
                    <span v-else-if="item == 'costAll'">
                      {{ scope.row.costFee }}
                    </span>
                    <span v-else-if="item == 'costTimes'">
                      {{ scope.row.costTimes }}
                    </span>
                    <span v-else-if="item == 'lastCostTime'">
                      {{ scope.row.lastCostTime }}
                    </span>
                    <span v-else-if="item == 'lastCost'">
                      {{ scope.row.lastCost }}
                    </span>
                    <span v-else-if="item == 'avgCost'">
                      {{ scope.row.avgCost }}
                    </span>
                    <span v-else-if="item == 'avgNumber'">
                      {{ scope.row.avgNumber }}
                    </span>
                    <span v-else-if="item == 'costCategory'">
                      {{ scope.row.costCategory }}
                    </span>
                    <span v-else-if="item == 'discountRate'">
                      {{ scope.row.discountRate }}
                    </span>
                    <span v-else-if="item == 'cancelAttentionTime'">
                      {{ scope.row.cancelAttentionTime | formatTime }}
                    </span>
                    <span v-else-if="item == 'age'">
                      {{ scope.row.age }}
                    </span>
                    <span v-else-if="item == 'birthday'">
                      {{ scope.row.birthdayMD }}
                    </span>
                    <span v-else-if="item == 'storedValueAll'">
                      {{ scope.row.storedValueAll }}
                    </span>
                    <span v-else-if="item == 'storedValueCurrent'">
                      {{ scope.row.storedValueCurrent }}
                    </span>
                    <span v-else-if="item == 'pointsAll'">
                      {{ scope.row.pointsAll }}
                    </span>
                    <span v-else-if="item == 'pointsCurrent'">
                      {{ scope.row.pointsCurrent }}
                    </span>
                    <span v-else-if="item == 'mainStoreName'">
                      {{ scope.row.mainStoreName }}
                    </span>
                    <span v-else-if="item == 'createCardStoreName'">
                      {{ scope.row.openStoreName }}
                    </span>
                    <span v-else-if="item == 'cardNo'">
                      {{ scope.row.cardNo }}
                    </span>
                    <span v-else-if="item == 'highCost'">
                      {{ scope.row.highCost }}
                    </span>
                  </template>
                </el-table-column>

                <el-table-column
                  v-else
                  :prop="item"
                  :label="item | formatField"
                  sortable='custom'
                  width="160"
                >
                  <template slot-scope="scope">
                    <div
                      v-if="item == 'name'"
                      class="tablecontent-cell"
                    >
                      <User-info-card
                        :scopeData="scope.row"
                        @showSingleInfo="showSingleInfo(scope.row.memberId)"
                        @linkDetail="linkDetail(scope.row.memberId)"
                        :singleInfo="singleInfo"
                      ></User-info-card>
                      <span class="fix-block">{{ scope.row.memberName | formatMember }}</span>
                    </div>
                    <span v-else-if="item == 'grade'">{{ scope.row.gradeName }}</span>
                    <span v-else-if="item == 'status'">
                      <span
                        :title="scope.row.wxStatus == 0 ? '未使用小程序' : scope.row.wxStatus == 1 ? '已使用小程序' : ''"
                        class="channelicon"
                        :class="scope.row.wxStatus == 0 ? 'xcxicongray' : scope.row.wxStatus == 1 ? 'xcxicon' : ''"
                      ></span>
                      <span
                        :title="scope.row.status == 0 ? '取消关注公众号' : scope.row.status == 1 ? '已关注公众号' : '未关注公众号'"
                        class="channelicon"
                        :class="scope.row.status == 0 ? 'gzhiconcanclegray' : scope.row.Status == 1 ? 'gzhicon' : 'gzhicongray'"
                      ></span>
                    </span>
                    <span v-else-if="item == 'channel'">
                      <span
                        class="channelicon"
                        :class="scope.row.channelTaobao == 0 ? 'taobaoicongray' : scope.row.channelTaobao == 1 ? 'taobaoicon' : ''"
                      ></span>
                      <span
                        class="channelicon"
                        :class="scope.row.channelJd == 0 ? 'jdicongray' : scope.row.channelJd == 1 ? 'jdicon' : ''"
                      ></span>
                      <span
                        class="channelicon"
                        :class="scope.row.channelWei == 0 ? 'vipicongray' : scope.row.channelWei == 1 ? 'vipicon' : ''"
                      ></span>
                    </span>
                    <div v-else-if="item == 'crateCardDateString'">
                      <div>{{ scope.row.crateCardDateString | formatTimeYMD }}</div>
                      <div>{{ scope.row.crateCardDateString | formatTimeHMS }}</div>
                    </div>
                    <div v-else-if="item == 'createTime'">
                      <div>{{ scope.row.createTime | formatTimeYMD }}</div>
                      <div>{{ scope.row.createTime | formatTimeHMS }}</div>
                    </div>
                    <div v-else-if="item == 'attentionDate'">
                      <div>{{ scope.row.attentionTime | formatTimeYMD }}</div>
                      <div>{{ scope.row.attentionTime | formatTimeHMS }}</div>
                    </div>
                    <span v-else-if="item == 'costAll'">
                      {{ scope.row.costFee }}
                    </span>
                    <span v-else-if="item == 'costTimes'">
                      {{ scope.row.costTimes }}
                    </span>
                    <span v-else-if="item == 'lastCostTime'">
                      {{ scope.row.lastCostTime }}
                    </span>
                    <span v-else-if="item == 'lastCost'">
                      {{ scope.row.lastCost }}
                    </span>
                    <span v-else-if="item == 'avgCost'">
                      {{ scope.row.avgCost }}
                    </span>
                    <span v-else-if="item == 'avgNumber'">
                      {{ scope.row.avgNumber }}
                    </span>
                    <span v-else-if="item == 'costCategory'">
                      {{ scope.row.costCategory }}
                    </span>
                    <span v-else-if="item == 'discountRate'">
                      {{ scope.row.discountRate }}
                    </span>
                    <div v-else-if="item == 'cancelAttentionTime'">
                      <div>{{ scope.row.cancelAttentionTime | formatTimeYMD }}</div>
                      <div>{{ scope.row.cancelAttentionTime | formatTimeHMS }}</div>
                    </div>
                    <span v-else-if="item == 'age'">
                      {{ scope.row.age }}
                    </span>
                    <span v-else-if="item == 'birthday'">
                      {{ scope.row.birthdayMD }}
                    </span>
                    <span v-else-if="item == 'storedValueAll'">
                      {{ scope.row.storedValueAll }}
                    </span>
                    <span v-else-if="item == 'storedValueCurrent'">
                      {{ scope.row.storedValueCurrent }}
                    </span>
                    <span v-else-if="item == 'pointsAll'">
                      {{ scope.row.pointsAll }}
                    </span>
                    <span v-else-if="item == 'pointsCurrent'">
                      {{ scope.row.pointsCurrent }}
                    </span>
                    <span v-else-if="item == 'mainStoreName'">
                      {{ scope.row.mainStoreName }}
                    </span>
                    <span v-else-if="item == 'createCardStoreName'">
                      {{ scope.row.openStoreName }}
                    </span>
                    <span v-else-if="item == 'cardNo'">
                      {{ scope.row.cardNo }}
                    </span>
                    <span v-else-if="item == 'costFee'">
                      {{ scope.row.costFee }}
                    </span>
                    <span v-else-if="item == 'costFeePaid'">
                      {{ scope.row.costFeePaid }}
                    </span>
                    <span v-else-if="item == 'lastCostPaid'">
                      {{ scope.row.lastCostPaid }}
                    </span>
                    <span v-else-if="item == 'highCost'">
                      {{ scope.row.highCost }}
                    </span>
                    <span v-else-if="item == 'highCostPaid'">
                      {{ scope.row.highCostPaid }}
                    </span>
                    <div v-else-if="item == 'frozenStatus'">
                      <span
                        class="dm-status--success"
                        v-if="scope.row.frozenStatus == 0"
                      >正常</span>
                      <span
                        class="dm-status--warning"
                        v-if="scope.row.frozenStatus == 1"
                      >冻结</span>
                    </div>
                  </template>
                </el-table-column>
              </div>

              <el-table-column
                label="操作"
                fixed="right"
              >
                <template slot-scope="scope">
                  <div class="operate">
                    <router-link
                      :to="{path:'/posmemberDetail', query:{memberId: scope.row.memberId}}"
                      class="operate-btn"
                    >查看</router-link>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div
              class="page mTop20 mBottom40"
              v-if="memberData.length > 0"
            >
              <dm-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-sizes="[20, 40, 60, 80]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="page.totalCount"
              >
              </dm-pagination>
            </div>
          </div>
        </div>

        <!--自定义字段列表-弹框-->
        <el-dialog
          title="自定义字段列表"
          :visible.sync="dialogFieldVisible"
          width="600px"
        >
          <div class="checkwtip mBottom10">请选择您想显示的列表详细信息，最多勾选8个选项，已经勾选了 <span class="curcheck">{{ checkedFields.length }}</span> 个</div>
          <el-checkbox-group
            v-model="checkedFields"
            :min="0"
            :max="8"
          >
            <div class="checkwrap">
              <div
                class="checkwrap-item lheigth30"
                v-for="(item, index) in memberFields"
                :key="index"
              >
                <el-checkbox
                  :label="item"
                  :key="item"
                  :disabled="item==='name'"
                >{{item | formatFieldName }}</el-checkbox>
              </div>
            </div>
          </el-checkbox-group>

          <span
            slot="footer"
            class="dialog-footer"
          >
            <el-button @click="dialogFieldVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="submitFields"
            >确 定</el-button>
          </span>
        </el-dialog>
        <!--自定义字段列表-弹框-end-->

        <!--批量调整积分-弹框-->
        <el-dialog
          title="批量调整积分"
          :visible.sync="dialogIntegralVisible"
          width="600px"
          @close="closeIntegral('IntegralForm')"
        >
          <el-form
            ref="IntegralForm"
            :model="IntegralForm"
            :rules="rules"
            label-width="120px"
          >
            <el-form-item
              label="调整积分"
              prop="editType"
            >
              <el-radio-group v-model="IntegralForm.editType">
                <el-radio :label=1>增加积分</el-radio>
                <el-radio :label=2>扣除积分</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="调整额度"
              prop="accumulatPoints"
            >
              <el-input-number
                v-model="IntegralForm.accumulatPoints"
                controls-position="right"
                :min="1"
                :max="999999"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="原因备注"
              prop="remark"
            >
              <el-input
                type="textarea"
                v-model="IntegralForm.remark"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="原始成本主体"
              prop="settlementStoreId"
              v-if="integralFlag == 'gic' && IntegralForm.editType == 1"
            >
              <el-select
                prop="settlementStoreId"
                v-model="IntegralForm.settlementStoreId"
                filterable
                remote
                reserve-keyword
                placeholder="请输入原始成本主体"
                :remote-method="handleKeyup"
                :loading="loading"
              >
                <el-option
                  v-for="item in storeList"
                  :key="item.storeId"
                  :label="item.storeName"
                  :value="item.storeId"
                ></el-option>
              </el-select>
              <p style="color: ; font-size: 12px;">注：除输入选择具体门店选择外，还可输入总部，记总部名下。</p>
            </el-form-item>
          </el-form>
          <div
            slot="footer"
            class="dialog-footer"
          >
            <el-button @click="dialogIntegralVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="submitIntegral('IntegralForm')"
            >确 定</el-button>
          </div>
        </el-dialog>
        <!--批量调整积分-弹框-end-->

        <!--批量调整会员等级-弹框-->
        <el-dialog
          title="批量调整会员等级"
          :visible.sync="dialogGradeVisible"
          width="600px"
          @close="closeGrade('gradeForm')"
        >
          <el-form
            ref="gradeForm"
            :model="gradeForm"
            :rules="graderules"
            label-width="120px"
          >
            <el-form-item
              v-if="showEditClique"
              label="等级类型"
              prop="gradeType"
            >
              <el-radio v-model="gradeForm.isClique" :label="1" @change="gradeForm.gradeId = ''">集团等级</el-radio>
              <el-radio v-model="gradeForm.isClique" :label="0" @change="gradeForm.gradeId = ''">商户等级</el-radio>
            </el-form-item>
            <el-form-item
              label="调整后等级"
              prop="gradeId"
            >
              <el-select
                v-model="gradeForm.gradeId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in showCardList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="原因备注"
              prop="remark"
            >
              <el-input
                type="textarea"
                v-model="gradeForm.remark"
              ></el-input>
            </el-form-item>
          </el-form>
          <div
            slot="footer"
            class="dialog-footer"
          >
            <el-button @click="dialogGradeVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="submitGrade('gradeForm')"
            >确 定</el-button>
          </div>
        </el-dialog>
        <!--批量调整会员等级-弹框-end-->

         <!--修改主门店-弹框-->
        <el-dialog
          title="修改主门店"
          :visible.sync="dialogMainstoreVisible"
          width="600px"
          @close="resetBatchOptions">
          <el-form
            ref="mainstoreForm"
            :model="mainstoreForm"
            :rules="mainstorerules"
            label-width="120px"
          >
            <el-form-item
              label="选择主门店"
              prop="mainOptType"
            >
              <el-radio-group
                v-model="mainstoreForm.mainOptType"
                @change="handleStore"
              >
                <p class="lheigth40">
                  <el-radio :label=1>替换为最新协管的门店 </el-radio>
                </p>
                <p class="lheigth40">
                  <el-radio :label=2>替换为最新协管的自营门店</el-radio>
                </p>
                <p class="lheigth40">
                  <el-radio :label=3>替换为最新协管的自营/联营门店</el-radio>
                </p>
                <p class="lheigth40">
                  <el-radio :label=4>
                    自定义主门店
                    <span style="margin-left:40px;font-size: 14px;">
                      {{storeName}}
                    </span>
                    <el-button
                      v-if="mainstoreForm.mainOptType == 4"
                      type="text"
                      @click="changeStore">
                      {{storeName ? '修改' : '选择'}}主门店
                    </el-button>
                  </el-radio>
                </p>
              </el-radio-group>

            </el-form-item>
            <el-form-item
              label="原因备注"
              prop="remark"
            >
              <el-input
                type="textarea"
                v-model="mainstoreForm.remark"
                style="width: 400px;"
              ></el-input>
            </el-form-item>
          </el-form>

          <div
            slot="footer"
            class="dialog-footer"
          >
            <el-button @click="dialogMainstoreVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="debounce(submitMainStore,300)('mainstoreForm')"
            >确 定</el-button>
          </div>
        </el-dialog>
        <!--修改主门店-弹框-end-->

        <!--批量修改协管门店-弹框-->
        <el-dialog
          title="批量修改协管门店"
          :visible.sync="dialogSubStoreVisible"
          width="800px"
          @close="resetBatchOptions">
          <el-form
            ref="storeForm"
            :model="storeForm"
            :rules="storerules"
            label-width="120px"
          >
            <p class="ml15">当前选择{{multipleList.length}}个会员</p>
            <el-form-item
              label="选择协管门店"
              prop="subOptType"
            >
              <el-radio
                @change="changeSubStore"
                :label=1
                v-model="storeForm.subOptType"
              >增加协管门店
                <span style="color: #000;">{{ storeForm.addSubStoreName }}</span>
                <el-button
                  v-if="storeForm.subOptType == 1"
                  type="text"
                  @click="changeStore"
                >选择门店</el-button>
              </el-radio>
              <p>
                <el-radio
                  @change="changeSubStore"
                  :label=2
                  v-model="storeForm.subOptType"
                >将协管门店</el-radio>
                <!-- 为了解决无搜索结果后选择框失焦后，再次点击选择框无下拉选项的场景，在visible-change时重新获取下拉选项数据 -->
                <el-select
                  v-model="storeForm.premodefiySubStoreId"
                  filterable
                  remote
                  :remote-method="getSubStoreList"
                  :loading="loading"
                  placeholder="请输入关键字搜索门店"
                  :disabled="storeForm.subOptType == 2 ? false : true"
                  v-select-loadmore="getOnlineStore"
                  @visible-change="(flag) => flag ? getSubStoreList() : ''"
                >
                  <el-option
                    v-for="item in subStoreList"
                    :key="item.storeId"
                    :label="item.storeName"
                    :value="item.storeId"
                  ></el-option>
                  <el-option class="loadmore-loading" v-if="loadmoreStore.loading">
                    <i class="loading-icon" v-loading="true"></i> 加载中...
                  </el-option>
                </el-select>
                修改为 {{ storeForm.modefiySubStoreName }}
                <el-button
                  v-if="storeForm.subOptType == 2"
                  type="text"
                  @click="changeStore"
                >选择门店</el-button>
              </p>
              <el-radio
                @change="changeSubStore"
                :label=3
                v-model="storeForm.subOptType"
              >将协管门店
                <el-select
                  v-model="storeForm.deleteSubStoreId"
                  filterable
                  remote
                  :remote-method="getSubStoreList"
                  :loading="loading"
                  placeholder="请输入关键字搜索门店"
                  :disabled="storeForm.subOptType == 3 ? false : true"
                  v-select-loadmore="getOnlineStore"
                  @visible-change="(flag) => flag ? getSubStoreList() : ''"
                >
                  <el-option
                    v-for="item in subStoreList"
                    :key="item.storeId"
                    :label="item.storeName"
                    :value="item.storeId"
                  ></el-option>
                  <el-option class="loadmore-loading" v-if="loadmoreStore.loading">
                    <i class="loading-icon" v-loading="true"></i> 加载中...
                  </el-option>
                </el-select><span style="cursor: default;"> 删除</span></el-radio>
            </el-form-item>
            <el-form-item
              label="原因备注"
              prop="remark"
            >
              <el-input
                type="textarea"
                v-model="storeForm.remark"
              ></el-input>
            </el-form-item>
          </el-form>
          <div
            slot="footer"
            class="dialog-footer"
          >
            <el-button @click="dialogSubStoreVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="debounce(submitStore,300)('storeForm')"
            >确 定</el-button>
          </div>
        </el-dialog>
        <!--批量修改协管门店-弹框-end-->

        <!--查看批量处理进度-弹框-->
        <el-dialog
          title="查看批量处理进度"
          :visible.sync="dialogProcessVisible"
          width="600px"
          @close="closeProcess">
          <div
            class="process"
            v-for="(item, index) in processList"
            :key="index"
          >
            <span class="process-name">{{ item.name }}</span><span class="process-status">
              <el-progress :percentage="item | formatProcess"></el-progress>
            </span>
          </div>
          <p v-if="processList.length <= 0">暂无批量处理</p>
          <span
            slot="footer"
            class="dialog-footer"
          >
            <el-button @click="dialogProcessVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="dialogProcessVisible = false"
            >确 定</el-button>
          </span>
        </el-dialog>
        <!--查看批量处理进度-弹框-end-->

        <vue-gic-store
          :projectName="projectName"
          :showStoreDialog="showStoreDilog"
          @selectStore="selectStore"
          :selectId="selectId"
        ></vue-gic-store>
      </div>
    </div>
    <div class="foot-add">
      <vue-gic-footer></vue-gic-footer>
    </div>
  </div>
</template>

<script>
import posmembers from './posmembers';
export default { ...posmembers };
</script>

<style lang="stylus">
.loadmore-loading {
  text-align: center;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  color: #909399;
  &.hover, &:hover {
    background-color: transparent !important;
  }
  .loading-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    .el-loading-spinner {
      top: 0;
      margin-top: -2px;
    }
    .circular {
      width: 18px;
      height: 18px;
    }
  }
}
.pos-gic {
  height: 100%;
}

.posmember-part {
  padding: 0 24px;
  margin-top: 20px;
}

.handler {
  background-color: #fff;
  padding: 20px;

  .handler-search {
    margin-bottom: 20px;
  }

  .handler-setting {
    float: right;
    text-align: right;
  }

  .el-button+.el-button {
    margin-left: 0px;
  }
}

.operate-btn {
  color: #409eff;
}

.gic-people {
  position: relative;
  margin-bottom: 16px;
  min-height: 100px;
  background-color: #fff;

  .adpot-container {
    margin: 0;
    padding: 24px 0 24px 30px;
    font-size: 16px;
    border-bottom: 1px solid #dcdfe6;
  }

  .people-box {
    padding: 24px;
    background-color: #fff;
  }
}

.btn-filter {
  padding-left: 150px;
  margin-top: 10px;
  background-color: #fff;
}

@media screen and (max-width: 1366px) {
  .pos-gic {
    width: 1166px;
  }
}

.member-store-name {
  display: inline-block;
  vertical-align: middle;
  margin-left: 40px;
  font-size: 14px;
  color: #1890ff;
  cursor: pointer;
}
</style>
