<template>
  <view
    class="charge-point flex-align-center mt-20"
    v-for="(item, index) in list"
    :key="index"
    @click="toOrdering(index)"
  >
    <view
      :class="[
        'charge-point_icon',
        `charge-point_icon-${item.connectorStatusInfo.status}`,
      ]"
    >
      <!-- TODO 图标 -->
    </view>
    <view class="charge-point_title ml-16">
      <view class="flex-align-center">
        <view class="fs-32 fw-600 color-000 lh-32">{{ title }}</view>
        <view
          :class="[
            'tag',
            'fs-24',
            'flex-center',
            'ml-8',
            item.connectorStatusInfo.status === 255 ||
            item.connectorStatusInfo.status === 0
              ? 'tag-disabled'
              : 'tag-warning',
          ]"
          v-if="item.connectorStatusInfo.status !== 1"
          >{{ (statusMap as any)[item.connectorStatusInfo.status] }}</view
        >
      </view>
      <view class="mt-10 flex-align-center">
        <view class="fs-24 color-666"
          >{{ item.connectorType === 1 ? "直流" : "交流"
          }}{{ item.power }}kw</view
        >
        <view class="fs-24 color-666 mr-6 ml-6">|</view>
        <view class="fs-24 color-666">车位号TODO</view>
      </view>
    </view>
    <view class="ml-auto">
      <view
        class="lh-32 color-warning"
        style="text-align: right; margin-top: -8rpx"
      >
        <text class="fs-22 mr-4">¥</text>
        <text class="fs-32">{{ price }}</text>
        <text class="fs-22 ml-4" style="vertical-align: text-top">元</text>
      </view>
      <view class="fs-24 lh-24 color-999 mt-10">预计费用</view>
    </view>
  </view>
</template>

<script lang="ts">
export default {
  props: {
    title: String,
    price: String,
    time: String,
    list: Array<any>,
  },
  data() {
    return {
      statusMap: {
        255: "故障",
        0: "离网",
        1: "空闲",
        2: "未充电",
        3: "充电中",
        4: "已预约",
      },
    };
  },
  methods: {
    toOrdering(index: number) {
      const { list } = this;
      if (
        list &&
        list[index].connectorStatusInfo &&
        list[index].connectorStatusInfo.status &&
        list[index].connectorStatusInfo.status === 1
      ) {
        uni.showActionSheet({
          itemList: ["去充电"],
          success: (res) => {
            if (res.tapIndex === 0) {
              uni.navigateTo({
                url: `/pages-charge/ordering/ordering?sn=${list[index].connectorId}`,
              });
            }
          },
        });
      }
    },
  },
};
</script>

<style lang="scss">
@import "../../../styles/font.scss";
@import "../../../styles/flex.scss";
@import "../../../styles/layout.scss";

.charge-point {
  background-color: #fff;
  border-radius: 20rpx;
  transition: all 0.3s;
  overflow: hidden;
  padding: 30rpx;
  &_icon {
    height: 56rpx;
    width: 56rpx;
    border-radius: 50%;
    &-0,
    &-255 {
      background-color: #b1b1b1;
    }
    &-1 {
      background-color: #00dab3;
    }
    &-2,
    &-3,
    &-4 {
      background-color: var(--color-warning);
    }
  }
  .tag {
    height: 38rpx;
    padding: 0rpx 8rpx;
    box-sizing: border-box;
    border-radius: 8rpx;
  }
  .tag-warning {
    color: var(--color-warning);
    background: rgba(255, 153, 0, 0.1);
  }
  .tag-disabled {
    color: #b1b1b1;
    background: rgba(177, 177, 177, 0.1);
  }
}
</style>
