<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <!-- 签约信息 -->
  <view class="Mall4j page-store-settings-contract">
    <!-- 类目 -->
    <view class="contract-container">
      <view class="head">
        <view class="tit">
          {{ $t('qianYueLeiMu') }}
        </view>
        <view class="tips">
          {{ $t('yiQianYue') }}
          <text class="stress">
            {{ categoryList.length }}
          </text>
          {{ $t('geLeiMuZuiDuoKeTianJia') }}
          <text class="stress">
            {{ maxNumOfCategories }}
          </text>
          {{ $t('ge') }}
        </view>
      </view>
      <view class="table-box">
        <view class="tb-head">
          <view class="tb-head-td">
            {{ $t('leiMuMingCheng') }}
          </view>
          <view class="tb-head-td">
            {{ $t('shangJiLeiMu') }}
          </view>
          <view class="tb-head-td">
            {{ $t('leiMuKouShuai') }}
          </view>
          <view class="tb-head-td">
            {{ $t('jingYingZiZhi') }}
          </view>
          <view class="tb-head-td">
            {{ $t('leiMuZhuangTai') }}
          </view>
        </view>
        <view class="tb-body">
          <view
            v-for="item in categoryList"
            :key="item.categoryId"
            class="tb-row"
          >
            <view class="tb-row-td">
              {{ item.name }}
            </view>
            <view class="tb-row-td">
              {{ item.parentName }}
            </view>
            <view class="tb-row-td">
              {{ item.customizeRate ?item.customizeRate: item.platformRate }}%
            </view>
            <view class="tb-row-td">
              <view
                v-if="item.qualifications"
                scroll-x
                class="scroll-img"
              >
                <view
                  v-for="(value,idex) in item.qualifications"
                  :key="idex"
                  class="td-img"
                >
                  <img-show
                    :src="value"
                    @handle-tap="()=>previewImg(item.qualifications,idex)"
                  />
                </view>
              </view>
              <block v-if="!item.qualifications">
                /
              </block>
            </view>
            <view
              v-if="item.categoryStatus === 1"
              class="tb-row-td"
            >
              {{ $t('zhengChang') }}
            </view>
            <view
              v-if="item.categoryStatus === 0"
              class="tb-row-td"
            >
              {{ $t('xiaJia-0') }}
            </view>
            <view
              v-if="item.categoryStatus === -1"
              class="tb-row-td"
            >
              {{ $t('yiShanChu') }}
            </view>
          </view>
          <!-- 空 -->
          <view
            v-if="!categoryList.length"
            class="tb-row empty"
          >
            {{ $t('zanWuYiQianYueLeiMu') }}
          </view>
        </view>
      </view>
    </view>
    <!-- 品牌 -->
    <view class="contract-container">
      <view class="head">
        <view class="tit">
          {{ $t('qianYuePinPai') }}
        </view>
        <view class="tips">
          {{ $t('yiQianYue-0') }}
          <text class="stress">
            {{ brandList.length }}
          </text>
          {{ $t('gePinPaiZuiDuoKeTianJia') }}
          <text class="stress">
            {{ maxNumOfBrands }}
          </text>
          {{ $t('ge-0') }}
        </view>
      </view>
      <view class="table-box">
        <view class="tb-head">
          <view class="tb-head-td">
            {{ $t('pinPaiMingCheng') }}
          </view>
          <view class="tb-head-td">
            {{ $t('pinPaiLogo') }}
          </view>
          <view class="tb-head-td">
            {{ $t('shouQuanWenJian') }}
          </view>
          <view class="tb-head-td">
            {{ $t('pinPaiZhuangTai') }}
          </view>
        </view>
        <view class="tb-body">
          <view
            v-for="item in brandList"
            :key="item.categoryId"
            class="tb-row"
          >
            <view class="tb-row-td">
              {{ item.name }}
            </view>
            <view class="tb-row-td">
              <view class="td-img">
                <img-show
                  :src="item.imgUrl"
                  @handle-tap="()=>previewImg(item.imgUrl)"
                />
              </view>
            </view>
            <view class="tb-row-td">
              <view class="scroll-img">
                <view
                  v-for="(value,idex) in item.qualifications"
                  :key="idex"
                  class="td-img"
                >
                  <img-show
                    :src="value"
                    @handle-tap="()=>previewImg(item.qualifications,idex)"
                  />
                </view>
              </view>
            </view>
            <view class="tb-row-td">
              {{ item.brandStatus === 1 ? $t('zhengChang-0') : $t('xiaJia') }}
            </view>
          </view>
          <!-- 空 -->
          <view
            v-if="!brandList.length"
            class="tb-row empty"
          >
            {{ $t('zanWuYiQianYuePinPai') }}
          </view>
        </view>
      </view>
    </view>
    <!-- 有效期 -->
    <view
      v-if="shopStatus !== 4 && shopStatus !== 5 && paySettlementType !== 1"
      class="contract-container"
    >
      <view class="head">
        <view class="tit">
          {{ $t('qianYueYouXiaoQi') }}
        </view>
        <view class="tips">
          {{ $t('shangJiaDianPuYouXiaoQi') }}
        </view>
      </view>
      <view class="input-box">
        <view class="date-int">
          {{ timeRange[0] }}
        </view>
        <view class="to">
          {{ $t('zhi') }}
        </view>
        <view class="date-int">
          {{ timeRange[1] || $t('wuGuDingQiXian') }}
        </view>
        <image
          src="/static/images/date-icon.png"
          class="date-icon"
        />
      </view>
    </view>
    <!-- 店铺类型 -->
    <view
      v-if="shopStatus !== 4 && shopStatus !== 5"
      class="contract-container"
    >
      <view class="head">
        <view class="tit">
          {{ $t('dianPuLeiXing') }}
        </view>
      </view>
      <view class="radio-box">
        <radio-group>
          <radio
            value="0"
            color="#082BA6"
            :checked="shopType === 0"
            :disabled="shopType !== 0"
            style="transform:scale(0.8);"
            :class="{'disabled': shopType !== 0}"
          >
            <text class="radio-txt">
              {{ $t('puTongDianPu') }}
            </text>
          </radio>
          <radio
            value="1"
            color="#082BA6"
            :checked="shopType === 1"
            :disabled="shopType !== 1"
            style="transform:scale(0.8);"
            :class="{'disabled': shopType !== 1}"
          >
            <text class="radio-txt">
              {{ $t('youXuanHaoDian') }}
            </text>
          </radio>
        </radio-group>
      </view>
    </view>

    <view class="footer">
      <view class="warm-tips">
        {{ $t('wenXinTiShiShenQingQianYueLeiMuHeQianYuePinPaiQingQianWangPcDuanCaoZuo') }}
      </view>
    </view>
  </view>
