<template>
  <el-card class="box-card">
    <template #header>
      <span>甲方基本信息</span>
    </template>
    <el-form
      :inline="true"
      ref="formRef"
      :model="compeny"
      label-width="91.5px"
      :rules="formRules"
      class="select"
    >
      <el-form-item label="公司名称" prop="company_name" required>
        <el-input
          disabled
          v-model="compeny.company_name"
          placeholder="请输入公司名称"
        />
      </el-form-item>
      <el-form-item label="社会代码" prop="organization_code" required>
        <el-input
          disabled
          v-model="compeny.organization_code"
          placeholder="请输入社会代码"
        />
      </el-form-item>
      <el-form-item label="主要联系人" prop="company_name" required>
        <el-input
          disabled
          v-model="compeny.master_name"
          placeholder="请输入主要联系人"
        />
      </el-form-item>
      <el-form-item label="公司类型" prop="compeny">
        <el-select
          disabled
          v-model="compeny.company_type_name"
          placeholder="请输入公司类型"
        >
        </el-select>
      </el-form-item>
      <el-form-item label="省" prop="province">
        <el-select
          disabled
          v-model="compeny.province_name"
          placeholder="请选择省"
        >
        </el-select>
      </el-form-item>
      <el-form-item label="市" prop="city">
        <el-select disabled v-model="compeny.city_name" placeholder="请选择市">
        </el-select>
      </el-form-item>
      <el-form-item label="区" prop="area">
        <el-select disabled v-model="compeny.area_name" placeholder="请选择区">
        </el-select>
      </el-form-item>
      <el-form-item
        label="镇"
        v-if="compeny.company_type != 30"
        prop="company_type_name"
      >
        <el-select
          disabled
          v-model="compeny.street_name"
          placeholder="请选择镇"
        >
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="compeny.company_type != 30"
        label="地址"
        prop="address"
      >
        <el-input
          disabled
          v-model="compeny.address"
          placeholder="请输入公司地址"
          :style="{ width: '32rem' }"
        />
      </el-form-item>
    </el-form>
  </el-card>
  <el-card>
    <template #header>
      <span>甲方资质信息</span>
    </template>
    <el-form
      :inline="true"
      ref="formRef"
      :model="compeny"
      label-width="90px"
      :rules="formRules"
      class="company_z"
    >
      <el-form-item label="公司资质" prop="contract_type" required>
        <div class="company">
          <img :src="compenyimg.business_license" />
        </div>
      </el-form-item>
      <el-form-item
        label-width="120px"
        label="开户许可证"
        prop="contract_no"
        required
      >
        <div class="company">
          <img :src="compenyimg.business_licenseB" />
        </div>
      </el-form-item>
      <el-form-item label="其他资质" prop="contract_no" required>
        <div
          class="company other"
          v-for="(v, i) in compenyimg.bank_account"
          :key="i"
        >
          <img :src="v" />
        </div>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card v-if="show">
    <template #header>
      <span>乙方基本信息</span>
    </template>
    <el-form
      :inline="true"
      ref="formRef"
      :model="compenyB"
      label-width="91.5px"
      :rules="formRules"
      class="select"
    >
      <el-form-item label="公司名称" prop="company_name" required>
        <el-input
          disabled
          v-model="compenyB.company_name"
          placeholder="请输入公司名称"
        />
      </el-form-item>
      <el-form-item label="社会代码" prop="organization_code" required>
        <el-input
          disabled
          v-model="compenyB.organization_code"
          placeholder="请输入社会代码"
        />
      </el-form-item>
      <el-form-item label="公司类型" prop="company_type">
        <el-select
          disabled
          v-model="compenyB.company_type_name"
          placeholder="请输入社会类型"
        >
          <el-option></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主要联系人" prop="master_name" required>
        <el-input
          disabled
          v-model="compenyB.master_name"
          placeholder="请输入主要联系人"
        />
      </el-form-item>
      <el-form-item label="省" prop="province">
        <el-select
          disabled
          v-model="compenyB.province_name"
          placeholder="请选择省"
        >
        </el-select>
      </el-form-item>
      <el-form-item label="市" prop="city">
        <el-select disabled v-model="compenyB.city_name" placeholder="请选择市">
        </el-select>
      </el-form-item>
      <el-form-item label="区" prop="area">
        <el-select disabled v-model="compenyB.area_name" placeholder="请选择区">
        </el-select>
      </el-form-item>
      <el-form-item label="镇" prop="street">
        <el-select
          disabled
          v-model="compenyB.street_name"
          placeholder="请选择镇"
        >
          <el-option></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地址" prop="street">
        <el-input
          disabled
          v-model="compenyB.address"
          placeholder="请输入公司地址"
          :style="{ width: '31.5rem' }"
        />
      </el-form-item>
    </el-form>
  </el-card>
  <el-card v-if="show">
    <template #header>
      <span>乙方资质信息</span>
    </template>
    <el-form
      :inline="true"
      ref="formRef"
      :model="formData"
      label-width="90px"
      :rules="formRules"
      class="company_z"
    >
      <el-form-item label="公司资质" prop="contract_type" required>
        <div class="company">
          <img :src="compenyBimg.business_license" />
        </div>
      </el-form-item>
      <el-form-item
        label-width="120px"
        label="开户许可证"
        prop="contract_no"
        required
      >
        <div class="company">
          <img :src="compenyBimg.business_licenseB" />
        </div>
      </el-form-item>
      <el-form-item class="other" label="其他资质" prop="contract_no" required>
        <div
          class="company"
          v-for="(v, i) in compenyBimg.other_qualifications"
          :key="i"
        >
          <img :src="v" />
        </div>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card v-if="flag">
    <template #header>
      <span>个人基本信息</span>
    </template>
    <div class="persenal">
      <img :src="persen.avatar" />
      <el-form
        :inline="true"
        ref="formRef"
        :model="persen"
        label-width="90px"
        :rules="formRules"
        class="person_select"
      >
        <el-form-item label="姓名">
          <el-input
            disabled
            v-model="persen.nickname"
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item label="性别">
          <el-input disabled v-model="persen.sex" placeholder="请输入性别" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            disabled
            v-model="persen.mobile"
            placeholder="请输入联系电话"
          />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input
            v-model="persen.id_card"
            placeholder="请输入身份证号"
            disabled
          />
        </el-form-item>
        <el-form-item label="省" prop="province">
          <el-select
            disabled
            v-model="persen.province_name"
            placeholder="请选择省"
          >
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="city">
          <el-select disabled v-model="persen.city_name" placeholder="请选择市">
          </el-select>
        </el-form-item>
        <el-form-item label="区" prop="area">
          <el-select disabled v-model="persen.area_name" placeholder="请选择区">
            <el-option></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="镇" prop="street">
          <el-select
            disabled
            v-model="persen.street_name"
            placeholder="请选择镇"
          >
            <el-option></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
  <el-card v-if="flag">
    <template #header>
      <span>个人资质信息</span>
    </template>
    <el-form class="idcard" :model="persenimg" :inline="true">
      <el-form-item label="身份证">
        <img :src="persenimg.id_card" />
        <img :src="persenimg.id_card_b" />
      </el-form-item>
      <el-form-item label="银行卡">
        <img :src="persenimg.bank_account" />
        <img :src="persenimg.bank_account_b" />
      </el-form-item>
      <el-form-item
        v-if="persenimg.car_card || persenimg.car_card_b"
        label="行驶证"
      >
        <img v-if="persenimg.car_card" :src="persenimg.car_card" />
        <img v-if="persenimg.car_card_b" :src="persenimg.car_card_b" />
      </el-form-item>
    </el-form>
  </el-card>
  <el-card>
    <template #header>
      <span>电子合同</span>
    </template>
    <el-form
      :inline="true"
      class="frame"
      ref="formRef"
      :model="formData"
      label-width="90px"
      :rules="formRules"
    >
      <el-form-item label="甲方" prop="contract_type">
        <el-input
          v-model="compeny.company_name"
          :disabled="true"
          placeholder="暂无甲方方"
        />
      </el-form-item>
      <el-form-item label="乙方" prop="contract_no">
        <el-input
          v-model="compenyB.company_name"
          :disabled="true"
          placeholder="暂无乙方"
        />
      </el-form-item>
      <el-form-item label="合同类型" prop="contract_no">
        <el-input
          v-model="basicdata.contract_type_name"
          :disabled="true"
          placeholder="暂无合同"
        />
      </el-form-item>
      <!-- <el-form-item label="合同编号" prop="contract_no">
                <el-input
                    v-model="formData.party_b_name"
                    :disabled="true"
                    placeholder="暂无签约方"
                />
            </el-form-item> -->
    </el-form>
  </el-card>
  <el-card v-if="isshow">
    <el-form label>
      <el-form-item label="合同上传" label-width="100px" prop="field127">
        <el-upload
          :headers="{ Token: userStore.token }"
          v-model:file-list="fileList"
          class="upload-demo"
          action="https://worker-task.lihaink.cn/adminapi/upload/file"
          :on-success="handleAvatarSuccess_four"
          multiple
          :limit="1"
        >
          <el-button type="primary">上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button
          style="margin-left: 100px"
          type="primary"
          @click="submitContract"
          >确定</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
