<template>
  <view :class="['charge-point', `charge-point-${open ? 'open' : 'close'}`]">
    <view class="flex-align-center flex-between">
      <view>
        <view class="fs-32 fw-600">{{ title }}</view>
        <view class="fs-24 mt-6 color-666">{{ time }}</view>
      </view>
      <view class="ml-auto color-warning" catchtap="toggleStatus">
        <text class="fs-22 mr-6">¥</text>
        <text class="fs-32 fw-600">{{ price }}</text>
      </view>
      <view
        class="ml-14"
        :style="{
          transform: `rotate(${open ? '270deg' : '90deg'})`,
          'transform-origin': 'center',
        }"
        @click="toggleStatus"
      >
        <uni-icons type="right" size="12" color="rgba(0,0,0,0.4)"></uni-icons>
      </view>
    </view>
    <view
      class="mt-30 pr-20 pl-20 flex-align-center"
      :style="{
        height: '76rpx',
        'background-color': 'var(--color-sec)',
        'border-radius': '10rpx',
      }"
      v-for="(item, index) in list"
      :key="index"
      @click="toOrdering(index)"
    >
      <charge-icon
        :type="item.ConnectorType === 1 ? 'fast' : 'slow'"
      ></charge-icon>
      <view class="ml-16 fs-26 color-000">{{ item.ConnectorName }}</view>
      <view class="ml-10 fs-26 color-0004"
        >{{ item.ConnectorType === 1 ? "直流" : "交流"
        }}{{ item.Power }}kw</view
      >
      <view class="ml-auto fs-22 flex-center pl-12 pr-12 status-tag">{{
        (statusMap as any)[item.ConnectorStatusInfo.Status]
      }}</view>
    </view>
  </view>
</template>

<script lang="ts">
export default {
  props: {
    title: String,
    price: String,
    time: String,
    list: Array<any>,
  },
  data() {
    return {
      open: true,
      statusMap: {
        255: "故障",
        0: "离网",
        1: "空闲",
        2: "未充电",
        3: "充电中",
        4: "已预约",
      },
    };
  },
  methods: {
    toggleStatus() {
      this.open = !this.open;
    },
    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;
}

.charge-point-close {
  height: 148rpx;
}

.charge-point-open {
  height: auto;
}

.color-000 {
  color: #000;
}

.color-0004 {
  color: rgba(0, 0, 0, 0.4);
}

.color-666 {
  color: #666;
}

.status-tag {
  height: 42rpx;
  border-radius: 40rpx;
  color: var(--color-primary);
  background-color: rgba(52, 125, 255, 0.1);
  white-space: nowrap;
}
</style>
