<template>
  <div class="frozen-list">
    <div class="min100">
      <nav-path :navpath="navpath"></nav-path>
      <div class="forzen-container">
        <div class="search">
          <div class="top-header">
            <h2>会员共{{total}}人</h2>
            <p 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>
            </p>
          </div>
          <div class="search-item">
            <div class="left">
              <div class="searchComb">
                <el-select v-model="searchData.select1">
                  <el-option label="卡号" :value="1"></el-option>
                  <el-option label="服务门店" :value="2"></el-option>
                </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"
                  ></i>
                </el-input>
              </div>
              <div class="searchComb">
                <el-select v-model="searchData.select2" style="width:146px">
                  <el-option label="连续消费周次数" :value="1"></el-option>
                  <el-option label="连续消费月次数" :value="2"></el-option>
                  <el-option label="总消费次数" :value="3"></el-option>
                  <el-option label="同商品购买次数" :value="4"></el-option>
                </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"
                  ></i>
                </el-input><span style="margin:0 6px;font-size:16px;">-</span>
                <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"
                  ></i>
                </el-input>
              </div>
              <el-select v-model="searchData.select3" style="width:135px;" placeholder="是否导购会员" @change="onSearchDataChange">
                <el-option label="全部" value=""></el-option>
                <el-option label="是" :value="1"></el-option>
                <el-option label="不是" :value="0"></el-option>
              </el-select>
              <el-select v-model="searchData.select4" style="width:135px;" 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>
            </div>
            <div class="right-btn" style="margin-left:10px;">
              <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%"
            @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>
                            <span
                              :title="singleInfo.wxStatus == 0 ? '未使用小程序' : singleInfo.wxStatus == 1 ? '使用过小程序' : ''"
                              class="channelicon fr mr6"
                              :class="singleInfo.wxStatus == 0 ? 'xcxicongray' : singleInfo.wxStatus == 1 ? 'xcxicon' : ''"
                            ></span>
                          </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="linkDetail(scope.row.memberId)"
                >查看</el-button>
                <el-button
                  type="text"
                  @click="unFrozenItem(scope.$index, scope.row.frozenStatus)"
                  :limit-code='getCode("memberFrozen")'
                  v-if='getCodeAuth("memberFrozen")'
                >{{ scope.row.frozenStatus == 2 ? '解冻' : '冻结' }}</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="currentPage"
              :page-sizes="[20, 50, 75, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </dm-pagination>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="foot-add">
      <vue-gic-footer></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';
import authMethods from '@/mixins/auth';
export default {
  name: "forzenlist",
  components: {
    NavPath
  },
  mixins: [authMethods],
  filters: {
    formatDate(val, format) {
      if(!val) return '--';
      val = new Date(val);
      let y = val.getFullYear();
      let m = (val.getMonth() + 1).toString().padStart(2, '0');
      let d = val.getDate().toString().padStart(2, '0');
      let h = val.getHours().toString().padStart(2, '0');
      let mm = val.getMinutes().toString().padStart(2, '0');
      let 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;
    }
  },
  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"])
  },
  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
    });
  },
  watch: {
    keywords(newval) {
      sessionStorage.setItem("keywords", newval);
    },
    frozenType(newval) {
      sessionStorage.setItem("frozenType", newval);
    }
  },
  methods: {
    linkDetail(memberId) {
      this.$router.push({
        path: "/customerDetail",
        query: { 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;
      let 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) {
            let 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
      });
    },
    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;
    .top-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      h2 {
        margin-right: 20px;
        font-size: 16px;
        font-weight: bold;
        color: #303133;
        line-height: 22px;
      }
      .right {
        margin: 0;
        font-size: 14px;
        color: #606266;
      }
    }
    .search-item {
      display:flex;
      justify-content: space-between;
      .left{
        display:flex;
        justify-content: flex-start;
        align-items:center;
        flex-wrap: wrap;
        gap:10px
      }
      .searchComb {
        display:flex;
        justify-content: flex-start;
        align-items:center;
        .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;
        // }
      }
    }

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

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


  .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%;
}
</style>
