<template>
  <div class="manualTagDetail-wrap common-wrap">
    <div class="right-content">
      <div class="right-box">
        <div class="manualTagDetail-wrap__info">
          <dm-sub-title :text="tagItemName" />
        </div>
        <div class="manualTagDetail-wrap__table">
          <div class="operation-line">
            <el-input
              class="m-r-8"
              placeholder="请输入姓名/昵称/手机号/会员卡号"
              prefix-icon="el-icon-search"
              v-model="pageParam.search"
              clearable
              style="margin: 20px 0;width: 270px"
              @clear="clearSearch"
              @keyup.enter.native="enterSearch"
            />
            <template v-if="getCodeAuth">
              <el-button type="primary" class="down-member-list__btn m-l-8" @click="showExport" v-if="total < 1000000" :limit-code="getCode">
                <i class="iconfont icon-xiazai" />
                导出人群
              </el-button>
              <el-tooltip v-else class="item" effect="dark" content="每张报表导出人数限制为100万，大于100万的人群会自动拆分为多张报表进行导出" placement="top">
                <el-button type="primary" class="down-`member-list__btn m-l-8" @click="showExport" :limit-code="getCode">
                  <i class="iconfont icon-xiazai" />
                  导出人群
                </el-button>
              </el-tooltip>
          </template>
          </div>
          <el-table v-loading="loading" @sort-change="sortChange" :data="tagDetailList" style="width: 100%">
            <!-- <div v-for="item in selectedFields" :key="item.code"> -->
              <el-table-column
                :sortable="
                  item.code == 'lastCostTime' ||
                  item.code == 'avgCost'||
                  item.code == 'pointsAll' ||
                  item.code == 'pointsCurrent' ||
                  item.code == 'costFeePaid'
                    ?'custom'
                    : false
                "
                :prop="item.code"
                v-for="item in selectedFields" :key="item.code"
                :fixed="item.code == 'name' ? true : false"
                :label="item.name"
                min-width="200">
                <template slot-scope="scope">
                  <!-- 基本信息 -->
                  <template v-if="item.code == 'name'">
                    <div @click="linkDetail(scope.row.memberId, scope.row.isWeixinMember)" 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, scope.row.isWeixinMember)">
                          <div class="singelinfo flex">
                            <div class="singelinfo-img">
                              <img width="100" height="100" :src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : require('../../assets/group/member_img.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">
                          <div class="flex">
                            <span class="table-member__img inline-block middle border-box m-r-10">
                              <img :src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : require('../../assets/group/member_img.png')" />
                            </span>
                            <div class="inline-block">
                              <span>{{ scope.row.memberName }}<span class="tips" v-if="scope.row.nickName"> ({{ scope.row.nickName }})</span></span>
                              <p>{{ scope.row.phoneNumber }}</p>
                            </div>
                          </div>
                        </span>
                      </el-popover>
                    </div>
                  </template>
                  <!-- 手机号 -->
                  <template v-if="item.code === 'phoneNumber'">
                    <span>{{scope.row.phoneNumber}}</span>
                  </template>
                  <!-- 年龄 -->
                  <template v-if="item.code == 'age'">
                    {{ scope.row.age }}
                  </template>
                  <!-- 会员等级 -->
                  <template v-if="item.code == 'grade'">
                    {{ scope.row.gradeName }}
                  </template>
                  <!-- 会员卡号 -->
                  <template v-if="item.code == 'cardNo'">
                    {{ scope.row.cardNo }}
                  </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 == 'birthday'">
                    {{ scope.row.birthdayMD }}
                  </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 == 'avgNumber'">
                    {{ scope.row.avgNumber }}
                  </template>
                  <!-- 平均折扣 -->
                  <template v-if="item.code == 'discountRate'">
                    {{ scope.row.discountRate }}
                  </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 == 'costTimes'">
                    <div>{{ scope.row.costTimes }}</div>
                  </template>
                  <!-- 客单件 -->
                  <template v-if="item.code == 'avgCost'">
                    {{ scope.row.avgCost }}
                  </template>
                  <!-- 消费总额 -->
                  <template v-if="item.code == 'costAll'">
                    <span>{{ scope.row.costFee }}</span>
                  </template>
                  <!-- 消费总额（实付） -->
                  <template v-if="item.code === 'costFeePaid'">
                    <span>{{scope.row.costFeePaid}}</span>
                  </template>
                  <!-- 最近消费 -->
                  <template v-if="item.code == 'lastCost'">
                    {{ scope.row.lastCost }}
                  </template>
                  <!-- 最近消费（实付） -->
                  <template v-if="item.code === 'lastCostPaid'">
                    <span>{{scope.row.lastCostPaid}}</span>
                  </template>
                  <!-- 最近消费时间 -->
                  <template v-if="item.code == 'lastCostTime'">
                    <div>{{ scope.row.lastCostTime | formatTimeYMD }}</div>
                  </template>
                </template>
              </el-table-column>
              <el-table-column label="添加标签时间"  width="200">
                <template slot-scope="{ $index, row }">
                  <div :index="$index">{{ row.memberTagRelationTime ? dateformat(new Date(row.memberTagRelationTime), 'yyyy-MM-dd hh:mm:ss') : '--'  }}</div>
                </template>
              </el-table-column>
              <el-table-column label-class-name="table-header__handle" fixed="right" min-width="150">
                <template slot="header">
                  <span>操作</span>
                  <i class="el-icon-setting setting" @click="showDefined"></i>
                </template>
                <template slot-scope="scope" v-if="$getButtonLimit($buttonCode.memberTagRecordObserve)">
                  <a
                    rel="nofollow noopener noreferrer"
                    target="_blank"
                    v-if="scope.row.isWeixinMember"
                    :limit-code="$buttonCode.memberTagRecordObserve"
                    :href="'/member/#/wechatmemberDetail?memberId=' + scope.row.memberId + '&channel=wxMember&fromPage=memberGroup'"
                    class="el-button el-button--text"
                    >查看</a
                  >
                  <a
                    rel="nofollow noopener noreferrer"
                    target="_blank"
                    v-else
                    :limit-code="$buttonCode.memberTagRecordObserve"
                    :href="'/member/#/posmemberDetail?memberId=' + scope.row.memberId + '&channel=posMember&fromPage=memberGroup'"
                    class="el-button el-button--text"
                    >查看</a
                  >
                </template>
              </el-table-column>
          </el-table>
        </div>
        <div class="block common-wrap__page text-right" v-if="tagDetailList.length != 0">
          <dm-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageParam.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageParam.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </dm-pagination>
        </div>
      </div>
    </div>
    <!-- <vue-gic-footer></vue-gic-footer> -->
    <!-- 自定义字段列表 -->
    <userDefined :fieldsData="memberFields" :selectedData="selectedUserDefined" :showUserDefined="showUserDefined" @hideUserDefined="hideUserDefined" @confirmUserDefined="confirmUserDefined"> </userDefined>
    <vue-gic-export-excel
      :dialogVisible.sync="downTagDetailListPop.show"
      :excelUrl="downTagDetailListPop.excelUrl"
      :params="downTagDetailListPop.params"
      :dataArr="tagDetailList"
      type="2"
      projectName="member-tag"
    ></vue-gic-export-excel>
    <!--表格字段导出-->
    <dm-table-filed :visible.sync="tableFiledVisible" projectName="member-tag" pageName="memberTag" :max="20" :defaultDisabled="['memberName']" :checkedFields="checkFields" @submit="onSubmiTableFiled" />
  </div>
</template>
<script>
import './manualTagDetail.less';
import { dateformat } from '@/utils/formatTime';
import userDefined from '@/components/userDefined.vue';
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
export default {
  name: 'manualTagDetail',
  data() {
    return {
      canEdit: false,
      loading: true,
      // 自定义字段列表是否显示
      showUserDefined: false,
      memberFields: [], // 所有自定义字段
      selectedUserDefined: [], // 已选的自定义字段
      selectedFields: [], // 已选的自定义字段对象集合
      downTagDetailListPop: {
        canDown: false,
        show: false,
        excelUrl: '/gic-member-tag-web/memberTag/memberTagItemExportExcel',
        params: {
          tagItemId: '',
          requestProject: 'member-tag'
        }
      },
      dateformat,
      tagItemName: '',
      // tagDetailList 表格
      sortableFlag: false, // 表格可排序
      tagDetailList: [],
      // 分页参数
      pageParam: {
        pageNum: 1,
        pageSize: 20,
        tagItemId: '',
        sortColName: '',
        sortType: '',
        search: ''
      },
      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
      },
      baseUrl: '',
      tagSearch: '',
      tableFiledVisible: false,
      checkFields: ['cardNo','gradeName','crateCardDateStringFormat','lastCostTimeFormat','costTimes','avgCost','birthdayMDFormat','pointsCurrent','costAll','mainStoreName','openStoreName']
    };
  },
  computed: {
    getCodeAuth() {
      let code = "memberTagExportMember";
      return this.$getButtonLimit(this.$buttonCode[code]);
    },
    getCode() {
      let code = "memberTagExportMember";
      return this.$buttonCode[code];
    }
  },

  filters: {
    formatTimeYMD(time) {
      if (time && time > 0) {
        let arr = time.toString().split('');
        const y = arr.splice(0, 4).join('');
        const m = arr.splice(0, 2).join('');
        const d = arr.splice(0, 2).join('');
        return y + '-' + m + '-' + d;
      } else {
        return '--';
      }
    },
    formatTimeHMS(time) {
      if (time && time > 0) {
        let arr = time.toString().split('');
        arr.splice(0, 8);
        const h = arr.splice(0, 2).join('');
        const m = arr.splice(0, 2).join('');
        const s = arr.splice(0, 2).join('');
        return h + ':' + m + ':' + s;
      } else {
        return '--';
      }
    }
  },

  methods: {
    canDownMemberList() {
      getRequest('/member-tag-member/isExportEnterprise', {}).then(res => {
        if (res.data.errorCode === 1) {
          this.downTagDetailListPop.canDown = res.data.result === 'true' || res.data.result === true;
        }
      })
    },
    /**
     * 千位分隔符
     * */
    separator(num) {
      let reg = /\d{1,3}(?=(\d{3})+$)/g;
      num = num + '';
      return num.replace(reg, '$&,');
    },
    /**
     * 排序
     */
    sortChange({ column, prop, order }) {
      console.log(prop, order);
      this.pageParam.sortColName = prop;
      this.pageParam.sortType = order == 'descending' ? 'desc' : 'asc';
      this.getTagDetailList();
    },
    /**
     * 弹层显示
     */
    showDefined() {
      const that = this;
      that.showUserDefined = true;
    },

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

    /**
     * 确认选择-弹层隐藏
     */
    confirmUserDefined(data) {
      console.log(data);
      if (data.length < 1) {
        this.$message.error({
          duration: 1000,
          message: '请选择自定义字段'
        });
        return false;
      }
      this.loading = true;
      let fields = data.join(',');
      this.selectedUserDefined = data;
      this.showUserDefined = false;
      // 修改已选字段对象
      this.selectedFields = [];
      this.selectedFields = this.memberFields.filter(item => this.selectedUserDefined.includes(item.code));
      this.saveFieldsList(fields).then(() => {
        this.loading = false;
      });
    },

    /**
     * 列表自定义字段选择保存
     */
    saveFieldsList(fields) {
      const para = {
        pageName: 'memberTagItemSign',
        fields
      };
      return this.axios.post(`${this.baseUrl}/api-member/update-fields?requestProject=memberTag`, para);
    },

    /**
     * 分页---页码变化
     */
    handleSizeChange(val) {
      this.pageParam.pageNum = 1;
      this.pageParam.pageSize = val;
      this.getTagDetailList();
    },

    /**
     * 分页---当前页变化
     */
    handleCurrentChange(val) {
      this.pageParam.pageNum = val;
      this.getTagDetailList();
    },

    /**
     * 获取分组详情
     */
    getTagDetailList(list) {
      const that = this;
      that.loading = true;
      let params = Object.assign({},this.pageParam);
      getRequest('/member-tag-member/memberTageItemFindMemberList', params)
        .then(res => {
          that.total = res.data.result.page.totalCount;
          that.tagDetailList = res.data.result.page.result;
          console.log(that.tagDetailList);
          if (list) {
            list.forEach(function(ele, index) {
              if (ele.code==='name') {
                ele.check = true;
                ele.disabled=true;
                that.selectedUserDefined.push(ele.code);
                that.selectedFields.push(ele);
              }else if (!!ele.check) {
                that.selectedUserDefined.push(ele.code);
                that.selectedFields.push(ele);
              }
            });
          }
        })
        .catch(e => {
          console.log(e, 'error of get group detail');
        }).finally(_=>that.loading = false);
    },
    getTagItemInfo(id) {
      const that = this;
      getRequest('/memberTag/get-member-tag-item', {id})
        .then(res => {
          const resData=res.data;
          if (resData.errorCode===1 && res.data.result) {
            that.tagItemName = res.data.result.tagItemName;
          }
        })
        .catch(e => {
          console.log(e, 'error of tagItem info');
        })
    },
    clearSearch() {
      this.pageParam.search = '';
      this.pageParam.pageNum = 1;
      this.getTagDetailList();
    },
    enterSearch() {
      this.pageParam.pageNum = 1;
      this.getTagDetailList();
    },
    /**
     * 点击信息跳转分组详情
     */
    linkDetail(memberId, isWeixinMember) {
      if (!this.$getButtonLimit(this.$buttonCode.memberTagRecordObserve)) return;
      window.open(
        !!isWeixinMember
          ? `${window.location.origin}/member/#/wechatmemberDetail?memberId=${memberId}&channel=wxMember&fromPage=memberGroup`
          : `${window.location.origin}/member/#/posmemberDetail?memberId=${memberId}&channel=posMember&fromPage=memberGroup`
      );
    },

    /**
     * 获取头像处显示信息
     */
    showSingleInfo(memberId) {
      console.log(memberId);
      const that = this;
      const para = {
        memberId: memberId
      };
      that.singleInfo = '';
      that.axios
        .post(`${that.baseUrl}/api-member/load-member-single-info?requestProject=memberTag`, para)
        .then(res => {
          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 : '主门店未知'
            };
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    /**
     * 获取自定义列表字段
     */
    getFieldsList() {
      const that = this;
      const para = {
        pageName: 'memberTagItemSign'
      };
      that.selectedUserDefined = [];
      that.selectedFields = [];
      that.axios
        .post(`${that.baseUrl}/api-member/find-member-fields?requestProject=memberTag`, para)
        .then(res => {
          console.log(res, '自定义列表字段');
          const resData = res.data;
          if (resData.errorCode == 0) {
            that.memberFields = resData.result; // 保存所有自定义列表字段
            console.log(resData.result);
            that.getTagDetailList(resData.result);
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          console.log(error);
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    onSubmiTableFiled(data) {
      const { downTagDetailListPop: { params: exportParams } } = this;
      this.downTagDetailListPop.show = true;
      exportParams.exportFields = data.toString();
    },
    showExport() {
      if (!this.tagDetailList.length) return this.$message.error('没有要导出的数据');
      this.tableFiledVisible = true;
    }
  },
  beforeMount() {
    var that = this;
    var host = window.location.origin;
    if (host.indexOf('localhost') != '-1') {
      that.baseUrl = 'http://gicdev.demogic.com';
    } else {
      that.baseUrl = host;
    }
  },
  mounted() {
    const { tagItemId }=this.$route.query;
    let local = window.location.origin;
    if (local.indexOf('localhost') != -1) {
      local = 'http://gicdev.demogic.com';
    }
    this.pageParam.tagItemId=tagItemId;
    this.downTagDetailListPop.params.tagItemId = tagItemId;
    this.downTagDetailListPop.excelUrl = local + this.downTagDetailListPop.excelUrl;
    this.getTagItemInfo(tagItemId)
    // 获取自定义字段
    this.getFieldsList();
    document.getElementById('app').style.zIndex = 'auto';
  },
  components: {
    userDefined,
  }
};
</script>
<style lang="scss" scoped>
.manualTagDetail-wrap__head {
  font-size: 14px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 24px;
  .tag-selected-title {
    display: inline-block;
    width: 60px;
    padding-top: 10px;
  }
  .real-time {
    padding: 3px 4px;
    border-radius: 4px;
    color: #fff;
    background: #2F54EB;
  }

  .tag-cell-wrap {
    white-space: pre-wrap;
    word-break: break-word;
  }

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

.manualTagDetail-wrap__info {
  height: 32px;
  padding-bottom: 20px;
  box-sizing: content-box;
  .group-name {
    font-size: 18px;
    line-height: 32px;
    font-weight: bold;
  }
  .group-total {
    font-size: 14px;
    color: #666;
    border-left: 1px solid #aaa;
    span {
      padding: 0 3px;
      font-size: 16px;
      color: #303133;
      font-weight: bold;
    }
  }
}
.operation-line {
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.down-member-list-wrapper {
  padding: 0 20px 30px;
  text-align: center;
  img {
    width: 110px;
    height: auto;
  }
  .title {
    color: #303133;
    font-size: 16px;
    line-height: 22px;
    margin: 18px 0 10px;
  }
  .info {
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 24px;
  }
}

.manualTagDetail-wrap__table {
  position: relative;
  font-size: 14px;
  color: #606266;
  .defined-btn {
    padding: 0;
    width: 65px;
    display: flex;
    align-items: center;
    cursor: pointer;
    i {
      margin-left: 10px;
      font-size: 20px;
      color: #999;
    }
    &:hover i {
      color: #666;
    }
  }

  .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: 40px;
  height: 40px;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
  img {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    border-radius: 4px;
  }

  i {
    font-size: 30px;
    color: #dfe6f0;
  }
}
/deep/ .table-header__handle {
  padding-right: 0 !important;
}
.flex {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #303133;
  .tips {
    color: #909399;
  }
}
</style>
