<template>
  <div class="bmcargo-edit">
    <BmcargoList ref="bmcargoList" :readonly="readonly" :selectedRow="tempRow" :voyage-id="voyageInfo.id"
      @rowClick="bmcargoClick">
    </BmcargoList>
    <div class="edit-content">
      <div class="edit-header">
        <div class="header-title">{{ title }}</div>
        <div class="header-btns" v-if="!readonly">
          <!-- <el-button >取消</el-button> -->
          <el-button type="primary" style="width: 120px;" v-loading="loading" @click="submitForm"
            :disabled="!voyageInfo.id && !form.voyageId">保存</el-button>
        </div>
      </div>
      <div class="edit-scroll">
        <el-form ref="form" v-if="!updating" :model="form" :rules="rules" :show-message="false" v-enterboard>
          <el-descriptions class="desc-table" :column="3" border>
            <el-descriptions-item>
              <template slot="label">货主名称<rq /></template>
              <div v-if="readonly" class="nomal-text">{{ form.custName }}</div>
              <el-form-item v-else prop="custId" class="margin-none">
                <el-select v-model="form.custId" filterable placeholder="请输入货主名称" style="width: 100%" clearable
                  @change="setCustDetail">
                  <el-option v-for="item in custList" :key="item.id" :label="item.custName" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">货物名称<rq /></template>
              <div v-if="readonly" class="nomal-text">{{ form.cargoName }}</div>
              <el-form-item v-else prop="cargoId" class="margin-none">
                <el-select v-model="form.cargoId" filterable placeholder="请输入货物名称" style="width: 100%" clearable
                  @change="setCargoDetail">
                  <el-option v-for="item in cargoList" :key="item.id" :label="item.cargoName" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">计量单位<rq /></template>
              <div v-if="readonly" class="nomal-text">
<!--                {{ form.unit }}-->
                 <dict-tag :options="dict.type.sys_measurement_unit" :value="form.unit"></dict-tag>
              </div>
              <el-form-item v-else prop="unit" class="margin-none">
                                <el-select filterable v-model="form.unit" placeholder="请输入计量单位" clearable style="width: 100%">
                                  <el-option v-for="dict in dict.type.sys_measurement_unit" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                                </el-select>
