<template>
  <el-row :gutter="20">
    <el-col :span="14">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true" @keyup.enter.native="queryClick">
        <el-form-item label="设备SN:" style="margin-left: 15px;width: 220px;">
          <el-input v-model="queryParams.deviceSn" placeholder="设备SN" clearable width="100px" maxlength="11"
            size="small" />
        </el-form-item>
        <el-form-item label="遥测站编码:" style="margin-left: 15px;width: 220px;">
          <el-input v-model="queryParams.stationCode" placeholder="遥测站编码" clearable width="100px" maxlength="10"
            size="small" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="button" @click="queryClick" :disabled="state.disabled">
            查询报文</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-table v-loading="loading" :data="state.tableData" border stripe style="width: 100%;margin-top: -15px;"
          :height="tableHeight" ref="my_table" highlight-current-row @current-change="handleCurrentRowChange"
          @row-click="tableRowClick" :header-cell-style="{ background: '#606266', color: '#FFFFFF' }">
          <el-table-column fixed type="index" width="50" align="center" />
          <el-table-column prop="deviceSn" label="设备SN" header-align="center" width="110" />
          <el-table-column prop="stationCode" label="遥测站编码" header-align="center" width="110" />
          <el-table-column prop="sampleTime" label="采样时间" header-align="center" width="140">
            <template #default="scope">
              {{ tool.dateFormat(scope.row.sampleTime, "YYYY-MM-DD HH:mm:ss",'YY-MM-DD HH:mm:ss') }}
            </template>
          </el-table-column>

          <el-table-column prop="rptTime" label="发报时间" header-align="center" width="140">
            <template #default="scope">
              {{ tool.dateFormat(scope.row.rptTime, "YYYY-MM-DD HH:mm:ss",'YY-MM-DD HH:mm:ss') }}
            </template>
          </el-table-column>

          <el-table-column prop="revTime" label="接收时间" header-align="center" width="140">
            <template #default="scope">
              {{ tool.dateFormat(scope.row.revTime, "YYYY-MM-DD HH:mm:ss",'YY-MM-DD HH:mm:ss') }}
            </template>
          </el-table-column>
          <el-table-column prop="targetsNum" label="目标个数" header-align="center" align="right" width="80" />
          <el-table-column prop="zipAfterLen" label="压缩长度" header-align="center" align="right" width="80" />
          <el-table-column prop="zipBeforeLen" label="原始长度" header-align="center" align="right" width="80" />
        </el-table>
        <el-config-provider :locale="locale">
          <el-pagination v-model:currentPage="queryParams.page" v-model:page-size="queryParams.rows"
            :page-sizes="[10, 15, 20, 25, 100]" :small="state.small" :disabled="state.disabled"
            :background="state.background" layout="total, sizes, prev, pager, next, jumper" :total="state.total"
            style="text-align: center;margin-top: 10px;" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </el-config-provider>
      </div>
    </el-col>
    <el-col :span="10" height="20px">
      <div style="height: calc(100vh - 125px);margin-top: 67px;">
        <textarea v-model="formData.cnnMsg"
          style="resize:none;height: calc(100vh - 195px);width: 100%;border: 1px solid #dbdbdb;" readonly></textarea>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, onMounted } from "vue";
import { ElForm, ElMessage } from 'element-plus';
import { TAicnnQueryParam, TAicnnModel, Dialog, PageResult } from '../../..//types';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import elInput from "element-plus/lib/el-input";
import Moment from "moment";
import TAicnnAction from '../../../api/taicnn';
import tool from '../../../until/tool';

let locale = ref(zhCn)

const queryFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
let pageSize = (localStorage.getItem("PageSize") == null ? 10 : localStorage.getItem("PageSize") as unknown as number) * 1;
const loading = ref(false)
const my_table = ref();
const defaultDate = new Date();

const state = reactive({
  queryParams: { page: 1, rows: pageSize, stationCode: '' } as TAicnnQueryParam,
  total: 0,
  small: false,
  background: false,
  disabled: false,
  dialog: {} as Dialog,
  formData: {} as TAicnnModel,
  tableData: [] as TAicnnModel[],
  defaultTime: [Moment(defaultDate.getTime() - 1000 * 3600 * 24 * 15).format("YYYY-MM-DD 00:00:00"), Moment(defaultDate).format("YYYY-MM-DD 23:59:59"),],
});

const {
  queryParams,
  dialog,
  formData,
  tableData,
} = toRefs(state);

const tableHeight = ref(document.documentElement.clientHeight - 190);
const currentRow = ref()

const handleCurrentRowChange = (val: TAicnnModel | undefined) => {
  currentRow.value = val;
  if (val !== undefined) {
    getPackMessage(val.id);
  }
}

const handleSizeChange = (val: number) => {
  queryParams.value.rows = val;
  queryList();
  localStorage.setItem("PageSize", val.toString());
};

const handleCurrentChange = (val: number) => {
  queryParams.value.page = val;
  queryList();
};

const queryList = () => {
  loading.value = true;
  state.disabled = true;

  if (state.queryParams.stationCode) {
    state.queryParams.stationCode = state.queryParams.stationCode.padStart(10, '0');     //不足10位前面自动补0
  }
  if (state.queryParams.deviceSn) {
    state.queryParams.deviceSn = state.queryParams.deviceSn.padStart(11, '0');     //不足10位前面自动补0
  }

  TAicnnAction.QueryTAicnnList(queryParams.value).then(result => {
    state.disabled = false;
    if (result.status === 200) {
      const { res, flag, error } = result.data;

      if (flag === "1") {
        const pageData = res as PageResult<TAicnnModel[]>;
        state.tableData = pageData.list;
        state.total = pageData.total;

        //把第一个赋给右侧的日志框(默认选中)
        if (state.tableData != null && state.tableData.length > 0) {
          getPackMessage(state.tableData[0].id);
        } else {
          state.formData.cnnMsg = "";
          state.formData = {} as TAicnnModel;
        }
      } else {
        ElMessage.error(error);
      }
    }
  }).catch(error => {
    //请求失败时的操作     
    ElMessage.error(error);
  })
  loading.value = false;
};

const getPackMessage = (id: number) => {
  state.formData.cnnMsg = "";
  TAicnnAction.findAicnnDataById(id).then(result => {
    if (result.status === 200) {
      const { res, flag, error } = result.data;

      if (flag === "1") {
        const pageData = res as TAicnnModel;
        state.formData.cnnMsg = pageData.cnnMsg;
      } else {
        ElMessage.error(error);
      }
    }
  }).catch(error => {
    //请求失败时的操作     
    ElMessage.error(error);
  })
}

const cancel = () => {
  dataFormRef.value.resetFields();
  state.formData = {} as TAicnnModel;
  state.dialog.visible = false;
}

onMounted(() => {
  window.onresize = function () {
    tableHeight.value = document.documentElement.clientHeight - 190
  }

  queryList();
})

const tableRowClick = (row: TAicnnModel) => {
  state.formData = row;
  const textarea = document.getElementById('textarea');
  if (textarea != null) {
    textarea.scrollTop = 0;
  }
};

const queryClick = () => {
  state.queryParams.page = 1;
  queryList();

  if (Object.keys(my_table).length > 0) { if (my_table.value != null) { (my_table.value as any).$refs.bodyWrapper.scrollTop = 0; } }
}
</script>

<style lang="scss" scoped>
.button {
  margin: 10px 0;
}

::v-deep .el-table__body tr.current-row>td {
  color: #fff;
  background: #6db3fa !important;
}

::v-deep .el-textarea__inner {
  border: 0;
  resize: none;
  /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
}
</style>