<template>
  <div class="app-container">
    <el-header style="display: flex;align-items: center;justify-content: space-between;background-color: #9ebee5;">
      <div>{{ dataList[0] ||  '等待连接' }}</div>
    </el-header>
    <div style="display: flex;">
      <div style="width: 300px;display: flex;flex-direction: column;align-items: center;padding: 20px 0;">
        <el-avatar :size="100" :src="avatar" />
        <el-button type="primary" style="margin-top: 20px;" @click="startScan" v-show="matchStatus == 0">开始盘点</el-button>
        <el-button type="success" style="margin-top: 20px;" @click="startMatch" v-show="matchStatus == 1">开始匹配</el-button>
        <el-button type="primary" style="margin-top: 20px;" @click="stopTask" v-show="matchStatus == 1">停止盘点</el-button>
        <el-button type="info" style="margin-top: 20px;" @click="resetMatch" v-show="matchStatus == 2">重新盘点</el-button>
      </div>
      <div style="width: 300px;font-size: 18px;padding: 30px 0;">
        <div>
          设备IP：{{ deviceObj.ipAddress || "暂无" }}
        </div>
        <div style="margin-top: 20px;">
          设备端口：{{ deviceObj.port || "暂无" }}
        </div>
        <div style="margin-top: 20px;">
          总条目：{{ scanTotal || '暂无' }}
        </div>
      </div>
      <div style="width: 300px;font-size: 18px;padding: 30px 0;">
        <div>
          所属仓库：{{ deviceObj.warehouseName || "暂无" }}
        </div>
        <div style="margin-top: 20px;">
          所属场景：{{ deviceObj.sceneName || "暂无" }}
        </div>
      </div>
      <div style="flex: 1;">
        <div id="chartsMain" style="height: 300px;padding: 20px 0;"></div>
      </div>
    </div>
    <el-divider style="margin-top: 0;" />

    <el-tabs type="border-card" v-model="activeTabName" @tab-click="changeTab">
      <el-tab-pane label="扫码列表" name="扫码">
        <div>共扫描到：{{ dataList.length > 0 ? dataList.length - 1 : 0 }}条</div>
        <div v-for="(item, index) in dataList" :key="index" style="text-align: center;">
          <div v-show="index != 0">
            {{ item }}
          </div>
        </div>
        <div v-show="dataList.length == 1">
          <el-empty description="暂无数据" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="匹配列表" name="匹配" :disabled="matchStatus < 2">
        <el-select
          v-model="status"
          class="m-2"
          placeholder="Select"
          size="large"
          style="width: 200px"
          @change="changeStatus"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div style="margin: 20px 0">
          <el-text v-show="status == 0">当前为正常数据</el-text>
          <el-text v-show="status == 1">当前为未扫描到，但数据库里有的数据</el-text>
          <el-text v-show="status == 2">当前为已扫描到，但数据库里没有的数据</el-text>
        </div>
        <el-table :data="matchData" border empty-text="暂无数据" v-if="status == 0 || status == 1">
          <el-table-column prop="rkPcode" label="存放位置" />
          <el-table-column prop="realQty" label="数量" />
          <el-table-column prop="count" label="操作" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="primary" icon="View" @click="handleView(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-table :data="matchData" border empty-text="暂无数据" v-if="status == 2">
          <el-table-column prop="rkPcode" label="存放位置" />
        </el-table>
        <div style="margin-top: 20px;width: 100%;display: flex;align-items: center;justify-content: flex-end;">
          <div style="margin-right: 20px;color: #606266;">共 {{ matchTotal }}条</div>
          <el-pagination background layout="prev, pager, next" :total="matchTotal" @change="chagePage" />
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog v-model="taskView" title="详情" width="85%" draggable>
      <el-table :data="viewData" border empty-text="暂无数据">
        <el-table-column prop="sapNo" label="订单" />
        <el-table-column prop="wlNo" label="物料号" />
        <el-table-column prop="wlMs" label="物料描述" />
        <el-table-column prop="realQty" label="数量">
          <template #default="scope">{{ scope.row.realQty }}({{ scope.row.dw }})</template>
        </el-table-column>
        <el-table-column prop="xmMs" label="项目名称" />
        <el-table-column prop="gysMc" label="供应商" />
        <el-table-column prop="cangkuName" label="所属仓库" />
        <el-table-column prop="rkTime" label="入库时间">
          <template #default="scope">{{ parseTime(scope.row.rkTime, '{y}-{m}-{d}') }}</template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="taskView=false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="AutoInventory">
