<template>
  <div class="memberGroupDetail-wrap common-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content">
      <div class="right-box">
        <div class="memberGroupDetail-wrap__head">
          <p class="m-b-20"><span class="group-name">{{groupName}}</span><span class="font-10 real-time inline-block m-l-8">{{!!groupIsRealTime? '实时':''}}</span></p>
          <div>
            <span>筛选标签</span>
            <div class="inline-block tag-cell-wrap">
              <template v-for="(item,index) in selectedTagData">
                <span v-if="index != 0" class="p-lr-18">并且</span>
                <span class="tag-cell inline-block border-box color-606266">
                  <span >{{item.name}}</span>
                  <span >【选择:{{item.value}}】</span>
                </span>
              </template>
            </div>
          </div>
        </div>
        <div class="memberGroupDetail-wrap__info">
          <span>覆盖人数 人</span>
          <span class="fr inline-block middle"><el-button type="primary" icon="el-icon-setting " @click="showDefined"></el-button></span>
        </div>
        <div class="memberGroupDetail-wrap__table">
          <el-table
            :data="memberGroupDetailData"
            style="width: 100%">
            <div v-for="(item,index) in selectedFields" :key="index">
              <el-table-column
                :sortable="item.code == 'name' || item.code == 'grade' || item.code == 'status' || item.code == 'channel' || item.code == 'createCardStoreName' || item.code == 'cardNo' || item.code == 'forzenStatus' ||  item.code == 'mainStoreName' || item.code == 'costCategory'? false: true"
                :prop="item.code"
                :fixed="item.code == 'name'? true: false"
                :label="item.name" >
                <template slot-scope="scope">
                  <!-- 基本信息 -->
                  <template v-if="item.code == 'name'">
                    <div
                      v-if="item.code === 'name'"
                      @click="linkDetail(scope.row.memberId)"

                      style="cursor: pointer;"
                      class="tablecontent-cell">
                      <el-popover
                        placement="top-start"
                        width="400"
                        height="180"
                        trigger="hover"
                        @show="showSingleInfo(scope.row.memberId)">
                        <div class="pointer" @click="linkDetail(scope.row.memberId)">
                          <div class="singelinfo flex">
                            <div class="singelinfo-img"><img width="100" height="100" :src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : require('../../assets/group/default.png')" alt=""></div>
                            <div class="singelinfo-content flex-1 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 m-r-6"
                                      :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 :title="singleInfo.cardNo">{{ singleInfo.cardNo }}</span></p>
                              <p class="lheigth0"><span>{{ singleInfo.mainStoreName }}</span></p>
                              <div class="singelinfo-cost flex">
                                <div class="singelinfo-costitem flex-1"><p>{{ singleInfo.costFee }}</p><p>消费总额</p></div>
                                <div class="singelinfo-costitem flex-1"><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 flex mBottom20 mTop20">
                            <a class="singelinfo-jlitem flex-1">消费记录 ({{ singleInfo.numOfSale }})</a>
                            <a class="singelinfo-jlitem flex-1">营销记录 ({{ singleInfo.numOfmarket }})</a>
                            <a class="singelinfo-jlitem flex-1">卡券记录  ({{ singleInfo.couponCount }})</a>
                          </div>
                        </div>
                        <span slot="reference">
                        <!-- <img class="tablecontent-cellimg mr6" width="60" height="60" :src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : './static/img/default.png'" alt=""> -->
                        <span class="table-member__img inline-block middle border-box m-r-8">
                          <i class="iconfont icon-huiyuanguanli" v-if="!scope.row.thirdImgUrl"></i>
                          <img v-if="scope.row.thirdImgUrl" :src="scope.row.thirdImgUrl"/>
                        </span><span>{{scope.row.memberName}}</span>
                        </span>
                      </el-popover>
                      <!-- <span>{{ scope.row.memberName}}</span> -->
                    </div>

                  </template>
                  <!-- 会员等级 -->
                  <template v-if="item.code == 'grade'">
                    {{scope.row.gradeName}}
                  </template>
                  <!-- 状态 -->
                  <template v-if="item.code == 'status'">
                    <span :title="scope.row.wxStatus == 0 ? '未使用小程序' : scope.row.wxStatus == 1 ? '已使用小程序' : ''" class="channelicon" :class="scope.row.wxStatus == 0 ? 'xcxicongray' : scope.row.wxStatus == 1 ? 'xcxicon' : ''"></span>
                    <span :title="scope.row.status == 0 ? '取消关注公众号' : scope.row.status == 1 ? '已关注公众号' : '未关注公众号'" class="channelicon" :class="scope.row.status == 0 ? 'gzhiconcanclegray' : scope.row.status == 1 ? 'gzhicon' : 'gzhicongray'"></span>
                  </template>
                  <!-- 关联渠道 -->
                  <template v-if="item.code == 'channel'">
                    <span class="channelicon" :class="scope.row.channelTaobao == 0 ? 'taobaoicongray' : scope.row.channelTaobao == 1 ? 'taobaoicon' : ''"></span>
                    <span class="channelicon" :class="scope.row.channelJd == 0 ? 'jdicongray' : scope.row.channelJd == 1 ? 'jdicon' : ''"></span>
                    <span class="channelicon" :class="scope.row.channelWei == 0 ? 'vipicongray' : scope.row.channelWei == 1 ? 'vipicon' : ''"></span>
                  </template>
                  <!-- 开卡时间 -->
                  <template v-if="item.code == 'crateCardDateString'">
                   <div> {{ scope.row.crateCardDateString }} </div>
                  </template>
                  <!-- 新增时间 -->
                  <template v-if="item.code == 'createTime'">
                    <div> {{ scope.row.createTime | formatTimeYMD }} </div>
                    <div> {{ scope.row.createTime | formatTimeHMS }} </div>
                  </template>
                  <!-- 关注时间 -->
                  <template v-if="item.code == 'attentionDate'">
                    <div> {{ scope.row.attentionTime | formatTimeYMD }} </div>
                    <div> {{ scope.row.attentionTime | formatTimeHMS }} </div>
                  </template>
                  <!-- 消费总额 -->
                  <template v-if="item.code == 'costAll'">
                    <span>
                      {{ scope.row.costFee }}
                    </span>
                  </template>
                  <!-- 消费次数 -->
                  <template v-if="item.code == 'costTimes'">
                    <div>{{ scope.row.costTimes }}</div>
                  </template>
                  <!-- 最近消费时间 -->
                  <template v-if="item.code == 'lastCostTime'">
                    <div> {{ scope.row.lastCostTime | formatTimeYMD  }} </div>
                    <div> {{ scope.row.lastCostTime | formatTimeHMS  }} </div>
                  </template>
                  <!-- 客单件 -->
                  <template v-if="item.code == 'avgCost'">
                    {{ scope.row.avgCost }}
                  </template>
                  <!-- 连带率 -->
                  <template v-if="item.code == 'avgNumber'">
                    {{ scope.row.avgNumber }}
                  </template>
                  <!-- 消费品类 -->
                  <template v-if="item.code == 'costCategory'">
                    {{ scope.row.costCategory }}
                  </template>
                  <!-- 平均折扣 -->
                  <template v-if="item.code == 'discountRate'">
                    {{ scope.row.discountRate }}
                  </template>
                  <!-- 取关时间 -->
                  <template v-if="item.code == 'cancelAttentionTime'">
                    <div>{{ scope.row.cancelAttentionTime | formatTimeYMD }}</div>
                    <div>{{ scope.row.cancelAttentionTime | formatTimeHMS }}</div>
                  </template>
                  <!-- 年龄 -->
                  <template v-if="item.code == 'age'">
                    {{ scope.row.age }}
                  </template>
                  <!-- 生日 -->
                  <template v-if="item.code == 'birthday'">
                    {{ scope.row.birthdayMD }}
                  </template>
                  <!-- 储值总额 -->
                  <template v-if="item.code == 'storedValueAll'">
                    {{ scope.row.storedValueAll }}
                  </template>
                  <!-- 储值余额 -->
                  <template v-if="item.code == 'storedValueCurrent'">
                    {{ scope.row.storedValueCurrent }}
                  </template>
                  <!-- 累计积分 -->
                  <template v-if="item.code == 'pointsAll'">
                    {{ scope.row.pointsAll }}
                  </template>
                  <!-- 积分余额 -->
                  <template v-if="item.code == 'pointsCurrent'">
                    {{ scope.row.pointsCurrent }}
                  </template>
                  <!-- 主门店 -->
                  <template v-if="item.code == 'mainStoreName'">
                    {{ scope.row.mainStoreName }}
                  </template>
                  <!-- 开卡门店 -->
                  <template v-if="item.code == 'createCardStoreName'">
                    {{ scope.row.openStoreName }}
                  </template>
                  <!-- 会员卡号 -->
                  <template v-if="item.code == 'cardNo'">
                    {{ scope.row.cardNo }}
                  </template>
                  <!-- 会员状态 -->
                  <template v-if="item.code == 'frozenStatus'">
                    <span class="dm-status--success" v-if="scope.row.frozenStatus == 0">正常</span>
                    <span class="dm-status--warning" v-if="scope.row.frozenStatus == 1">冻结</span>
                  </template>
                  <!-- 最近消费 -->
                  <template v-if="item.code == 'lastCost'">
                    {{ scope.row.lastCost }}
                  </template>
                </template>
              </el-table-column>
            </div>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <a :href="'/member/#/wechatmemberDetail?memberId='+scope.row.memberId +'&channel=wxMember'" class="el-button el-button--text">查看</a>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block common-wrap__page text-right" v-if="memberGroupDetailData.length!=0">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
    <!-- 自定义字段列表 -->
    <userDefined
      :fieldsData="memberFields"
      :selectedData="selectedUserDefined"
      :showUserDefined="showUserDefined"
      @hideUserDefined="hideUserDefined"
      @confirmUserDefined="confirmUserDefined">
    </userDefined>
  </div>
