<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">{{!!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">
                  <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%">
            <el-table-column
              prop="memberId"
              label="基本信息">
              <template slot-scope="scope">
                <span class="table-member__img inline-block border-box m-r-8"><i class="iconfont icon-huiyuanguanli"></i></span><span>{{scope.row.memberName}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="会员等级">
              <template slot-scope="scope">
                {{scope.row.gradeName}}
              </template>
            </el-table-column>
            <el-table-column
              label="状态">
              <template slot-scope="scope">
                {{scope.row.wxStatus}}
                <i class="iconfont icon-weixin- table-member__wxStatus" ></i>
              </template>
            </el-table-column>
            <el-table-column
              prop="costCount"
              sortable
              label="消费总额">
              <template slot-scope="scope">
                {{scope.row.costCount}}
              </template>
            </el-table-column>
            <el-table-column
              prop="costTimes"
              sortable
              label="消费次数">
            </el-table-column>
            <el-table-column
              prop="lastCost"
              sortable
              label="最近消费">
              <template slot-scope="scope">
                {{scope.row.lastCost}}
              </template>
            </el-table-column>
            <el-table-column
              prop="newAddTime"
              sortable
              label="新增时间">
               <template slot-scope="scope">
                {{scope.row.newAddTime}}
              </template>
            </el-table-column>
            <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>
    </div>
    <vue-gic-footer></vue-gic-footer>
    <!-- 自定义字段列表 -->
    <userDefined :showUserDefined="showUserDefined" @hideUserDefined="hideUserDefined"></userDefined>
  </div>
</template>
<script>
  import navCrumb from '@/components/nav/nav.vue';
  import userDefined from '@/components/userDefined.vue';
  import { getRequest, postRequest, postJson, postForm } from '@/api/api';
  export default {
      name: "memberGroupDetail",
      data() {
        return {
          // 面包屑参数
          navpath: [
            {
              name: '首页',
              path: ''
            },
            {
              name: '会员标签',
              path: ''
            }
          ],

          // 自定义字段列表是否显示
          showUserDefined: false,
          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
          memberGroupDetailData:[
            {
              memberId: "ff80808166bda81f0166bdb32c5b001a",
              memberName: "谭向",
              gradeName: "普卡",
              thirdImgUrl: "http://thirdwx.qlogo.cn/mmopen/3eCPhvaTxDmXCOLwiaeLskRMeNLyq3azIXFyM8ib8QvLXxbicevPuP9ZzX6m1X9YDbZc9XW8mfJZhJrJTCFL6nTCvDTXuoCUD6A/0",
              wxStatus: 1, // 状态
              costCount: 3333, // 消费总额
              costTimes: 0, // 消费次数
              lastCost: 0, // 最近消费
              lastCostTime: '2018-05-01',
              newAddTime: '2018-05-01 17:33:12'
            },
            {
              memberId: "ff80808166bda81f0166bdb32c5b001a",
              memberName: "谭向",
              gradeName: "普卡",
              thirdImgUrl: "http://thirdwx.qlogo.cn/mmopen/3eCPhvaTxDmXCOLwiaeLskRMeNLyq3azIXFyM8ib8QvLXxbicevPuP9ZzX6m1X9YDbZc9XW8mfJZhJrJTCFL6nTCvDTXuoCUD6A/0",
              wxStatus: 1, // 状态
              costCount: 3338, // 消费总额
              costTimes: 99, // 消费次数
              lastCost: 666, // 最近消费
              lastCostTime: '2018-06-01',
              newAddTime: '2018-07-01 17:33:12'
            }
          ]

        }
      },
      methods: {
        /**
         * 弹层显示
         */
        showDefined() {
          const that = this
          that.showUserDefined = true;
        },
        /**
         * 取消选择-弹层隐藏
         */
        hideUserDefined(flag) {
          this.showUserDefined = flag
        }
      },
      mounted() {

      },
      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;
}

.table-member__img {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #F3F6F9;

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

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