import {
  type FormInstance,
  type UploadProps,
  ElMessage,
  type UploadUserFile,
} from "element-plus";
import { apiContractDetail } from "@/api/contract";
import { ref, reactive, defineExpose, computed } from "vue";
import { useRoute } from "vue-router";
import { dictDataLists } from "@/api/setting/dict";
import { upContact } from "@/api/consumer";
const { query } = useRoute();
import useUserStore from "@/stores/modules/user";

const formData = reactive({
  id: "",
  company_id: "",
  contract_type: "",
  contract_type_name: "",
  contract_no: "",
  file: "",
  status: "",
  party_a: "",
  party_a_name: "",
  party_b: "",
  party_b_name: "",
  area_manager: "",
  area_manager_name: "",
  type_name: "",
  url: "",
  status_name: "",
});
const fileList = ref<UploadUserFile[]>([]);
const basicdata = ref({});
const compeny = ref({});
const compenyimg = ref([]);
const compenyB = ref([]);
const compenyBimg = ref([]);
const persen = ref([]);
const persenimg = ref([]);
const show = ref(true);
const flag = ref(true);
const isshow = ref(true);
const route = useRoute();
const userStore = useUserStore();

async function render() {
  // 传值赋值
  const res = await apiContractDetail({ id: query.id });
  compeny.value = res.party_a_info;
  basicdata.value = res;
  if (basicdata.value.status == 1) {
    isshow.value = false;
  }
  try {
    res.party_a_info.qualification.bank_account = JSON.parse(
      res.party_a_info.qualification.bank_account
    );
    compenyimg.value = res.party_a_info.qualification;
    res.party_b_info.qualification.other_qualifications = JSON.parse(
      res.party_b_info.qualification.other_qualifications
    );
    compenyBimg.value = res.party_b_info.qualification;
  } catch (error) {}
  compenyimg.value = res.party_a_info.qualification;
  console.log(compenyimg.value);
  if (res.type == 2) {
    show.value = false;
    res.party_b_info.sex == 1
      ? (res.party_b_info.sex = "男")
      : (res.party_b_info.sex = "女");
    persen.value = res.party_b_info;
    persenimg.value = res.party_b_info.qualification;
  }
  if (res.type == 1) {
    compenyB.value = res.party_b_info;
    compenyBimg.value = res.party_b_info.qualification;
    flag.value = false;
  } else {
    compenyB.value.company_name = res.party_b_info.nickname;
  }
}

