<template>
  <div>
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="基本信息" name="detail">
        <div class="section">
          <div class="title">基础信息</div>
          <ul class="list">
            <li class="item">
              <div>{{ mar_type_name }}名称：</div>
              <div class="value">
                {{merData.mer_name}}
              </div>
            </li>
            <li class="item" v-if="defaultMerchantType == 0">
              <div>{{ mar_type_name }}类型：</div>
              <div class="value">{{merData.is_trader == 1 ? "自营" : "非自营"}}</div>
            </li>
            <li class="item" v-if="defaultMerchantType == 0">
              <div>{{ mar_type_name }}分类：</div>
              <div v-if="merData.merchantCategory" class="value">
                {{merData.merchantCategory.category_name}}
                <span class="info info-red">(该分类下的{{ mar_type_name }}手续费是{{merData.merchantCategory.commission_rate*100}}%)</span>
              </div>
            </li>
            <li class="item">
              <div>推荐{{ mar_type_name }}：</div>
              <div class="value">{{merData.is_best == 1 ? "是" : "否"}}</div>
            </li>
            <li v-if="merData.merchantType  && defaultMerchantType == 0" class="item">
              <div>店铺类型：</div>
              <div class="value">{{merData.merchantType.type_name}}</div>
            </li>
            <li class="item">
              <div>{{ mar_type_name }}状态：</div>
              <div class="value">{{merData.status == 1 ? "开启" : "关闭"}}</div>
            </li>
            <li class="item">
              <div>排序：</div>
              <div class="value">{{merData.sort}}</div>
            </li>
            <li class="item">
              <div>更新时间：</div>
              <div class="value">{{merData.update_time}}</div>
            </li>
            <li class="item">
              <div>备注：</div>
              <div class="value">{{merData.mark}}</div>
            </li>
            <li class="item" v-if="defaultMerchantType == 0">
              <div>人均消费额：</div>
              <div class="value">{{merData.avg_consumption}}</div>
            </li>
            <li class="item">
              <div>{{ mar_type_name }}标签：</div>
              <div class="value">{{merData.mer_label}}</div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="经营信息" name="operate">
        <div class="section">
          <div class="title">费用信息</div>
          <ul class="list">
            <li class="item item100">
              <div>{{ mar_type_name }}手续费单独设置：</div>
              <div class="value">
                {{merData.commission_switch ? "开启" : "关闭"}}
              </div>
            </li>
            <li v-if="merData.commission_switch" class="item item100">
              <div>{{ mar_type_name }}手续费：</div>
              <div class="value">
                {{ merData.commission_rate}}%
                <span class="info info-red">(注：此处如未设置手续费，系统会自动读取{{ mar_type_name }}分类下对应手续费；此处已设置，则优先以此处设置为准)</span>
              </div>
            </li>
            <li class="item">
              <div>店铺保证金：</div>
              <div class="value">
                {{merData.is_margin == 0 ? '无' : merData.ot_margin}}
              </div>
            </li>
            <li v-if="merData.is_margin != 0" class="item">
              <div>保证金支付状态：</div>
              <div class="value">{{merData.is_margin == 1 ? '待缴' : merData.is_margin == 0 ? '无' : '已缴' }}
                <span v-if="(merData.is_margin==10 && merData.margin-merData.ot_margin<0)" class="info-red">(需补缴)</span>
              </div>
            </li>
            <li v-if="merData.is_margin != 0" class="item">
              <div>保证金余额：</div>
              <div class="value">{{merData.margin}}</div>
            </li>
          </ul>
        </div>
        <div class="section">
          <div class="title">审核信息</div>
          <ul class="list">
            <li class="item">
              <div>商品审核：</div>
              <div class="value">{{merData.is_audit == 1 ? '需审核' : '免审核'}}</div>
            </li>
            <li class="item">
              <div>直播间审核：</div>
              <div class="value">{{merData.is_bro_room == 1 ? '需审核' : '免审核'}}</div>
            </li>
            <li class="item">
              <div>直播间商品审核：</div>
              <div class="value">{{merData.is_bro_goods == 1 ? '需审核' : '免审核'}}</div>
            </li>
          </ul>
        </div>
        <div class="section">
          <div class="title">其他信息</div>
          <ul class="list">
            <li class="item item100">
              <div>搜索{{ mar_type_name }}关键字：</div>
              <div class="value">{{merData.mer_keyword}}</div>
            </li>
            <li class="item item100">
              <div>剩余商品采集数：</div>
              <div class="value">{{merData.copy_product_num}}次</div>
            </li>
            <li class="item item100">
              <div>{{ mar_type_name }}资质：</div>
              <div class="value">
                <el-image
                  v-for="(item, index) in merData.mer_certificate"
                  :key="index"
                  :src="item"
                  @click="lookImg(item)"
                  style="width: 36px;height: 36px;margin-right: 5px;"
                  />
              </div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="账号信息" name="account">
        <div class="section">
          <div class="title">登录账号</div>
          <ul class="list">
            <li class="item">
              <div>{{ mar_type_name }}账号：</div>
              <div class="value">
                {{merData.mer_account}}
              </div>
            </li>
            <li class="item">
              <div>登录密码：</div>
              <div class="value">{{merData.mer_password}}</div>

            </li>
            <li class="item">
              <div>联系人：</div>
              <div class="value">{{merData.real_name}}</div>
            </li>
            <li class="item">
              <div>联系电话：</div>
              <div class="value">{{merData.mer_phone}}</div>
            </li>
            <!-- <li class="item">
              <div>绑定手机号：</div>
              <div class="value">{{merData.real_name}}</div>
            </li>
            <li class="item">
              <div>绑定微信用户昵称/ID：</div>
              <div class="value">{{merData.real_name}}</div>
            </li>  -->
          </ul>
        </div>
        <div v-if="merData.sub_mchid" class="section">
          <div class="title">财务帐号</div>
          <ul class="list">
            <li class="item">
              <div>微信分账{{ mar_type_name }}号：</div>
              <div class="value">{{merData.sub_mchid}}</div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="其他设置" name="integral">
        <div class="section">
          <div class="title">基础信息</div>
          <ul class="list">
            <li class="item">
              <div>购买商品消费赠送酒卡额度倍率：</div>
              <div class="value" v-if="merData.mer_exchange_quota_multiple > 0">{{merData.mer_exchange_quota_multiple}}倍</div>
              <div class="value" v-else>未设置</div>
            </li>
            <li class="item">
              <div>商户类别：</div>
              <!--商户类别：0=普通商户，1=酒道馆，2=供应商-->
              <div class="value" v-if="merData.merchant_type == 0">普通商户</div>
              <div class="value" v-else-if="merData.merchant_type == 1">酒道馆</div>
              <div class="value" v-else-if="merData.merchant_type == 2">供应商</div>
              <div class="value" v-else-if="merData.merchant_type == 3">烟酒店</div>
              <div class="value" v-else-if="merData.merchant_type == 4">超市</div>
              <div class="value" v-else-if="merData.merchant_type == 4">省公司门店</div>
            </li>
            <li class="item" v-if="defaultMerchantType == 1">
              <div>关联商户：</div>
              <div class="value">{{ merData.merShop ? (merData.merShop.mer_name || '') : ''}}</div>
            </li>
            <li class="item" v-if="['0','1'].includes(String(defaultMerchantType))">
              <!--商户子类型：0=默认，1=酒道馆/大型餐厅，2=小酒馆/中小型餐厅-->
              <div>商户类型：</div>
              <div class="value" v-if="merData.merchant_type == 0 && merData.merchant_sub_type == 1">大型餐厅</div>
              <div class="value" v-else-if="merData.merchant_type == 0 && merData.merchant_sub_type == 2">中小型餐厅</div>
              <div class="value" v-if="merData.merchant_type == 1 && merData.merchant_sub_type == 1">酒道馆</div>
              <div class="value" v-else-if="merData.merchant_type == 1 && merData.merchant_sub_type == 2">小酒馆</div>
            </li>
            <li class="item" v-if="defaultMerchantType != 2">
              <div>资源股东：</div>
              <div class="value">
                <div class="top-user">
                  <div class="user-content" v-if="merData.shareholders">
                    <div class="user-avatar">
                      <img :src="merData.shareholders.avatar || moren" />
                    </div>
                    <div class="user-info">
                      <div class="nickname">{{ merData.shareholders.nickname }}</div>
                      <div class="user-id">{{ merData.shareholders.uid }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="item" v-if="defaultMerchantType != 2">
              <div>资源股东收益比例：</div>
              <div class="value">{{ merData.resource_shareholders_rate || 0}}%</div>
            </li>

            <!--<li class="item">
              <div>商户积分兑换平台积分比例：</div>
              <div class="value">
                1 : {{merData.mer_integral_platform_rate}}
              </div>
            </li>
            <li class="item">
              <div>平台积分转换商户积分比例：</div>
              <div class="value">{{merData.mer_integral_merchant_rate}} : 1</div>
            </li>-->
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>
     <div class="images" v-show="false" v-viewer="{ movable: false }">
      <img v-for="(src,index) in merData.mer_certificate" :src="src" :key="index" />
    </div>
  </div>
</template>
<script>

import {merchantTypeText} from "@/filters";

export default {
  props: {
    merData: {
      type: Object,
      default: {},
    },
    defaultMerchantType: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      moren: require("@/assets/images/f.png"),
      mar_type_name: '',
      loading: true,
      merId: '',
      direction: 'rtl',
      activeName: 'detail',
    };
  },
  filters: {},
  watch: {
    merData: {
      handler() {
        this.merData.merchant_type = this.defaultMerchantType || 0;
        this.mar_type_name = merchantTypeText(this.merData.merchant_type);
      },
      deep: true
    }
  },
  methods: {
    lookImg(item) {
      this.imageUrl = item;
      const viewer = this.$el.querySelector('.images').$viewer;
      viewer.show();
      this.$nextTick(() => {
        let i = this.merData.mer_certificate.findIndex((e) => e === item);
        viewer.update().view(i);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-tabs--border-card {
  box-shadow: none;
  border-bottom: none;
}
.section {
  padding: 20px 0 5px;
  border-bottom: 1px dashed #eeeeee;
  .title {
    padding-left: 10px;
    border-left: 3px solid #437FFD;
    font-size: 15px;
    line-height: 15px;
    color: #303133;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin-top: 5px;
  }
  .item {
    flex: 0 0 calc(100% / 2);
    display: flex;
    margin-top: 16px;
    font-size: 13px;
    color: #606266;
    padding-right: 20px;
    padding-left: 20px;
    &.item100{
     flex: 0 0 calc(100% / 1);
     padding-right: 20px;
     padding-left: 20px;
    }
    &:nth-child(2n + 1) {
      padding-right: 20px;
      padding-left: 20px;
    }
    // &:nth-child(2n) {
    //  padding-right: 20px;
    // }
  }
  .value {
    flex: 1;
    image {
      display: inline-block;
      width: 40px;
      height: 40px;
      margin: 0 12px 12px 0;
      vertical-align: middle;
    }
  }
}
.info-red{
  color: red;
  font-size: 12px;
}
.tab {
  display: flex;
  align-items: center;
  .el-image {
    width: 36px;
    height: 36px;
    margin-right: 10px;
  }
}
/deep/.el-drawer__body {
  overflow: auto;
}
.gary {
  color: #aaa;
}
.top-user{
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .user-content{
    --user-content-height-: 80px;

    height: var(--user-content-height-);
    width: 100%;
    margin-right: 30px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;

    .user-avatar{
      height: var(--user-content-height-);
      width: var(--user-content-height-);
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      img{
        height: 80%!important;
        width: 80%!important;
        border-radius: 50% !important;
      }
    }

    .user-info{
      width: calc(100% - var(--user-content-height-));
      height: var(--user-content-height-);
      display: inline-flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: flex-start;
      .nickname{}
      .user-id{
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        height: 18px;
        line-height: 20px;
        font-size: 13px;
        padding: 0 5px;
        border-radius: 5px;
        width: max-content!important;
      }
      .user-id{
        width: 100%;
        text-align: left;
        font-size: 13px;
        line-height: calc(var(--user-content-height- * 35%));
      }
    }
  }
}
</style>
