<template>
  <div>
    <div class="shipReport">
      <div class="title">船舶动态表</div>
      <div class="top">
        <el-input
          class="el-input"
          placeholder="请输入品名"
          v-model="input"
          clearable
        >
        </el-input>
        <el-button type="primary" class="btn" @click="onclick">
          <i class="el-icon-search"></i>查询
        </el-button>
        <el-button type="primary" class="btn" @click="getPdfs()">
          <i class="el-icon-download"></i>下载PDF
        </el-button>
      </div>
      <table-item :tableData="tableData" :col="col" id="pdfDom"> </table-item>
      <table
        border="0"
        cellpadding="10"
        cellspacing="0"
        style="
          margin: auto;
          font-size: 21px;
          font-family: FangSong;
          line-height: 50px;
        "

        width="100%"
        class="tablePart0"
      >
        <tr>
          <!-- <td>{{stockString}}</td> -->
          <td>
            <span v-for="item in stockStringArr" :class="item.class" :key="item.value">{{item.value}}</span>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import tableItem from "./tableItem";
export default {
  name: "TableView",
  components: {
    tableItem,
  },
  data() {
    return {
      htmlTitle: "船舶动态表",
      // 树型结构表头数据
      col: [
        {
          prop: "materialType",
          label: "矿种",
        },
        {
          prop: "pm",
          label: "品名",
        },
        {
          prop: "portName",
          label: "港口名称",
        },
        {
          prop: "tonnage",
          label: "下游港口吨位",
        },
        {
          prop: "tonnage1",
          label: "二层船吨位",
        },
        {
          label: "未到闸船舶",
          children: [
            {
              prop: "capacity1",
              label: "船名",
            },
            {
              prop: "capacityNumber1",
              label: "吨位",
            },
            {
              prop: "locationValue1",
              label: "位置",
            },
            {
              prop: "outPortTime1",
              label: "离港时间",
            },
          ],
        },
        {
          label: "等闸船舶",
          children: [
            {
              prop: "capacity2",
              label: "船名",
            },
            {
              prop: "capacityNumber2",
              label: "吨位",
            },
            {
              prop: "locationValue2",
              label: "位置",
            },
            {
              prop: "outPortTime2",
              label: "离港时间",
            },
          ],
        },
        {
          label: "已过闸船舶",
          children: [
            {
              prop: "capacity3",
              label: "船名",
            },
            {
              prop: "capacityNumber3",
              label: "吨位",
            },
            {
              prop: "locationValue3",
              label: "位置",
            },
            {
              prop: "outPortTime3",
              label: "离港时间",
            },
          ],
        },
        {
          label: "到港待卸船舶",
          children: [
            {
              prop: "capacity4",
              label: "船名",
            },
            {
              prop: "capacityNumber4",
              label: "吨位",
            },
            {
              prop: "locationValue4",
              label: "位置",
            },
            {
              prop: "outPortTime4",
              label: "离港时间",
            },
            {
              prop: "dgsj",
              label: "到港时间",
            },
          ],
        },
      ],
      // 表格数据

      tableData: [],
      input: "",
      //万州港库存信息
      stockString:null,
      stockStringArr:[]
    };
  },
  created() {},
  mounted() {
    this.initialization();
    this.getStockString();
    // console.log(this.$refs.excelDom);
  },
  methods: {
    onclick() {
      this.axios
        .post("/api/v1/tms/selectAllShipDynamaics?con=" + this.input)
        .then((res) => {
          if (res.data.code == "200") {
            this.tableData = res.data.data;
            console.log("aaad" + res.data.data);
          } else if (res.data.data == "暂时没有船舶动态") {
            this.tableData = [];
          }
        });
    },
    initialization() {
      this.axios.post("/api/v1/tms/selectAllShipDynamaics").then((res) => {
        if (res.data.code == "200") {
          this.tableData = res.data.data;
          console.log(this.tableData);
        } else {
          this.$message({
            type: "warning",
            message: res.data.data,
          });
        }
      });
    },
    getStockString(){
      let that=this;
      this.axios.post("/api/v1/wmsh/getLoadPortStockList?apiId=158&i=").then((res)=>{
        console.log(res);
        if(res.status=="200"){
          let resultActualInstallations = 0;
          res.data.data.list.forEach((e) => {
            resultActualInstallations = resultActualInstallations + e.gmTonnage;
          }); 

          this.stockString +='万港库存'+ resultActualInstallations.toFixed(2) + "吨：";
          this.stockStringArr.push({
            class:"normal",
            value:'万港库存'+ resultActualInstallations.toFixed(2) + "吨："
          });

          let materialName=res.data.data.list[0].materialName;
          this.stockStringArr.push({
            class:"black",
            value:materialName+res.data.data.list[0].totalTonnage+"吨："
          })
          this.stockString+=(materialName+res.data.data.list[0].totalTonnage+"吨 ");

          res.data.data.list.forEach((e) => {
            if(e.materialName==materialName){
              this.stockString+=(" “"+e.resultForeignShipName+"”"+e.gmTonnage+"吨 ");
               this.stockStringArr.push({
                  class:"normal",
                  value:" “"+e.resultForeignShipName+"”"+e.gmTonnage+"吨 "
                });
            }else{
              materialName=e.materialName;
              this.stockString+=(materialName+res.data.data.list[0].totalTonnage+"吨 ");
              this.stockString+=("；"+materialName+e.totalTonnage+ "吨："+" “"+e.resultForeignShipName+"”"+e.gmTonnage+"吨 ");
               this.stockStringArr.push({
                class:"black",
                value:"；"+materialName+e.totalTonnage+ "吨："
              })
              this.stockString+=("；"+materialName+e.totalTonnage+ "吨："+" “"+e.resultForeignShipName+"”"+e.gmTonnage+"吨 ");
               this.stockStringArr.push({
                class:"normal",
                value:" “"+e.resultForeignShipName+"”"+e.gmTonnage+"吨 "
              })
            }
          });
          console.log("arr:",this.stockStringArr);
        }else{

        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.shipReport {
  margin-top: 20px;
  margin-left: 20px;
  .top {
    padding: 1.25rem 0.375rem;
    .el-input {
      width: 20%;
      margin-right: 1.25rem;
    }
  }
  .title {
    display: flex;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
  }
  .black{
      font-weight: 1000;
  }
}
</style>
