<template>
  <view class="container">
    <Header title="我的店铺"></Header>

    <view class="content">
      <!-- 列表 -->
      <view class="listcon">
        <view
          class="pubList"
          v-for="item in list"
          :key="item.shopId"
          @click="item.shopStatus != [1, 2, 3] ? shopGto(item) : ''"
        >
          <!-- 列表头部 -->
          <view class="titlecon">
            <span>{{ item.shopName }}</span>
            <span>{{ shopStatus[item.shopStatus] }}</span>
          </view>
          <!-- 列表详细 -->
          <view class="delbox">
            <view class="listPic">
              <img :src="itemUrl + item.shopLogo" />
            </view>

            <view class="deltxt">
              <ul>
                <li>
                  <span>申请时间：</span>
                  <span>{{ item.createTime }}</span>
                </li>
                <li>
                  <span>签约时间：</span>
                  <span>{{ item.contractStartTime }} ~ {{ item.contractEndTime }}</span>
                </li>
                <li>
                  <span>地址:</span>
                  <span>{{ item.shopAddress }}</span>
                </li>
              </ul>
            </view>
          </view>
        </view>
      </view>
      <view class="shbox" v-if="list.length > 0">审核被拒可点击修改重新提交</view>
      <wd-status-tip image="content" tip="暂无内容" v-else />
    </view>
    <view class="butCon"><button class="butXz" @click="shopGto()">申请入驻</button></view>
  </view>
</template>

<script setup>
import Header from '@/pages/order/components/Header/index.vue';
import { shopList } from '@/api/storeEntry';
const itemUrl = import.meta.env.VITE_APP_IMG_URL;
const shopStatus = reactive({
  0: '停业中',
  1: '营业中',
  2: '平台下线',
  3: '平台下线待审核',
  4: '开店申请中',
  5: '开店申请待审核',
});
const list = ref([]);
const getList = async () => {
  const { data: res } = await shopList();
  console.log(res);
  if (res.length > 0) {
    list.value = res;
  } else {
    shopGto();
  }
};
const shopGto = (item) => {
  xma.navigateTo({
    url: `/pages/storeEntry/detail${item ? `?content=0` : ''}`,
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit('acceptDataFromOpenerPage', { data: item });
    },
  });
};
getList();
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 375 * 2rpx;
  margin: 0 auto;
  background: #f1f1f1;
  padding-bottom: 160rpx;
  min-height: calc(100vh - 160rpx);

  .content {
    padding-top: 88rpx;

    .listcon {
      margin-top: 10px;

      .pubList {
        margin-top: 5px;
        width: 100%;
        height: auto;

        .titlecon {
          display: flex;
          width: 96%;
          padding: 2%;
          background-color: #fff;
          position: relative;
        }

        .titlecon span {
          display: block;
          font-size: 14px;
          line-height: 30px;
          font-weight: bold;
        }

        .titlecon span:last-child {
          position: absolute;
          right: 2%;
          line-height: 30px;
          color: #cb6429;
        }

        .delbox {
          width: 96%;
          padding: 2%;
          display: flex;
          margin-top: 2px;
          background-color: #fff;
        }

        .delbox .listPic {
          padding-top: 2%;
          width: 25%;
        }

        .delbox .listPic img {
          width: 100%;
        }

        .delbox .deltxt {
          padding: 0;
          padding-left: 2%;
          width: 73%;
        }

        .delbox .deltxt ul {
          list-style: none;
          padding: 0;
        }

        .delbox .deltxt ul li {
          text-align: left;
        }

        .delbox .deltxt ul li span {
          font-size: 14px;
        }
      }
    }

    .shbox {
      text-align: center;
      margin-top: 10px;
      font-size: 15px;
      color: #7f7f7f;
    }
  }

  .butCon {
    width: 100%;
    height: auto;
    position: fixed;
    z-index: 999;
    bottom: 0px;
    width: 96%;
    padding: 2%;
    background-color: #fff;
  }

  .butXz {
    border-radius: 10px;
    background-color: #fb3534;
    color: #fff;
    outline: none;
  }
}
</style>
