<template>
  <div class="dialogSty">
    <el-dialog :title='dialogTitle' :visible.sync='qpztDialog' width='800px' >
      <el-row style="width: 100%;">
        <el-col :span="24">
          <el-table :data="dataList" border style="width: 100%;" v-loading="loading">
            <el-table-column property="fQpbh" label="气瓶编号" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column property="fFtbm" label="阀体编码" width="200" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column property="fCzgg" label="充装规格" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column property="zhlzsj" label="最后流转时间" :show-overflow-tooltip="true"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24" style="display: flex;justify-content: end;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageForm.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageForm.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total">
          </el-pagination>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getGasBottleInfoDetail } from '@/api/gasRecord'
export default {
  name: "qpzt",
  data(){
    return{
      qpztDialog:false,
      dialogTitle:'',
      dataList:[],
      loading:false,
      pageForm:{
        page:1,
        size:10,
        total:0
      },
      form:{
        lx:'',
        qzId:''
      }
    }
  },
  methods:{
    open(type,row){
      console.log('打印row',row);
      let qzstatus = '';
      switch (type){
        case 'wrk':
          qzstatus = '未入库'
          break;
        case 'gqp':
          qzstatus = '过期瓶'
          break;
        case 'kp':
          qzstatus = '空瓶'
          break;
        case 'mp':
          qzstatus = '满瓶'
          break;
        case 'xp':
          qzstatus = '新瓶'
          break;
      }
      let titleString = '气站'+qzstatus+'列表('+row.wczxxfczmc+')';
      this.dialogTitle = titleString;
      this.qpztDialog = true;
      this.form.lx = type;
      this.form.qzId = row.id_;
      this.pageForm.page = 1;
      this.pageForm.size = 10;
      this.getTableList();
    },
   async getTableList(type,qzid){
      this.loading = true;
      let params = {
        current:this.pageForm.page,
        size:this.pageForm.size,
        qzId:this.form.qzId,
        lx:this.form.lx
      }
      await getGasBottleInfoDetail(params).then((res)=>{
        console.log('打印是否触发Res=====>',res);
        const { value}  = res;
        const { records, total} = value;
        this.dataList = records;
        this.pageForm.total = total;
        setTimeout(()=>{
          this.loading = false;
        },1000);
      })
    },
    handleSizeChange(val){
      this.pageForm.size = val;
      this.getTableList();

    },
    handleCurrentChange(val){
      this.pageForm.page = val;
      this.getTableList();
    },

  }

}
</script>

<style lang="scss" scoped>
.dialogSty{
  ::v-deep.el-dialog__header {
    text-align: left;
  }
}

</style>
