<template>
  <div class="frozen-list">
    <div class="min100">
      <nav-path :navpath="navpath" />
      <div class="forzen-container">
        <div class="search">
          <div class="search-item">
            会员共{{ total }}人

            <div class="searchComb">
              <el-select v-model="searchData.select1">
                <el-option label="卡号" :value="1" />
                <el-option label="主门店" :value="2" />
              </el-select>
              <el-input
                v-model.trim="searchData.input1"
                placeholder="请输入"
                prefix-icon="el-icon-search"
                @keydown.enter.native="searchStrategy"
                style="width:140px"
              >
                <i
                  class="el-input__icon el-icon-error"
                  slot="suffix"
                  v-show="searchData.input1.length > 0"
                  @click="clearSearch"
                />
              </el-input>
            </div>
            <div class="searchComb">
              <el-select v-model="searchData.select2" style="width:146px">
                <el-option label="连续消费周次数" :value="1" />
                <el-option label="连续消费月次数" :value="2" />
                <el-option label="总消费次数" :value="3" />
                <el-option label="同商品购买次数" :value="4" />
              </el-select>
              <el-input v-model.number.trim="searchData.input21" @keydown.enter.native="searchStrategy" style="width:70px">
                <i
                  class="el-input__icon el-icon-error"
                  slot="suffix"
                  v-show="searchData.input21.length > 0"
                  @click="clearSearch"
                />
              </el-input> -
            </div>
            <el-input v-model.number.trim="searchData.input22" @keydown.enter.native="searchStrategy" style="width:70px">
              <i
                class="el-input__icon el-icon-error"
                slot="suffix"
                v-show="searchData.input22.length > 0"
                @click="clearSearch"
              />
            </el-input>
            <el-select
              v-model="searchData.select3"
              style="width:135px;margin-left:10px"
              placeholder="是否导购会员"
              @change="onSearchDataChange"
            >
              <el-option label="全部" value="" />
              <el-option label="是" :value="1" />
              <el-option label="不是" :value="0" />
            </el-select>
            <el-select
              v-model="searchData.select4"
              style="width:135px;margin-left:10px"
              placeholder="冻结状态"
              @change="onSearchDataChange"
            >
              <el-option label="全部" value="" />
              <el-option label="未冻结" :value="1" />
              <el-option label="冻结" :value="2" />
            </el-select>
          </div>
          <div
            class="choose-title"
            v-if="multipleList.length == pageSize"
          >
            <span v-if="selectAll == false">已勾选本页 {{ multipleList.length }} 个会员，</span>
            <span v-else>已勾选 {{ total }} 个会员，</span>
            <span
              @click="selectAllmultipleList"
              class="multiple-all pointer"
              v-if="selectAll == false"
            >勾选全部 {{ total }} 个会员</span>
            <span
              @click="selectAllmultipleList"
              class="multiple-all pointer"
              v-else
            >取消勾选</span>
          </div>
          <div class="right-btn">
            <router-link
              to="/abnormal-member-option"
              class="inner-btn-link"
            >
              冻结会员
            </router-link>
          </div>
        </div>

        <div class="frozen-table">
          <template>
            <el-table
              v-loading="load"
              ref="multipleTable"
              :data="frozenList"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                prop="frozenMember"
                label="基本信息"
                width="160"
              >
                <template slot-scope="scope">
                  <div
                    class="basic-info-table"
                    @click="linkDetail(scope.row.memberId)"
                    style="cursor: pointer;"
                  >
                    <el-popover
                      placement="top-start"
                      width="400"
                      height="180"
                      trigger="hover"
                      @show="showSingleInfo(scope.row.memberId)"
                    >
                      <div class="pointer">
                        <div class="singelinfo">
                          <div class="singelinfo-img">
                            <img
                              width="100"
                              height="100"
                              :src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : './static/img/default.png'"
                              alt=""
                            >
                          </div>
                          <div class="singelinfo-content pLeft10 pRight10">
                            <span class="lheigth0">{{ scope.row.memberName }}
                              <span
                                :title="singleInfo.status == 0 ? '取消关注公众号' : singleInfo.status == 1 ? '已关注公众号' : '未关注公众号'"
                                class="channelicon fr"
                                :class="singleInfo.status == 0 ? 'gzhiconcanclegray' : singleInfo.status == 1 ? 'gzhicon' : 'gzhicongray'"
                              />
                              <span
                                :title="singleInfo.wxStatus == 0 ? '未使用小程序' : singleInfo.wxStatus == 1 ? '使用过小程序' : ''"
                                class="channelicon fr mr6"
                                :class="singleInfo.wxStatus == 0 ? 'xcxicongray' : singleInfo.wxStatus == 1 ? 'xcxicon' : ''"
                              />
                            </span>
                            <p class="lheigth0">
                              <span class="evl-right">{{ singleInfo.sex }}</span><span class="evl-right">{{ singleInfo.age }}</span><span>{{ singleInfo.cardNo | formatCardName }}</span>
                            </p>
                            <p class="lheigth0">
                              <span class="fix-block">{{ singleInfo.mainStoreName }}</span>
                            </p>
                            <div class="singelinfo-cost">
                              <div class="singelinfo-costitem">
                                <p>{{ singleInfo.costFee }}</p>
                                <p>消费总额</p>
                              </div>
                              <div class="singelinfo-costitem">
                                <p>{{ singleInfo.costTimes }}</p>
                                <p>消费次数</p>
                              </div>
                              <div class="singelinfo-costitem">
                                <p>{{ singleInfo.lastCost }}</p>
                                <p>最近消费</p>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="singelinfo-jl mBottom20 mTop20">
                          <a class="singelinfo-jlitem">消费记录 ({{ singleInfo.numOfSale }})</a>
                          <a class="singelinfo-jlitem">营销记录 ({{ singleInfo.numOfmarket }})</a>
                          <a class="singelinfo-jlitem">卡券记录 ({{ singleInfo.couponCount }})</a>
                        </div>
                      </div>
                      <span slot="reference" class="member-span"><img
                        class="tablecontent-cellimg mr6"
                        width="60"
                        height="60"
                        :src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : './static/img/default.png'"
                        alt=""
                      ></span>
                    </el-popover>
                    <!-- <img :src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl :  'https:gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=d36dbe5170cf3bc7fc0dc5beb069d1c4/10dfa9ec8a136327d6b4806f918fa0ec08fac715.jpg'" class="basic-img"> -->
                    <span class="fix-block">{{ scope.row.memberName | formatMember }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="gradeName"
                label="会员等级"
              >
                <template slot-scope="scope">
                  {{ scope.row.gradeName || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="gradeName"
                label="会员卡号"
              >
                <template slot-scope="scope">
                  {{ scope.row.cardNum || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="gradeName"
                label="主门店名称"
              >
                <template slot-scope="scope">
                  {{ scope.row.mainStoreName || '--' }}
                </template>
              </el-table-column>

              <el-table-column
                prop="pointsCurrent"
                label="连续消费周次数"
              >
                <template slot-scope="{row}">
                  {{ row.consumptionWeekCnt || 0 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="pointsCurrent"
                label="连续消费月次数"
              >
                <template slot-scope="{row}">
                  {{ row.consumptionMeekCnt || 0 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="pointsCurrent"
                label="总消费次数"
              >
                <template slot-scope="{row}">
                  {{ row.consumptionTdCnt || 0 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="pointsCurrent"
                label="同一spu不同尺码的sku不少于3种的消费次数"
              >
                <template slot-scope="{row}">
                  {{ row.skuAbnormalCnt || 0 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="pointsCurrent"
                label="是否导购会员"
              >
                <template slot-scope="{row}">
                  {{ row.isClerk == 1 ? '是' : '否' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="forzenLastTime"
                label="业务更新时间"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.bizData | formatDate('ymd') }}</div>
                  <div>{{ scope.row.bizData | formatDate('hms') }}</div>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="unFrozenItem(scope.$index, scope.row.frozenStatus)"
                  >
                    {{ scope.row.frozenStatus == 2 ? '解冻' : '冻结' }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <div
            class="pager"
            v-if="total > 0"
          >
            <dm-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 75, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="foot-add">
      <vue-gic-footer />
    </div>
  </div>
</template>

<script>
import NavPath from '@/common/navbar/navbar.vue';
import { doFetch, doFetchqs } from '@/components/axios/api';
import { formatLongTime } from '@/utils/utils';
import url from '@/components/axios/url';
import { mapState } from 'vuex';
import {
  checkFalse,
  checkStatus,
} from '../../../static/js/checkStatus';
export default {
  name: 'Forzenlist',
  components: {
    NavPath,
  },
  data () {
    return {
      navpath: [{ name: '首页', path: '' }, { name: '异常会员列表', path: '' }],
      typeOptions: [
        { label: '全部', value: -1 },
        { label: '异常解冻', value: 101 },
        { label: '会员主动冻结', value: 102 },
        { label: 'erp操作', value: 103 },
      ],
      searchData: {
        select1: 1,
        input1: '',
        select2: 1,
        input21: '',
        input22: '',
        select3: undefined,
        select4: undefined,
      },
      selectAll: false, // 是否全选
      frozenType: '',
      load: false,
      keywords: '',
      currentPage: 1,
      total: 0,
      pageSize: 20,
      frozenList: [],
      multipleList: [],
      // 会员基本信息
      singleInfo: {
        sex: 0,
        age: 0,
        cardNo: 0,
        mainStoreName: '',
        costFee: 0,
        costTimes: 0,
        lastCost: 0,
        numOfSale: 0,
        numOfmarket: 0,
        couponCount: 0,
        status: 0,
        wxStatus: 0,
        phoneStatus: 0,
        authStatus: 0,
      },
    };
  },
  computed: {
    ...mapState(['storeImageUrl']),
  },
  watch: {
    keywords (newval) {
      sessionStorage.setItem('keywords', newval);
    },
    frozenType (newval) {
      sessionStorage.setItem('frozenType', newval);
    },
  },
  created () {
    if (!this.storeImageUrl) {
      this.$store.dispatch('getStorePicture');
    }
    this.ids = [];
    this.keywords = sessionStorage.getItem('keywords')
      ? sessionStorage.getItem('keywords')
      : '';
    this.frozenType = sessionStorage.getItem('frozenType')
      ? sessionStorage.getItem('frozenType')
      : '';

    this.frozenType = this.frozenType ? parseInt(this.frozenType, 10) : '';
    this.currentPage = sessionStorage.getItem('frozenlistcurrentPage')
      ? Number(sessionStorage.getItem('frozenlistcurrentPage'))
      : 1;
    this.$store.commit('mutations-slide', true);
  },
  beforeMount () {
    this.getList({
      pSize: 20,
      cPage: 1,
    });
  },
  filters: {
    formatDate (val, format) {
      if (!val) return '--';
      val = new Date(val);
      const y = val.getFullYear();
      const m = (val.getMonth() + 1).toString().padStart(2, '0');
      const d = val.getDate().toString().padStart(2, '0');
      const h = val.getHours().toString().padStart(2, '0');
      const mm = val.getMinutes().toString().padStart(2, '0');
      const s = val.getSeconds().toString().padStart(2, '0');
      if (format == 'ymd') {
        return y + '-' + m + '-' + d;
      } else if (format == 'hms') {
        return h + ':' + m + ':' + s;
      }
      return `${y}-${m}-${d}\xa0\xa0\xa0${h}:${mm}:${s}`;
    },
    formatCardName (val) {
      if (val) {
        if (val.length > 10) {
          val = val.substr(0, 10) + '...';
        }
      }
      return val;
    },
    formatMember (val) {
      if (val) {
        if (val.length > 3) {
          val = val.substr(0, 3) + '...';
        }
      }
      return val;
    },
  },
  methods: {
    linkDetail (memberId) {
      this.$router.push({
        path: '/wechatmemberDetail',
        query: { memberId: memberId },
      });
    },
    // 搜索框回车
    searchStrategy () {
      this.getList({
        pSize: 20,
        cPage: 1,
      });
    },
    // 清除搜索框内容
    clearSearch () {
      this.searchData.input1 = '';
      this.getList({
        pSize: 20,
        cPage: 1,
      });
    },
    // 搜索选项改变时
    onSearchDataChange () {
      this.getList({
        pSize: 20,
        cPage: 1,
      });
    },
    getList (options) {
      this.load = true;
      const { select1, input1, select2, input21, input22, select3, select4 } = this.searchData;
      const params = {
        currentPage: options.cPage,
        // pageSize: options.pSize,
        pageSize: this.pageSize,
        keywordType: select1,
        keyword: input1 || undefined,
        consumptionType: select2,
        consumptionValStart: input21 || undefined,
        consumptionValEnd: input22 || undefined,
        isClerk: select3,
        frozenStatus: select4 || undefined,
      };
      doFetchqs('/api-member/list-exception-member', params).then(res => {
        if (res.data.errorCode === 0) {
          if (res.data.result.result) {
            this.frozenList =
              res.data.result.result &&
              res.data.result.result.map(ele => ({
                ...ele,
                forzenLastTime:
                  ele.forzenLastTime != -1
                    ? formatLongTime(ele.forzenLastTime, 1)
                    : '--',
                thirdImgUrl: ele.thirdImgUrl
                  ? ele.thirdImgUrl
                  : this.storeImageUrl,
              }));
            this.total = res.data.result.totalCount;
          } else {
            this.frozenList = [];
            this.total = 0;
          }
          this.load = false;
        } else {
          this.load = false;
        }
      }).catch(err => {
        this.load = false;
      });
    },
    changeType (val) {
      this.getList({
        pSize: 20,
        cPage: 1,
      });
    },
    frozenMember () {
      this.frozenMethod({
        frozenType: 1,
      });
    },
    // 解冻
    unFrozen () {
      // 判断
      if (this.multipleList.length === 0) {
        this.$message({
          message: '暂无数据，无法解冻',
          type: 'warning',
        });
        return;
      }
      if (!this.multipleList.length) {
        this.$message({
          message: '请先勾选选项',
          type: 'warning',
        });
        return;
      }
      this.$confirm('确定解冻?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.frozenMethod({
          frozenType: 0,
        });
      });
    },
    showSingleInfo (memberId) {
      this.singleInfo = '';
      doFetch(url.singleInfo, {
        memberId: memberId,
      })
        .then(res => {
          if (res.data.errorCode === 0) {
            const ret = res.data.result.memberSingle;
            this.singleInfo = {
              ...ret,
              sex: ret.sex == 0 ? '性别未知' : ret.sex == 1 ? '男' : '女',
              age: ret.age != 0 ? ret.age : '年龄未知',
              cardNo: ret.cardNo ? ret.cardNo : '无会员卡',
              mainStoreName: ret.mainStoreName
                ? ret.mainStoreName
                : '主门店未知',
            };
          } else {
            checkFalse(res.data.message);
          }
        })
        .catch(err => {
          checkStatus(err);
        });
    },
    // 冻结解冻
    frozenMethod (options) {
      this.ids = [];
      if (options.idsIndex >= 0) {
        this.ids.push(this.frozenList[options.idsIndex].memberId);
      } else {
        this.multipleList.forEach(ele => {
          this.ids.push(ele.memberId);
        });
      }
      const datas = {
        memberIds: this.ids.join(','), // 会员id
        remark: '', // 备注暂留
        // 所有会员是2 当前是1 其他是0
        isCurrent: this.selectAll ? 2 : this.multipleList.length == this.pageSize ? 1 : 0,
        status: options.frozenType, // 1 冻结 0 解冻
        phoneNameCard: this.keywords, // 会员名称 手机号
      };
      doFetch('/api-member/members-batch-update-frozen', datas).then(res => {
        if (res.data.errorCode === 0) {
          this.$message({
            message: options.frozenType == 0 ? '解冻成功' : '冻结成功',
            type: 'success',
          });
          this.$nextTick(_ => {
            this.getList({
              pSize: 20,
              cPage: 1,
            });
          });
        }
      });
    },
    handleSelectionChange (val) {
      this.multipleList = val;
    },
    unFrozenItem (index, status) {
      if (status == 2) {
        this.$confirm('确定解冻?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.frozenMethod({
            frozenType: 0,
            idsIndex: index,
          });
        });
      } else if (status == 1) {
        this.$confirm('确定冻结?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.frozenMethod({
            frozenType: 1,
            idsIndex: index,
          });
        });
      }
    },
    submit () {
      this.getList({
        pSize: 20,
        cPage: 1,
      });
    },
    // 查看跳转
    JumpLink (index) {
      const mdlObj = this.frozenList[index];
      // 会员类型 1 微信会员 2 pos会员
      if (mdlObj.channel == 1) {
        this.$router.push({
          path: `/wechatmemberDetail?memberId=${
            mdlObj.memberId
          }&channel=wxMember`,
        });
      } else if (mdlObj.channel == 2) {
        this.$router.push({
          path: `/posmemberDetail?memberId=${mdlObj.memberId}&channel=posMember`,
        });
      }
    },
    handleSizeChange (val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getList({
        pSize: val,
        cPage: 1,
      });
    },
    handleCurrentChange (val) {
      this.currentPage = val;
      sessionStorage.setItem('frozenlistcurrentPage', Number(val));
      this.getList({
        pSize: this.pageSize,
        cPage: val,
      });
    },
    selectAllmultipleList () {
      this.selectAll = !this.selectAll;
      if (this.selectAll) {
        this.frozenList.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.forzen-container {
  margin: 25px 24px 20px;
  padding: 24px 25px 30px 23px;
  background-color: #fff;

  .search {
    margin-bottom: 24px;

    .search-item {
      display: inline-block;
    }

    .right-btn {
      float: right;

      .frozen-mem {
        display: inline-block;
        vertical-align: middle;
        padding: 0 16px;
        margin-right: 5px;
        font-size: 14px;
        color: #fff;
        background-color: #1890ff;
        border-color: #1890ff;
        height: 34px;
        line-height: 34px;
        border-radius: 4px;
      }
    }

    .choose-title {
      display: inline-block;
      margin-left: 60px;
      font-size: 14px;

      .choose-all {
        display: inline-block;
        cursor: pointer;
        color: #409EFF;
      }
    }
  }

  .searchComb {
    display: inline-block;
    margin-left: 10px;
    .el-select {
      &:first-child {
        margin-right: -6px;
        width: 90px;
        /deep/ .el-input__inner {
          border-radius: 4px 0 0 4px;
          background-color: #F1F3F7;
        }
      }
    }
    .el-input /deep/ .el-input__inner {
      border-radius: 0 4px 4px 0;
    }
    // .el-input:last-child /deep/ .el-input__inner {
    //   border-radius: 4px;
    // }
  }

  .basic-info-table {
    .basic-img {
      display: inline-block;
      vertical-align: middle;
      height: 40px;
      width: 40px;
    }
  }
}

.frozen-table {
  .pager {
    text-align: right;
    padding: 20px 0;
  }
}

.frozen-list {
  height: 100%;

  .inner-btn-link {
    display: inline-block;
    padding: 0 16px;
    margin-right: 5px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background-color: #1890ff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
  }
}
</style>