</template>

<script setup>
const paySettlementType = uni.getStorageSync('bbcPaySettlementType')

// 最大可签约类目数量
const maxNumOfCategories = 200
// 最大可签约品牌数量
const maxNumOfBrands = 50
// 类目列表
const categoryList = ref([])
// 品牌列表
const brandList = ref([])
// 签约有效期
const timeRange = ref([])
// 店铺类型 0普通店铺 1优选好店
const shopType = ref(0)
const shopStatus = ref(4)
onShow(() => {
  uni.showLoading()
  Promise.all([getbrandList(), getcategoryList(), getInfo()])
    .finally(() => {
      uni.hideLoading()
    })
  uni.setNavigationBarTitle({
    title: $t('qianYueXinXi')
  })
})
/**
 * 获取类目列表
 */
const getcategoryList = () => {
  return new Promise((resolve, reject) => {
    const params = {
      url: '/prod/category/listSigningCategory',
      method: 'GET',
      data: {
        status: 1
      },
      hasCatch: true
    }
    http.request(params).then(({ data: res }) => {
      res.forEach(element => {
        if (element.qualifications) {
          element.qualifications = element.qualifications.split(',')
        }
      })
      categoryList.value = res
      resolve()
    }).catch(() => {
      // eslint-disable-next-line prefer-promise-reject-errors
      reject()
    })
  })
}
/**
 * 获取品牌列表
 */
const getbrandList = () => {
  return new Promise((resolve, reject) => {
    const params = {
      url: '/admin/brand/listSigningBrand',
      method: 'GET',
      data: {
        status: 1
      },
      hasCatch: true
    }

    http.request(params).then(({ data: res }) => {
      res = [...res.customizeBrandList, ...res.platformBrandList]
      res.forEach(element => {
        if (element.qualifications) {
          element.qualifications = element.qualifications.split(',')
        }
      })
      brandList.value = res
      resolve()
    }).catch(() => {
      // eslint-disable-next-line prefer-promise-reject-errors
      reject()
    })
  })
}
/**
 * 获取店铺基本信息
 */
const getInfo = () => {
  return new Promise((resolve, reject) => {
    const params = {
      url: '/shop/shopDetail/info',
      method: 'GET',
      hasCatch: true
    }
    http.request(params).then(({ data: res }) => {
      timeRange.value = [res.contractStartTime?.split(' ')[0], res.contractEndTime?.split(' ')[0]]
      shopType.value = res.type
      shopStatus.value = res.shopStatus
      resolve()
    }).catch(() => {
      // eslint-disable-next-line prefer-promise-reject-errors
      reject()
    })
  })
}

/**
 * 图片预览
 */
const { previewImg } = usePreviewImg()

</script>

<style lang="scss" scoped>
@use './store-settings-contract.scss';
</style>
