<template>
  <view>
    <view v-if="showTopFalg" :class="[bottleStatus=='green'?'greenSty':bottleStatus=='yellow'?'yellowSty':'redSty','showTopFlagSty']">
      <span v-if="bottleStatus == 'green'">绿码按规使用</span>
      <span v-if="bottleStatus == 'yellow'">黄码转绿再使用</span>
      <span v-else>红码禁止使用</span>
    </view>
    <view :class="['basisCellCardCss','usuallyCard',showTopFalg?bottleStatus=='green'?'greenBg':bottleStatus=='yellow'?'yellowBg':'redBg':'']">
      <view class="flex justify-between">
        <view class="text-lg">
          {{title}}
        </view>
        <view v-if="showTopFalg" class="hideSty">
          隐藏健康码
        </view>
      </view>
      <slot></slot>
      <view class="flex justify-between margin-top" v-for="(item,index) in list" :key="`${$assignKeys(item.key)}`">
        <view class="w40 text-gray">
          {{item.name}}
        </view>
        <view class="w80 flex justify-end">
          <view class="" v-if="item.type === 'tag' && item.value">
            <u-tag :text="item.value" :bgColor="item.bgColor" :color="item.color" :borderColor="item.borderColor"></u-tag>
          </view>
          <view class="" v-else-if="item.type === 'avatar'">
            <u-avatar size="30" :src="item.src"></u-avatar>
          </view>
          <view class="" v-else-if="item.type === 'photoList'">
            <u-upload
                :fileList="item.value"
                name="4"
                width="55"
                :height="'60px'"
                :deletable = "false"
                multiple
                :maxCount="item.value.length"
            ></u-upload>
          </view>
          <view class="" v-else>
            {{item.value}}
          </view>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
import greenImg from '@/static/images/appList/qpxx/greenBottle.png'
export default {
  name: "basisCellCard",
  props: {
    list: {
      type: Array,
      default: () => [],
      require: true
    },
    title: {
      type: String,
      default: "",
    },
    showTopFalg:{
      type:Boolean,
      default:false
    },
    bottleStatus:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      imgSrc :greenImg
    };
  },
  methods:{
  },
}
</script>

<style lang="scss" scoped>
.showTopFlagSty{
  width: 100%;
  height: 64rpx;
  color: #ffffff;
  font-family: '苹方 中等', '苹方', sans-serif;
  font-weight: 400;
  text-align: center;
  line-height: 64rpx;
  font-style: normal;
  font-size: 30rpx;
  border-top-left-radius:15px ;
  border-top-right-radius: 15px;
}
.hideSty{
  background-color: rgba(234, 85, 4, 0.09803921568627451);
  width: 160rpx;
  height: 40rpx;
  border-radius: 6rpx;
  text-align: center;
  display: none;
  font-family: '苹方 中等', '苹方', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24rpx;
  padding: 4rpx 20rpx 4rpx 20rpx;

  color: #EA5504;
}
.greenSty{
  background-color: #29d34c;
}
.yellowSty{
  background-color: #f39c22;
}
.redSty{
  background-color: #ff544a;
}
.basisCellCardCss {
  padding: 20px;
}
.greenBg{
  background-image: url("../../static/images/appList/qpxx/greenBottle.png");
  background-position: center center; /* 设置背景图片居中 */
  background-size: 40% 80%; /* 设置背景图片覆盖整个容器 */
  background-repeat: no-repeat; /* 设置背景图片不重复 */
}
.yellowBg{
  background-image: url("../../static/images/appList/qpxx/yellowBottle.png");
  background-position: center center; /* 设置背景图片居中 */
  background-size: 40% 80%; /* 设置背景图片覆盖整个容器 */
  background-repeat: no-repeat; /* 设置背景图片不重复 */
}
.redBg{
  background-image: url("../../static/images/appList/qpxx/redBottle.png");
  background-position: center center; /* 设置背景图片居中 */
  background-size: 40% 80%; /* 设置背景图片覆盖整个容器 */
  background-repeat: no-repeat; /* 设置背景图片不重复 */
}
</style>