<template>
  <my-page>
    <!-- 搜索部分 -->
    <template slot="header">
      <SearchBlock v-model="billQuery" v-show="showSearch" size="mini" :menus="queryOption" @change="handleQuery"></SearchBlock>
      <!-- <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="船舶名称" prop="vesselName" class="search-item">
          <el-input v-model="billQuery.vesselName" class="search-input" placeholder="请输入船舶名称" clearable
                    @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="航次号" prop="voyageNo" class="search-item">
          <el-input v-model="billQuery.voyageNo" class="search-input" placeholder="请输入航次号" clearable
                    @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="泊位名称" prop="berthName" class="search-item">
          <el-input v-model="billQuery.berthName" class="search-input" placeholder="请输入泊位名称" clearable
                    @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="货物名称" prop="cargoName" class="search-item">
          <el-input v-model="billQuery.cargoName" class="search-input" placeholder="请输入货物名称" clearable
                    @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="货主名称" prop="custName" class="search-item">
          <el-input v-model="billQuery.custName" class="search-input" placeholder="请输入货主名称" clearable
                    @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="提运单号" prop="billNo" class="search-item">
          <el-input v-model="billQuery.billNo" class="search-input" placeholder="请输入提运单号" clearable
                    @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="业务性质" prop="opType" class="search-item">
          <el-select filterable v-model="billQuery.opType" class="search-input" placeholder="请选择业务性质" clearable>
            <el-option v-for="dict in dict.type.sys_business_nature" :key="dict.value" :label="dict.label"
                       :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="贸易性质" prop="tradType" class="search-item">
          <el-select filterable v-model="billQuery.tradType" class="search-input" placeholder="请选择贸易性质" clearable>
            <el-option v-for="dict in dict.type.sys_trade_nature" :key="dict.value" :label="dict.label"
                       :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="报关单号" prop="customsNo" class="search-item">
          <el-input v-model="billQuery.customsNo" class="search-input" placeholder="请输入报关单号" clearable
                    @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="核注清单" prop="listNumber" class="search-item">
          <el-input v-model="billQuery.listNumber" class="search-input" placeholder="请输入核注清单号" clearable
                    @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item label="靠泊日期" prop="queryTime" class="search-item">
          <el-date-picker clearable style="width: 200px;" v-model="queryTimeTwo" size="mini"
                          :picker-options="pickerOptions" end-placeholder="结束日期" range-separator="-" start-placeholder="开始日期"
                          type="daterange" value-format="yyyy-MM-dd" placeholder="请选择靠泊日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item class="search-item">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form> -->
    </template>
      <!-- 单据部分 -->
      <template slot="left">
        <VoyageNumber ref="voyageNumber" :params="billQuery" @rowClick="voyageNumberClick"></VoyageNumber>
      </template>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-tooltip content="选择左侧航次号后进行新增" placement="top">
            <el-button type="primary" :disabled="!this.selectedVoyage.voyageNo" plain icon="el-icon-plus" size="mini" @click="handleAdd"
              v-hasPermi="['jxc:bmcargo:add']">新增
            </el-button>
          </el-tooltip>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
            v-hasPermi="['jxc:bmcargo:edit']">修改
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
            v-hasPermi="['jxc:bmcargo:remove']">删除
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
            v-hasPermi="['jxc:bmcargo:export']">导出
          </el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table class="table" height="60vh" v-loading="loading" :data="bmcargoList" @sort-change="handleSortChange"
        @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" width="55" align="center" fixed="left" />
        <!-- <el-table-column label="船舶信息" align="center">
          <el-table-column label="航次号" align="center" prop="voyageNo" sortable='custom' width="100" />
          <el-table-column label="船舶名称" align="center" prop="vesselName" sortable='custom' width="100" />
          <el-table-column label="所属港口公司" align="center" prop="deptId" sortable='custom' width="100"
            :formatter="deptFormatter" />
        </el-table-column> -->
        <el-table-column label="货物名称" align="center" prop="cargoName" sortable='custom' min-width="100" fixed="left" />
          <el-table-column label="货主名称" align="center" prop="custName" sortable='custom' min-width="200" fixed="left" />
          <el-table-column label="货物自然序号" align="center" prop="cargoNumber" sortable='custom' min-width="130" />
          <el-table-column label="商品料号" align="center" prop="itemNumber" sortable='custom' min-width="100" />
          <el-table-column label="电子账册项号" align="center" prop="bookNumber" sortable='custom' min-width="130" />
          <el-table-column label="HS编号" align="center" prop="hsCode" sortable='custom' min-width="100" />
          <el-table-column label="报关单号" align="center" prop="customsNo" sortable='custom' min-width="100" />
          <el-table-column label="核注清单号" align="center" prop="listNumber" sortable='custom' min-width="130" />
          <el-table-column label="货物价值" align="center" prop="cargoValue" sortable='custom' min-width="100" />
          <el-table-column label="提运单号" align="center" prop="billNo" sortable='custom' min-width="100" />
          <el-table-column label="业务性质" align="center" prop="opType" sortable='custom' min-width="100">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_business_nature" :value="scope.row.opType" />
            </template>
          </el-table-column>
          <el-table-column label="贸易性质" align="center" prop="tradType" sortable='custom' min-width="100">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_trade_nature" :value="scope.row.tradType" />
            </template>
          </el-table-column>
          <el-table-column label="计划货物件数" align="center" prop="cargoNum" sortable='custom' min-width="130" />
          <el-table-column label="计划货物重量" align="center" prop="cargoWt" sortable='custom' min-width="130" />
          <el-table-column label="计划货物体积" align="center" prop="cargoVol" sortable='custom' min-width="130" />
          <el-table-column label="唛头" align="center" prop="mark" sortable='custom' />
          <el-table-column label="包装类型" align="center" prop="packType" sortable='custom' min-width="100">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_package_type" :value="scope.row.packType" />
            </template>
          </el-table-column>
          <el-table-column label="计量单位" align="center" prop="unit" min-width="80">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_measurement_unit" :value="scope.row.unit" />
            </template>
          </el-table-column>
          <el-table-column label="舱口类型" align="center" prop="hatchTpe" min-width="80">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_hatch_type" :value="scope.row.hatchTpe" />
            </template>
          </el-table-column>
          <el-table-column label="船港货机械" align="center" prop="cargoMachine" min-width="130">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_shipport_cargo_machinery" :value="scope.row.cargoMachine" />
            </template>
          </el-table-column>

          <el-table-column label="单件重量" align="center" prop="pieceWeight" sortable='custom' min-width="100" />
        <el-table-column label="所属港口公司" align="center" prop="deptId" sortable='custom' min-width="100"
            :formatter="deptFormatter" />
        <el-table-column label="有效期至" align="center" prop="expiryDate" min-width="180" sortable='custom'>
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.expiryDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="120px">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['jxc:bmcargo:edit']">修改
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-hasPermi="['jxc:bmcargo:remove']">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    <el-dialog class="dialog" :title="title" :visible.sync="open" width="95%" append-to-body
      :close-on-click-modal="false">
      <BmcargoEdit v-if="open" ref="bmcargoEdit" :voyageInfo="selectedVoyage" :bmcargo="modifyBmcargo" @completed="getList(true)">
      </BmcargoEdit>
    </el-dialog>
  </my-page>
