<script setup>
import { computed, ref, watch, defineProps, defineEmits } from 'vue';
import { useStore } from 'vuex';

const props = defineProps({ status: Object });

defineEmits(['search']);

const store = useStore();
const devices = computed(() => store.state.device.devices); // 设备/站点列表
const deviceId = ref(''); // 选中的设备id
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
// const get = computed(() => (props.status.get ? '设置生效' : '等待下发'));
// const set = computed(() => (props.status.set ? '设置生效' : '等待下发'));

const statusType = computed(() => {
  let type = 'success';
  switch (props.status) {
    case 'PENDING':
      type = 'primary';
      break;
    case 'FAIL':
      type = 'danger';
      break;
    case 'SUCCESS':
      type = 'success';
      break;
    default:
      type = 'primary';
      break;
  }
  return type;
});

// 监听currentDeviceId
watch(
  () => currentDeviceId.value,
  newValue => {
    if (newValue && deviceId.value !== newValue) {
      deviceId.value = newValue;
    }
  },
  { immediate: true },
);
</script>

<template>
  <div class="mb-3">
    <span class="text-sm text-gray-500">选择站点：</span>
    <el-select v-model="deviceId" placeholder="选择站点" @change="$emit('search', deviceId)">
      <el-option v-for="item in devices" :key="item.deviceId" :label="item.address" :value="item.deviceId"></el-option>
    </el-select>

    <!-- <span class="text-sm text-gray-500 ml-10">获取状态：</span>
    <el-tag type="success">{{ get }}</el-tag>-->

    <span class="text-sm text-gray-500 ml-10">设置状态：</span>
    <el-tag :type="statusType">{{ props.status || 'PENDING' }}</el-tag>
  </div>
</template>
