<template>
  <div>
    <div class="mt-10">
      <el-table
        :data="tableData"
        style="width: 100%"
        size="small"
        border
        highlight-current-row
        @row-click="rowClick">
        <el-table-column
          prop="boxnum"
          label="箱码"
          width="180">
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="备注">
        </el-table-column>
        <el-table-column
          label="操作"
          width="120">
          <template slot-scope="scope">
            <!-- <el-button class="inline-16" type="text" size="small" slot="reference">编 辑</el-button> -->
            <editTemp v-if="data.status == '新建' && tool.checkAuth($route.name,'boxInfo')" class="inline-16" :data="scope.row" @onSuccess="listData"></editTemp>
            <el-popconfirm
              title="确定删除吗？"
              @confirm="deleteRow(scope.row)"
            >
              <el-button v-if="tool.checkAuth($route.name,'boxInfo') && data.status == '新建'"  type="text" size="small" slot="reference">删 除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:16px;text-align:right">
        <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="params.content.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <boxlistmx v-show="tableData.length > 0" ref="mxlist"></boxlistmx>
  </div>
</template>

<script>
import boxlistmx from './logisticsBoxmx.vue'
import editTemp from './edit.vue'
export default {
  components: {
    boxlistmx,
    editTemp
  },
  props:['data'],
  data () {
    return {
      params:{
        "id": 20230109155204,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "sa_logisticsid":this.$route.query.id,
          "where": {
            "condition": ""
          }
        }
      },
      tableData:[],
      total:0,
      currentPage:0,
    }
  },
  methods:{
    async listData () {
      const res = await this.$api.requested(this.params)
      this.tableData = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      res.data.length > 0 ? this.rowClick(res.data[0]):""
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.listData()
    },
    rowClick (row) {
      this.$refs['mxlist'].listData(row.sa_logistics_boxid)
    },
    async deleteRow (row) {
      console.log(row)
      const res = await this.$api.requested({
        "id": "20230109155404",
        "content": {
          "sa_logisticsid":row.sa_logisticsid,
          "sa_logistics_boxids": [row.sa_logistics_boxid]
        }
      })
      this.tool.showMessage(res,()=>{
        this.listData()
      })
    }
  },
  mounted () {
    this.listData()
  }
}

</script>
<style>
</style>