<template>
  <div class="app-container">
    <el-radio-group
      v-model="modelType"
      :style="{
        marginBottom: '8px',
      }"
      class="ios-style-radio"
      size="small"
    >
      <el-radio-button :label="1">属性</el-radio-button>
      <el-radio-button :label="3">事件</el-radio-button>
    </el-radio-group>
    <el-table :data="modelList.filter((el) => el.type === modelType)">
      <el-table-column
        align="center"
        label="物模型名称"
        prop="modelName"
      ></el-table-column>
      <el-table-column align="center" label="值" prop="value">
        <template #default="{ row }">
          {{
            dataList.find((el) => el.identifier === row.identifier)?.value ??
            "-"
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="更新时间" prop="createTime">
        <template #default="{ row }">
          {{
            dataList.find((el) => el.identifier === row.identifier)
              ?.createTime ?? "-"
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="{ row }">
          <el-button
            icon="list"
            link
            size="small"
            type="primary"
            @click="handleShowHistory(row.identifier)"
            >历史
          </el-button>
          <el-button icon="plus" link size="small" type="primary"
            >下发</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="showHistoryDialog" :width="500" title="历史记录">
      <el-table v-loading="historyLoading" :data="historyList">
        <el-table-column align="center" label="值" prop="value" />
        <el-table-column align="center" label="更新时间" prop="createTime" />
      </el-table>
      <pagination
        v-show="historyTotal > 0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="historyTotal"
        @pagination="getHistoryList"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs, watchEffect } from "vue";
import {
  fetchOperatingStatus,
  selectIdentifierHistory,
} from "@/api/iot/device";
import { listModel } from "@/api/thingsmodel/model";

const props = defineProps({
  deviceSn: {
    type: String,
  },
  productId: {
    type: Number,
  },
});

const { deviceSn, productId } = toRefs(props);
const modelType = ref(1);
const dataList = ref([]);
const modelList = ref([]);
const showHistoryDialog = ref(false);
const historyList = ref([]);
const historyLoading = ref(false);
const historyTotal = ref(0);
const data = reactive({
  queryParams: {
    pageSize: 10,
    pageNum: 1,
    identifier: "",
    deviceSn: "",
  },
});

const { queryParams } = toRefs(data);

const getHistoryList = () => {
  historyLoading.value = true;
  selectIdentifierHistory(queryParams.value)
    .then((resp) => {
      historyList.value = resp.data.list;
      historyLoading.value = false;
    })
    .catch(() => {
      historyLoading.value = false;
    });
};
const handleShowHistory = (identifier) => {
  showHistoryDialog.value = true;
  queryParams.value.identifier = identifier;
  queryParams.value.deviceSn = deviceSn.value;
  getHistoryList();
};
// 获取运行状态
const getOperatingStatus = () => {
  if (deviceSn.value) {
    fetchOperatingStatus(deviceSn.value).then((resp) => {
      dataList.value = resp.data;
    });
  }
};
watchEffect(() => {
  getOperatingStatus();
});
// 获取物模型列表
const getThingsModel = () => {
  if (productId.value) {
    listModel({
      productId: productId.value,
    }).then((resp) => {
      modelList.value = resp.rows?.filter((el) => el.type !== 2) ?? [];
    });
  }
};
watchEffect(() => {
  getThingsModel();
});
</script>

<style lang="scss" scoped></style>
