<template>
  <div class="line-container-p18">
    <i class="el-icon-arrow-left"></i>
    <div
      class="dib go-back ml8 pointer"
      @click="router.replace('/shipInfo/shipList')"
    >
      返回船舶列表
    </div>
  </div>
  <div class="container-title">船舶信息</div>
  <div class="line-container-p18">
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">船名</div>
        <el-input
          class="info-line-text"
          v-model="userDetail.shipname"
          :disabled="unchangeable"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">MMSI</div>
        <el-input
          class="info-line-text"
          v-model="userDetail.mmsi"
          :disabled="unchangeable"
        ></el-input>
      </div>
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">船长</div>
        <el-input
          class="info-line-text"
          v-model="userDetail.length"
          :disabled="unchangeable"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">船宽</div>
        <el-input
          class="info-line-text"
          v-model="userDetail.breadth"
          :disabled="unchangeable"
        ></el-input>
      </div>
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">吨位</div>
        <el-input
          class="info-line-text"
          v-model="userDetail.tonnage"
          :disabled="unchangeable"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">载货吨位</div>
        <el-input
          class="info-line-text"
          v-model="userDetail.loadTons"
          :disabled="unchangeable"
        ></el-input>
      </div>
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">吃水</div>
        <el-input
          class="info-line-text"
          v-model="userDetail.draught"
          :disabled="unchangeable"
        ></el-input>
      </div>
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">船舶证书</div>
        <el-upload
          action="http://49.234.214.168:8080/hhd-pat/cos/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :data="shipParams"
          :on-success="idUploadSuccess"
          :file-list="shipfileList"
          :limit="2"
          :disabled="unchangeable"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </div>
  </div>
  <div class="df aic jcfe">
    <el-button v-if="unchangeable" type="primary" @click="change">
      修改
    </el-button>
    <el-button v-if="!unchangeable" @click="cancelChange">取消</el-button>
    <el-button v-if="!unchangeable" type="primary" @click="submitChange">
      提交
    </el-button>
  </div>
  <el-dialog v-model="dialogVisible" title="图片预览" width="30%">
    <el-image
      :src="dialogImageUrl"
      style="height: 100%; width: 100%"
    ></el-image>
  </el-dialog>
</template>
<script>
import { ref, h, reactive, toRefs, onMounted } from "vue";
import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
import store from "../../store";
import router from "../../router";
import md5 from "md5";
import api from "../../apis/fetch";
import { useRoute } from "_vue-router@4.0.12@vue-router";
import _ from "lodash";
export default {
  setup() {
    let userDetail = ref({});
    let unchangeable = ref(false);
    let dialogVisible = ref(false);
    let dialogImageUrl = ref("");
    function cancelChange() {}
    function submitChange() {}
    return {
      unchangeable,
      cancelChange,
      submitChange,
      dialogVisible,
      dialogImageUrl,
      userDetail,
      router,
    };
  },
};
</script>
<style scoped></style>