</template>

<script>
import { pageListBmcargo, getBmcargo, delBmcargo, addBmcargo, updateBmcargo } from "@/api/jxc/bmcargo";
import { listBmvoyage, getBmvoyage } from "@/api/jxc/bmvoyage";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import { listDept } from "../../../api/system/dept";
import VoyageNumber from "@/views/jxc/bmcargo/components/VoyageNumber";
import BmcargoEdit from "@/views/jxc/bmcargo/components/BmcargoEdit";
import { datePickerOpts } from "@/utils";

export default {
  name: "Bmcargo",
  components: { Treeselect, VoyageNumber, BmcargoEdit },
  dicts: ['sys_hatch_type', 'sys_package_type', 'sys_shipport_cargo_machinery', 'sys_measurement_unit', 'sys_business_nature', 'sys_trade_nature'],
  data() {
    return {
      queryOption: [
        {
          label: '船舶名称', 
          prop: 'vesselName',
          type: 'text',
        },
        {
          label: '航次', 
          prop: 'voyageNo',
          type: 'text',
        },
        {
          label: '货物名称', 
          prop: 'cargoName',
          type: 'text',
        },
        {
          label: '泊位名称', 
          prop: 'berthName',
          type: 'text',
        },
        {
          label: '货主名称', 
          prop: 'custName',
          type: 'text',
        },
        {
          label: '提运单号', 
          prop: 'billNo',
          type: 'text',
        },
        {
          label: '业务性质', 
          prop: 'opType',
          type: 'select',
          getOptions: () => this.dict.type.sys_business_nature,
        },
        {
          label: '贸易性质', 
          prop: 'tradType',
          type: 'select',
          getOptions: () => this.dict.type.sys_trade_nature,
        },
        {
          label: '报关单号', 
          prop: 'customsNo',
          type: 'text',
        },
        {
          label: '核注清单号', 
          prop: 'listNumber',
          type: 'text',
          labelWidth: '90px'
        },
        {
          label: '靠泊日期', 
          prop: 'queryTime',
          type: 'daterange',
          options: datePickerOpts()
        },
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 选中名字
      names: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 有效期
      queryTimeTwo: [],
      // 船舶载货清单表格数据
      bmcargoList: [],
      deptList: [],
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        voyageId: null,
        voyageNo: null,
        vesselId: null,
        vesselName: null,
        cargoId: null,
        hsCode: null,
        cargoName: null,
        billNo: null,
        custId: null,
        custName: null,
        opType: null,
        tradType: null,
        cargoNum: null,
        cargoWt: null,
        cargoVol: null,
        mark: null,
        packType: null,
        unit: null,
        hatchTpe: null,
        cargoMachine: null,
        pieceWeight: null,
        actNum: null,
        actWt: null,
        actVol: null,
        ztNum: null,
        ztWt: null,
        ztVol: null,
        stockNum: null,
        stockWt: null,
        stockVol: null,
        deptId: null,
        cargoValue: null,
        customsNo: null,
        listNumber: null,
        cargoNumber: null,
        itemNumber: null,
        bookNumber: null,
        expiryDate: null,
        beginDateTwo: null,
        endDateTwo: null,
      },
      billQuery: {
        pageNum: 1,
        pageSize: 10,
        billNumber: null,
        cargoName: null,
        vesselName: null,
        berthName: null,
        voyageNo: null,
        customsNo: null,
        listNumber: null,
        beginDate: null,
        endDate: null,
        custName: null,
        billNo: null,
        optype: null,
        tradType: null,
      },
      // 当前选择的航次
      selectedVoyage: {},
      // 表格选中的载货清单列表
      selection: [],
      // 当前要修改的载货清单
      modifyBmcargo: {},
    };
  },
  computed: {
    title() {
      if (!this.selectedVoyage) {
        return '';
      }
      return `航次号：${this.selectedVoyage.voyageNo} - 船舶名称：${this.selectedVoyage.vesselName} - 泊位名称：${this.selectedVoyage.berthName}`;
    }
  },
  created() {
    listDept({}).then(response => {
      this.deptList = response.data;
    });

  },
  methods: {
    voyageNumberClick(row) {
      const isChange = this.selectedVoyage.id !== row.id;
      this.selectedVoyage = row;
      this.queryParams.voyageId = row.id;
      // 切换的时候重新搜索，否则刷新当前
      //isChange ? this.handleQuery() : this.getList();
      if (isChange) {
        this.queryParams.pageNum = 1;
      }
      if (this.queryParams.voyageId) {
        this.getList();
      } else {
        this.bmcargoList = [];
      }
    },
    // 刷新列表
    refreshList() {
      this.queryParams.voyageId = '';
      if (this.billQuery.queryTime) {
        this.billQuery.beginDate = this.billQuery.queryTime[0];
        this.billQuery.endDate = this.billQuery.queryTime[1];
      } else {
        this.billQuery.beginDate = null;
        this.billQuery.endDate = null;
      }
      this.$nextTick(() => {
        this.$refs.voyageNumber.getList();
        //this.ckcargoList = [];
      })
      //this.$refs.voyageNumber.getList();
    },
    deptFormatter(row, column, cellValue, index) {
      const obj = this.deptList.find((obj) => obj.deptId === cellValue)
      return obj ? obj.deptName : cellValue
    },
    /** 查询船舶载货清单列表 */
    getList(fromEdit) {
      this.loading = true;
      // if (this.queryTimeTwo != null) {
      //   this.queryParams.beginDateTwo = this.queryTimeTwo[0];
      //   this.queryParams.endDateTwo = this.queryTimeTwo[1];
      // } else {
      //   this.queryParams.beginDateTwo = null;
      //   this.queryParams.endDateTwo = null;
      // }
      pageListBmcargo(this.queryParams).then(response => {
        this.bmcargoList = response.rows || [];
        this.total = response.total;
        this.loading = false;
        if (!fromEdit && this.$refs.bmcargoEdit) {
          // 不是从详情编辑发起的则刷新一下详情的列表
          this.$refs.bmcargoEdit.getList();
        }
      }).catch(e => {
        this.loading = false;
      });
    },
    //排序
    handleSortChange(col) {
      this.$sortBy(col, this.queryParams);
      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      //this.getList();
      this.refreshList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryTimeTwo = [];
      this.billQuery = {
        billNumber: null,
        cargoName: null,
        vesselName: null,
        berthName: null,
        voyageNo: null,
        customsNo: null,
        listNumber: null,
        beginDate: null,
        endDate: null,
        custName: null,
        billNo: null,
        optype: null,
        tradType: null,
      }
      this.handleQuery();
      //this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selection = selection;
      this.ids = selection.map(item => item.id);
      this.names = selection.map(item => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {

      this.modifyBmcargo = {};
      this.open = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      getBmvoyage(row.voyageId || this.selection[0].voyageId).then(response => {
        if (response.data) {
          this.modifyBmcargo = { ...(row.voyageNo ? row : this.selection[0]) };
          this.selectedVoyage = response.data;
          this.open = true;
        }
      }).catch(e => {
      });
      // const id = row.id || this.ids;

      // getBmcargo(id).then(response => {
      //   this.form = response.data;
      //   this.open = true;
      //   this.title = "修改船舶载货清单";
      // });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      const names = row.id || this.names;
      this.$modal.confirm('是否确认删除"' + row.voyageNo + "-" + row.vesselName + '"的数据项？').then(function () {
        return delBmcargo(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('jxc/bmcargo/export', {
        ...this.queryParams
      }, `船舶载货清单_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style scoped lang="scss">
.app-container {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.right-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.search-item {
  margin-bottom: 6px;
}

.table {
  flex: 1;
}

.search-input {
  max-width: 120px;
}

::v-deep .el-dialog__body {
  padding-top: 10px;
}
</style>