import { ElLoading } from 'element-plus';
import { getTaskCount, getScan, getMatch, getChart, stopScan, getScanResult, getStockList } from "@/api/Inventory/autoInventory"
import { ref, reactive, onMounted, onBeforeUnmount, markRaw } from "vue";
import avatar from "@/assets/images/avatar.jpg"
import { useRoute } from 'vue-router';
import * as echarts from 'echarts';

const taskId = ref(null)
const taskView = ref(false)
const viewData = ref([])

const handleView = (row) => {
  // let obj = {
  //   pageNum: 1,
  //   pageSize: 100,
  //   pcode: row.rkPcode
  // }
  console.log(row.rkPcode)
  getStockList(row.rkPcode).then(res => {
    console.log(res)
    viewData.value = res.data
    taskView.value = true
  })
}

// 获取总条数
const scanTotal = ref("")
const getTotal = () => {
  let obj = {
    taskId: taskId.value
  }
  getTaskCount(obj).then(res => {
    scanTotal.value = res.data
  })
}
// 开始盘点
const startScan = async (formEl) => {
  let obj = {
    deviceId: deviceObj.value.deviceId
  }
  getScan(obj).then(res => {
    console.log('开始盘点')
    localStorage.setItem("scanTotal", scanTotal.value)
  })
}

let chartInt = ref("")
const status = ref(0)  // 盘点状态
const statusList = ref(
  [
    {
      label: '正常',
      value: 0
    },
    {
      label: '未扫到',
      value: 1
    },
    {
      label: '无数据',
      value: 2
    }
  ]
)  // 盘点状态
const isSend = ref(false) // 是否正在发送
const activeTabName = ref("扫码") // tab高亮
const matchStatus = ref(0) //是否可以点击匹配列表
const matchData = ref([])     // 匹配列表
const isConnect = ref(true)   // 是否自动重新重连websocket
const deviceObj = ref({
  deviceId: 0,
  ipAddress: 0,
  port: 0,
  warehouseId: 0,
});
const matchTotal = ref(0);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
let loadingInstance = null;  //


const warehouseList = ref([
  {value: 1, label: '1号仓库'},
  {value: 2, label: '2号仓库'},
  {value: 3, label: '3号仓库'},
  {value: 4, label: '4号仓库'},
  {value: 5, label: '5号仓库'}
]);


// 开始匹配
const startMatch = () => {
  queryParams.value.pageNum = 1
  status.value = 0
  activeTabName.value = "匹配"
  getMatchData()
}
// 重新盘点
const resetMatch = () => {
  activeTabName.value = "扫码"
  matchStatus.value = 0
  scanTotal.value = ""
  let text = dataList.value[0]
  dataList.value = [text]
}
// 开始匹配/结束盘点/获取盘点列表
const getMatchData = () => {
  let list = JSON.parse(JSON.stringify(dataList.value))
  let arr = list.splice(1)
  let obj = {
    ids: arr,
    deviceId: deviceObj.value.deviceId,
    taskId: taskId.value
  }
  getMatch(obj).then(res => {
    let text = dataList.value[0]
    dataList.value = [text]
    localStorage.removeItem("scanTotal")
    localStorage.setItem("dataList", JSON.stringify(dataList.value))
    matchStatus.value = 2
    getResultList()
    // 渲染图表
    let chartObj = {
      ids: arr,
    }
    getChart(chartObj).then(res => {
      console.log(res.data)
      chartInt.value.setOption({
        title: {
          text: '本次共计盘点到' + res.data.total + "个库位(库位货品数如下表)",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: res.data.xdata,
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: res.data.ydata,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      })
    })
  })
  
}
// 匹配结果
const getResultList = () => {
  let obj = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    status: status.value,
    taskId: taskId.value
  }
  getScanResult(obj).then(res => {
    matchData.value = res.rows
    matchTotal.value = res.total
  })
}


// 切换tab
const changeTab = (tab) => {
  if (tab.props.label == '匹配列表') {
    queryParams.value.pageNum = 1
    status.value = 0
    getResultList()
  }
}
// 点击翻页
const chagePage = (e) => {
  queryParams.value.pageNum = e
  getResultList()
}
// 切换盘点状态
const changeStatus = function (e) {
  queryParams.value.pageNum = 1
  status.value = e
  getResultList()
}


