<template>
  <div class="padding-container forzen-container">
    <div class="search">
      <div class="search-item">
        会员共{{total}}人
        <el-input
          v-model="keywords"
          placeholder="请输入会员姓名/卡号/手机号"
          clearable
          @keyup.enter.native="submit"
          style="width: 240px;">
          <i
            slot="prefix"
            class="el-input__icon el-icon-search"
          ></i>
        </el-input>
        <el-select
          v-model="frozenType"
          @change="changeType"
          style="margin-left: 5px"
          placeholder="请选择冻结方式"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </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="/frozenList/frozenMember"
          class="inner-btn-link"
          :limit-code='getCode("memberFrozenMember")'
            v-if='getCodeAuth("memberFrozenMember")'
        >冻结会员</router-link>
        <el-button
          type="primary"
          @click="unFrozen"
          :limit-code='getCode("memberBatchCleanFrozen")'
          v-if='getCodeAuth("memberBatchCleanFrozen")'
        >批量解冻</el-button>
      </div>
    </div>

    <div class="frozen-table">
      <el-table
        v-loading="load"
        ref="multipleTable"
        :data="frozenList"
        tooltip-effect="dark"
        style="width: 100%"
        @sort-change="changeSort"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <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 ? scope.row.gradeName : '--'}}
          </template>
        </el-table-column>

        <el-table-column
          prop="pointsCurrent"
          sortable
          label="积分余额"
        >
          <template slot-scope="scope">
            {{ scope.row.pointsCurrent.toFixed(2) }}
          </template>
        </el-table-column>

        <el-table-column
          prop="frozenCount"
          sortable
          label="冻结次数"
        >
          <!-- <template slot-scope="scope">
        </template> -->
        </el-table-column>

        <el-table-column
          prop="forzenLastReason"
          label="最新冻结原因"
        >
          <template slot-scope="scope">
            <div v-if="!!scope.row.forzenLastReason">{{scope.row.forzenLastReason}}</div>
            <div v-else>暂无原因</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="forzenLastTime"
          sortable
          label="最新冻结时间"
        >
          <template slot-scope="scope">
            <div>{{scope.row.forzenLastTime | formatTimeYMD}}</div>
            <div>{{scope.row.forzenLastTime | formatTimeHMS}}</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)"
              :limit-code='getCode("memberBatchCleanFrozen")'
              v-if='getCodeAuth("memberBatchCleanFrozen")'
            >解冻</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 class="foot-add">
      <vue-gic-footer></vue-gic-footer>
    </div> -->
</template>

<script>
import NavPath from "@/common/navbar/navbar.vue";
import { doFetch } 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: {
    formatTimeYMD(val) {
      return val != "--" ? val.split(" ")[0] : "--";
    },
    formatTimeHMS(val) {
      return val != "--" ? val.split(" ")[1] : "--";
    },
    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 }
      ],
      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 }
      });
    },
    getList(options) {
      const datas = {
        pageSize: options.pSize,
        currentPage: options.cPage,
        phoneNameCard: this.keywords, // 会员名称
        wxOrPos: -1, // 微信或pos会员 -1 表示所有
        fieldNames:
          "gradeName,name,nickName,pointsCurrent,photoUrl,cardNo,crateCardDateString,wxMember,posMember,frozenType,forzenLastTime,frozenCount"
      };
      // 如果异常冻结
      datas.frozenType = this.frozenType ? this.frozenType : -1;

      if (this.sortType) {
        datas.sortType = this.sortType;
      }
      if (this.sortColName) {
        datas.sortColName = this.sortColName;
      }
      doFetch(url.getFrozenList, datas).then(res => {
        this.load = true;
        if (res.data.errorCode === 0) {
          this.load = false;
          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;
          }
        } else {
          this.load = false;
        }
      });
    },
    changeType(val) {
      this.getList({
        pSize: 20,
        cPage: 1
      });
    },
    changeSort(row) {
      this.sortType = row.order == "ascending" ? "asc" : "desc";
      this.sortColName = row.prop;
      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(url.batchUpdateFrozen, datas).then(async res => {
        if (res.data.errorCode === 0) {
          this.$message({
            message: "解冻成功",
            type: "success"
          });
          this.getList({
            pSize: 20,
            cPage: 1
          });
          if (this.ids.length > 1) {
            this.handleToTaskCenter(res.data.result);
          }
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleList = val;
    },
    unFrozenItem(index) {
      this.$confirm("确定解冻?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.frozenMethod({
          frozenType: 0,
          idsIndex: index
        });
      });
    },
    async handleToTaskCenter(id) {
      await this.$confirm(`请去【系统】-【操作任务】-【任务中心】查看处理结果和执行进度`, `任务发起成功`, {
        type: 'success',
        confirmButtonText: '去任务中心',
        cancelButtonText: '取消',
        showClose: false
      })
      window.open(`/gic-web/#/taskDetail/${id}`);
    },
    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 {
  .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: #2F54EB;
        border-color: #2F54EB;
        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: #2F54EB;
      }
    }
  }

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

.frozen-table {
  .pager {
    text-align: right;
    padding: 20px 0;
  }
}
.inner-btn-link {
  display: inline-block;
  padding: 0 16px;
  margin-right: 5px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background-color: #2F54EB;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  &:hover{
    background: #597EF7;
    border-color: #597EF7;
    color: #fff;
  }
}
</style>