</template>
<script>
  import navCrumb from '@/components/nav/nav.vue';
  import userDefined from '@/components/userDefined.vue';
  import strLength from '@/common/js/strlen';
  import showMsg from '@/common/js/showmsg';
  import errMsg  from '@/common/js/error';
  import { _debounce } from "@/common/js/public";
  import { getRequest, postRequest, postJson, postForm } from '@/api/api';
  export default {
      name: "memberGroupDetail",
      data() {
        return {
          // 面包屑参数
          navpath: [
            {
              name: '首页',
              path: ''
            },
            {
              name: '会员标签',
              path: ''
            }
          ],

          // 自定义字段列表是否显示
          showUserDefined: false,
          memberFields: [], // 所有自定义字段
          selectedUserDefined: [], // 已选的自定义字段
          selectedFields: [], // 已选的自定义字段对象集合

          groupName: '分组名称',
          groupIsRealTime: 1,
          // 分组中已选标签
          selectedTagData: [
            {
              id: 1,
              name: '有车一族',
              value: '233',
              isRealTime: 0,
            },
            {
              id: 2,
              name: '有车一族',
              value: '233',
              isRealTime: 1,
            },
            {
              id: 2,
              name: '有车一族',
              value: '233,有车一族,有车一族,有车一族,有车一族',
              isRealTime: 1,
            },
            {
              id: 2,
              name: '有车一族',
              value: '233,有车一族,有车一族,有车一族,有车一族',
              isRealTime: 1,
            },
            {
              id: 2,
              name: '有车一族',
              value: '233,有车一族,有车一族,有车一族,有车一族',
              isRealTime: 1,
            }
          ],

          // memberGroupDetailData 表格
          sortableFlag: false, // 表格可排序
          memberGroupDetailData:[
            {
              memberId: "ff80808166c4dc700166c4e1b6fa0000",
              memberName: "谭向",
              gradeName: "普卡",
              thirdImgUrl: "http://thirdwx.qlogo.cn/mmopen/3eCPhvaTxDmXCOLwiaeLskRMeNLyq3azIXFyM8ib8QvLXxbicevPuP9ZzX6m1X9YDbZc9XW8mfJZhJrJTCFL6nTCvDTXuoCUD6A/0",
              wxStatus: 1, // 状态
              channelTaobao: 0, // 淘宝
              channelJd: 1, // 京东
              channelWei: 0, // 唯品会
              birthdayMD: '09-19',
              costFee: 3333, // 消费总额
              costTimes: 0, // 消费次数
              lastCost: 0, // 最近消费
              lastCostTime: '2018-05-01',
              crateCardDateString: '2018-06-21 14:44:29', // 开卡时间
              createTime: '2018-05-01 17:33:12',
              attentionTime: '2018-05-01 17:33:12',
              frozenStatus: 1,
            },
            {
              memberId: "ff80808166c4dc700166c4e1b6fa0000",
              memberName: "谭向",
              gradeName: "普卡",
              thirdImgUrl: "",
              birthdayMD: '',
              wxStatus: 1, // 状态
              channelTaobao: 0, // 淘宝
              costFee: 3338, // 消费总额
              costTimes: 99, // 消费次数
              lastCost: 666, // 最近消费
              lastCostTime: '2018-06-01',
              createTime: '2018-07-01 17:33:12',
              frozenStatus: 0,
            }
          ],
          // 分页参数
          currentPage: 1,
          pageSize: 20,
          total: 0,

          // 头像缩略信息
          singleInfo: {
            sex: 0,
            age:0,
            cardNo: 0,
            mainStoreName: 'dd',
            costFee: 0,
            costTimes: 0,
            lastCost: 0,
            numOfSale: 0,
            numOfmarket: 0,
            couponCount: 0,
            status: 0,
            wxStatus: 0,
            phoneStatus: 0,
            authStatus: 0
          },

        }
      },
      computed: {

      },

      filters: {
        formatTimeYMD(data) {
          return data != '--' ? data.split(' ')[0] : '--';
        },
        formatTimeHMS(data) {
          return data != '--' ? data.split(' ')[1] : '--';
        },
      },

      methods: {
        /**
         * 弹层显示
         */
        showDefined() {
          const that = this
          that.showUserDefined = true;
        },

        /**
         * 取消选择-弹层隐藏
         */
        hideUserDefined(flag) {
          this.showUserDefined = flag
        },

        /**
         * 确认选择-弹层隐藏
         */
        confirmUserDefined(data) {
          const that = this;
          console.log(data);
          that.selectedUserDefined = data;
          that.showUserDefined = false;
          // 修改已选字段对象
          that.selectedFields = [];
          that.memberFields.forEach(function(ele,index){
            if (that.selectedUserDefined.indexOf(ele.code) != -1) {
              that.selectedFields.push(ele)
            }
          })

        },

        /**
         * 分页---页码变化
         */
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },

        /**
         * 分页---当前页变化
         */
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        },

        /**
         * 点击信息跳转分组详情
         */
        linkDetail(memberId) {
          // this.$router.push({ path:'/wechatmemberDetail',query: {'memberId': memberId}});
          window.location.href = `${window.location.origin}/member/#/wechatmemberDetail?memberId=ff8080816668174d01667beadcb80275&channel=wxMember`;
        },

        /**
         * 获取头像处显示信息
         */
        showSingleInfo(memberId) {
          const that = this
          const para = {
            memberId: memberId
          }
          that.singleInfo = '';

          postJson('/api-member/load-member-single-info',para)
          .then((res) => {
            // console.log(res,res.data,res.data.errorCode)
            const resData = res.data
            if (resData.errorCode == 0) {
              // showMsg.showmsg('保存成功','success')
              let ret = resData.result.memberSingle;
              that.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 : '主门店未知',
              };
              console.log(that.singleInfo)
              return;
            }
            errMsg.errorMsg(resData)

          })
          .catch(function (error) {
            console.log(error);
            that.$message.error({
              duration: 1000,
              message: error.message
            })
          });

        },

        /**
         * 获取自定义列表字段
         */
        getFieldsList() {
          const that = this
          const para = {
            pageName: "wxMember"
          }
          that.selectedUserDefined = [];
          that.selectedFields = [];
          postJson('/api-member/find-member-fields',para)
          .then((res) => {
            console.log(res,res.data,res.data.errorCode)
            const resData = res.data
            if (resData.errorCode == 0) {
              // showMsg.showmsg('保存成功','success')
              that.memberFields = resData.result
              resData.result.forEach(function(ele,index){
                if (!!ele.check) {
                  that.selectedUserDefined.push(ele.code)
                  that.selectedFields.push(ele)
                }
              })
              console.log(that.selectedFields)

              return;
            }
            errMsg.errorMsg(resData)

          })
          .catch(function (error) {
            console.log(error);
            that.$message.error({
              duration: 1000,
              message: error.message
            })
          });
        },
      },
      beforeMount() {

      },
      mounted() {
        // 获取自定义字段
        this.getFieldsList()
      },
      components: {
        navCrumb,
        userDefined
      }
    }
