<template>
  <div class="viewpdf-box">
    <el-row :gutter="20" style="width: 100%">
      <el-col :span="6" v-for="(item, index) in data" :key="index">
        <div class="viewpdf-flex">
          <div class="click_container" @click="detailShow(item.list)">
            <img src="@/assets/KHCFDC_PDF.png" alt="" />
            <div class="pdf-title">{{ item.dcCh }}</div>
            <div class="pdf-title">{{ item.dcPl }}</div>
            <div class="pdf-title">{{ item.qy }}</div>
            <div class="pdf-title">{{ item.dwh }}</div>
          </div>
          <VxeCheckbox class="pdf-check" v-model="item.selected" @change="(checked)=>{checkboxChange(checked,item)}" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getBfwz} from "@/api/jhzxgl/ypp";
import {EventBus} from "@/event-bus";
import Container from "@/views/zyjhzx/components/Container.vue";
import {ppBGong,wbfList} from "@/api/zyjh";

export default {
  name: "BFangShow",
  components: {Container},
  data(){
    return {
      zyq:'',
      data:[],
      dwxx:[],
      dataInitParam:{}
    }
  },
  created(){
    this.zyq=this.$route.query.zyq;
    EventBus.$on('bfSave', params => {
      this.save()
    })
    this.ljShow()
  },
  methods:{
    save(){
      const saveList=[]
      this.data.forEach(item=>{
        if(item.selected){
          const data={
            id:item.id,
            dcCh:item.dcCh,
            dcPl:item.dcPl,
            dcFd:item.dcFd,
            ljList:[]
          }
          item.ljList.forEach(lj=>{
            const _lj={
              id:lj.id,
              qq:item.qy,
              dw:item.dwh,
              ppzt:'02'
            }
            data.ljList.push(_lj)
          })
          saveList.push(data)
        }
      })
      ppBGong(saveList).then((res)=>{
        this.$message.success('成功')
        this.initData()
      })
    },
    detailShow(data){
      console.log(data)
    },
    checkboxChange(checked,item){
      console.log(checked,item)
      return checked;
    },
    ljShow(){
      this.initDw()
      EventBus.$on('bfSearch', params => {
        this.dataInitParam=params;
        this.initData()
      })
    },
    initData(){
      const params=this.dataInitParam;
      if(!params.dcCh){
        this.$message.warning('请选择船号')
        return;
      }
      params.zyq=this.zyq
      wbfList(params).then((res) => {
        res.data.forEach(item => {
          item.selected=false
          for (const dw of this.dwxx) {
            if (item.dwxxId===dw.id){
              item.qy=dw.qy
              item.dwh=dw.dwh
            }
          }
        })
        this.data=res.data.filter(item=>item.ljList.length>0)
      })
    },
    initDw(){
      getBfwz().then((res)=>{
        this.dwxx=res.data
      })
    }
  }
}
</script>

<style scoped>
.viewpdf-box {
  width:81%;
  position: absolute;
  top:78px;
  left:18%;
  border: none;
  margin: 0;
  display: flex;
  align-items: stretch;
  height: calc(100vh - 105px);
  .viewpdf-flex {
    width: 100%;
    border: #00cdff 1px solid;
    display: flex;
    align-items: center;
    margin-top: 4%;
    padding: 10px;
    .click_container{
      width: 85%;
      display: flex;
      align-items: center;
      font-size: 18px;
      color: #fff;
      cursor: pointer;
      img {
        width: 50px;
      }
      .pdf-title {
        margin-left: 5px;
      }
    }
  }
}
</style>
