<template>
    <el-dialog v-model="visible" title="开始盘点" width="800px" @open="onOpen" @close="onClose">
      <div class="form-row">
        <el-input v-model="device_code" placeholder="设备ID" @keyup.enter="handleAdd" />
        <el-input v-model="check_no" placeholder="设备编码" @keyup.enter="handleAdd" />
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </div>
  
      <el-table :data="deviceList" style="margin-top: 20px">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="id" label="盘点id" width="60" />
        <el-table-column prop="device_code" label="设备ID" />
        <el-table-column prop="check_no" label="设备编码" />
        <el-table-column prop="status_display" label="状态" />
        <!-- <el-table-column prop="productName" label="商品名称" /> -->
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button type="success" size="small" @click="completeScan(row)" >完成盘点</el-button>
            <el-button type="danger" size="small" @click="cancelScan(row)" >取消盘点</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </template>
  
  <script setup lang="ts" >
  import { ref } from 'vue';
  import * as api from '../api';
  import { ElMessage } from 'element-plus';

  const visible = ref(false);
  const device_code = ref('');
  const check_no = ref('');
  const deviceList = ref<any[]>([]);
//   const btflag=ref(true);
  
  const setCheckNo = (val: string) => {
    console.log("val::::::",val)
    check_no.value = val;
};
  const onOpen = () => {
    device_code.value = '';
    // check_no.value = '';
    deviceList.value = [];
  };
  
  const findCheckRecord = (checkNo: string, list: any[]) => {
        console.log("lists::::",list)
        if (!Array.isArray(list)) return null;
        return list.find(item => item.check_no === checkNo);
    };

        

  const handleAdd = async () => {
    if (!device_code.value || !check_no.value) return;

    const payload = {
        device_code: device_code.value,
        check_no: check_no.value,
    };
  
    const res = await api.ScanDevice(payload);
    if (res?.code===2000) {
        const reslist=await api.GetPermission();
        if (reslist?.code===2000) {
            const record = findCheckRecord(check_no.value, reslist.data);
            // console.log("reslist::::",res.data.id)
            // console.log("record::::",record)
            deviceList.value.push({
                ...payload,
                productName: res.data?.productName || '未知商品',
                id: record?.id||0,
                status_display:record?.status_display||'',
                // record,
            });
            device_code.value = '';
        //   check_no.value = '';
        }
    }
  };
  
  const completeScan = async (row: any) => {
    const res=await api.CompleteScan({ check_no: row.check_no });
    if (res?.code===2000) {
        // const payload = {
        //     device_code: device_code.value,
        //     check_no: check_no.value,
        // };
        // const reslist=await api.GetPermission();
        // const record = findCheckRecord(check_no.value, reslist.data.results);
        // deviceList.value.push({
        //     ...payload,
        //     productName: res.data?.productName || '未知商品',
        //     id: record?.id||0,
        //     status_display:record?.status_display||'',
        //     // record,
        // });
        // btflag.value=false;
        ElMessage.success('完成盘点！');
        visible.value = false
    }
  };
  
  const cancelScan = async (row: any) => {
    const res=await api.CancelScan(row.id);
    if (res?.code===2000) {
        console.log("deviceList.value::",deviceList.value)
        deviceList.value = deviceList.value.filter(item => item.id !== row.id);
        console.log("deviceList.value22222::",deviceList.value)
        ElMessage.success('取消盘点成功！');
        visible.value = false
    }
  };
  
  defineExpose({ visible,setCheckNo});

  const onClose = () => {
  check_no.value = '';
    };


  </script>
  
  <style scoped>
  .form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }
  </style>
  