</script>
<style lang="scss" scoped>

.memberGroupDetail-wrap__head {
  font-size: 14px;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 24px;
  .group-name {
    font-weight: bold;
  }
  .real-time {
    padding: 3px 5px;
    border-radius: 10px;
    color: #fff;
    background: #1890ff;
  }

  .tag-cell-wrap {
    width: calc(100% - 60px);
    white-space: pre-wrap;
    word-break: break-word;
    vertical-align: top;
  }

  .tag-cell {
    padding: 0 10px;
    margin-bottom: 10px;
    height: 36px;
    line-height: 36px;
    background: #EBEEF5;
    border-radius: 2px;
  }
}

.memberGroupDetail-wrap__info {
  height: 87px;
  line-height: 87px;
}

.memberGroupDetail-wrap__table {
  font-size: 14px;
  color: #606266;

  .channelicon {
    width: 20px;
    height: 20px;
    display: inline-block;
  }
  /* 已使用小程序 */
  .xcxicon {
    background: url('../../assets/group/status@xcx.png') no-repeat 50%;
  }
  /* 未使用小程序 */
  .xcxicongray {
    background: url('../../assets/group/status@xcxgray.png') no-repeat 50%;
  }
  /* 已关注公众号 */
  .gzhicon {
    background: url('../../assets/group/status@gzh.png') no-repeat 50%;
  }
  /* 取消关注公众号 */
  .gzhiconcanclegray {
    background: url('../../assets/group/status@gzhcanclegray.png') no-repeat 50%;
  }
  /* 未关注 */
   .gzhicongray {
    background: url('../../assets/group/status@gzhgray.png') no-repeat 50%;
  }
  /* 淘宝 */
  .taobaoicon {
    background: url('../../assets/group/channel@taobao.png') no-repeat 50%;
  }
  .taobaoicongray {
    background: url('../../assets/group/channel@taobaogray.png') no-repeat 50%;
  }
  /* 京东 */
  .jdicon {
    background: url('../../assets/group/channel@jd.png') no-repeat 50%;
  }
  .jdicongray {
    background: url('../../assets/group/channel@jdgray.png') no-repeat 50%;
  }
  /* 唯品会 */
  .vipicon {
    background: url('../../assets/group/channel@vip.png') no-repeat 50%;
  }
  .vipicongray {
    background: url('../../assets/group/channel@vipgray.png') no-repeat 50%;
  }


  [class^=dm-status--]:before {
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-right: 7px;
      vertical-align: middle;
      content: " ";
      background-color: #d9d9d9;
      border-radius: 50%;
  }

  .dm-status--success:before {
    background-color: #52c41a;
  }
}

.table-member__img {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #F3F6F9;
  img {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    border-radius: 4px;
  }

  i {
    font-size: 30px;
    color: #DFE6F0;
  }
}

.table-member__wxStatus {
  font-size: 20px;
  color: #37C583;
}
</style>