<!--                <el-input v-model="form.unit" placeholder="请输入计量单位" style="width: 100%" />-->
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">第一计量单位<rq /></template>
              <div v-if="readonly" class="nomal-text">
                <!--                {{ form.unit }}-->
                <dict-tag :options="dict.type.sys_measurement_unit" :value="form.firstUnit"></dict-tag>
              </div>
              <el-form-item v-else prop="firstUnit" class="margin-none">
                <el-select filterable v-model="form.firstUnit" placeholder="请输入第一计量单位" clearable style="width: 100%">
                  <el-option v-for="dict in dict.type.sys_measurement_unit" :key="dict.value" :label="dict.label"
                             :value="dict.value" />
                </el-select>
                <!--                <el-input v-model="form.unit" placeholder="请输入计量单位" style="width: 100%" />-->
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">HS编号</template>
              <div class="nomal-text">{{ form.hsCode }}</div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">原产国<rq /></template>
              <div v-if="readonly" class="nomal-text">
                <dict-tag :options="dict.type.sys_origin_country" :value="form.originCountry"></dict-tag>
              </div>
              <el-form-item v-else prop="originCountry" class="margin-none">
                <el-select filterable v-model="form.originCountry" placeholder="请选择原产国" style="width: 100%">
                  <el-option v-for="dict in dict.type.sys_origin_country" :key="dict.value" :label="dict.label"
                             :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">商品料号<rq /></template>
              <div v-if="readonly" class="nomal-text">{{ form.itemNumber }}</div>
              <el-form-item v-else prop="itemNumber" class="margin-none">
                <el-input v-model="form.itemNumber" placeholder="请输入商品料号" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">规格类型品质</template>
              <div v-if="readonly" class="nomal-text">{{ form.cargoSpec }}</div>
              <el-form-item v-else prop="cargoSpec" class="margin-none">
                <el-input v-model="form.cargoSpec" placeholder="请输入规格类型品质" style="width: 100%" /></el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">货物自然序号<rq /></template>
              <div v-if="readonly" class="nomal-text">{{ form.cargoNumber }}</div>
              <el-form-item v-else prop="cargoNumber" class="margin-none">
                <el-input v-model="form.cargoNumber" placeholder="请输入货物自然序号" />
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">唛头</template>
              <div v-if="readonly" class="nomal-text">{{ form.mark }}</div>
              <el-form-item v-else prop="mark" class="margin-none">
                <el-input v-model="form.mark" placeholder="请输入唛头" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">包装类型</template>
              <div v-if="readonly" class="nomal-text">
                <dict-tag :options="dict.type.sys_package_type" :value="form.packType"></dict-tag>
              </div>
              <el-form-item v-else prop="packType" class="margin-none">
                <el-select filterable v-model="form.packType" placeholder="请选择包装类型" style="width: 100%">
                  <el-option v-for="dict in dict.type.sys_package_type" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">电子账册项号<rq /></template>
              <div v-if="readonly" class="nomal-text">{{ form.bookNumber }}</div>
              <el-form-item v-else prop="bookNumber" class="margin-none">
                <el-input v-model="form.bookNumber" placeholder="请输入电子账册项号" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">报关单号<rq /></template>
              <div v-if="readonly" class="nomal-text">{{ form.customsNo }}</div>
              <el-form-item v-else prop="customsNo" class="margin-none">
                <el-input v-model="form.customsNo" placeholder="请输入报关单号" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">核注清单号<rq /></template>
              <div v-if="readonly" class="nomal-text">{{ form.listNumber }}</div>
              <el-form-item v-else prop="listNumber" class="margin-none">
                <el-input v-model="form.listNumber" placeholder="请输入核注清单号" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">提运单号<rq /></template>
              <div v-if="readonly" class="nomal-text">{{ form.billNo }}</div>
              <el-form-item v-else prop="billNo" class="margin-none">
                <el-input v-model="form.billNo" placeholder="请输入提运单号" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">业务性质</template>
              <div class="nomal-text margin-none">
                <dict-tag :options="dict.type.sys_business_nature" :value="form.opType"></dict-tag>
              </div>
              <!-- <el-form-item v-else prop="opType" class="margin-none">
                <el-select disabled filterable v-model="form.opType" placeholder="请选择业务性质" style="width: 100%">
                  <el-option v-for="dict in dict.type.sys_business_nature" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item> -->
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">船港货机械</template>
              <div v-if="readonly" class="nomal-text">
                <dict-tag :options="dict.type.sys_shipport_cargo_machinery" :value="form.cargoMachine"></dict-tag>
              </div>
              <el-form-item v-else prop="cargoMachine" class="margin-none">
                <el-select filterable v-model="form.cargoMachine" placeholder="请输入船港货机械" clearable style="width: 100%">
                  <el-option v-for="dict in dict.type.sys_shipport_cargo_machinery" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">舱口类型</template>
              <div v-if="readonly" class="nomal-text">
                <dict-tag :options="dict.type.sys_hatch_type" :value="form.hatchTpe"></dict-tag>
              </div>
              <el-form-item v-else prop="hatchTpe" class="margin-none">
                <el-select filterable v-model="form.hatchTpe" placeholder="请输入舱口类型" clearable style="width: 100%">
                  <el-option v-for="dict in dict.type.sys_hatch_type" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">贸易性质<rq /></template>
              <div v-if="readonly" class="nomal-text">
                <dict-tag :options="dict.type.sys_trade_nature" :value="form.tradType"></dict-tag>
              </div>
              <el-form-item v-else prop="tradType" class="margin-none">
                <el-select filterable v-model="form.tradType" placeholder="请选择贸易性质" style="width: 100%">
                  <el-option v-for="dict in dict.type.sys_trade_nature" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">计划件数</template>
              <div v-if="readonly" class="nomal-text">{{ form.cargoNum }}</div>
              <el-form-item v-else prop="cargoNum" class="margin-none">
                <el-input-number v-model="form.cargoNum" placeholder="请输入货物件数" controls-position="right" :min="0" :precision="2"
                  style="width: 100%" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">计划体积(立方米)</template>
              <div v-if="readonly" class="nomal-text">{{ form.cargoVol }}</div>
              <el-form-item v-else prop="cargoVol" class="margin-none">
                <el-input-number v-model="form.cargoVol" placeholder="请输入货物体积" controls-position="right" :min="0" :precision="2"
                  style="width: 100%" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">计划重量<rq /></template>
              <div v-if="readonly" class="nomal-text">{{ form.cargoWt }}</div>
              <el-form-item v-else prop="cargoWt" class="margin-none">
                <el-input-number v-model="form.cargoWt" placeholder="请输入货物重量" controls-position="right" :min="0" :precision="2"
                  style="width: 100%" />
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">单件重量</template>
              <div v-if="readonly" class="nomal-text">{{ form.pieceWeight }}</div>
              <el-form-item v-else prop="pieceWeight" class="margin-none">
                <el-input-number v-model="form.pieceWeight" placeholder="请输入单件重量" controls-position="right" :min="0" :precision="2"
                  style="width: 100%" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">货物单价<rq /></template>
              <div v-if="readonly" class="nomal-text">{{ form.unitPrice }}</div>
              <el-form-item v-else prop="unitPrice" class="margin-none">
                <el-input-number v-model="form.unitPrice" placeholder="请输入货物单价" controls-position="right" :min="0" :precision="2"
                                 style="width: 100%" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">货物价值</template>
              <div v-if="readonly" class="nomal-text">{{ form.cargoValue }}</div>
              <el-form-item v-else prop="cargoValue" class="margin-none">
                <el-input-number v-model="form.cargoValue" placeholder="请输入货物价值" controls-position="right" :min="0" :precision="2"
                  style="width: 100%" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">币种<rq /></template>
              <div v-if="readonly" class="nomal-text">
                <dict-tag :options="dict.type.sys_curr_type" :value="form.currType"></dict-tag>
              </div>
              <el-form-item v-else prop="currType" class="margin-none">
                <el-select filterable v-model="form.currType" placeholder="请选择币种" style="width: 100%">
                  <el-option v-for="dict in dict.type.sys_curr_type" :key="dict.value" :label="dict.label"
                             :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <!-- 占位格 -->
            <el-descriptions-item>
            </el-descriptions-item>

          </el-descriptions>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getBmcargo, delBmcargo, addBmcargo, updateBmcargo } from "@/api/jxc/bmcargo";
