<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="userDetail.userName"
          :disabled="unchangeableShipOwner"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">船东手机号</div>
        <el-input
          class="info-line-text"
          v-model="userDetail.phone"
          :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="userDetail.idcardNo"
          :disabled="unchangeableShipOwner"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">偏好货种</div>
        <el-input
          class="info-line-text"
          v-model="userDetail.preferenceCargo"
          :disabled="unchangeableShipOwner"
        ></el-input>
      </div>
    </div>
    <div class="line">
      <div class="info-line aic">
        <div class="info-line-title">上传身份证 :</div>
        <Uploader
          :uploaderId="'idFrontFile'"
          :params="idParams"
          :disabled="unchangeableShipOwner"
          @onSendFileList="idFrontUploadSuccess"
          :fileList="idFrontFile"
          :limit="1"
          :uploadText="'身份证人像面'"
        ></Uploader>
        <div class="mr20"></div>
        <Uploader
          :uploaderId="'idBackFile'"
          :params="idParams"
          :disabled="unchangeableShipOwner"
          @onSendFileList="idBackUploadSuccess"
          :fileList="idBackFile"
          :limit="1"
          :uploadText="'身份证国徽面'"
        ></Uploader>
      </div>
    </div>
    <div class="df aic jcfe mt50">
      <el-button v-if="unchangeableShipOwner" type="primary" @click="change(1)">
        修改
      </el-button>
      <el-button v-if="!unchangeableShipOwner" @click="cancelChange(1)">
        取消
      </el-button>
      <el-button
        v-if="!unchangeableShipOwner"
        type="primary"
        @click="submitChange(1)"
      >
        提交
      </el-button>
    </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="shipDetail.shipname"
          :disabled="unchangeableShip"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">MMSI</div>
        <el-input
          class="info-line-text"
          v-model="shipDetail.mmsi"
          :disabled="unchangeableShip"
        ></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="shipDetail.length"
          :disabled="unchangeableShip"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">船宽</div>
        <el-input
          class="info-line-text"
          v-model="shipDetail.breadth"
          :disabled="unchangeableShip"
        ></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="shipDetail.tonnage"
          :disabled="unchangeableShip"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">载货吨位</div>
        <el-input
          class="info-line-text"
          v-model="shipDetail.loadTons"
          :disabled="unchangeableShip"
        ></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="shipDetail.draught"
          :disabled="unchangeableShip"
        ></el-input>
      </div>
    </div>
    <Certs ref="certs"></Certs>
    <div class="df aic jcfe">
      <el-button v-if="unchangeableShip" type="primary" @click="change(0)">
        修改
      </el-button>
      <el-button v-if="!unchangeableShip" @click="cancelChange(0)">
        取消
      </el-button>
      <el-button
        v-if="!unchangeableShip"
        type="primary"
        @click="submitChange(0)"
      >
        提交
      </el-button>
    </div>
  </div>
