<template>
  <view class="bg-white flex flex-col px-2">
    <view class="flex flex-nowrap text-xs text-gray-400 my-2">
      提示:
      <view v-for="(tip, tipIndex) in tips" :key="tipIndex" class="flex flex-nowrap items-center ml-3">
        <view class="w-2 h-2 rounded-full mr-1" :class="tip.bg"></view>
        {{ tip.value }}
      </view>
    </view>
    <view v-if="lists && lists.length">
      <view v-for="item in lists" :key="item.toolId">
        <view class="flex justify-between items-center py-3 border-b">
          <view class="flex flex-row items-center">
            <view
              class="mr-2"
              :class="
                item.equipmentStatus === 0
                  ? 'text-blue-500'
                  : item.equipmentStatus === 1
                  ? 'text-gray-500'
                  : item.equipmentStatus === 2
                  ? 'text-red-500'
                  : 'text-green-500'
              "
            >
              {{ item.code }}
            </view>
            <view class="flex items-center text-gray-400">
              <u-icon name="wifi" :color="item.wifiStatus === 2 ? '#1890FF' : '#999999'" size="36"></u-icon>
            </view>
          </view>
          <view class="flex flex-nowrap items-center">
            <view class="battery-box">
              <view class="battery-text u-font-10 font-light">{{ item.electricQuantity }}</view>
              <view class="battery" :style="{ width: setWidth(item.electricQuantity) }"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-empty v-else text="列表为空" mode="list" class="mt-10"></u-empty>
  </view>
</template>

<script>
export default {
  data() {
    return {
      lists: [],
      tips: [
        {
          value: '开机',
          bg: 'bg-blue-500',
        },
        {
          value: '休眠',
          bg: 'bg-gray-500',
        },
        {
          value: '断电',
          bg: 'bg-red-500',
        },
        {
          value: '正常',
          bg: 'bg-green-500',
        },
      ],
    };
  },

  async created() {
    await this.queryToolList();
  },

  methods: {
    openBinding() {
      uni.navigateToMiniProgram({
        appId: 'wx1989853133e3da70',
        path: '',
        extraData: {},
        success(res) {
          // 打开成功
          console.log('打开成功res: ', res);
        },
      });
    },

    setWidth(res) {
      return (res * 21) / 100 + 'px';
    },

    /**
     * 查询工具箱列表
     */
    async queryToolList() {
      try {
        const data = await this.$u.api.queryToolList();
        this.lists = data;
      } catch (error) {
        console.error('error: ', error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: $uni-bg-color-grey;
}

.battery-box {
  width: 26px;
  height: 12px;
  background: url(https://www.tall.wiki/staticrec/yanyuan/battery.png) center no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.battery-text {
  width: 21px;
  height: 8px;
  line-height: 8px;
  text-align: center;
  margin: 2px 0;
  position: absolute;
  left: 2px;
  z-index: 99;
}

.battery {
  height: 8px;
  margin: 2px 0;
  background: #e0e0e0;
  position: absolute;
  left: 2px;
}

.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
}
</style>