import { listCargo } from "@/api/jxc/cargo";
import { listCust } from "@/api/jxc/cust";
import BmcargoList from '@/views/jxc/bmcargo/components/BmcargoList';

const DefaultForm = {
  cargoNumber: null,
  itemNumber: null,
  bookNumber: null,
  customsNo: null,
  listNumber: null,
  opType: null,
  tradType: null,
  deptId: null,
  custId: null,
  cargoId: null,
  vesselName: null,
  billNo: null,
  unit: '1',
  firstUnit: null,
  hatchTpe: null,
  cargoMachine: null,
  voyageNo: null,
  cargoNum: null,
  cargoWt: null,
  cargoVol: null,
  actNum: null,
  actWt: null,
  actVol: null,
  stockNum: null,
  stockWt: null,
  stockVol: null,
  expiryDate: null,
  billNumber: null,
  billDate: null,
  originCountry: null,
  mark: null,
  cargoSpec: null,
  pieceWeight: null,
  unitPrice: null,
  currType: null,
};
export default {
  name: 'BmcargoEdit',
  components: {
    BmcargoList,
  },
  dicts: ['sys_business_nature', 'sys_trade_nature', 'sys_measurement_unit', 'sys_hatch_type', 'sys_shipport_cargo_machinery', 'sys_package_type', 'sys_origin_country', 'sys_curr_type'],
  props: {
    voyageInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    bmcargo: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  watch: {
    bmcargo: {
      handler(val) {
        this.tempRow = {
          ...DefaultForm,
          ...this.bmcargo,
          opType: this.voyageInfo.opType,
        };
        this.form = {
          ...DefaultForm,
          ...this.bmcargo,
          opType: this.voyageInfo.opType,
        };
      },
      immediate: true,
    }
  },
  data() {
    return {
      tempRow: DefaultForm,
      form: DefaultForm,
      rules: {
        cargoNumber: [
          { required: true, message: "货物自然序号不能为空", trigger: "blur" }
        ],
        itemNumber: [
          { required: true, message: "商品料号不能为空", trigger: "blur" }
        ],
        bookNumber: [
          { required: true, message: "电子账册项号不能为空", trigger: "blur" }
        ],
        // customsNo: [
        //   { required: true, message: "报关单号不能为空", trigger: "blur" }
        // ],
        // listNumber: [
        //   { required: true, message: "核注清单号不能为空", trigger: "blur" }
        // ],
        opType: [
          { required: true, message: "业务性质不能为空", trigger: "blur" }
        ],
        tradType: [
          { required: true, message: "贸易性质不能为空", trigger: "blur" }
        ],
        deptId: [
          { required: true, message: "所属港口公司不能为空", trigger: "blur" },
        ],
        custId: [
          { required: true, message: "货主名称不能为空", trigger: "blur" },
        ],
        cargoId: [
          { required: true, message: "货物名称不能为空", trigger: "blur" },
        ],
        vesselName: [
          { required: true, message: "船舶名称不能为空", trigger: "blur" },
        ],
        billNo: [
          { required: true, message: "提运单号不能为空", trigger: "blur" },
        ],
        unit: [
          { required: true, message: "计量单位不能为空", trigger: "blur" },
        ],
        // hatchTpe: [
        //   { required: true, message: "舱口类型不能为空", trigger: "blur" },
        // ],
        // cargoMachine: [
        //   { required: true, message: "船港货机械不能为空", trigger: "blur" },
        // ],
        voyageNo: [
          { required: true, message: "航次号不能为空", trigger: "blur" },
        ],
        // cargoNum: [
        //   { required: true, message: "计划货物件数不能为空", trigger: "blur" },
        // ],
        cargoWt: [
          { required: true, message: "货物重量不能为空", trigger: "blur" },
        ],
        currType: [
          { required: true, message: "币种不能为空", trigger: "blur" },
        ],
        unitPrice: [
          { required: true, message: "货物单价不能为空", trigger: "blur" },
        ],
        originCountry: [
          { required: true, message: "原产国不能为空", trigger: "blur" },
        ],
        // cargoVol: [
        //   { required: true, message: "计划货物体积不能为空", trigger: "blur" },
        // ],

      },
      // 客户表格数据
      custList: [],
      // 货物表格数据
      cargoList: [],
      loading: false,
      updating: false,
    };
  },
  computed: {
    title() {
      if (this.readonly) {
        return '船舶载货清单详情';
      }
      return (this.form.id || this.form.id === 0) ? '编辑船舶载货清单' : '新增船舶载货清单';
    },
    readonly() {
      return this.voyageInfo.status == '1';
    }
  },
  created() {
    this.getCargoList();
    this.getCustList();
  },
  methods: {
    // 判断对象值是否相等
    isObjectValueEqual(a, b) {
      if (a === b) {
        return true;
      }
      if (!a || !b) {
        return false;
      }
      //取对象a和b的属性名
      let aProps = Object.keys(a);
      let bProps = Object.keys(b);
      //循环取出属性名，再判断属性值是否一致
      for (let i = 0; i < aProps.length; i++) {
        let propName = aProps[i];
        if ((a[propName] || b[propName]) && a[propName] !== b[propName]) {
          return false;
        }
      }
      for (let i = 0; i < bProps.length; i++) {
        let propName = bProps[i];
        if ((a[propName] || b[propName]) && a[propName] !== b[propName]) {
          return false;
        }
      }
      return true
    },
    // 点击了清单
    bmcargoClick(row) {
      this.$refs.form.clearValidate();
      if (row.id === this.form.id) {
        return;
      }
      row.opType = this.voyageInfo.opType;
      if (!this.isObjectValueEqual(this.form, this.tempRow)) {
        this.$confirm('您当前有修改未保存，是否保存？', '提示', {
          confirmButtonText: '保存',
          cancelButtonText: '不保存',
          type: 'warning',
          closeOnClickModal: false,
          distinguishCancelAndClose: true,
        }).then(() => {
          this.$refs.bmcargoList.setCurrentRow(this.tempRow);
          this.submitForm();
        }).catch((action) => {
          if (action === 'close') {
            this.$refs.bmcargoList.setCurrentRow(this.tempRow);
            return;
          }
          this.form = { ...row };
          this.tempRow = row;
        });
      } else {
        this.form = { ...row };
        this.tempRow = row;
      }

      this.updating = true;
      this.$nextTick(() => {
        this.updating = false;
      })
    },
    //货物
    setCargoDetail(cargoId) {
      this.cargoList.forEach(ele => {
        if (ele.id == cargoId) {
          this.form.cargoName = ele.cargoName;
          this.form.hsCode = ele.hsCode;
          this.form.cargoSpec = ele.cargoSpec;
          this.form.originCountry = ele.originCountry;
          this.form.unit = ele.cargoUnit;
          this.form.itemNumber = ele.gdsMtno;
        }
      })
    },
    getCargoList() {
      let param = {};
      listCargo(param).then(response => {
        this.cargoList = response.data || [];
      }).catch(e => {
      });
    },
    //客户
    setCustDetail(custId) {
      this.custList.forEach(ele => {
        if (ele.id == custId) {
          this.form.custName = ele.custName;
          this.form.custCode = ele.custCode;
        }
      })
    },
    getCustList() {
      let param = {};
      listCust(param).then(response => {
        this.custList = response.data;
      }).catch(e => {
      });
    },
    getList() {
      if (this.$refs.bmcargoList) {
        this.$refs.bmcargoList.getList();
      }
    },
    /** 提交按钮 */
    submitForm() {
      if (!this.voyageInfo.id && !this.form.voyageId) {
        this.$message.error(`航次信息获取出错`);
        return;
      }
      this.$refs["form"].validate((valid, checkItem) => {
        if (valid) {
          this.loading = true;
          if (this.form.id || this.form.id === 0) {
            updateBmcargo(this.form).then(response => {
              this.tempRow = this.form;
              this.$modal.msgSuccess("修改成功");
              this.loading = false;
              this.getList();
              this.$emit('completed');
            }).catch(e => {
              this.loading = false;
            });
          } else {
            const params = {
              ...this.form,
              voyageNo: this.voyageInfo.voyageNo,
              voyageId: this.voyageInfo.id,
              vesselName: this.voyageInfo.vesselName,
              deptId: this.voyageInfo.deptId,
              vesselId: this.voyageInfo.vesselId,
              netTon: this.voyageInfo.netTon,
              //opType: this.voyageInfo.opType,
            }
            addBmcargo(params).then(response => {
              this.loading = false;
              this.form = {};
              this.tempRow = {};
              this.resetForm("form");
              this.$modal.msgSuccess("新增成功");
              this.getList();
              this.$emit('completed');
            }).catch(e => {
              this.loading = false;
            });
          }
        } else {
          this.$message({
            message: checkItem[Object.keys(checkItem)[0]][0].message,
            type: 'warning'
          });
        }
      });
    },
  }
}
</script>

<style scoped>
.bmcargo-edit {
  display: flex;
  flex-direction: row;
  height: 75vh;
}

.edit-header {
  height: 46px;
  padding: 0 10px;
  position: relative;
}

.header-title {
  line-height: 46px;
  width: 100%;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
}

.header-btns {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

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

.edit-scroll {
  flex: 1;
  width: 100%;
  overflow: scroll;
  overflow-x: scroll;
  overflow-y: scroll;
  background-color: #e8f4ff;
  border-radius: 4px;
  padding: 10px;
}

.nomal-text {
  padding: 10px;
}

.margin-none {
  margin: 0;
}

::v-deep .el-descriptions--medium.is-bordered .el-descriptions-item__cell {
  /* padding: 10px; */
  padding: 0;
}

::v-deep .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
  /* padding-bottom: 12px; */
  padding-bottom: 0;
}

::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
  /* border: 1px solid #e6ebf5; */
  /* padding: 12px 10px; */
  padding: 0;
}

::v-deep .el-descriptions-item__label.is-bordered-label {
  padding: 5px !important;
  min-width: 100px;
  max-width: 160px;
}

::v-deep .el-descriptions {
  min-width: 862px;
}
</style>