const handleAvatarSuccess_four: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == 0) {
    ElMessage.error(response.msg);
    return;
  }
  formData.file = response.data.uri;
};

const submitContract = () => {
  if (!formData.file) ElMessage.error("请先上传合同!");
  upContact({ file: formData.file, id: route.query.id });
};

onMounted(async () => {
  await render();
});
</script>

<style lang="scss" scoped>
.frame {
  .el-form-item {
    width: 40%;
    .el-input {
      width: 100%;
    }
  }
}
.select {
  .el-form-item {
    .el-select {
      width: 12rem;
    }
  }
}
.person_select {
  .el-form-item {
    width: 30%;
    .el-select {
      width: 100%;
    }
  }
}
.company {
  display: flex;
  justify-content: space-between;
  img {
    width: 10vw;
    height: 6.3vw;
    margin-right: 10px;
  }
}
.persenal {
  display: flex;
  align-items: center;
  img {
    width: 10vw;
    height: 6.3vw;
  }
}
.idcard {
  img {
    width: 10vw;
    height: 6.3vw;
    margin-right: 12px;
  }
}
.company_z {
  .el-form-item {
    width: 40%;
  }
  .other {
    width: 100% !important;
  }
}
.el-card {
  margin-top: 10px;
}

.el-upload-list .el-upload-list__item-thumbnail {
  width: 500px; /* 设置文件缩略图的宽度 */
}

.el-upload-list .el-upload-list__item-name {
  max-width: 450px; /* 设置文件名的最大宽度 */
}
</style>
