<template>
  <div class="abnormal-member-list-page">
    <div class="forzen-container" v-if="settingType == 1 || settingType == 3">
      <div class="search">
        <div class="top-header">
          <h2>异常会员 {{ total }}人</h2>
        </div>
        <div class="search-item">
          <el-row type="flex">
            <el-input
              style="width: 260px"
              v-model="searchData.phoneNameCard"
              prefix-icon="el-icon-search"
              placeholder="输入手机号/会员卡号"
              @change="onSearchDataChange"
              clearable
            ></el-input>
            <el-date-picker v-model="dateValue" 
              style="margin-left: 10px;width: 260px;"
              format="yyyy-MM-dd"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              :pickerOptions="pickerOptions"
              @change="dateRangeChange"></el-date-picker>

            <el-select
              v-model="searchData.memberCardStatus"
              style="width: 160px; margin-left: 10px"
              placeholder="全部会员状态"
              @change="onSearchDataChange"
              clearable
            >
              <el-option label="正常" :value="1"></el-option>
              <el-option label="冻结" :value="2"></el-option>
            </el-select>
            
          </el-row>
          <span
            class="right-btn"
            style="margin-left: 10px; min-width: 364px; text-align: right"
          >
            <el-button @click="download" 
              v-if="getCodeAuth('memberAbnormalSearchReasultDownload')"
              :limit-code="getCode('memberAbnormalSearchReasultDownload')">
              <i class="iconfont icon-xiazai"></i>
              <span> 搜索结果导出</span>
            </el-button>

            <el-button @click="clickBatchFreeze"
              v-if="getCodeAuth('memberAbnormalBatchFreeze')"
              :limit-code="getCode('memberAbnormalBatchFreeze')"
               plain>批量冻结</el-button>

            <el-button type="primary" @click="toSettingPage"
              v-if="getCodeAuth('memberAbnormalSetting')"
              :limit-code="getCode('memberAbnormalSetting')"
              >异常规则配置</el-button
            >
          </span>
        </div>
      </div>

      <div class="frozen-table" v-if="settingType == 1">
        <el-table
          v-loading="load"
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column type="selection" min-width="30" fixed="left">
          </el-table-column>
          <el-table-column
            width="50"
            fixed="left"
            header-align="center"
            class-name="table-select-page"
          >
            <template #header>
              <dm-table-select-page
                :type="selectPage.type"
                :data-ready="selectPage.dataReady"
                :table-vm="$refs.multipleTable"
                :table-data="list"
                :total="total"
                @change="(t) => (selectPage.type = t)"
                @selection-change="(data) => (multipleList = data)"
              >
              </dm-table-select-page>
            </template>
          </el-table-column>

          <el-table-column
            v-for="colum in memberFields"
            v-if="colum.check"
            :prop="colum.code"
            :key="colum.code"
            :label="colum.name"
            show-overflow-tooltip
            :min-width="
              colum.code === 'name' ? 210 : colum.code == 'status' ? 170 : 150
            "
            :fixed="colum.code === 'name'"
          >
            <template slot-scope="{ row }">
              <!-- 基本信息 -->
              <el-row
                v-if="colum.code == 'name'"
                type="flex"
                align="middle"
                class="basic-info-table"
                @click.native="linkDetail(row.memberId)"
              >
                <img v-if="row.thirdImgUrl" :src="row.thirdImgUrl" class="basic-img" />
                <svg v-else aria-hidden="true" class="basic-img">
                  <use xlink:href="#icon-user-default"></use>
                </svg>

                <div>
                  <div class="member-name">
                    <span v-if="row.memberName">{{ row.memberName }}</span>
                    <span class="nick-name" v-if="row.nickName"
                      >({{ row.nickName }})</span
                    >
                  </div>
                  <div v-if="row.phoneNumber">
                    {{ row.phoneNumber }}
                  </div>
                </div>
              </el-row>

              <!-- 等级 -->
              <span v-else-if="colum.code == 'grade'">{{ row.gradeName }}</span>
              <!-- 状态 -->
              <span v-else-if="colum.code == 'status'">
                <template v-if="!Array.isArray(row.memberSources) || row.memberSources.filter(el =>  el.highlight == 1 || el.highlight == 2).length == 0">--</template>
                <template v-else>
                  <!-- 1100：公众号 1600：小程序 1700：企业微信 1303：微盟 1302：天猫会员通 -->
                  <span class="channel-box" v-for="channel in row.memberSources.filter(el => el.highlight == 1 || el.highlight == 2)" :key="channel.parentSourceCode">
                    <template v-if="channel.highlight == 1">
                      <img class="channel-icon" v-if="channel.parentSourceCode == 1100" src="../../../../../static/img/channel-icon/weixin-1.png" alt="">
                      <img class="channel-icon" v-if="channel.parentSourceCode == 1600" src="../../../../../static/img/channel-icon/xiaochengxu-1.png" alt="">
                      <img class="channel-icon" v-if="channel.parentSourceCode == 1700" src="../../../../../static/img/channel-icon/qiyeweixin-1.png" alt="">
                      <img class="channel-icon" v-if="channel.parentSourceCode == 1303" src="../../../../../static/img/channel-icon/weimen-1.png" alt="">
                      <img class="channel-icon" v-if="channel.parentSourceCode == 1302" src="../../../../../static/img/channel-icon/tianmao-1.png" alt="">
                      <!-- <img class="channel-icon" v-if="channel.parentSourceCode == 1304" src="../../../static/img/channel-icon/douyin-1.png" alt=""> -->
                    </template>
                    <template v-if="channel.highlight == 2">
                      <img class="channel-icon" v-if="channel.parentSourceCode == 1100" src="../../../../../static/img/channel-icon/weixin-2.png" alt="">
                      <img class="channel-icon" v-if="channel.parentSourceCode == 1600" src="../../../../../static/img/channel-icon/xiaochengxu-2.png" alt="">
                      <img class="channel-icon" v-if="channel.parentSourceCode == 1700" src="../../../../../static/img/channel-icon/qiyeweixin-2.png" alt="">
                      <img class="channel-icon" v-if="channel.parentSourceCode == 1303" src="../../../../../static/img/channel-icon/weimen-2.png" alt="">
                      <img class="channel-icon" v-if="channel.parentSourceCode == 1302" src="../../../../../static/img/channel-icon/tianmao-2.png" alt="">
                      <!-- <img class="channel-icon" v-if="channel.parentSourceCode == 1304" src="../../../static/img/channel-icon/douyin-2.png" alt=""> -->
                    </template>
                    <template v-if="channel.parentSourceCode == 1304">
                      <template v-if="channel.activeFlag!=1">
                        <img class="channel-icon" v-if="channel.parentSourceCode == 1304" src="../../../../../static/img/channel-icon/douyin-0.png" alt="">
                      </template>
                      <template v-if="channel.activeFlag==1">
                        <template v-if="channel.highlight == 1">
                          <img class="channel-icon" v-if="channel.parentSourceCode == 1304" src="../../../../../static/img/channel-icon/douyin-1.png" alt="">
                        </template>
                        <template v-if="channel.highlight == 2">
                          <img class="channel-icon" v-if="channel.parentSourceCode == 1304" src="../../../../../static/img/channel-icon/douyin-2.png" alt="">
                        </template>
                      </template>
                    </template>
                  </span>
                </template>
              </span>
              <!-- 关联渠道 -->
              <span v-else-if="colum.code == 'channel'">
                <span
                  class="channelicon"
                  :class="
                    row.channelTaobao == 0
                      ? 'taobaoicongray'
                      : row.channelTaobao == 1
                      ? 'taobaoicon'
                      : ''
                  "
                />
                <span
                  class="channelicon"
                  :class="
                    row.channelJd == 0
                      ? 'jdicongray'
                      : row.channelJd == 1
                      ? 'jdicon'
                      : ''
                  "
                />
                <span
                  class="channelicon"
                  :class="
                    row.channelWei == 0
                      ? 'vipicongray'
                      : row.channelWei == 1
                      ? 'vipicon'
                      : ''
                  "
                />
              </span>

              <!-- 办卡时间 -->
              <div v-else-if="colum.code == 'crateCardDateString'">
                <div>{{ row.crateCardDateString | formatDate("ymd") }}</div>
                <div>{{ row.crateCardDateString | formatDate("hms") }}</div>
              </div>
              <!-- 新增时间 -->
              <div v-else-if="colum.code == 'createTime'">
                <div>{{ row.createTime | formatDate("ymd") }}</div>
                <div>{{ row.createTime | formatDate("hms") }}</div>
              </div>
              <!-- 关注时间 -->
              <div v-else-if="colum.code == 'attentionDate'">
                <div>{{ row.attentionTime | formatDate("ymd") }}</div>
                <div>{{ row.attentionTime | formatDate("hms") }}</div>
              </div>
              <!-- 取消关注时间 -->
              <div v-else-if="colum.code == 'cancelAttentionTime'">
                <div>{{ row.cancelAttentionTime | formatDate("ymd") }}</div>
                <div>{{ row.cancelAttentionTime | formatDate("hms") }}</div>
              </div>
              <!-- 最近消费时间 -->
              <div v-else-if="colum.code == 'lastCostTime'">
                <div>{{ row.lastCostTime | formatDate("ymd") }}</div>
              </div>
              <!-- 最近消费时间（全渠道） -->
              <div v-else-if="colum.code == 'allChannelLastCostTime'">
                <div>{{ row.allChannelLastCostTime | formatDate("ymd") }}</div>
              </div>
              <!-- 生日 -->
              <div v-else-if="colum.code == 'birthday'">
                <div>{{ row.birthdayMD | formatBirth() }}</div>
              </div>
              <!-- 开卡门店 -->
              <div v-else-if="colum.code == 'createCardStoreName'">
                {{ row.openStoreName }}
              </div>
              <!-- 消费总额(应收) -->
              <div v-else-if="colum.code == 'costAll'">
                {{ row.costFee }}
              </div>
              <!-- 冻结状态 -->
              <div
                class="frozenStatus"
                v-else-if="colum.code === 'frozenStatus'"
              >
                <span class="dm-status--success" v-if="row.frozenStatus == 0"
                  >正常</span
                >
                <span class="dm-status--warning" v-if="row.frozenStatus == 1"
                  >冻结</span
                >
              </div>
              <!-- 专属导购-->
              <div v-else-if="colum.code == 'clerkId'">
                {{ row.clerkName }}
              </div>
              <!-- 开卡导购 -->
              <div v-else-if="colum.code == 'openClerkId'">
                {{ row.openClerkName }}
              </div>
              <span v-else>
                {{ row[colum.code] }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="异常原因" min-width="220">
            <template slot-scope="{ row }">
              <el-popover placement="top" trigger="hover" :disabled="!(row.exceptionReasonList && row.exceptionReasonList.length)">
                <el-row type="flex" v-for="(item,index) in (row.exceptionReasonList||[])" :key="row.memberId + '_reason_' + index">
                  <div class="dm-status--info"></div>
                  <div>{{ item }}</div>
                </el-row>
                <span slot="reference"
                  >{{ (row.exceptionReasonList && row.exceptionReasonList.length) ? (row.exceptionReasonList[0] + (row.exceptionReasonList.length>1?'...':'')) : '--' }}</span
                >
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="判断异常时间" min-width="150">
            <template slot-scope="{ row }">
              <div>{{ row.judgeTime | formatDate("ymd") }}</div>
              <div>{{ row.judgeTime | formatDate("hms") }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            width="150"
            label-class-name="setting-cell"
          >
            <template slot="header">
              <span>操作</span>
              <i class="el-icon-setting" @click="dialogMemberFieldVisible = true" />
            </template>
            <template slot-scope="{ row }">
              <el-button
                type="text"
                :limit-code="getCode('memberIntoCustomDetail')"
                v-if="getCodeAuth('memberIntoCustomDetail')"
                @click="linkDetail(row.memberId)"
                >查看</el-button
              >

              <dm-delete
                tips="确定解冻？"
                @confirm="unfreezeItem(row)"
                placement="top-start"
                v-if="getCodeAuth('memberFrozen') && row.frozenStatus == 1"
              >
                <el-button type="text" :limit-code="getCode('memberFrozen')"
                v-if="getCodeAuth('memberFrozen')"
                  >解冻</el-button
                >
              </dm-delete>
              <el-button
                type="text"
                @click="freezeItem(row)"
                :limit-code="getCode('memberFrozen')"
                v-if="getCodeAuth('memberFrozen') && row.frozenStatus == 0"
                >冻结</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pager" v-if="total > 0">
          <dm-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchData.currentPage"
            :page-size="searchData.pageSize"
            :page-sizes="[20, 50, 75, 100]"
            layout="total,sizes,prev, pager, next"
            :total="total"
          >
          </dm-pagination>
        </div>
      </div>
       <!-- 未更新 -->
      <div class="no-update-page" v-else-if="settingType == 3">
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-cp-no-data"></use>
          </svg>
          <div class="label">列表数据将在次日全量更新</div>

          <el-row type="flex" justify="center" v-if="autoFrozen == 2">
            <el-alert
              class="no-update-alert"
              title="异常会员规则配置已修改，如需解冻此前异常转冻结的会员，可前往冻结会员列表，筛选冻结方式，进行批量解冻"
              type="info"
              :closable="false"
              show-icon
            />
          </el-row>
        </div>
      </div>
      
    </div>
    <!-- 未配置 -->
    <div class="no-setting-page" v-else-if="settingType == 2">
      <el-row type="flex" align="middle" class="no-setting-box">
        <div class="tips-box">
          <div class="label">还未完善异常规则配置</div>
          <el-button
            type="primary"
            @click="toSettingPage"
            :limit-code="getCode('abnormalSetting')"
            >前往配置</el-button
          >
        </div>
        <div class="no-setting-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-cp-peizhiweikong"></use>
          </svg>
        </div>
      </el-row>
    </div>
   

    <!-- 已配置，已更新，但是数据异常 -->
    <div class="data-abnormal-page" v-else-if="settingType == 4">
      <img src="../../../../../static/img/table-abnormal.png" mode="widthFix">
      <div class="title">
        根据您当前配置的异常会员条件，系统统计出您商户的“异常会员数量”占比超过总会员数量的3%，请确认您所配置的条件是否合理。
      </div>
      <div class="subtitle">
        （基于行业数据，常规的异常会员占比在大约在0.1%~2%之间）
      </div>

      <el-button
        type="primary"
        @click="toSettingPage"
        :limit-code="getCode('abnormalSetting')"
        >重新配置</el-button
      >
    </div>
    

    <member-fields-dialog
      :max="8"
      :dialogVisible.sync="dialogMemberFieldVisible"
      :fields="memberFields"
      @submit="submitMemberFields"/>

    <export-fields-dialog
      :max="20"
      :dialogVisible.sync="dialogExportFieldVisible"
      :fields="exportFields"
      @submit="submitExportFields"
      />

    <vue-gic-export-excel
      :dataArr="list"
      :dialogVisible.sync="exportData.dialogVisible"
      :type="exportData.type"
      :excelUrl="exportData.excelUrl"
      :params="exportData.params"
      :projectName="exportData.projectName"
    />

    <freeze-dialog
      v-bind.sync="freezeDialogOptions"
      v-if="freezeDialogOptions.visible"
    />
  </div>
</template>

<script src="./abnormal-member.js"></script>
<!-- <script>
import action from './abnormal-member.js';
export default { ...action };
</script> -->
<style lang="less" src="./abnormal-member.less"></style>

<style lang="less">
.unfreeze-pop-class .el-popconfirm__main {
  margin-block-start: 1em;
  margin-block-end: 1em;
}
</style>