</template>
<script>
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";
export default {
  setup() {
    const route = useRoute();
    let userDetail = ref({});
    let shipDetail = ref({});
    let idFrontFile = ref([]);
    let idBackFile = ref([]);
    let unchangeableShipOwner = ref(true);
    let unchangeableShip = ref(true);
    async function getUserDetail() {
      let res = await api.getShipOwnerDetail({
        shipOwnerId: route.query.shipOwnerId,
      });
      if (res.data.status == 0) {
        let r = res.data.result;

        let {
          //船东信息
          idcardBackDownloadUrl,
          idcardBackFileKey,
          idcardBackViewUrl,
          idcardFrontDownloadUrl,
          idcardFrontFileKey,
          idcardFrontViewUrl,
          idcardNo,
          phone,
          preferenceCargo,
          userId: shipOwnerId,
          userName,

          // 船舶信息
          breadth,
          draught,
          length,
          loadTons,
          mmsi,
          shipId,
          shipname,
          tonnage,
          shipCerts,
        } = r;

        userDetail.value = {
          idcardNo,
          phone,
          preferenceCargo,
          shipOwnerId,
          userName,
        };
        idFrontFile.value = idcardFrontFileKey
          ? [
              {
                url: idcardFrontViewUrl,
                idcardFrontDownloadUrl,
                idcardFrontFileKey,
                idcardFrontViewUrl,
              },
            ]
          : [];
        idBackFile.value = idcardBackFileKey
          ? [
              {
                url: idcardBackViewUrl,
                idcardBackDownloadUrl,
                idcardBackFileKey,
                idcardBackViewUrl,
              },
            ]
          : [];

        shipDetail.value = {
          breadth,
          draught,
          length,
          loadTons,
          mmsi,
          shipId,
          shipname,
          tonnage,
        };
        certs.value.initCerts(shipCerts);
      } else {
        ElNotification({
          type: "error",
          title: res.data.msg,
        });
        console.log(res);
      }
    }

    let idParams = ref({
      type: 1,
      location: "",
      shipOwnerId: 0,
    });

    let shipParams = ref({
      type: 2,
      shipOwnerId: 0,
      location: "",
    });

    function idFrontUploadSuccess(list) {
      idFrontFile.value = list;
    }
    function idBackUploadSuccess(list) {
      idBackFile.value = list;
    }

    let userDetailCache = ref({});
    let idFrontFileCache = ref([]);
    let idBackFileCache = ref([]);
    let shipDetailCache = ref({});
    function change(type) {
      if (type) {
        userDetailCache.value = _.cloneDeep(userDetail.value);
        idFrontFileCache.value = _.cloneDeep(idFrontFile.value);
        idBackFileCache.value = _.cloneDeep(idBackFile.value);
        unchangeableShipOwner.value = false;
      } else {
        shipDetailCache.value = _.cloneDeep(shipDetail.value);
        certs.value.editCerts();
        unchangeableShip.value = false;
      }
    }

    function cancelChange(type) {
      if (type) {
        if (!_.isEqual(userDetail.value, userDetailCache.value)) {
          userDetail.value = _.cloneDeep(userDetailCache.value);
        }
        if (!_.isEqual(idFrontFile.value, idFrontFileCache.value)) {
          idFrontFile.value = [];
          idFrontFile.value = _.cloneDeep(idFrontFileCache.value);
        }
        if (!_.isEqual(idBackFile.value, idBackFileCache.value)) {
          idBackFile.value = [];
          idBackFile.value = _.cloneDeep(idBackFileCache.value);
        }
        unchangeableShipOwner.value = true;
      } else {
        if (!_.isEqual(shipDetail.value, shipDetailCache.value)) {
          shipDetail.value = _.cloneDeep(shipDetailCache.value);
        }
        certs.value.cancelEditCerts();
        unchangeableShip.value = true;
      }
    }

    async function submitChange(type) {
      if (type) {
        let postData = {
          ...userDetail.value,
          idcardFrontDownloadUrl:
            idFrontFile.value[0]?.response?.result?.downloadUrl ||
            idFrontFile.value[0]?.idcardFrontDownloadUrl ||
            "",
          idcardFrontFileKey:
            idFrontFile.value[0]?.response?.result?.key ||
            idFrontFile.value[0]?.idcardFrontFileKey ||
            "",
          idcardFrontViewUrl:
            idFrontFile.value[0]?.response?.result?.viewUrl ||
            idFrontFile.value[0]?.idcardFrontViewUrl ||
            "",
          idcardBackDownloadUrl:
            idBackFile.value[0]?.response?.result?.downloadUrl ||
            idBackFile.value[0]?.idcardBackDownloadUrl ||
            "",
          idcardBackFileKey:
            idBackFile.value[0]?.response?.result?.key ||
            idBackFile.value[0]?.idcardBackFileKey ||
            "",
          idcardBackViewUrl:
            idBackFile.value[0]?.response?.result?.viewUrl ||
            idBackFile.value[0]?.idcardBackViewUrl ||
            "",
        };
        let res = await api.updateShipOwner(postData);
        if (res.data.status == 0) {
          ElNotification({
            type: "success",
            title: res.data.msg,
          });
          unchangeableShipOwner.value = true;
        } else {
          ElNotification({
            type: "error",
            title: res.data.msg,
          });
          console.log(res);
        }
        getUserDetail();
      } else {
        shipDetail.value.shipCerts = certs.value.sendCerts();
        let postData = {
          ...shipDetail.value,
          shipOwnerId: route.query.shipOwnerId,
        };
        postData.shipId = postData.shipId || 0;
        let res = await api.updateShip(postData);
        console.log(res);
        if (res.data.status == 0) {
          ElNotification({
            type: "success",
            title: res.data.msg,
          });
          unchangeableShip.value = true;
        } else {
          ElNotification({
            type: "error",
            title: res.data.msg,
          });
          console.log(res);
        }
        certs.value.disabled = true;

        getUserDetail();
      }
    }
    let certs = ref(null);

    onMounted(() => {
      getUserDetail();
    });
    return {
      idFrontUploadSuccess,
      idBackUploadSuccess,
      getUserDetail,
      userDetail,
      shipDetail,
      unchangeableShipOwner,
      unchangeableShip,
      idParams,
      shipParams,
      submitChange,
      change,
      cancelChange,
      router,
      idFrontFile,
      idBackFile,
      certs,
    };
  },
};
</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;
}
</style>
