<template>
  <div class="pl50">
    <div v-for="(item, index) in shipCerts" :key="item.title">
      <div v-if="index == 4" class="container-title fs28">船舶保险</div>
      <div class="df aic mb10">
        <div class="c6 fs20" style="width: 260px">{{ item.title }}</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="mb40"
        :uploaderId="'certsId' + 'country'"
        :params="isUpdate ? { ...updateParams, type: item.type } : addParams"
        :actionUrl="
          isUpdate ? store.state.updateCertsUrl : store.state.addCertsUrl
        "
        :disabled="disabled"
        :fileList="item.certs"
        @onSendFileList="uploadSuccess($event, index)"
      ></Uploader>
    </div>
  </div>
</template>
<script setup>
import { defineComponent, computed, ref, onMounted, watch } from "vue";
import _ from "lodash";
import store from "../store";

const props = defineProps({
  certsId: {
    type: String,
    default: "cert",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  isUpdate: {
    type: Boolean,
    default: false,
  },
  shipCode: String,
});
const emit = defineEmits(["submit"]);

function initCerts(certs) {
  console.log(certs);
}
let updateParams = ref({
  shipCode: props.shipCode,
  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 } = response.result;
      shipCerts.value[index].certs.push({
        url,
        downloadUrl,
        viewUrl,
        key,
      });
    } else {
      shipCerts.value[index].certs = list;
    }
  } else {
    shipCerts.value[index].certs = [];
  }
}

function changeDate(e, index) {
  shipCerts.value[index].startValidTime = e[0];
  shipCerts.value[index].endValidTime = e[1];
}
let shipCerts = ref([
  {
    title: "船舶国籍证书",
    type: 1,
    date: "",
    startValidTime: "",
    endValidTime: "",
    certs: [],
  },
  {
    title: "内河船舶适航证书",
    type: 2,
    date: "",
    startValidTime: "",
    endValidTime: "",
    certs: [],
  },
  {
    title: "船舶年审合格证书",
    type: 3,
    date: "",
    startValidTime: "",
    endValidTime: "",
    certs: [],
  },
  {
    title: "内河船舶最低安全配员证书",
    type: 4,
    date: "",
    startValidTime: "",
    endValidTime: "",
    certs: [],
  },
  {
    title: "船舶保险",
    type: 5,
    date: "",
    startValidTime: "",
    endValidTime: "",
    certs: [],
  },
]);
function getShipCerts() {
  return shipCerts.value;
}
defineExpose({
  initCerts,
  getShipCerts,
});
onMounted(() => {});
</script>

<style></style>
