<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 readonly v-model="compeny.company_name" />
      </el-form-item>
      <el-form-item label="社会代码" prop="organization_code" required>
        <el-input readonly v-model="compeny.organization_code" />
      </el-form-item>
      <el-form-item label="主要联系人" prop="company_name" required>
        <el-input readonly v-model="compeny.master_name" />
      </el-form-item>
      <el-form-item label="手机号" prop="master_phone" required>
        <el-input readonly v-model="compeny.master_phone" />
      </el-form-item>
      <!-- <el-form-item label="公司类型" prop="compeny">
        <el-select
          readonly
          v-model="compeny.company_type_name"
        >
        </el-select>
      </el-form-item>
      <el-form-item label="省" prop="province">
        <el-select
          readonly
          v-model="compeny.province_name"
        >
        </el-select>
      </el-form-item> -->
      <el-form-item label="市" prop="city">
        <!-- <el-select readonly v-model="compeny.city_name">
        </el-select> -->
        <el-input readonly v-model="compeny.city_name" />
      </el-form-item>
      <el-form-item label="区" prop="area">
        <!-- <el-select readonly v-model="compeny.area_name">
        </el-select> -->
        <el-input readonly v-model="compeny.area_name" />
      </el-form-item>
      <el-form-item
        label="镇"
        v-if="compeny.company_type != 30"
        prop="company_type_name"
      >
        <!-- <el-select
          readonly
          v-model="compeny.street_name"
        >
        </el-select> -->
        <el-input readonly v-model="compeny.street_name" />
      </el-form-item>
      <el-form-item
        v-if="compeny.company_type != 30"
        label="地址"
        prop="address"
      >
        <el-input
          readonly
          v-model="compeny.address"
          :style="{ width: '32rem' }"
        />
      </el-form-item>
    </el-form>
  </el-card>
  <el-card v-if="false">
    <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
        v-if="compenyimg?.other_qualifications?.length > 0"
        class="other"
        label="其他资质"
        prop="contract_no"
        required
      >
        <div
          class="company"
          v-for="(v, i) in compenyimg?.other_qualifications"
          :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 readonly v-model="compenyB.company_name" />
      </el-form-item>
      <el-form-item label="社会代码" prop="organization_code" required>
        <el-input readonly v-model="compenyB.organization_code" />
      </el-form-item>
      <el-form-item label="主要联系人" prop="master_name" required>
        <el-input readonly v-model="compenyB.master_name" />
      </el-form-item>
      <el-form-item label="手机号" prop="master_phone" required>
        <el-input readonly v-model="compenyB.master_phone" />
      </el-form-item>
      <!-- <el-form-item label="公司类型" prop="company_type">
        <el-select
          readonly
          v-model="compenyB.company_type_name"
        >
          <el-option></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="省" prop="province">
        <el-select
          readonly
          v-model="compenyB.province_name"
        >
        </el-select>
      </el-form-item> -->
      <el-form-item label="市" prop="city">
        <!-- <el-select readonly v-model="compenyB.city_name">
        </el-select> -->
        <el-input readonly v-model="compeny.city_name" />
      </el-form-item>
      <el-form-item label="区" prop="area">
        <!-- <el-select readonly v-model="compenyB.area_name">
        </el-select> -->
        <el-input readonly v-model="compeny.area_name" />
      </el-form-item>
      <el-form-item label="镇" prop="street">
        <!-- <el-select
          readonly
          v-model="compenyB.street_name"
        >
          <el-option></el-option>
        </el-select> -->
        <el-input readonly v-model="compeny.street_name" />
      </el-form-item>
      <el-form-item label="地址" prop="street">
        <el-input
          readonly
          v-model="compenyB.address"
          :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 class="other" label="资质信息" prop="contract_no" required>
        <div class="company" v-for="(v, i) in compenyBimg" :key="i">
          <el-image
            :src="v"
            :preview-src-list="compenyBimg"
            :initial-index="i"
            fit="cover"
          />
        </div>
      </el-form-item>
      <!-- <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
        v-if="compenyBimg?.other_qualifications?.length > 0"
        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
            readonly
            v-model="persen.nickname"
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item label="性别">
          <el-input readonly v-model="persen.sex" placeholder="请输入性别" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            readonly
            v-model="persen.mobile"
            placeholder="请输入联系电话"
          />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input
            v-model="persen.id_card"
            placeholder="请输入身份证号"
            readonly
          />
        </el-form-item>
        <el-form-item label="省" prop="province">
          <el-select
            readonly
            v-model="persen.province_name"
            placeholder="请选择省"
          >
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="city">
          <el-select readonly v-model="persen.city_name" placeholder="请选择市">
          </el-select>
        </el-form-item>
        <el-form-item label="区" prop="area">
          <el-select readonly v-model="persen.area_name" placeholder="请选择区">
            <el-option></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="镇" prop="street">
          <el-select
            readonly
            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"
          :readonly="true"
          placeholder="暂无甲方方"
        />
      </el-form-item>
      <el-form-item label="乙方" prop="contract_no">
        <el-input
          v-model="compenyB.company_name"
          :readonly="true"
          placeholder="暂无乙方"
        />
      </el-form-item>
      <!-- <el-form-item label="合同类型" prop="contract_no">
        <el-input
          v-model="basicdata.contract_type_name"
          :readonly="true"
          placeholder="暂无合同"
        />
      </el-form-item> -->
      <el-form-item label="合同类型">
        <el-input
          value="商户入驻合同"
          :readonly="true"
          placeholder="商户入驻合同"
        />
      </el-form-item>
      <br />
      <el-form-item v-if="formData.notes" label="备注">
        <el-input v-model="formData.notes" :readonly="true" type="textarea" />
      </el-form-item>
      <!-- <el-form-item label="合同编号" prop="contract_no">
                  <el-input
                      v-model="formData.party_b_name"
                      :readonly="true"
                      placeholder="暂无签约方"
                  />
              </el-form-item> -->
    </el-form>
  </el-card>
  <el-card>
    <el-form label-width="100px">
      <el-form-item
        v-if="isshow || formData?.status == 0"
        label="合同上传"
        prop="field127"
      >
        <el-upload
          accept=".pdf"
          :headers="{ Token: userStore.token }"
          class="upload-demo"
          :action="base_url + '/upload/file'"
          :on-success="handleAvatarSuccess_four"
          :before-upload="handleBeforeUpload"
          :limit="1"
          v-if="formData?.status == 0"
          :on-exceed="handleExceed"
          ref="upload"
          v-perms="['shop_contract/upload']"
        >
          <el-button type="primary">{{
            formData.file ? "重新上传" : "上传"
          }}</el-button>
        </el-upload>
        <a
          v-perms="['shop_contract/file']"
          v-if="formData.file"
          style="margin-left: 10px; color: #4a5dff; align-self: flex-start"
          :href="formData.file"
          target="_blank"
          >合同已上传,点击查看</a
        >
      </el-form-item>
      <el-form-item v-if="isshow || formData.status == 0">
        <el-button
          v-perms="['shop_contract/upload']"
          type="primary"
          @click="submitContract"
          >确定</el-button
        >
      </el-form-item>
      <el-form-item v-else-if="formData.file && formData.status">
        <a
          v-perms="['shop_contract/file']"
          v-if="formData.file"
          style="margin-left: 10px; color: #4a5dff"
          :href="
            formData.signed_contract_url
              ? formData.signed_contract_url
              : formData.file
          "
          target="_blank"
          >查看合同</a
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>
  
  <script lang="ts" setup>
