<template>
  <div class="app-container">
    <div class="app-container-search main-bgcolor main-radius">
      <h1 class="">窜货详情</h1>
      <div class="shopping-top">
        <div class="shopping-title fs-16 font-bold">基本信息</div>
        <br/>
        <el-row :gutter="40">
          <el-col :span="6">
            <div>
              <span>批次号：{{info.batchId}}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <span>商品编号：{{info.goodsId}}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <span>商品名称：{{info.goodsName}}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="app-container-list main-bgcolor main-radius shopping">
      <div class="shopping-top">
        <div class="shopping-title font-bold">扫码记录</div>
      </div>

      <!-- 列表 -->
      <el-table v-loading="loading" :data="list">
        <el-table-column label="扫码地点" prop="scanLocation" />
        <el-table-column label="扫码时间" prop="scanTime" >
          <template v-slot="{ row }">
            <span>{{parseTime(row.scanTime)}}</span>
          </template>
        </el-table-column>
        <div slot="empty">
          <EmptyTable />
        </div>
      </el-table>
      <!-- 分页组件 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <el-dialog
    visible.sync="dialogVisible"
    append-to-body
    width="800"
    title="扫码记录">
      <!-- 列表 -->
      <el-table v-loading="loadingRecord" :data="listRecord">
        <el-table-column label="扫码地点" prop="scanLocation" />
        <el-table-column label="扫码时间" prop="scanTime" />
        <div slot="empty">
          <EmptyTable />
        </div>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import { getDiversionRecord , getScanLocations , getFirstScanInfoByUrlAndNumber } from '@/api/identity/diversionRecord'
  import EmptyTable from '@/components/EmptyTable'
  export default{
    components:{
      EmptyTable
    },
    data(){
      return{
        info: {},
        identify: {},
        queryParams: {
          pageNo: 1,
          pageSize: 10,
        },
        total: 0,
        loading: false,
        list: [],
        dialogVisible: false,
        loadingRecord: false,
        listRecord: [],
      }
    },
    created() {
      let id = this.$route.query.id;
      this.getDetail(id);
    },
    methods:{
      async getDetail(id){
        let res = await getDiversionRecord(id);
        if(res.data){
          let scanLocation = res.data.scanLocation.split(" ");
          this.info = res.data;
          let rest = await getScanLocations({
            goodsId: res.data.goodsId,
            batchId: res.data.batchId,
            scanLocation: scanLocation[0],
          });
          if( rest.data ) this.list = rest.data;
        }
      },
      getList(){
        this.loading = true;
        this.list = [];
      },
    },
  }
</script>

<style>
</style>
