<template>
  <div>
    <div class="container-title">船舶信息</div>
    <div
      class="pl50 pt30 bgf df jcsb pr20"
      v-if="route.name == 'shipOwnerDetail'"
    >
      <el-button-group class="mr20">
        <el-button
          v-for="(item, index) in shipInfos"
          :key="item.code"
          @click="currentIndex = index"
          v-show="item.code"
          :type="index == currentIndex ? 'primary' : ''"
        >
          {{ item.shipname || "新增船舶" }}
        </el-button>
      </el-button-group>
      <div>
        <el-button
          v-if="shipInfos[currentIndex].code"
          @click="deleteShip(currentIndex)"
          type="primary"
          class="mr20"
        >
          删除当前船舶
        </el-button>
        <el-button
          v-if="shipInfos.length == 0 || shipInfos[currentIndex].code"
          @click="addShip()"
          type="primary"
        >
          新增船舶
        </el-button>
      </div>
    </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="shipInfos[currentIndex].shipname"
            :disabled="shipInfos[currentIndex].disabled"
          ></el-input>
          <view class="unit"></view>
        </div>
        <div class="info-line">
          <div class="info-line-title">MMSI</div>
          <el-input
            class="info-line-text"
            v-model="shipInfos[currentIndex].mmsi"
            :disabled="
              shipInfos[currentIndex].disabled ||
              !!shipInfos[currentIndex].code ||
              !!shipInfos[currentIndex].shipId
            "
            @blur="searchShip($event, currentIndex)"
          ></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="shipInfos[currentIndex].length"
            :disabled="shipInfos[currentIndex].disabled"
          ></el-input>
          <view class="unit">米</view>
        </div>
        <div class="info-line">
          <div class="info-line-title">船宽</div>
          <el-input
            class="info-line-text"
            v-model="shipInfos[currentIndex].breadth"
            :disabled="shipInfos[currentIndex].disabled"
          ></el-input>
          <view class="unit">米</view>
        </div>
      </div>
      <div class="line">
        <div class="info-line">
          <div class="info-line-title">吨位</div>
          <el-input
            class="info-line-text"
            v-model="shipInfos[currentIndex].loadTons"
            :disabled="shipInfos[currentIndex].disabled"
          ></el-input>
          <view class="unit">吨</view>
        </div>
        <div class="info-line">
          <div class="info-line-title">船龄</div>
          <el-input
            class="info-line-text"
            v-model="shipInfos[currentIndex].age"
            :disabled="shipInfos[currentIndex].disabled"
          ></el-input>
          <view class="unit">年</view>
        </div>
      </div>
    </div>
    <div style="max-width: 1200px">
      <div class="container-title">船舶证书</div>
      <div
        v-for="(item, index) in shipInfos[currentIndex].shipCerts"
        :key="item.title"
        style="background: #fff"
        class="pt20"
      >
        <div
          v-if="index == 4"
          class="container-title fs18 pt10 pb10"
          style="background: #f3f4f5"
        >
          船舶保险
        </div>
        <div class="df aic pl40 pb20">
          <div class="c6 fs16 mr30">{{ item.typeName }}</div>
          <div>
            <el-date-picker
              style="width: 240px"
              v-model="item.date"
              @change="changeDate($event, index)"
              type="daterange"
              range-separator="至"
              start-placeholder="有效期开始"
              end-placeholder="有效期结束"
              unlink-panels
              value-format="YYYY/MM/DD"
              format="YYYY/MM/DD"
            />
          </div>
        </div>
        <Uploader
          class="pl40 pb20"
          :uploaderId="'certsId' + 'country'"
          :params="
            shipInfos[currentIndex].code
              ? {
                  ...updateParams,
                  shipCode: shipInfos[currentIndex].code,
                  type: item.type,
                }
              : addParams
          "
          :actionUrl="
            shipInfos[currentIndex].code
              ? store.state.updateCertsUrl
              : store.state.addCertsUrl
          "
          :disabled="disabled"
          :fileList="item.certs"
          @onUploadFileList="uploadSuccess($event, index)"
          @onRemoveFileList="removeCert($event, index)"
        ></Uploader>
      </div>
      <div
        v-if="!shipInfos[currentIndex].code"
        class="p30 mb30 df jcfe"
        style="background: #fff"
      >
        <el-button @click="submit" type="primary">添加船舶</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineComponent, computed, ref, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import api from "../apis/fetch";
