<template>
  <view class="content">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="特约商户列表"></uni-nav-bar>
    <view class="flex-col group_3" v-for="merchant in merchantList" :key="merchant.enterpriseId">
      <view class="flex-col section_1">
        <view class="flex-row group_4 justify-between">
          <view class="flex-row">
            <text class="text_4">广西印刷有限公司</text>
            <image v-if="showIcon(merchant.applymentState).img" :src="showIcon(merchant.applymentState).img" class="image_4" />
          </view>
          <view v-if="showIcon(merchant.applymentState).text" class="button" @click="checkInfo(merchant)">{{ showIcon(merchant.applymentState).text }}</view>
        </view>
        <view class="flex-col group_5" v-if="infoShowStatus.indexOf(merchant.applymentState) < -1">
          <view class="top-section flex-col view_1">
            <view class="top-group flex-row">
              <view class="left-section"></view>
              <text class="text_6">商户信息</text>
            </view>
            <view class="center-group flex-col view_4">
              <view class="flex-row">
                <text class="label">商户类型：</text>
                <text class="value">{{ mallSupplierTypeMap[merchant.mallSupplierType] }}</text>
              </view>
              <view class="flex-row">
                <text class="label">客服电话</text>
                <text class="value">{{ merchant.servicePhone }}</text>
              </view>
              <text class="text_12">商户资料：</text>
            </view>
            <view class="flex-row equal-division">
              <image @click="preview(merchant.businessLicenseImg)" :src="merchant.businessLicenseImg" class="equal-division-item image_5" />
              <image @click="preview(merchant.legalPersonIdCardFrontImg)" :src="merchant.legalPersonIdCardFrontImg" class="equal-division-item" />
              <image @click="preview(merchant.legalPersonIdCardBackImg)" :src="merchant.legalPersonIdCardBackImg" class="equal-division-item" />
            </view>
          </view>
          <view class="top-section flex-col">
            <view class="top-group flex-row">
              <view class="left-section"></view>
              <text class="text_6">结算账户</text>
            </view>
            <view class="center-group flex-col" v-if="merchant.mallSupplierType == mallSupplierTypeEnum.PERSONAL">
              <view class="flex-row">
                <text class="label">账户类型：</text>
                <text class="value">私账</text>
              </view>
              <view class="flex-row top_16">
                <text class="label">账户名：</text>
                <text class="value">{{ merchant.privateAccounts.accountName }}</text>
              </view>
              <view class="flex-row top_16">
                <text class="label">对私账户：</text>
                <text class="value">{{ merchant.privateAccounts.accountNumber }}</text>
              </view>
              <view class="flex-row top_16">
                <text class="label">开户行：</text>
                <text class="value">{{ merchant.privateAccounts.accountBank }}</text>
              </view>
            </view>
            <view class="center-group flex-col" v-if="merchant.mallSupplierType == mallSupplierTypeEnum.ENTERPRISE">
              <view class="flex-row">
                <text class="label">账户类型：</text>
                <text class="value">公账</text>
              </view>
              <view class="flex-row top_16">
                <text class="label">账户名：</text>
                <text class="value">{{ merchant.corporateAccount.accountName }}</text>
              </view>
              <view class="flex-row top_16">
                <text class="label">对私账户：</text>
                <text class="value">{{ merchant.corporateAccount.accountNumber }}</text>
              </view>
              <view class="flex-row top_16">
                <text class="label">开户行：</text>
                <text class="value">{{ merchant.corporateAccount.accountBank }}</text>
              </view>
            </view>
          </view>
          <view class="top-section flex-col">
            <view class="top-group flex-row">
              <view class="left-section"></view>
              <text class="text_6">法人信息</text>
            </view>
            <view class="center-group flex-col">
              <view class="flex-row">
                <text class="label">法人姓名：</text>
                <text class="value">{{ merchant.legalPersonName }}</text>
              </view>
              <view class="flex-row top_16">
                <text class="label">身份证号码：</text>
                <text class="value">{{ merchant.legalPersonIdCardNo }}</text>
              </view>
              <view class="flex-row top_16">
                <text class="label">手机号码：</text>
                <text class="value">{{ merchant.legalPersonMobile }}</text>
              </view>
              <view class="flex-row top_16">
                <text class="label">邮箱：</text>
                <text class="value">{{ merchant.contactEmail }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { getMerchantList } from '@/apis/merchantApi.js'
import { applyStatusEnum, mallSupplierTypeMap, mallSupplierTypeEnum } from '@/enums/index.js'

// 信息展示状态
const infoShowStatus = [
  applyStatusEnum.SUBMITTED,
  applyStatusEnum.AUDITING,
  applyStatusEnum.WAIT_VERIFY,
  applyStatusEnum.WAIT_SIGN,
  applyStatusEnum.WAIT_OPEN,
  applyStatusEnum.FINISHED
]
export default {
  data() {
    return {
      infoShowStatus: Object.freeze(infoShowStatus),
      mallSupplierTypeMap: Object.freeze(mallSupplierTypeMap),
      mallSupplierTypeEnum: Object.freeze(mallSupplierTypeEnum),
      merchantList: [],
      cache: {}
    }
  },
  onShow() {
    getMerchantList({ type: 5 }).then((res) => {
      if (res) {
        this.merchantList = res
      }
    })
  },
  methods: {
    go2,
    back,
    preview(url) {
      uni.previewImage({
        current: url,
        urls: [url]
      })
    },
    showIcon(status) {
      if (this.cache[status]) {
        return this.cache[status]
      }
      /**
       * @property {string} img - 图标 空就不展示
       * @property {string} text - 按钮文字 ，空就不展示
       */
      let result = {
        img: '',
        text: ''
      }
      let infoMap = [applyStatusEnum.RE_SUBMIT, applyStatusEnum.REJECTED, applyStatusEnum.CANCELED]
      if (status === applyStatusEnum.FINISHED) {
        result.img = '/static/imgs/merchant/apply-finished-icon.png'
      } else if (status === applyStatusEnum.WAIT_APPLY) {
        result.text = '去申请'
      } else if (infoMap.includes(status)) {
        result.img = '/static/imgs/merchant/apply-reject-icon.png'
        result.text = '查看'
      } else {
        result.img = '/static/imgs/merchant/apply-auditing-icon.png'
      }
      this.cache[status] = result
      return result
    },
    checkInfo(merchant) {
      go2('merchant-setting', { info: JSON.stringify(merchant) })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
}
.group_3 {
  padding-bottom: 32rpx;
  flex: 1 1 auto;
  overflow-y: auto;
  .section_1 {
    background-color: rgb(255, 255, 255);
    .group_4 {
      padding: 23rpx 32rpx 22rpx;
      border-bottom: solid 2rpx rgb(221, 221, 221);
      .text_4 {
        max-width: 370rpx;
        color: rgb(0, 0, 0);
        font-size: 30rpx;
        font-weight: 600;
        line-height: 42rpx;
        white-space: wrap;
      }
      .image_4 {
        margin-left: 16rpx;
        width: 116rpx;
        height: 32rpx;
      }
      .button {
        width: 140rpx;
        height: 56rpx;
        background: #ffffff;
        border: 1.2rpx solid rgba(0, 122, 255, 1);
        border-radius: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #007aff;
      }
    }
    .group_5 {
      padding: 19rpx 32rpx 36rpx;
      .top-section {
        margin-top: 20rpx;
        padding: 24rpx 24rpx 30rpx;
        background-color: rgb(247, 248, 250);
        border-radius: 8rpx;
        .top-group {
          color: rgb(51, 51, 51);
          font-size: 28rpx;
          font-weight: 500;
          line-height: 40rpx;
          white-space: nowrap;
          .left-section {
            align-self: center;
            background-color: rgb(173, 186, 201);
            border-radius: 50%;
            width: 10rpx;
            height: 10rpx;
          }
          .text_6 {
            margin-left: 6rpx;
          }
        }
        .center-group {
          margin-top: 20rpx;
          padding: 0 18rpx;
          .text_12 {
            margin-top: 16rpx;
            color: rgb(136, 136, 136);
            font-size: 28rpx;
            line-height: 40rpx;
            white-space: nowrap;
          }
        }
        .view_4 {
          margin-top: 21rpx;
        }
        .equal-division {
          margin-left: 18rpx;
          margin-top: 15rpx;
          align-self: flex-start;
          .equal-division-item {
            margin-left: 12rpx;
            flex: 1 1 120rpx;
            border-radius: 10rpx;
            width: 120rpx;
            height: 120rpx;
          }
          .image_5 {
            margin-left: 0;
          }
        }
      }
      .view_1 {
        margin-top: 0;
      }
    }
  }
  .top_16 {
    margin-top: 16rpx;
  }
  .label {
    color: rgb(136, 136, 136);
    font-size: 28rpx;
    line-height: 40rpx;
    white-space: nowrap;
    width: 168rpx;
  }
  .value {
    width: 430rpx;
    color: rgb(51, 51, 51);
    font-size: 28rpx;
    font-weight: 500;
    line-height: 40rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
