<template>
  <div class="memberGroupDetail-wrap common-wrap">
    <div class="right-content">
      <div class="right-box">
        <div class="memberGroupDetail-wrap__info">
          <dm-sub-title :text="groupName" />
          <div class="title-wrap">
            <p><span class="bold m-r-10">覆盖人数：</span>{{ separator(total) }}</p>
            <div class="tags-flex">
              <div class="memberGroupDetail-wrap__head">
                <span class="bold">筛选标签：</span>
                <selected-tags-list :tagsList="selectedTagData" class="m-t-8" />
              </div>
            </div>
            <p class="fixedPiel" v-if="fixedPileValue && fixedPileValue.value && $route.query.type == 2">
              <span style="margin-right: 60px">
                <span class="bold">分堆比例：</span>
                <span>{{ fixedPileRate('currSize') }}</span>
              </span>
              <span>
                <span class="bold">分堆人数：</span>
                <span>{{ fixedPileRate('memberCount') }}</span>
              </span>
            </p>
          </div>
        </div>

        <div class="memberGroupDetail-wrap__table">
          <div class="table-options">
            <div style="font-size: 0">
              <el-select v-if="$route.query.type == 2" class="m-r-10 w-160" v-model="fixedPileSelect" placeholder="请选择分堆人群" clearable @change="onSearch">
                <el-option v-for="item in fixedPileValue.value" :key="item.groupId" :value="item.groupId" :label="item.groupName">{{ item.groupName }}</el-option>
              </el-select>
              <el-input
                class="m-r-8"
                placeholder="请输入姓名/昵称/手机号/会员卡号"
                prefix-icon="el-icon-search"
                v-model="tagSearch"
                clearable
                style="margin: 20px 0;width: 270px"
                @clear="clearSearch"
                @keyup.enter.native="enterSearch"
              />
            </div>
            <div class="btn-group">
              <template v-if="$getButtonLimit($buttonCode.memberTagExportPeople)">
                <el-button type="primary" class="down-member-list__btn m-l-8" @click="tableFiledVisible = true" v-if="total < 1000000" :limit-code='$buttonCode.memberTagExportPeople'><i class="iconfont icon-xiazai" style="margin-right: 5px" />导出人群</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="tableFiledVisible = true" :limit-code='$buttonCode.memberTagExportPeople'><i class="iconfont icon-xiazai" style="margin-right: 5px" />导出人群</el-button>
                </el-tooltip>
              </template>
            </div>
          </div>
          <el-table v-loading="loading" @sort-change="sortChange" :data="memberGroupDetailData" style="width: 100%">
            <!-- <div v-for="item in selectedFields" :key="item.code"> -->
              <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
                    : 'custom'
                "
                :prop="item.code"
                v-for="item in selectedFields" :key="item.code"
                :fixed="item.code == 'name' ? true : false"
                :min-width="item.code == 'name' ? 260 : 200"
                :label="item.name">
                   <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">
                      <span>
                        <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>
                    </div>
                  </template>
                  <!-- 会员等级 -->
                  <template v-if="item.code == 'grade'">
                    {{ scope.row.gradeName }}
                  </template>
                  <!-- 状态 -->
                  <template v-if="item.code == 'status'">
                    <template v-if="!Array.isArray(scope.row.memberSources) || scope.row.memberSources.filter(el =>  el.highlight == 1 || el.highlight == 2).length == 0">--</template>
                    <template v-else>
                      <!-- 1100：公众号 1600：小程序 1700：企业微信 1303：微盟 1302：天猫会员通 -->
                      <span class="channel-box" v-for="channel in (scope.row.memberSources || []).filter(el => el.highlight == 1 || el.highlight == 2)" :key="channel.parentSourceCode">
                        <template v-if="channel.highlight == 1">
                          <img class="channel-icon" v-if="channel.parentSourceCode == 1100" src="../../../static/img/channel-icon/weixin-1.png" alt="">
                          <img class="channel-icon" v-if="channel.parentSourceCode == 1600" src="../../../static/img/channel-icon/xiaochengxu-1.png" alt="">
                          <img class="channel-icon" v-if="channel.parentSourceCode == 1700" src="../../../static/img/channel-icon/qiyeweixin-1.png" alt="">
                          <img class="channel-icon" v-if="channel.parentSourceCode == 1303" src="../../../static/img/channel-icon/weimen-1.png" alt="">
                          <img class="channel-icon" v-if="channel.parentSourceCode == 1302" src="../../../static/img/channel-icon/tianmao-1.png" alt="">
                          <!-- <img class="channel-icon" v-if="channel.parentSourceCode == 1304" src="../../../static/img/channel-icon/douyin-1.png" alt=""> -->
                          <span v-if="channel.parentSourceCode == 1304">
                            <img class="channel-icon" v-if="channel.activeFlag == 1" src="../../../static/img/channel-icon/douyin-1.png" alt="">
                            <img class="channel-icon" v-if="channel.activeFlag != 1" src="../../../static/img/channel-icon/douyin-0.png" alt="">
                          </span>
                        </template>
                        <template v-if="channel.highlight == 2">
                          <img class="channel-icon" v-if="channel.parentSourceCode == 1100" src="../../../static/img/channel-icon/weixin-2.png" alt="">
                          <img class="channel-icon" v-if="channel.parentSourceCode == 1600" src="../../../static/img/channel-icon/xiaochengxu-2.png" alt="">
                          <img class="channel-icon" v-if="channel.parentSourceCode == 1700" src="../../../static/img/channel-icon/qiyeweixin-2.png" alt="">
                          <img class="channel-icon" v-if="channel.parentSourceCode == 1303" src="../../../static/img/channel-icon/weimen-2.png" alt="">
                          <img class="channel-icon" v-if="channel.parentSourceCode == 1302" src="../../../static/img/channel-icon/tianmao-2.png" alt="">
                          <!-- <img class="channel-icon" v-if="channel.parentSourceCode == 1304" src="../../../static/img/channel-icon/douyin-2.png" alt=""> -->
                          <span v-if="channel.parentSourceCode == 1304">
                            <img class="channel-icon" v-if="channel.activeFlag == 1" src="../../../static/img/channel-icon/douyin-2.png" alt="">
                            <img class="channel-icon" v-if="channel.activeFlag != 1" src="../../../static/img/channel-icon/douyin-0.png" alt="">
                          </span>
                        </template>
                      </span>
                    </template>
                  </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 | formatTimeYMD }}</div>
                    <div>{{ scope.row.crateCardDateString | formatTimeHMS }}</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>
                  </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 == 'openClerkId'">
                    {{ scope.row.openClerkName || '--'}}
                  </template>
                  <!-- 专属导购 -->
                  <template v-if="item.code == 'clerkId'">
                    {{ scope.row.clerkName || '--' }}
                  </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 v-if="item.code === 'highCost'">
                    <span>{{scope.row.highCost}}</span>
                  </template>
                  <!-- 消费总额（实付） -->
                  <template v-if="item.code === 'costFeePaid'">
                    <span>{{scope.row.costFeePaid}}</span>
                  </template>
                  <!-- 最近消费（实付） -->
                  <template v-if="item.code === 'lastCostPaid'">
                    <span>{{scope.row.lastCostPaid}}</span>
                  </template>
                  <!-- 最高单笔（实付） -->
                  <template v-if="item.code === 'highCostPaid'">
                    <span>{{scope.row.highCostPaid}}</span>
                  </template>
                  <!-- 销售次数(全渠道) -->
                  <template v-if="item.code === 'allChannelCostTimes'">
                    <span>{{scope.row.allChannelCostTimes}}</span>
                  </template>
                  <!-- 最高单笔/实付(全渠道) -->
                  <template v-if="item.code === 'allChannelHighCostPaid'">
                    <span>{{scope.row.allChannelHighCostPaid}}</span>
                  </template>
                  <!-- 最近消费时间(全渠道) -->
                  <template v-if="item.code === 'allChannelLastCostTime'">
                    <span>{{scope.row.allChannelLastCostTime | formatTimeYMD}}</span>
                  </template>
                  <!-- 客单价(全渠道) -->
                  <template v-if="item.code === 'allChannelAvgCost'">
                    <span>{{scope.row.allChannelAvgCost}}</span>
                  </template>
                  <!-- 连带率(全渠道) -->
                  <template v-if="item.code === 'allChannelAvgNumber'">
                    <span>{{scope.row.allChannelAvgNumber}}</span>
                  </template>
                  <!-- 平均折扣率(全渠道) -->
                  <template v-if="item.code === 'allChannelDiscountRate'">
                    <span>{{scope.row.allChannelDiscountRate}}</span>
                  </template>
                   <!-- 消费总额/实付(全渠道) -->
                   <template v-if="item.code === 'allChannelCostAllPaid'">
                    <span>{{scope.row.allChannelCostAllPaid}}</span>
                  </template>
                </template>
              </el-table-column>
            <el-table-column label-class-name="table-header__handle" :min-width="160" fixed="right">
              <template slot="header">
                <span>操作</span>
                <i class="el-icon-setting" @click="showDefined"></i>
              </template>
              <template slot-scope="scope" v-if="$getButtonLimit($buttonCode.memberTagToCheck)">
                  <a
                    rel="nofollow noopener noreferrer"
                    target="_blank"
                    v-if="scope.row.isWeixinMember"
                    :limit-code='$buttonCode.memberTagToCheck'
                    :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.memberTagToCheck'
                    :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="memberGroupDetailData.length != 0">
          <dm-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"
          >
          </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="downMemberListPop.show"
      :excelUrl="downMemberListPop.excelUrl"
      :params="downMemberListPop.params"
      :dataArr="memberGroupDetailData"
      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 './memberGroupDetail.less';