import _ from "lodash";
import store from "../store";
import { useRoute } from "vue-router";
import router from "../router";
const route = useRoute();
const props = defineProps({
  certsId: {
    type: String,
    default: "cert",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  shipInfos: {
    type: Array,
    default: [{}],
  },
  shipOwnerId: String,
});
let currentIndex = ref(0);
const emit = defineEmits(["submit"]);

function initCerts(certs) {
  console.log(certs);
}
let updateParams = ref({
  loginAccountId: localStorage.loginAccountId,
});
let addParams = ref({
  loginAccountId: localStorage.loginAccountId,
});

function uploadSuccess(list, index) {
  console.log(list);
  if (list.length) {
    let { url, response } = list[0];
    if (response) {
      let { downloadUrl, viewUrl, key: fileKey } = response.result;
      props.shipInfos[currentIndex.value].shipCerts[index].certs.push({
        url,
        downloadUrl,
        viewUrl,
        fileKey,
      });
    } else {
      props.shipInfos[currentIndex.value].shipCerts[index].certs = list;
    }
  } else {
    props.shipInfos[currentIndex.value].shipCerts[index].certs = [];
  }
}
async function removeCert({ file, list }, index) {
  if (props.shipInfos[currentIndex.value].code) {
    let { data } = await api.deleteShipCert({ shipCertId: file.id });
    if (data.status == 0) {
      ElMessage({
        message: "删除成功!",
        type: "success",
      });
    }
  }
}

async function changeDate(e, index) {
  if (props.shipInfos[currentIndex.value].code) {
    let res = await api.updateShipCertValid({
      shipCode: props.shipInfos[currentIndex.value].code,
      type: props.shipInfos[currentIndex.value].shipCerts[index].type,
      startValidTime: e[0],
      endValidTime: e[1],
    });
  } else {
    props.shipInfos[currentIndex.value].shipCerts[index].startValidTime = e[0];
    props.shipInfos[currentIndex.value].shipCerts[index].endValidTime = e[1];
  }
}
let initShipInfo = {
  shipId: 0,
  disabled: false,
  shipCerts: [
    {
      title: "船舶国籍证书",
      type: 1,
      date: "",
      startValidTime: "",
      endtValidTime: "",
      certs: [],
    },
    {
      title: "内河船舶适航证书",
      type: 2,
      date: "",
      startValidTime: "",
      endtValidTime: "",
      certs: [],
    },
    {
      title: "船舶年审合格证书",
      type: 3,
      date: "",
      startValidTime: "",
      endtValidTime: "",
      certs: [],
    },
    {
      title: "内河船舶最低安全配员证书",
      type: 4,
      date: "",
      startValidTime: "",
      endtValidTime: "",
      certs: [],
    },
    {
      title: "船舶保险",
      type: 5,
      date: "",
      startValidTime: "",
      endtValidTime: "",
      certs: [],
    },
  ],
};
function getShipCerts() {
  return shipCerts.value;
}

async function searchShip(e) {
  if (e.target.value.length != 9) return;
  let { data } = await api.searchShip({
    mmsi: e.target.value,
  });
  if (data.status == 0) {
    data.result.shipCerts[0].typeName = "船舶国籍证书";
    data.result.shipCerts[1].typeName = "内河船舶适航证书";
    data.result.shipCerts[2].typeName = "船舶年审合格证书";
    data.result.shipCerts[3].typeName = "内河船舶最低安全配员证书";
    data.result.shipCerts[4].typeName = "船舶保险";
    for (let i of data.result.shipCerts) {
      for (let j of i.certs) {
        j.url = j.viewUrl;
      }
    }
    data.result.disabled = false;
    props.shipInfos[currentIndex.value] = data.result;
  }
}
function deleteShip(item) {
  console.log(item);
}
function addShip(item) {
  if (
    props.shipInfos.length &&
    props.shipInfos[props.shipInfos.length - 1].code
  ) {
    props.shipInfos.push(initShipInfo);
  } else {
    props.shipInfos[props.shipInfos.length - 1] = initShipInfo;
  }
  currentIndex.value = props.shipInfos.length - 1;
}

async function submit() {
  console.log(props.shipInfos[currentIndex.value]);
  let res = await api.addShip({
    ...props.shipInfos[currentIndex.value],
    shipOwnerId: props.shipOwnerId,
  });
  router.replace("/shipOwnerManage/shipOwnerList");
}

defineExpose({
  initCerts,
  getShipCerts,
});
onMounted(() => {});
</script>

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