<template>
  <SearchBar @search="onSearch" />

  <div class="my-3">
    <el-button type="primary" @click="openPage(null, 'device-create')">添加设备</el-button>
  </div>

  <template v-if="devicesAll && devicesAll.data">
    <el-table :data="devicesAll.data" :style="{ 'max-height': contentHeight + 'px' }" border stripe style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <el-row :gutter="20" class="px-6 text-gray-400">
            <el-col :span="9">链路地址：{{ props.row.linkAddress }}</el-col>
            <el-col :span="9">探头编号：{{ props.row.probNo }}</el-col>
            <el-col :span="9">设备朝向：{{ props.row.deviceDirection }}</el-col>
            <el-col :span="9">试样：{{ props.row.simple }}</el-col>
            <el-col :span="9">安装位置：{{ props.row.installLocation }}</el-col>
            <el-col :span="9">sim1：{{ props.row.sim1 }}</el-col>
            <el-col :span="18">与主站后台联调情况：{{ props.row.joint }}</el-col>
            <el-col :span="18">备注：{{ props.row.remark }}</el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column align="center" label="ID" min-min-width="100" prop="deviceId" />
      <el-table-column align="center" label="完整ID" min-width="150" prop="deviceFullId" />
      <el-table-column align="left" header-align="center" label="地点" min-width="150" prop="address" />
      <el-table-column align="left" header-align="center" label="地区" min-width="120" prop="area" />
      <el-table-column align="center" label="联系人" min-width="100" prop="contact" />
      <el-table-column align="center" label="联系电话" min-width="150" prop="phone" />
      <el-table-column align="center" label="安装时间" min-width="200" prop="installTime" />
      <el-table-column align="center" label="正式运行时间" min-width="200" prop="runTime" />
      <el-table-column align="center" fixed="right" label="操作" min-width="200">
        <template #default="props">
          <el-tooltip class="item" content="网络参数配置" effect="dark" placement="top">
            <i class="el-icon-setting text-base text-yellow-600 mx-1" @click="openPage(props.row, 'network-config')"></i>
          </el-tooltip>
          <el-tooltip class="item" content="功能参数配置" effect="dark" placement="top">
            <i class="el-icon-set-up text-base text-yellow-600 mx-1" @click="openPage(props.row, 'function-config')"></i>
          </el-tooltip>
          <el-tooltip class="item" content="实时数据统计" effect="dark" placement="top">
            <i class="el-icon-stopwatch text-base text-green-600 mx-1" @click="openPage(props.row, 'statistical-realtime')"></i>
          </el-tooltip>
          <el-tooltip class="item" content="数据查看及导出" effect="dark" placement="top">
            <i class="el-icon-tickets text-base text-green-600 mx-1" @click="openPage(props.row, 'data-history')"></i>
          </el-tooltip>
          <el-tooltip class="item" content="数据统计" effect="dark" placement="top">
            <i class="el-icon-data-line text-base text-green-600 mx-1" @click="openPage(props.row, 'statistical-history')"></i>
          </el-tooltip>
          <el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete(props.ro.deviceId)">
            <template #reference>
              <i class="el-icon-delete text-base text-red-600 mx-1"></i>
              <!-- <el-button type="text" plain size="mini" icon="el-icon-delete"></el-button> -->
            </template>
          </el-popconfirm>

          <el-tooltip class="item" content="编辑设备信息" effect="dark" placement="top">
            <i class="el-icon-edit text-base text-blue-600 mx-1" @click="handleEdit(rops.row)"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="devicesAll.page.page"
      :default-page-size="50"
      :page-count="devicesAll.page.count"
      :page-size="devicesAll.page.size"
      :page-sizes="[1, 10, 20, 50, 100]"
      :total="devicesAll.page.total"
      background
      class="my-3 float-right"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="onSizeChange"
      @current-change="onCurrentPageChange"
    ></el-pagination>
  </template>

  <!-- 编辑设备信息 -->
  <DeviceEdit :show="editting" @toggle-mdoal="editting = false" />
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import SearchBar from 'components/search-bar.vue';
import DeviceEdit from 'components/device-edit.vue';
import { deleteDevice } from 'apis/index';
import { ElMessage } from 'element-plus';

let timer = null;
const store = useStore();
const router = useRouter();
const route = useRoute();
const token = computed(() => store.getters['user/token']);
const devicesAll = computed(() => {
  return store.state.device.devicesAll;
});
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
let contentHeight = 600;
const editting = ref(false);

// 获取设备完整信息列表
const getDevicesAllData = () => {
  try {
    if (token && token.value) {
      store.dispatch('device/getDevicesAll');
      timer && clearTimeout(timer);
      timer = null;
    } else {
      timer = setTimeout(() => {
        getDevicesAllData();
      });
    }
  } catch (error) {
    throw new Error(error);
  }
};

getDevicesAllData();

// 设置表格高度
onMounted(() => {
  const winHeight = document.documentElement.clientHeight;
  contentHeight = winHeight - 150;
});

/**
 * 删除
 * @param {number} page 页码
 * @param {number} size 每页条数
 */
function onSearch(page, size = 50) {
  const deviceId = currentDeviceId.value;
  const params = {
    deviceId,
    page,
    size,
  };
  store.dispatch('device/getDevicesAll', params);
}

// 当前页码变化
const onCurrentPageChange = page => {
  onSearch(page, devicesAll.value.page.size || 50);
};

// 每页条数变化
const onSizeChange = size => {
  onSearch(1, size);
};

/**
 * 删除某设备
 * @param {string} deviceId 设备id
 */
const handleDelete = async deviceId => {
  try {
    await deleteDevice(deviceId);
    store.commit('device/deleteDevice', deviceId);
    ElMessage.success('删除成功');
    store.dispatch('device/getDevices'); // 更新站点列表
  } catch (error) {
    ElMessage.error('删除失败, 请稍后重试');
    throw new Error(error);
  }
};

// 编辑设备信息
const handleEdit = item => {
  store.commit('device/setCurrentDeviceId', item.deviceId);
  editting.value = true;
};

/**
 * 打开页面
 * @param {object} item 设备对象
 * @param {string} pageName 页面name
 */
const openPage = (item, pageName) => {
  item && store.commit('device/setCurrentDeviceId', item.deviceId);
  router.push({
    path: `/corrosion/${pageName}`,
    query: route.query,
  });
};
</script>
