<script lang="ts" setup>
import { ref, watch } from "vue";
import { genRandom } from "@/utils";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:modelValue"]);
const show = ref<boolean>(false);

const tableData = ref<any[]>([
  {
    code: "DB01",
    name: "麦当劳商铺电表",
    position: "一楼麦当劳",
    num: 5000,
  },
  {
    code: "DB02",
    name: "星巴克商铺电表",
    position: "一楼星巴克",
    num: 3876,
  },
  {
    code: "DB03",
    name: "兰州牛肉面商铺电表",
    position: "一楼兰州牛肉面",
    num: 3876,
  },
  {
    code: "DB04",
    name: "肯德基商铺电表",
    position: "一楼肯德基",
    num: 6532,
  },
  {
    code: "DB05",
    name: "必胜客商铺电表",
    position: "一楼必胜客",
    num: 4876,
  },
]);

watch(
  () => props.modelValue,
  (val: boolean) => {
    if (val) {
      open();
    } else {
      close();
    }
  }
);

//更新数据
const updateData = () => {
  tableData.value.forEach((item) => {
    item.num = genRandom(2000, 6000);
  });
};

const open = () => {
  show.value = true;
  updateData();
};

const close = () => {
  show.value = false;
  emits("update:modelValue", false);
};

defineExpose({
  open,
  close,
});
</script>

<template>
  <div
    v-bind="$attrs"
    class="popover fixed top-0 left-0 w-full h-full z-10 bg-black/80"
    name="popover"
    v-show="show"
    @click="close"
  >
    <!-- <el-button type="primary" size="default" @click="updateData">一键抄表</el-button> -->
    <div
      class="absolute left-[50%] top-24 translate-x-[-50%] p-4 rounded-md shadow-2xl w-[600px] border-2 border-cyan-300 bg-sky-900/80"
      @click.stop=""
    >
      <el-table :data="tableData" style="width: 100%" height="300">
        <el-table-column prop="code" label="电表编码" align="center" />
        <el-table-column prop="name" label="名称" align="center" />
        <el-table-column prop="position" label="位置" align="center" />
        <el-table-column prop="num" label="读数" align="center">
          <template #default="{ row }"> {{ row.num }}kw.h</template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
