<template>
  <!-- 数据循环 timeId 时间戳加随机数唯一值 -->
  <block v-for="(v, i) in adList" :key="v.timeId">
    <view class="ad-item">
      <view class="ad-img-wrapper">
        <view class="title">广告图片</view>
        <view style="flex:1">
          <JeepayUploadImg v-model:src="v.imgUrl" bizType="notice" />
        </view>
      </view>
      <view class="ad-sort" :class="{ 'border-none': adList.length - 1 == i }">
        <view class="title">广告排序</view>
        <input type="number" v-model="v.sort" placeholder="请输入广告排序"
          placeholder-style="color: #b3b3b3ff; font-size: 32rpx;" maxlength="5" />
        <view class="del-but" hover-class="jeepay-hover-button" @tap="delAdData(v.timeId)">删除该条</view>
      </view>
    </view>
  </block>
  <!-- 添加数据 -->
  <view class="add-img-but" hover-class="jeepay-hover-button" @tap="addAdData"> 
  <image class="add-icon-img" src="/pageDevice/static/icon/ad-add.svg"></image>
  添加广告图片 </view>
</template>

<script setup>
import infoBox from '@/commons/utils/infoBox.js'
const props = defineProps({
  adList: { type: Array, default: () => ([]) }
});
// 添加数据方法
const addAdData = () => {
  props.adList.push({ timeId: new Date().getTime() + Math.random() })
}
// 删除数据方法
const delAdData = (key) => {
  if(props.adList.length<=1) return infoBox.showToast('最后一条数据不可删除。')
  const index = props.adList.findIndex(v => v.timeId == key)
  props.adList.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.title {
  margin-right: 70rpx;
  color: #4d4d4dff;
  font-size: 32rpx;
  font-weight: 400;
  white-space: nowrap;
}

.ad-item {
  padding: 40rpx 0 0 40rpx;
}

.ad-img-wrapper {
  display: flex;
  align-items: center;
}

.ad-sort {
  display: flex;
  align-items: center;
  margin-top: 40rpx;
  height: 120rpx;
  border-bottom: 1rpx solid #edededff;
}

.del-but {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 40rpx;
  width: 148rpx;
  height: 70rpx;
  color: #ff0000ff;
  font-size: 27rpx;
  border-radius: 10rpx;
  background: #ff00000f;
}

.add-img-but {
  margin: 40rpx;
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 110rpx;
  color: #2d2d2dff;
  font-size: 32rpx;
  border: 2rpx dashed #0000001a;
  background: #00000005;
  border-radius: 10rpx;
}

.border-none {
  border: none !important;
}
.jeepay-hover-button{
  opacity: 0.5;
  background-color: rgba($color: #000000, $alpha: 0.09);
}
.add-icon-img{
  margin-right: 20rpx;
  width: 25rpx;
}
</style>