// websocket连接
let webSocketPort = import.meta.env.VITE_APP_BASE_API + '/ws/socket'
const dataList = ref([]); // 用于展示从 WebSocket 获取的消息
let ws = null; // WebSocket 实例
let reconnectTimeout = null; // 重连超时控制
// 建立 WebSocket 连接
const connectWebSocket = () => {
  ws = new WebSocket(webSocketPort); // 替换为实际的 WebSocket 服务 URL

  ws.onopen = () => {
    console.log("WebSocket 连接已建立");
    send()
  };

  ws.onmessage = (event) => {
    console.log(event.data); // 接收到服务器推送的消息
    if (localStorage.getItem("scanTotal")) {
      scanTotal.value = localStorage.getItem("scanTotal")
      dataList.value = JSON.parse(localStorage.getItem("dataList"))
      console.log("获取", dataList.value)
    }
    if (!(dataList.value.some(e => e == event.data))) {
      if (dataList.value.findIndex(item => item.includes("连接")) >= 0 && event.data.includes("连接")) {
        let signIndex = dataList.value.findIndex(item => item.includes("连接"))
        dataList.value[signIndex] = event.data
      } else {
        dataList.value.push(event.data)
      }
      localStorage.setItem("dataList", JSON.stringify(dataList.value))
      console.log("存储", dataList.value)
    }
    if (dataList.value.length > 1) {
      matchStatus.value = 1
    }
  };

  ws.onerror = (error) => {
    console.error("WebSocket 发生错误", error);
  };

  ws.onclose = (event) => {
    console.log("WebSocket 连接已关闭", event.code);
    if (isConnect.value) {
      handleReconnect(); // WebSocket 连接关闭时尝试重连
    }
  };
};
// 处理 WebSocket 连接断开后的重连
const handleReconnect = () => {
  // 如果已经在重连，避免重复重连
  if (reconnectTimeout) {
    return;
  }
  reconnectTimeout = setTimeout(() => {
    console.log("正在尝试重新连接 WebSocket...");
    connectWebSocket();
    reconnectTimeout = null; // 重连后清除重连超时
  }, 5000); // 5 秒后重连
};

// 获取缓存数据
const deviceInfo = localStorage.getItem("deviceInfo")
if (deviceInfo) {
  deviceObj.value = JSON.parse(deviceInfo)
  loadingInstance = ElLoading.service({
    background: 'rgba(0, 0, 0, 0.7)',
    text: '正在连接设备...',
  });
  connectWebSocket(); // 组件加载时连接 WebSocket
}

// 使用 Websocket 发送消息
const send = () => {
  let obj = {
    deviceId: deviceObj.value.deviceId,
    ip: deviceObj.value.ipAddress,
    port: deviceObj.value.port  
  }
  loadingInstance.close();
  isSend.value = true
  ws.send(JSON.stringify(obj))
}

// 停止盘点
const stopTask = () => {
  let obj = {
    deviceId: deviceObj.value.deviceId
  }
  stopScan(obj).then(res => {
    console.log("停止盘点")
    matchStatus.value = 0
    let text = dataList.value[0]
    dataList.value = [text]
    localStorage.removeItem("scanTotal")
    localStorage.setItem("dataList", JSON.stringify(dataList.value))
  })
}
const route = useRoute()

onMounted(() => {
  chartInt.value = markRaw(echarts.init(document.getElementById('chartsMain')))
  taskId.value = route.query.taskId
  getTotal()
  // chartInt.value.setOption({
  //     title: {
  //       text: '本次共计盘点到' + "10个库位(库位货品数如下表)",
  //     },
  //     tooltip: {
  //       trigger: 'axis',
  //       axisPointer: {
  //         type: 'shadow'
  //       }
  //     },
  //     grid: {
  //       left: '3%',
  //       right: '4%',
  //       bottom: '3%',
  //       containLabel: true
  //     },
  //     xAxis: {
  //       type: 'category',
  //       // data: res.data.xdata,
  //       data: ['G02-0102', 'G02-0101', 'G02-0103', 'G02-0104', 'G02-0105', 'G02-0106', 'G02-0107'],
  //       axisTick: {
  //         alignWithLabel: true
  //       }
  //     },
  //     yAxis: {
  //       type: 'value'
  //     },
  //     series: [
  //       {
  //         // data: res.data.ydata,
  //         data: [120, 200, 150, 80, 70, 110, 130],
  //       type: 'bar',
  //         showBackground: true,
  //         backgroundStyle: {
  //           color: 'rgba(180, 180, 180, 0.2)'
  //         }
  //       }
  //     ]
  //   })
});

onBeforeUnmount(() => {
  isConnect.value = false
  if (ws) {
    ws.close(); // 组件销毁时关闭 WebSocket 连接
    ws = null
  }
});
</script>

<style scoped>
.text{
  font-size: 18px;
  padding: 30px 0;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>