<template>
  <div class="frozen-list-page">
    <div class="forzen-container">
      <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-select
              v-model="searchData.frozenType"
              style="width: 160px; margin-left: 10px"
              placeholder="全部冻结方式"
              @change="onSearchDataChange"
              clearable
            >
              <el-option label="异常冻结" :value="101"></el-option>
              <el-option label="会员主动冻结" :value="102"></el-option>
              <el-option label="外部操作" :value="103"></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('memberFrozenSearchReasultDownload')"
              :limit-code="getCode('memberFrozenSearchReasultDownload')">
              <i class="iconfont icon-xiazai"></i>
              <span> 搜索结果导出</span>
            </el-button>

            <el-button plain @click="toWhiteList"
              v-if="getCodeAuth('memberFrozenWhiteList')"
              :limit-code="getCode('memberFrozenWhiteList')">白名单</el-button>

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

            <el-button type="primary" @click="toFrozenMember"
              v-if="getCodeAuth('memberFrozenMember')"
              :limit-code="getCode('memberFrozenMember')"
              >冻结会员</el-button>
          </span>
        </div>
      </div>

      <div class="frozen-table">
        <el-table
          v-loading="load"
          ref="multipleTable"
          :data="list"
          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
            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'"
            :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.native="linkDetail(row.memberId)"
              >
                <img :src="row.thirdImgUrl || defaultImg" class="basic-img" />

                <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="150">
            <template slot-scope="{ row }">
              <el-row type="flex" align="middle">
                <span style="margin-right: 3px;">{{ row.forzenType || '--' }}</span>
                <el-popover placement="top" trigger="hover" 
                :ref="`frozen-popover-${ row.memberId }`"
                :disabled="!row.frozenRemark" popper-class="frozen-custom-popper">
                  <span>{{ row.frozenRemark }}</span>
                  <div slot="reference" class="reason-icon-box" v-show="row.frozenRemark">
                    <i class="iconfont icon-yuanyin" hover-class=""></i>
                  </div>
                </el-popover>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="最新冻结时间" min-width="150"
            sortable='custom'
            prop="forzenLastTime"
            :sort-orders="['descending', 'ascending']">
            <template slot-scope="{ row }">
              <div>{{ row.frozenTime | formatDate("ymd") }}</div>
              <div>{{ row.frozenTime | 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 }">
              <!-- 
                :limit-code="getCode('memberIntoCustomDetail')"
                v-if="getCodeAuth('memberIntoCustomDetail')"
               -->
              <el-button
                type="text"
                @click="linkDetail(row.memberId)"
                >查看</el-button
              >

              <dm-delete
                tips="确定解冻？"
                @confirm="unfreezeItem(row)"
                placement="top-start"
                v-if="getCodeAuth('memberCleanFrozen')"
              >
                <el-button type="text" :limit-code="getCode('memberCleanFrozen')"
                  v-if="getCodeAuth('memberCleanFrozen')"
                  >解冻</el-button
                >
              </dm-delete>
            </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>

    <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="./frozen-list.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;
}
.frozen-custom-popper{
  min-width: auto !important;
}
</style>
<style lang="less" src="./frozen-list.less"></style>

