<template>
  <div style="display: flex;flex-direction: column;" v-loading="loading">


    <el-row :gutter="6" type="flex" align="middle">
      <el-col :span="1.5">
        <label >船舶名称</label>
      </el-col>
      <el-col :span="4">
        <el-select v-model="searchVesselName" filterable placeholder="请输入船舶名称" style="width: 100%" clearable
                   @change="setVesselDetail"
        >
          <el-option
            v-for="item in vesselList"
            :key="item.vesselName"
            :label="item.vesselName"
            :value="item.vesselName"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="1.5">
        <label >航次号</label>
      </el-col>
      <el-col :span="4">
        <el-input v-model="searchVoyageNo" placeholder="请输入航次号" id="voyageNo"></el-input>
      </el-col>
      <el-col :span="1.5">
        <label >备案号</label>
      </el-col>
      <el-col :span="4">
        <el-input v-model="searchGdsSeqno" placeholder="请输入备案号" id="gdsSeqno"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="searchByVesselName">查询</el-button>
      </el-col>

    </el-row>


    <el-table ref="table" style="flex: 1;" height="70vh" :data="list" @select="select" @select-all="selectAll"
      @selection-change="selectionChange" @current-change="handleCurrentChange" highlight-current-row border stripe>

      <el-table-column type="selection" width="55" align="center" :selectable="selectable" />

      <el-table-column type="expand" label="更多">
        <template slot-scope="scope">
          <el-descriptions class="desc-table" size="mini" :column="5" border>
            <el-descriptions-item label="仓库名称">
              <WarehouseName :stockCode="scope.row.stockCode" />
            </el-descriptions-item>
            <el-descriptions-item label="HS编号">{{ scope.row.hsCode }}</el-descriptions-item>
            <el-descriptions-item label="自然序号">{{ scope.row.cargoNumber }}</el-descriptions-item>
            <el-descriptions-item label="商品料号">{{ scope.row.itemNumber }}</el-descriptions-item>
            <el-descriptions-item label="电子账册项号">{{ scope.row.bookNumber }}</el-descriptions-item>
            <el-descriptions-item label="报关单号">{{ scope.row.customsNo }}</el-descriptions-item>
            <el-descriptions-item label="核注清单号">{{ scope.row.listNumber }}</el-descriptions-item>
            <el-descriptions-item label="有效期至">{{ scope.row.expiryDate }}</el-descriptions-item>
            <el-descriptions-item label="规格类型品质">{{ scope.row.cargoSpec }}</el-descriptions-item>
            <el-descriptions-item label="原产国">{{ scope.row.originCountry }}</el-descriptions-item>
            <el-descriptions-item label="船舶名称">{{ scope.row.vesselName }}</el-descriptions-item>
            <el-descriptions-item label="航次号">{{ scope.row.voyageNo }}</el-descriptions-item>
            <el-descriptions-item label="备案号">{{ scope.row.gdsSeqno }}</el-descriptions-item>


          </el-descriptions>
        </template>
      </el-table-column>

      <el-table-column label="单据编号" prop="billNumber">
        <template slot-scope="scope">
          <div class="nomal-text">{{ scope.row.billNumber }}</div>
        </template>
      </el-table-column>
      <el-table-column label="货物" prop="cargoName">
        <template slot-scope="scope">
          <div class="nomal-text">{{ scope.row.cargoName }}</div>
        </template>
      </el-table-column>
      <el-table-column label="仓位" prop="stockName">
        <template slot-scope="scope">
          <div class="nomal-text">
            <WarehouseName :stockCode="scope.row.stockCode" />-{{ scope.row.stockName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="件数" prop="cargoNum">
        <template slot-scope="scope">
          <div class="nomal-text">{{ scope.row.cargoNum }}</div>
        </template>
      </el-table-column>
      <el-table-column label="重量" prop="cargoWt">
        <template slot-scope="scope">
          <div class="nomal-text">{{ scope.row.cargoWt }}</div>
        </template>
      </el-table-column>
      <el-table-column label="体积" prop="cargoVol">
        <template slot-scope="scope">
          <div class="nomal-text">{{ scope.row.cargoVol }}</div>
        </template>
      </el-table-column>
      <el-table-column label="价值" prop="cargoValue">
        <template slot-scope="scope">
          <div class="nomal-text">{{ scope.row.cargoValue }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="stock-btns">
      <el-button @click="$emit('cancel')">取消</el-button>
      <el-button type="primary" @click="save">确认</el-button>
    </div>
  </div>
</template>

<script>
import { listCkstock } from "@/api/jxc/ckstock";
import { listVessel } from '@/api/jxc/vessel'


export default {
  name: 'StockChoose',
  props: {
    custId: {
      type: String | Number,
      default: ''
    },
    disableItems: {
      type: Array,
      default() {
        return [];
      }
    },
    single: {
      type: Boolean,
      default: false,
    },
    singleItem: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      list: [],
      selectedList: [],
      loading: false,
      searchVesselName: '', // 添加搜索船舶名称属性
      searchVoyageNo: '',
      searchGdsSeqno: '',


    }
  },
  watch: {
    custId() {
      this.getList();
    }
  },
  created() {
    this.getList();
    this.getVesselList();
    this.searchByVesselName();

  },
  methods: {
    getVesselList() {
      let param = {}
      listVessel(param).then(response => {
        this.vesselList = response.data
      }).catch(e => {
      })
    },
    setVesselDetail(vesselId) {
      // console.log(vesselId)
      this.vesselList.forEach(ele => {
        if (ele.id == vesselId) {
          // console.log('aa:', ele.vesselName)
          this.form.vesselName = ele.vesselName

        }
      })
    },
    selectable(row, index) {
      if (this.disableItems && this.disableItems.length) {
        return !this.disableItems.some(val => val.outBillNumber === row.billNumber && val.outStockId === row.stockId && val.cargoId === row.cargoId);
      }
      return true;
    },

    // 点击全选
    selectAll(selection) {
      if (this.single) {
        // 单选时多选框取消选中
        this.$refs.table.clearSelection();
      }
    },
    select(selection, row) {
      if (this.single) {
        // 单选时取消选中所有再选中
        this.$nextTick(() => {
          this.$refs.table.clearSelection();
          this.$nextTick(() => {
            this.$refs.table.toggleRowSelection(row);
          });
        });

      }
    },
    // 选中项变化
    selectionChange(sel) {
      console.log('选中项变化', sel);
      if (sel.length === 0) {
        // 清空选中
        this.$refs.table.setCurrentRow();
      }
      this.selectedList = sel;
    },
    // 当前选中某一项
    handleCurrentChange(currentRow) {
      if (this.single) {
        // 单选时取消选中所有再选中
        this.$nextTick(() => {
          this.$refs.table.clearSelection();
          this.$nextTick(() => {
            if (currentRow) {
              this.$refs.table.toggleRowSelection(currentRow);
            }
          });
        });
      }

    },
    save() {
      this.$emit('confirm', this.selectedList);
    },
    // resetQuery() {
    //   this.resetForm('queryForm')
    //   this.queryTime = []
    //   this.handleQuery()
    // },
    searchByVesselName() {
      // 调用查询方法，传递搜索船舶名称作为参数
      this.getList(this.searchVesselName,this.searchVoyageNo,this.searchGdsSeqno);


    },
    getList(searchVesselName,searchVoyageNo,searchGdsSeqno) {
      this.list = [];
      if (!this.custId) return;
      this.loading = true;
      listCkstock({
        custId: this.custId,
        vesselName: searchVesselName,
        voyageNo: searchVoyageNo,
        gdsSeqno: searchGdsSeqno,


      }).then(res => {
        this.loading = false;
        this.list = res.data || [];
        if (this.singleItem.stockId) {
          const findex = this.list.findIndex(val => val.billNumber === this.singleItem.billNumber && val.stockId === this.singleItem.stockId && val.cargoId === this.singleItem.cargoId);
          if (findex > -1) {
            this.$nextTick(() => {
              this.$refs.table.toggleRowSelection(this.list[findex]);
            });
          }
        }
        this.$emit('updateList', this.list);
      }).catch(e => {
        this.loading = false;
      });
    }
  }
}
</script>

<style scoped>
.stock-btns {
  margin-top: 10px;
  display: flex;
  justify-content: right;
}

.nomal-text {
  padding: 8px 10px;
}

.desc-table {
  padding: 5px;
}

/* ::v-deep .el-table td.el-table__cell {
  padding: 10px;
}

::v-deep .el-table--border .el-table__cell {
  padding: 10px;
}

::v-deep .el-table .cell {
  padding: 10px;
}

::v-deep .el-table--border .el-table__cell:first-child .cell {
  padding-left: 10px;
} */</style>
