<template>
  <div class="app-container">
    <div style="margin-bottom: 20px;display: flex;align-items: center;justify-content: space-between;">
      <div>
        {{ '盘点结果' }}
        <el-text v-show="dialogParams.status == 0">(当前为正常数据)</el-text>
        <el-text v-show="dialogParams.status == 1">(当前为未扫描到，但数据库里有的数据)</el-text>
        <el-text v-show="dialogParams.status == 2">(当前为已扫描到，但数据库里没有的数据)</el-text>
      </div>
      <el-button
        type="warning"
        plain
        icon="Download"
        @click="handleExport"
      >导出</el-button>
    </div>


    <el-tabs v-model="activeTabs" type="border-card" @tab-change="handleQueryInfo">
      <el-tab-pane v-for="item in statusList" :label="item.label" :name="item.value">
        <el-table :data="dialogData" border empty-text="暂无数据" v-if="dialogParams.status == 0 || dialogParams.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="dialogData" border empty-text="暂无数据" v-if="dialogParams.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;">共{{ dialogTotal }}条</div>
          <el-pagination background layout="prev, pager, next" :total="dialogTotal" @change="chageDialogPage" />
        </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="InventoryResult">
import { getScanResult, getStockList } from "@/api/Inventory/autoInventory";
import { onMounted, ref } from "vue";
import { useRoute } from 'vue-router';

const { proxy } = getCurrentInstance();

const statusList = ref(
  [
    {
      label: '正常',
      value: 0
    },
    {
      label: '未扫到',
      value: 1
    },
    {
      label: '无数据',
      value: 2
    }
  ]
)  // 盘点状态
const activeTabs = ref(0)
const dialogParams = ref({
  status: 0,
  pageNum: 1,
  pageSize: 10,
  taskId: ""
})
const dialogData = ref([])
const dialogTotal = ref(0)

const getHistoryInfo = () => {
  getScanResult(dialogParams.value).then(res => {
    dialogData.value = res.rows
    dialogTotal.value = res.total
  })
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('/MatchScan/export', {taskId: dialogParams.value.taskId}, `盘点结果_${new Date().getTime()}.xlsx`)
}

const handleQueryInfo = (tab) => {
  dialogParams.value.status = tab
  dialogParams.value.pageNum = 1
  getHistoryInfo()
}
const chageDialogPage = (e) => {
  dialogParams.value.pageNum = e
  getHistoryInfo()
}


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


const route = useRoute()
onMounted(() => {
  dialogParams.value.taskId = route.query.taskId
  getHistoryInfo()
})
</script>

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