<template>
  <view class="pattern-item">
    <view class="pattern-headline">
      <image
        class="pattern-icon"
        :src="$handleImageUrl('/patternIcon.png')"
        mode="aspectFit"
      />
      <text class="pattern-text one-row">模式：{{ item.sortOrder }}</text>
      <text class="pattern-type">{{
        item.sharedMode ? "均摊模式" : "排队模式"
      }}</text>
    </view>
    <view class="pattern-content">
      <view class="content-item">
        <text class="item-label">商家让利：</text>
        <text class="item-value"
          >{{ item.subsidyRatio || 0 }}%</text
        >
      </view>
      <template v-if="item.sharedMode">
        <view class="content-item">
          <text class="item-label">队首补贴占比：</text>
          <text class="item-value"
            >{{ (item.firstSubsidyRatio || 0) * 1 }}%</text
          >
        </view>
        <view class="content-item">
          <text class="item-label">均摊补贴占比：</text>
          <text class="item-value"
            >{{
              item.sharedMode ? 100 - (item.firstSubsidyRatio || 0) * 1 : "0"
            }}%</text
          >
        </view>
      </template>
      <view class="content-item">
        <text class="item-label">最高补贴占比：</text>
        <text class="item-value"
          >{{ (item.amountSubsidyRatio || 0) * 1 }}%</text
        >
      </view>
      <view class="content-item">
        <text class="item-label">积分补贴占比：</text>
        <text class="item-value">{{ (item.pointSubsidyRatio || 0) * 1 }}%</text>
      </view>
      <view class="content-item" v-if="item.sharedMode">
        <text class="item-label">定点均摊：</text>
        <text class="item-value">{{
          item.sharedMode
            ? item.immediateArrival
              ? "立即均摊"
              : item.settlementHour + ":00"
            : "--"
        }}</text>
      </view>
      <view :class="['pattern-footer', item.defaulted ? 'open-pattern' : '']">
        <text class="footer-status">{{
          item.defaulted ? "开启" : "关闭"
        }}</text>
        <text class="footer-text" @click="handleEdit(item)">修改</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
const emit = defineEmits(["edit"]);
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
const item = ref(props.item || {});
const isOpen = ref(false);
watch(
  () => props.item,
  (newVal) => {
    item.value = newVal || {};
  }
);

const handleEdit = (item: any) => {
  console.log(item);
  if (item.defaulted) return;
  emit("edit", item);
};
</script>

<style scoped lang="scss">
.pattern-item {
  width: 750rpx;
  min-height: 335rpx;
  background: linear-gradient(180deg, #fbe6e9, #ffffff 13%);
  border-radius: 24rpx;

  .pattern-headline {
    width: 100%;
    padding-top: 17rpx;
    height: 106rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    box-sizing: border-box;

    .pattern-icon {
      flex-shrink: 0;
      width: 33rpx;
    }

    .pattern-text {
      padding: 0 10rpx;
      flex: 1 0;
      font-size: 36rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      color: #1a1a1a;
    }

    .pattern-type {
      flex-shrink: 0;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #1a1a1a;
    }
  }

  .pattern-content {
    padding: 20rpx 30rpx 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .content-item {
      flex-shrink: 0;
      width: 50%;
      padding: 10rpx 0;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      line-height: 36rpx;

      .item-label {
        color: #1a1a1a;
      }

      .item-value {
        color: #666666;
      }
    }

    // <view class="content-item">
    // 	<text class="item-label">最高补贴占比：</text>
    // 	<text class="item-value">{{item}}%</text>
    // </view>
  }

  .pattern-footer {
    margin-top: 20rpx;
    width: 100%;
    border-top: 1rpx solid #f0f0f0;
    padding: 30rpx 30rpx 35rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .footer-status {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #666666;
    }

    .footer-text {
      width: 180rpx;
      height: 60rpx;
      background: #eb5153;
      border-radius: 30rpx;
      text-align: center;
      line-height: 60rpx;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .open-pattern {
    .footer-status {
      color: #4ea700;
    }
    .footer-text {
      color: #666666;
      background-color: #e6e6e6;
    }
  }
}
</style>
