<template>
  <div class="line-container-p24">
    <i class="el-icon-arrow-left"></i>
    <div
      class="dib go-back ml8 pointer"
      @click="router.replace('/shipOwnerManage/shipOwnerList')"
    >
      返回船东列表
    </div>
  </div>

  <div class="container-title">船东信息</div>
  <div class="line-container-p24">
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">船东姓名</div>
        <el-input
          class="info-line-text"
          v-model="shipOwnerDetail.userName"
          :disabled="unchangeableShipOwner"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">船东手机号</div>
        <el-input
          class="info-line-text"
          v-model="shipOwnerDetail.userPhone"
          :disabled="unchangeableShipOwner"
        ></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="shipOwnerDetail.idcardNo"
          :disabled="unchangeableShipOwner"
        ></el-input>
      </div>
    </div>
    <div class="line">
      <div class="info-line aic">
        <div class="info-line-title">上传身份证 :</div>
        <Uploader
          uploaderId="idfront"
          :limit="1"
          :params="{}"
          :actionUrl="store.state.idCardUrl"
          :disabled="unchangeableShipOwner"
          :fileList="idFrontList"
          @onSendFileList="idFrontUploadSuccess"
          uploadText="身份证人像面"
          class="mr20"
        ></Uploader>
        <Uploader
          uploaderId="idback"
          :limit="1"
          :params="{}"
          :actionUrl="store.state.idCardUrl"
          :disabled="unchangeableShipOwner"
          :fileList="idBackList"
          @onSendFileList="idBackUploadSuccess"
          uploadText="身份证国徽面"
        ></Uploader>
      </div>
    </div>
    <div class="df aic jcfe">
      <el-button
        v-if="!shipOwnerDetail.id"
        type="primary"
        @click="addShipOwner()"
      >
        确定
      </el-button>
      <el-button
        v-if="shipOwnerDetail.shipInfo.length == 0"
        type="primary"
        @click="addShip()"
      >
        新增船舶
      </el-button>
    </div>
  </div>
  <div v-if="shipOwnerDetail.shipInfo.length != 0">
    <ShipInfo
      :shipInfos="shipOwnerDetail.shipInfo"
      :shipOwnerId="route.query.shipOwnerId"
    ></ShipInfo>
  </div>
</template>
<script setup>
import { ref, h, reactive, toRefs, onMounted } from "vue";
// import { uploadUrl } from "../../apis/config";
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";
import _ from "lodash";

const route = useRoute();
let shipOwnerDetail = ref({
  userName: "",
  userPhone: "",
  shipInfo: [],
});
let shipDetail = ref({
  shipId: 0,
});

let idFrontList = ref([]);
function idFrontUploadSuccess(list) {
  if (list.length) {
    let { url, response } = list[0];
    let { downloadUrl, viewUrl, key } = response.result;
    idFrontList.value = [{ url, downloadUrl, viewUrl, key }];
  } else {
    idFrontList.value = [];
  }
}
let idBackList = ref([]);
function idBackUploadSuccess(list) {
  if (list.length) {
    let { url, response } = list[0];
    let { downloadUrl, viewUrl, key } = response.result;
    idBackList.value = [{ url, downloadUrl, viewUrl, key }];
  } else {
    idBackList.value = [];
  }
}
function checkShipOwner() {
  let { userName, userPhone } = shipOwnerDetail.value;
  if (!userName) {
    ElNotification.error({
      title: "请填写船东姓名",
      duration: 1500,
    });
    return false;
  }
  if (!userPhone) {
    ElNotification.error({
      title: "请填写船东手机号",
      duration: 1500,
    });
    return false;
  }
  return true;
}
async function addShipOwner() {
  if (!checkShipOwner()) return;
  let postData = shipOwnerDetail.value;
  if (idFrontList.value.length) {
    let {
      downloadUrl: idcardFrontDownloadUrl,
      viewUrl: idcardFrontViewUrl,
      key: idcardFrontFileKey,
    } = idFrontList.value[0];
    postData = {
      ...postData,
      idcardFrontDownloadUrl,
      idcardFrontViewUrl,
      idcardFrontFileKey,
    };
  }
  if (idBackList.value.length) {
    let {
      downloadUrl: idcardBackDownloadUrl,
      viewUrl: idcardBackViewUrl,
      key: idcardBackFileKey,
    } = idBackList.value[0];
    postData = {
      ...postData,
      idcardBackDownloadUrl,
      idcardBackViewUrl,
      idcardBackFileKey,
    };
  }

  let { data } = await api.addShipOwner(postData);
  if (data.status == 0) {
    ElMessageBox.confirm("添加船东成功,是否添加新船舶?", "添加成功", {
      confirmButtonText: "是",
      cancelButtonText: "否",
      type: "success",
    })
      .then(() => {
        shipOwnerDetail.value = data.result;
        unchangeableShipOwner.value = true;
      })
      .catch(() => {
        router.push("/shipOwnerManage/shipOwnerList");
      });
  }
}

let unchangeableShipOwner = ref(false);
let unchangeableShip = ref(false);

let shipCertsRef = ref(null);
async function searchShip(e) {
  if (e.target.value.length != 9) return;
  let { data } = await api.searchShip({
    mmsi: e.target.value,
  });
  if (data.status == 0) {
    shipDetail.value = data.result;
    shipCertsRef.value.initCerts(shipDetail.value.shipCerts);
  }
}

async function getShipOwnerDetail(shipOwnerId) {
  let { data } = await api.getShipOwnerDetail({
    shipOwnerId,
  });
  shipOwnerDetail.value = data.result;
  for (let i of shipOwnerDetail.value.shipInfo) {
    i.disabled = true;
    for (let j of i.shipCerts) {
      j.date = [j.startValidTime, j.endValidTime];
      for (let k of j.certs) {
        k.url = k.viewUrl;
      }
    }
  }
  console.log(data);
}
function addShip() {
  shipOwnerDetail.value.shipInfo = [{}];
}

onMounted(() => {
  if (route.query.shipOwnerId) {
    getShipOwnerDetail(route.query.shipOwnerId);
    unchangeableShipOwner.value = true;
    unchangeableShip.value = false;
  }
});
</script>
<style scoped>
:deep().el-upload-list__item-thumbnail {
  object-fit: contain;
}

.upload-plus-icon {
  height: 15%;
  color: rgb(139, 147, 156);
  line-height: 100px;
  font-size: 40px;
  font-weight: 200;
}

.upload-text {
  height: 25%;
  color: rgb(139, 147, 156);
}

:deep().el-upload--picture-card {
  border: none;
  width: auto;
}

.unit {
  width: 40px;
  text-align: center;
  color: #555;
}
</style>
