<template>
  <div class="show-set">
    <div class="show-set-header">
      <el-alert type="info" show-icon :closable="false" class="show-set-tips">
        <div slot="title">
          <div class="tips-text">1. 同一商户下，各子管理员新增的特殊策略的门店类型不能重复；</div>
          <div class="tips-text">2. 子管理员设置的门店类型和默认重复时，按子管理员设置的逻辑生效；</div>
        </div>
      </el-alert>
      <el-button v-if="$getButtonLimit($buttonCode.addShowRules)" :limit-code="$buttonCode.addShowRules" @click="$router.push('/addMemberShowRules')" type="primary">新增特殊策略</el-button>
    </div>
    <el-table :data="tableData">
      <el-table-column label="策略名称" prop="strategyName" min-width="185px" show-overflow-tooltip>
        <template slot-scope="{ row, $index }">
          <span v-if="$index == 0" class="default-store">默认</span>
          {{ row.strategyName }}
        </template>
      </el-table-column>
      <el-table-column label="策略类型" prop="storeType" :formatter="(row, col, val) => (val == '-999' ? '通用策略' : '特殊策略')" min-width="110px"></el-table-column>
      <el-table-column label="门店类型" prop="storeType" :formatter="formatStoreType" min-width="110px"></el-table-column>
      <el-table-column label="设置内容" min-width="310px">
        <template slot-scope="{ row, $index }">
          <div class="text-overflow" :ref="'setContent' + $index" v-if="!row.isOverflow">{{ formatSetting(row) }}</div>
          <el-tooltip placement="top" v-else>
            <div slot="content">{{ formatSetting(row) }}</div>
            <div class="text-overflow">{{ formatSetting(row) }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="创建人" prop="creatorName" min-width="120px" show-overflow-tooltip></el-table-column>
      <el-table-column label="编辑人" prop="modifierName" min-width="120px" show-overflow-tooltip></el-table-column>
      <el-table-column label="最近编辑时间" prop="updateTime" min-width="110px">
        <div style="line-height: normal" slot-scope="{ row }">
          <p>{{ row.updateTime | timeStampToYmd }}</p>
          <p>{{ row.updateTime | timeStampToHms }}</p>
        </div>
      </el-table-column>
      <el-table-column label="操作" min-width="120px" v-if="$getButtonLimit($buttonCode.editShowRules) || $getButtonLimit($buttonCode.delShowRules)">
        <template slot-scope="{ row, $index }">
          <el-button v-if="$getButtonLimit($buttonCode.editShowRules)" :limit-code="$buttonCode.editShowRules" @click="$router.push('/editMemberShowRules?id=' + row.memberManageSettingId)" type="text">编辑</el-button>
          <dm-delete tips="是否删除?" v-if="$index > 0 && $getButtonLimit($buttonCode.delShowRules)" @confirm="onDel(row)">
            <el-button :loading="row.loading" :limit-code="$buttonCode.delShowRules" type="text">删除</el-button>
          </dm-delete>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getRequest } from '@/api/api.js';
import errorMsg from '@/common/js/error.js';
export default {
  name: 'MemberShowSet',
  data() {
    return {
      tableData: []
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    formatStoreType(row, col, val) {
      // 门店类型（0:自营,1:联营,2:代理(加盟),3:代销,4:托管）
      const storeTypes = [
        { label: '自营', value: '0' },
        { label: '联营', value: '1' },
        { label: '代理', value: '2' },
        { label: '代销', value: '3' },
        { label: '托管', value: '4' }
      ];
      let result = [];
      if (typeof val == 'string') {
        const types = val.split(',');
        result = storeTypes.filter(el => types.includes(el.value)).map(el => el.label);
      }
      return result.join('/');
    },
    formatSetting(row) {
      const result = [];
      if (row.mainStoreFlag == 1) {
        result.push('展示服务门店客户');
      }
      if (row.minorStoreFlag == 1) {
        result.push('展示协管门店客户');
      }
      if (row.openCardStoreFlag == 1) {
        result.push('展示开卡门店客户');
      }
      if (row.showFreezeFlag == 1) {
        result.push('展示冻结会员');
      }
      if (row.isSeeAuthMember == 1) {
        result.push('展示已开卡会员');
      }
      if (row.clerkSeeOtherFlag == 1) {
        result.push('允许导购查看其他导购客户');
      }
      return result.join('；');
    },
    getTableData() {
      getRequest('/haoban-app-customer-web/customer/find-member-manage-setting-list', {}).then(res => {
        const { code, result } = res.data || {};
        if (code != 0) {
          errorMsg.errorMsg(res.data);
          return;
        }
        this.tableData = Array.isArray(result) ? result : [];
        this.$nextTick(() => {
          this.tableData.map((el, index) => {
            const target = this.$refs['setContent' + index];
            this.$set(el, 'isOverflow', target.scrollHeight > target.clientHeight);
          });
        });
      });
    },
    onDel(row) {
      this.$set(row, 'loading', true);
      getRequest('/haoban-app-customer-web/customer/del-member-setting', { memberManageSettingId: row.memberManageSettingId })
        .then(res => {
          const { code } = res.data || {};
          if (code != 0) {
            errorMsg.errorMsg(res.data);
            this.$set(row, 'loading', false);
            return;
          }
          this.$message.success('删除成功');
          this.getTableData();
        })
        .catch(() => this.$set(row, 'loading', false));
    }
  }
};
</script>

<style lang="scss" scoped>
.text-overflow {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.show-set {
  padding: 20px;
  .show-set-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .show-set-tips {
      align-items: flex-start;
      width: 485px;
      .tips-text {
        font-size: 12px;
        font-weight: 400;
        color: #303133;
        line-height: 17px;
      }
    }
  }
  .default-store {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 18px;
    background: #dee3fc;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 400;
    color: #2f54eb;
    line-height: normal;
  }
}
</style>
