<template>
  <!-- 船只信息页面 -->
  <div class="homeworkPath">
    <page-title>船只信息</page-title>
    <div class="shipName">
      <span class="text">江船船名</span>
      <el-autocomplete
        v-model="state"
        @input="onInput"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        :trigger-on-focus="false"
        @select="handleSelect"
      ></el-autocomplete>
    </div>
    <div class="form">
      <dil-form :formId="119" v-model="form"></dil-form>
    </div>
    <div class="btn">
      <el-button type="primary" @click="makeSure">新增船只</el-button>
    </div>
    <dilTable v-bind.sync="option">
      <el-table-column fixed="right" label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button
            @click="click(scope.row.orderId, scope.row.instructionsId)"
            type="text"
            size="mini"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="mini"
            @click="deleteclick(scope.row.orderId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </dilTable>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import { sjTime } from "@/utils/sharedJsFile";
export default {
  components: { PageTitle },
  data() {
    return {
      restaurants: [],
      state: "",
      form: {},
      capacityIds:"",
      option: {
        // 表格请求数据的地址
        requestUrl:
          "/api/v1/tms/getCapacities?apiId=76&instructionsId=" +
          this.$route.params.instructionsId,
      },
    };
  },
  methods: {
    onInput() {
      this.axios.post(
        "/api/v1/tms/getShipNameList?state="+this.state,
      )
      .then((res) => {
        var values=[];
        if(res.data.code == "0"){
          res.data.data.forEach(element => {
            values.push({
              value:element.capacityName,
              capacityId:element.capacityId
            })
          });
        }
        this.restaurants=values;
      });
    },
    querySearch(queryString, cb) {
      var results = queryString
        ? this.restaurants.filter(this.createFilter(queryString))
        : this.restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item){
      this.capacityIds=item.capacityId
      console.log("capacityIds",this.capacityIds)
    },
    
    // 新增
    
    makeSure() {
      let omsshipInstructionsCapacity = {
        instructionsId: this.$route.params.instructionsId,
        state:this.state,
        capacityName:this.state,
        capacityIds: this.capacityIds,
        instructionPlannedLoading: this.form.instructionPlannedLoading,
        instructionsShipPosition: this.form.instructionsShipPosition,
        instructionContactInf: this.form.instructionContactInf,
        instructionsCapacityStatus: this.form.instructionsCapacityStatus,
        instructionEsarrivalTime: sjTime(this.form.instructionEsarrivalTime),
      };
      console.log(omsshipInstructionsCapacity);
      if (
        omsshipInstructionsCapacity.state == null ||
        omsshipInstructionsCapacity.instructionPlannedLoading == null ||
        omsshipInstructionsCapacity.instructionsShipPosition == null ||
        omsshipInstructionsCapacity.instructionContactInf == null ||
        omsshipInstructionsCapacity.instructionsCapacityStatus == null ||
        omsshipInstructionsCapacity.instructionEsarrivalTime == null
      )
        this.$message.error("存在空值！");
      else
        this.axios
          .post(
            "/api/v1/tms/addInstructionsCapacity",
            omsshipInstructionsCapacity
          )
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "新增成功!",
              });
              // this.$refs.table.refreshData();
              this.option.requestUrl = "/api/v1/tms/getCapacities?apiId=76&instructionsId=" + this.$route.params.instructionsId + "&i=" + new Date();
              // this.$router.go(this.option);
            } else {
              this.$message.error("新增失败！");
            }
            this.$refs["table"].resetField();
          });
    },
    click(orderId, instructionsId) {
      this.$router.push(
        "/ship/updateInstructionsCapacity/" +
          orderId +
          "?instructionsId=" +
          instructionsId
      );
    },
    deleteclick(scope) {
      let orderId = scope;
      this.$confirm("是否删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.axios
            .post("/api/v1/tms/deleteInstructionsCapacity/" + orderId)
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.$router.go(0);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除!",
          });
        });
    },
  },
};
</script>
<style lang='scss'>
.homeworkPath {
  .shipName{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.25rem;
    .text{
      width: 6.25rem;
      text-align: right;
      padding-right: 0.9375rem;
      font-size: 0.9375rem;
      font-weight: 600;
      color: #606266;
    }
  }
  .form {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>