<template>
  <!-- 轮播图 -->
  <CustomSwiper :list="bannerList"> </CustomSwiper>
  <!-- 介绍 -->
  <uni-card
    class="avatar-card"
    :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
    :padding="'20px 10px'"
    :border="false"
  >
    <view class="title">优质货场</view>
    <view class="freight">
      <view v-for="(item, index) in list" :key="index">
        <view>
          <image
            mode="aspectFill"
            :src="`${url}/static/img/steel/${item.path}`"
          ></image>
        </view>
        <view class="text">
          <view>主营业务：{{ item.business }}</view>
          <view>货场名称：{{ item.name }}</view>
          <view>货场地址：{{ item.address }}</view>
          <view>联系电话：{{ item.phone }}</view>
        </view>
      </view>
    </view>

    <view style="margin: 60rpx 0rpx 30rpx 0rpx">
      <up-gap height="10" bgColor="#F8F8F8"></up-gap>
    </view>

    <view class="title">合作方案</view>
    <view class="mt-30 mb-30">
      <uni-grid :column="2" :showBorder="false" :square="false">
        <uni-grid-item
          class="item"
          v-for="(item, index) in serviceItemList"
          :key="index"
        >
          <view>
            <image
              mode="aspectFill"
              :src="`${url}/static/img/steel/${item.path}`"
            ></image>
          </view>
        </uni-grid-item>

        <view class="mt-30 mb-30" style="width: 60%">
          <view
            ><u-button type="primary" shape="circle" @click="handleJoin"
              >我要加入</u-button
            ></view
          >
        </view>
      </uni-grid>
    </view>
  </uni-card>
</template>

<script setup lang="ts">
import { url } from "@/utils/data";
import CustomSwiper from "@/components/CustomSwiper/index.vue";

const bannerList = [
  {
    imgUrl: "s-a1.png",
  },
];

const list = ref([
  {
    path: "f1.png",
    business:
      "长期回收废钢（轻一、轻二、轻三、重废、钢板料等）、废纸、泡沫、塑料等，量大价优，欢迎来电咨询。",
    name: "在生万有-中悦犇站",
    address: "上海市奉贤区川南奉公路8598号",
    phone: "刘女士  13341778368",
  },
  {
    path: "f2.png",
    business:
      "长期回收重废、中废、轻废、小废、岩棉板、花盒等，量大价优，欢迎来电咨询。",
    name: "上海宽钢公司",
    address: "上海市宝山区兰岗路2号门",
    phone: "李女士  13601647155",
  },
]);

const serviceItemList = ref([
  {
    path: "c1.png",
    name: "锂电池包",
    url: "/pagesVehicle/index",
  },
  {
    path: "c2.png",
    name: "锂电模组",
    url: "/pagesVehicle/index",
  },
  {
    path: "c3.png",
    name: "极片",
    url: "/pagesVehicle/index",
  },
  {
    path: "c4.png",
    name: "电芯",
    url: "/pagesVehicle/index",
  },
]);

const handleJoin = () => {
  uni.navigateTo({
    url: "/pagesScrapSteel/registration", // 要跳转到的页面路径
  });
};
</script>

<style lang="scss" scoped>
.avatar-card {
  .freight {
    margin-top: 30rpx;
    > view {
      background: #f3faff;
      box-shadow: 0rpx 7rpx 12rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 13rpx;
      image {
        width: 100%;
        border-radius: 20rpx;
      }
      .text {
        font-size: 28rpx;
        color: #000000;
        line-height: 42rpx;
        padding: 0px 10px 10px 10px;
      }
    }
    > view + view {
      margin-top: 30rpx;
    }
  }
  .title {
    font-weight: 500;
    font-size: 36rpx;
    color: #282728;
    text-align: center;
    line-height: 80rpx;
  }
  ::v-deep .uni-card--shadow {
    padding: 0px !important;
  }
  ::v-deep .uni-grid {
    justify-content: space-evenly !important;
  }
  .item {
    text-align: center;
    image {
      width: 100%;
      height: 180rpx;
    }
  }
}
</style>
