<template>
  <div class="container">
    <div class="searchSty">
      <el-form :inline="true"  :model="queryForm"
               class="demo-form-inline">
          <el-form-item label="充装气站:">
            <el-select v-model="queryForm.qzId" placeholder="请选择">
              <el-option v-for="item in qzOption" :key="item.id_" :label="item.f_czmc" :value="item.id_">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="气瓶编号:">
            <el-input v-model="queryForm.qpbh"  clearable placeholder="请输入气瓶编号"></el-input>
          </el-form-item>
          <el-form-item label="充装次数:">
            <div  style="display: flex;">
              <el-select v-model="queryForm.timeType"  placeholder="请选择">
                <el-option v-for="item in timeTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-input v-model="queryForm.num" style="margin-left: 10px" @input="handleInput" placeholder="多少次"></el-input>
              <div style="margin-left: 10px">次</div>
            </div>
          </el-form-item>
          <el-form-item label="充装时间:">
            <el-date-picker
              value-formate="yyyy-MM-dd"
              formate="yyyy-MM-dd"
              @change="handleTimeChange"
              v-model="queryForm.fillTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              placeholder="请选择充装时间">
            </el-date-picker>
          </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="el-icon-refresh"
                     style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
                     @click="handleReset" plain>重置
          </el-button>
          <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
                     icon="el-icon-search" @click="handleSearch"> 查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableSty">
      <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="F_qpbh"
          label="气瓶编号"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="F_ssczmc"
          label="充装气站"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="cs"
          label="条码充装总次数"
          min-width="120">
          <template slot-scope="scope">
            <span style="color: #2f54eb;cursor: pointer" @click="handleCsClick(scope.row)">{{scope.row.cs}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" style="display:flex; justify-content: end;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageParams.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageParams.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageParams.total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <el-dialog v-if="dialogForm.showDialog" title="充装记录" :visible.sync="dialogForm.dialogFormVisible" width="1000px">
      <el-table
        :data="recordDataList"
        style="width: 100%">
        <el-table-column
          prop="fFormDataRev"
          label="充装枪号"
          min-width="80">
        </el-table-column>
        <el-table-column
          prop="fQpbh"
          label="充装工位"
          min-width="160">
        </el-table-column>
        <el-table-column
          prop="fQpbh"
          label="气瓶编号"
          min-width="160">
        </el-table-column>
        <el-table-column
          prop="fQptm"
          label="二维码"
          min-width="120">
          <templaate slot-scope="scope">
            <span>{{scope.row.fQptm}}</span>
          </templaate>
        </el-table-column>
        <el-table-column
          prop="fQpgg"
          label="气瓶规格"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="fCzjz"
          label="充装介质"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="fCzqz"
          label="充装前"
          min-width="80">
        </el-table-column>
        <el-table-column
          prop="fCzhsjczl"
          label="充装量"
          min-width="80">
        </el-table-column>
        <el-table-column
          prop="fCzhz"
          label="充装后"
          min-width="80">
        </el-table-column>
        <el-table-column
          prop="fCzsj"
          label="充装开始时间"
          min-width="160">
        </el-table-column>
        <el-table-column
          prop="fCzjssj"
          label="充装结束时间"
          min-width="160">
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" style="display: flex; justify-content: end;margin-top: 10px; ">
          <el-pagination
            @size-change="handleDialogSizeChange"
            @current-change="handleDialogCurrentChange"
            :current-page.sync="dialogForm.page"
            :page-size="dialogForm.size"
            layout="prev, pager, next, jumper"
            :total="dialogForm.total">
          </el-pagination>
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
import {getOverClockingTableData,getPlantStationPort,fillRecordDataInfo} from '@/api/earlyWarningManage'
export default {
  name: "index",
  data(){
    return{
      tableData:[],
      recordDataList:[],
      qzOption:[],
      timeTypeOptions:[
        {
          label:'>=',
          value:'1'
        },
        {
          label:'<=',
          value:'2'
        },
        {
          label:'=',
          value:'3'
        }
      ],
      queryForm:{
        lastValidValue:'',
        qzId:'',
        qpbh:'',
        timeType:'1',
        num:2,
        fillTime:[new Date().toISOString().substr(0, 10),new Date().toISOString().substr(0, 10)],
        startDate:new Date().toISOString().substr(0, 10),
        endDate: new Date().toISOString().substr(0, 10)
      },
      pageParams:{
        size:10,
        page:1,
        total:0
      },
      dialogForm:{
        showDialog:false,
        dialogFormVisible:false,
        qpbh:'',
        startDate:'',
        endDate:'',
        size:10,
        page:1,
        total:0
      }
    }
  },
  mounted() {
    this.getStationList();
    this.getTableList();
    console.log('打印this.queryParams',this.queryForm.fillTime);
  },
  methods:{
    async getTableList(){
      let params ={
        times:this.queryForm.num?this.queryForm.num:2,
        operator:this.queryForm.timeType?this.queryForm.timeType:'1',
        startDate:this.queryForm.startDate?this.queryForm.startDate:'',
        endDate:this.queryForm.endDate?this.queryForm.endDate:'',
        size:this.pageParams.size,
        current:this.pageParams.page,
        fQpbh:this.queryForm.qpbh,
        fSsczid:this.queryForm.qzId?this.queryForm.qzId:''
      }
      await getOverClockingTableData(params).then((res)=>{
        const { value } = res;
        const { records, total} = value;
        this.tableData = records;
        this.pageParams.total = total;
        console.log('打印table黎贝澳的数据====》',res);
      })
    },
    async getStationList(){
      let params = {
        pageBean:{
          page:1,
          pageSize:10,
          showTotal:true
        }
      }
      await getPlantStationPort(params).then((res)=>{
        const {rows} = res;
        this.qzOption = rows;
      })
    },
    async getfillRecord(){
      let params ={
        size:this.dialogForm.size,
        current:this.dialogForm.page,
        fQpbh:this.dialogForm.qpbh,
        startDate:this.queryForm.startDate,
        endDate:this.queryForm.endDate
      }
      await fillRecordDataInfo(params).then((res)=>{
        console.log('打印res',res);
        const { value } = res;
        const { records,total} = value;
        this.recordDataList = records;
        this.dialogForm.total = total;
      })
    },
    //次数输入的事件
    handleInput(value){
      const integerRegex = /^[1-9]\d*$|^0$/;
      if (integerRegex.test(value)) {
        this.queryForm.lastValidValue = value;
        this.queryForm.num = value;
      } else {
        this.$nextTick(() => {
          this.queryForm.num = this.queryForm.lastValidValue;
        });
      }
    },
    //重置事件
    handleReset(){},
    //查询事件
    handleSearch(){
      this.getTableList();
    },
    //充装时间改变的事件
    handleTimeChange(val){
      if(val){
       let startTime = this.parseTime(val[0],'{y}-{m}-{d}');
       let endTime = this.parseTime(val[1],'{y}-{m}-{d}');
       this.queryForm.endDate = endTime;
       this.queryForm.startDate = startTime;
        console.log('打印qu',endTime,startTime)
     }else{
        this.queryForm.fillTime=[new Date().toISOString().substr(0, 10),new Date().toISOString().substr(0, 10)];
        this.queryForm.startDate=new Date().toISOString().substr(0, 10);
        this.queryForm.endDate=new Date().toISOString().substr(0, 10);
     }
    },
    //table表格的多选框事件
    handleSelectionChange(){},
    //分页的size改变事件
    handleSizeChange(val){
      this.pageParams.size = val;
      this.handleSearch();
    },
    //分页的page改变事件
    handleCurrentChange(val){
      this.pageParams.page = val;
      this.handleSearch();
    },
    //次数点击事件
    handleCsClick(row){
      console.log('打印row',row);
      this.dialogForm.qpbh = row.F_qpbh;
      this.dialogForm.showDialog = true;
      this.$nextTick(()=>{
        this.dialogForm.dialogFormVisible = true;
        this.getfillRecord();
      })
    },
    //弹窗size改变事件
    handleDialogSizeChange(val){
      this.dialogForm.size = val;
      this.getfillRecord();
    },
    //弹窗page改变事件
    handleDialogCurrentChange(val){
      this.dialogForm.page = val;
      this.getfillRecord();
    },


  }
}
</script>

<style lang="scss" scoped>
.container{
  height: 100%;
  .searchSty {
    background: #ffffff;
    padding: 0 20px;
    padding-top: 20px;
  }
  .tableSty{
    padding: 20px;
    margin-top: 20px;
    background: #ffffff;
  }
}

</style>