import userDefined from '@/components/userDefined.vue';
import selectedTagsList from '@/components/selected-tags-list.vue';
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
export default {
  name: 'memberGroupDetail',
  data() {
    return {
      canEdit: false,
      loading: true,
      // 自定义字段列表是否显示
      showUserDefined: false,
      memberFields: [], // 所有自定义字段
      selectedUserDefined: [], // 已选的自定义字段
      selectedFields: [], // 已选的自定义字段对象集合
      downMemberListPop: {
        canDown: false,
        show: false,
        excelUrl: '/gic-member-tag-web/member-tag-member/memberExportExcel',
        params: {
          memberTagGroupId: '',
          requestProject: 'member-tag',
          exportFields: ''
        }
      },

      groupName: '分组名称',
      groupIsRealTime: 1,
      // 分组中已选标签
      selectedTagData: [],
      // memberGroupDetailData 表格
      sortableFlag: false, // 表格可排序
      memberGroupDetailData: [],
      memberGroupDetailDataBack: [],
      // 分页参数
      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
      },
      baseUrl: '',
      sortFiled: '',
      order: '',
      tagSearch: '',
      tableFiledVisible: false,
      fixedPileValue: {},
      fixedPileSelect: '', // 分堆id
      checkFields: ['cardNo','gradeName','crateCardDateStringFormat','lastCostTimeFormat','costTimes','avgCost','birthdayMDFormat','pointsCurrent','costAll','mainStoreName','openStoreName']
    };
  },
  computed: {
    // 面包屑参数
    navpath() {
      console.log(window.location.origin, 'origin');
      return [
        {
          name: '首页',
          path: `${window.location.origin}/report/#/memberSummary`,
          relocation: true
        },
        {
          name: '会员管理',
          path: ''
        },
        {
          name: '会员分组',
          path: '/memberGroupList'
        },
        {
          name: '会员分组详情',
          path: ''
        }
      ];
    },
  },

  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 == 0) {
          this.downMemberListPop.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.sortFiled = prop;
      this.order = order == 'descending' ? 'desc' : 'asc';
      this.getGroupDetail();
    },
    /**
     * 获取分组的标签明细
     */
    getTagValueDtoList() {
      let that = this;
      let memberTagGroupId = that.$route.query.memberTagGroupId;
      let params = {
        memberTagGroupId
      };
      getRequest('/member-tag-group/findOneDetial.json', params)
        .then(res => {
          that.groupName = res.data.result.tagGroupDto.groupName;
          that.canEdit = res.data.result.tagGroupDto.canEdit;
          that.groupIsRealTime = res.data.result.tagGroupDto.isRealTime;
          that.fixedPileValue = res.data.result.tagGroupDto.fixedPile || {};
          let list = res.data.result.tagValueDtoList;
          list.forEach(li => {
            li.tagParams && (li.tagParams = JSON.parse(li.tagParams));
          });
          this.selectedTagData = list;
        })
        .catch(e => {
          console.log(e, 'error of getTagValueDtoList');
        });
    },

    /**
     * 弹层显示
     */
    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: 'notMember,wxOpenCarMember,posMember',
        fields
      };
      return this.axios.post(`${this.baseUrl}/api-member/update-fields?requestProject=memberTag`, para);
    },

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

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

    /**
     * 获取分组详情
     */
    getGroupDetail(list) {
      const that = this;
      let memberTagGroupId = that.$route.query.memberTagGroupId;
      let params = {
        memberTagGroupId,
        pageNum: that.currentPage,
        pageSize: that.pageSize,
        sortColName: that.sortFiled,
        sortType: that.order,
        search: that.tagSearch,
        fixedPile: that.fixedPileSelect
      };
      getRequest('/member-tag-member/findMemberList.json', params)
        .then(res => {
          that.total = res.data.result.page.totalCount;
          that.memberGroupDetailData = res.data.result.page.result;
          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);
              }
            });
            console.log(that.selectedFields)
            console.log(that.memberGroupDetailData)
          }

          that.loading = false;
        })
        .catch(e => {
          console.log(e, 'error of get group detail');
          that.loading = false;
        });
    },
    clearSearch() {
      this.tagSearch = '';
      this.currentPage = 1;
      this.getGroupDetail();
    },
    enterSearch() {
      this.currentPage = 1;
      this.getGroupDetail();
    },
    onSearch() {
      this.currentPage = 1;
      this.getGroupDetail();
    },
    /**
     * 点击信息跳转分组详情
     */
    linkDetail(memberId, isWeixinMember) {
      if (!this.$getButtonLimit(this.$buttonCode.memberTagToCheck)) 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) {
      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: 'notMember,wxOpenCarMember,posMember'
      };
      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) {
            // showMsg.showmsg('保存成功','success')
            that.memberFields = resData.result; // 保存所有自定义列表字段
            that.getGroupDetail(resData.result);
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          console.log(error);
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    onSubmiTableFiled(data) {
      const { downMemberListPop: { params: exportParams } } = this;
      this.downMemberListPop.show = true;
      exportParams.exportFields = data.toString();
    },
    fixedPileRate(filed) {
      const { fixedPileValue } = this;
      return fixedPileValue.value.reduce((str, cur, index, self) => str + (cur[filed] || 0) + (index < (self.length - 1) ? ' ：' : ''), '');
    },
  },
  beforeMount() {
    var that = this;
    var host = window.location.origin;
    if (host.indexOf('localhost') != '-1') {
      that.baseUrl = 'http://www.gicdev.com';
    } else {
      that.baseUrl = host;
    }
  },
  mounted() {
    let local = window.location.origin;
    let memberTagGroupId = this.$route.query.memberTagGroupId;
    if (local.indexOf('localhost') != -1) {
      local = 'http://www.gicdev.com';
    }

    this.downMemberListPop.params.memberTagGroupId = memberTagGroupId;
    this.downMemberListPop.excelUrl = local + this.downMemberListPop.excelUrl;
    // this.canDownMemberList();
    this.getTagValueDtoList();
    // 获取自定义字段
    this.getFieldsList();
    // this.getGroupDetail();
    document.getElementById('app').style.zIndex = 'auto';
  },
  components: {
    userDefined,
    selectedTagsList
  }
};
</script>
<style lang="scss" scoped>
.channel-box {
  display: inline-block;
  +.channel-box {
    margin-left: 6px;
  }
  .channel-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }
}
.title-wrap {
  background: #f7f8fa;
  border-radius: 2px;
  padding: 16px;
  margin-top: 10px;
  font-size: 14px;
  .bold {
    font-weight: 600;
  }
  p:first-child {
    margin-bottom: 8px;
  }
}
.fixedPiel {
  margin-top: 8px;
}
.memberGroupDetail-wrap__head {
  font-size: 14px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 24px;
  .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;
  }
}


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

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

  i {
    font-size: 30px;
    color: #dfe6f0;
  }
}
.table-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-group {
  font-size: 0;
}
.flex {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #303133;
  .tips {
    color: #909399;
  }
}
</style>
