<template>
  <div class="frozen-list">
    <div class="forzen-container" v-if="settingType == 1">
      <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"
            ></el-input>
            <el-select
              v-model="searchData.memberCardStatus"
              style="width: 135px; margin-left: 10px"
              placeholder="全部会员状态"
              @change="onSearchDataChange"
            >
              <el-option label="全部" value=""></el-option>
              <el-option label="正常" :value="1"></el-option>
              <el-option label="冻结" :value="2"></el-option>
            </el-select>
          </el-row>
          <div class="right-btn" style="margin-left: 10px; min-width: 364px">
            <el-button
              icon="el-icon-download"
              @click="download"
              v-if="getCodeAuth('searchReasultDownload')"
              :limit-code="getCode('searchReasultDownload')"
              >搜索结果导出</el-button
            >
            <el-button
              @click="batchFreeze"
              v-if="getCodeAuth('batchFreeze')"
              :limit-code="getCode('batchFreeze')"
              >批量冻结</el-button
            >
            <el-button
              type="primary"
              @click="toSettingPage"
              v-if="getCodeAuth('abnormalSetting')"
              :limit-code="getCode('abnormalSetting')"
              >异常规则配置</el-button
            >
            <!-- <router-link
              to="/abnormal-member-option"
              class="el-button el-button--primary"
              :limit-code="getCode('memberFrozenNovelMember')"
              v-if="getCodeAuth('memberFrozenNovelMember')"
              >冻结会员</router-link
            > -->
          </div>
        </div>
      </div>

      <div class="frozen-table">
        <el-table
          v-loading="load"
          ref="multipleTable"
          :data="frozenList"
          tooltip-effect="dark"
          style="width: 100%"
          @sort-change="sortChange"
        >
          <el-table-column type="selection" min-width="30" fixed="left">
          </el-table-column>
          <el-table-column
            min-width="60"
            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="frozenList"
                :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' ? 220 : colum.code == 'status' ? 170 : 140
            "
            :fixed="colum.code === 'name'"
            :sortable="colum.isSort ? 'custom' : false"
            :sort-orders="['descending','ascending']"
          >
            <template slot-scope="{ row }">
              <!-- 基本信息 -->
              <el-row
                v-if="colum.code == 'name'"
                type="flex"
                align="middle"
                class="basic-info-table"
                @click="linkDetail(row.memberId)"
              >
                <img :src="row.thirdImgUrl || defaultImg" class="basic-img" />

                <div>
                  <div>
                    <!-- | formatMember -->
                    <span v-if="row.memberName">{{
                      row.memberName
                    }}</span>
                    <span class="nick-name" v-if="row.nickName"
                      >({{ row.nickName || "--" }})</span
                    >
                  </div>
                  <!-- | formatPhone -->
                  <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>
                  </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 == 'birthday'">
                <div>{{ row.birthdayMD | formatDate("ymd") }}</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
                >
                <span class="dm-status--warning" v-if="row.frozenStatus == 2"
                  >冻结</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-start" width="200" trigger="hover">
                <el-row type="flex">
                  <div class="dm-status--info">{{ row.reason }}</div>
                  <div>连续两周 每周消费次数大于2次；</div>
                </el-row>

                <el-row type="flex">
                  <div class="dm-status--info">{{ row.reason }}</div>
                  <div>
                    单笔订单同一SPU不同SKU购买大于等于2件且满足此类情况的订单大于等于3笔
                  </div>
                </el-row>

                <span slot="reference"
                  >异常原因异常原因异常原因异常原因异常原因异常原因异常原因</span
                >
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="判断异常时间" min-width="150">
            <template slot-scope="{ row }">
              <div>{{ row.bizData | formatDate("ymd") }}</div>
              <div>{{ row.bizData | 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="dialogFieldVisible = 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 == 2"
              >
                <el-button type="text" :limit-code="getCode('memberFrozen')"
                  >解冻</el-button
                >
              </dm-delete>
              <el-button
                type="text"
                @click="freezeItem(row)"
                :limit-code="getCode('memberFrozen')"
                v-if="getCodeAuth('memberFrozen') && row.frozenStatus == 1"
                >冻结</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"
            layout="total, prev, pager, next"
            :total="total"
          >
          </dm-pagination>
        </div>
      </div>
    </div>
    <!-- 未配置 -->
    <div class="no-setting-page" v-else-if="settingType == 2">
      <el-row type="flex" align="middle">
        <div class="tips-box">
          <div class="label">还未完善异常规则配置</div>
          <el-button
            type="primary"
            @click="toSetting"
            v-if="getCodeAuth('abnormalSetting')"
            :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="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>
      </div>
    </div>
    <!-- 已配置，已更新，但是数据异常 -->
    <div class="data-abnormal-page" v-else-if="settingType == 4">
      <div class="icon iconfont-components3 icon-cp-warning-circle-fill"></div>
      <div class="title">
        根据您当前配置的异常会员条件，系统统计出您商户的“异常会员数量”占比超过总会员数量的3%，请确认您所配置的条件是否合理。
      </div>
      <div class="subtitle">
        （基于行业数据，常规的异常会员占比在大约在0.1%~2%之间）
      </div>

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

    <table-colum-dialog 
      :dialogVisible.sync="dialogFieldVisible"
      :memberFields="memberFields"
      @submit="submitMemberFields"/>
  </div>
</template>

<script src="./abnormal-member.js"></script>
<!-- <script>
import action from './abnormal-member.js';
export default { ...action };
</script> -->
<style lang="less">
.unfreeze-pop-class .el-popconfirm__main {
  margin-block-start: 1em;
  margin-block-end: 1em;
}
</style>
<style lang="less" scoped src="./abnormal-member.less"></style>