import {
  type FormInstance,
  type UploadProps,
  ElMessage,
  type UploadUserFile,
} from "element-plus";
import { apiShopContractDetail, apiShopWindControl } from "@/api/shop_contract";
import { ref, reactive, defineExpose, computed, inject } from "vue";
import { useRoute } from "vue-router";
import { dictDataLists } from "@/api/setting/dict";
// import { upContact } from "@/api/consumer";
import { genFileId } from "element-plus";
const { query } = useRoute();
import useUserStore from "@/stores/modules/user";
import useMultipleTabs from "@/hooks/useMultipleTabs";
const { removeTab } = useMultipleTabs();
const base_url: any = inject("base_url");

const formData = reactive({
  id: "",
  company_id: "",
  contract_type: "",
  contract_type_name: "",
  contract_no: "",
  file: "",
  status: "",
  check_status: "",
  party_a: "",
  party_a_name: "",
  party_b: "",
  party_b_name: "",
  area_manager: "",
  area_manager_name: "",
  type_name: "",
  url: "",
  status_name: "",
  signed_contract_url: "",
  notes: "",
});
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(false);
const isshow = ref(true);
const route = useRoute();
const userStore = useUserStore();

async function render() {
  // 传值赋值
  const res = await apiShopContractDetail({ id: query.id });
  Object.keys(formData).forEach((key: any) => {
    if (res[key] != null && res[key] != undefined) formData[key] = res[key];
  });
  compeny.value = res.party_a_info;
  basicdata.value = res;
  if (basicdata.value.status == 1 || res.check_status == 3 || res.status == 1) {
    isshow.value = false;
  }
  try {
    if (res.party_a_info.qualification.bank_account) {
      res.party_a_info.qualification.bank_account = JSON.parse(
        res.party_a_info.qualification.bank_account
      );
      compenyimg.value = res.party_a_info.qualification;
    }
    if (res.party_b_info.qualification.other_qualifications) {
      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;
  compenyB.value = res.party_b_info;
  compenyBimg.value = res.party_b_info.qualification;
  flag.value = false;
  // 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 handleBeforeUpload = (e: any) => {
  if (e?.name?.substring(e.name.length - 4, e.name.length) != ".pdf") {
    ElMessage.error("仅支持上传.pdf文件");
    return false;
  }
  return true;
};

const upload = ref(null);
const handleExceed = (files: any) => {
  upload.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  upload.value!.handleStart(file);
  upload.value!.submit();
};

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

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

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;
  }
  .el-image {
    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;
  pointer-event: none;
}

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

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