<template>
  <div class="edit-popup">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="90px"
      :rules="formRules"
      :disabled="true"
    >
      <el-col :span="24" class="el-card pt-6">
        <div class="tit">甲方信息</div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="公司名称" prop="company_name">
              <el-input
                v-model="formData.company_a_name"
                placeholder="请输入公司名称"
                clearable
                :disabled="isDisabled"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="社会代码" prop="organization_code">
              <el-input
                :disabled="isDisabled"
                v-model="formData.company_a_code"
                placeholder="请输入社会代码"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24" class="el-card pt-6">
        <div class="tit">主要联系人</div>
        <el-row>
          <div style="display: flex; justify-content: left">
            <div class="right">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="姓名" prop="master_name">
                    <el-input
                      :disabled="isDisabled"
                      v-model="formData.company_a_user"
                      placeholder="请输入姓名"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="手机" prop="master_phone">
                    <el-input
                      :disabled="isDisabled"
                      v-model="formData.company_a_phone"
                      placeholder="请输入手机"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="邮箱">
                    <el-input
                      :disabled="isDisabled"
                      v-model="formData.company_a_email"
                      placeholder="请输入邮箱"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
      </el-col>
      <el-col :span="24" class="el-card pt-6">
        <div class="tit">乙方信息</div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="公司名称" prop="company_name">
              <el-input
                v-model="formData.company_b_name"
                placeholder="请输入公司名称"
                clearable
                :disabled="isDisabled"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="社会代码" prop="organization_code">
              <el-input
                :disabled="isDisabled"
                v-model="formData.company_b_code"
                placeholder="请输入社会代码"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24" class="el-card pt-6">
        <div class="tit">主要联系人</div>
        <el-row>
          <div style="display: flex; justify-content: left">
            <div class="right">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="姓名" prop="master_name">
                    <el-input
                      :disabled="isDisabled"
                      v-model="formData.company_b_user"
                      placeholder="请输入姓名"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="手机" prop="master_phone">
                    <el-input
                      :disabled="isDisabled"
                      v-model="formData.company_b_phone"
                      placeholder="请输入手机"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="邮箱">
                    <el-input
                      :disabled="isDisabled"
                      v-model="formData.company_b_email"
                      placeholder="请输入邮箱"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
      </el-col>
      <!--  -->
      <el-col :span="24" class="el-card pt-6" v-if="formData.cars_info">
        <div class="tit">租赁信息</div>
        <div>
          <el-row>
            <el-col :span="4">
              <el-form-item label-width="120px" label="车牌号"
                ><el-input
                  v-model="formData.cars_info.license"
                  placeholder="请输入车牌号"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label-width="120px" label="车辆类型">
                <el-input
                  v-model="formData.type"
                  placeholder="请输入车辆类型"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="120px" label="使用公司"
                ><el-input
                  v-model="formData.company_b_name"
                  placeholder="请输入使用公司"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="120px" label="签约时间">
                <el-input
                  v-model="formData.update_time"
                  placeholder="请输入签约时间"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input
              ></el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-form>
    <!-- 小组公司申请车辆 -->
    <!-- {{ formData.contract_logistic_id }}
    {{ formData.type }} -->
    <div
      v-if="formData.contract_logistic_id && formData.type == '租赁车辆'"
      class="el-card pt-6"
    >
      <div class="tit">租赁信息</div>

      <div style="padding: 0 2vw">
        <el-checkbox-group
          :max="formData.num"
          v-model="checkList"
          @change="handChangeFn"
        >
          <el-checkbox
            :label="item.license"
            v-for="(item, index) in formData.car_list"
            :key="index"
          />
        </el-checkbox-group>
      </div>
    </div>
    <div class="el-card pt-6">
      <el-upload
        style="display: inline-block"
        :headers="{ Token: userStore.token }"
        :action="base_url + '/upload/file'"
        :on-success="handleAvatarSuccess_three"
        :before-upload="handleBeforeUpload"
        :limit="1"
        v-if="formData?.status == 0"
        :on-exceed="handleExceed"
        ref="upload"
      >
        <el-button type="primary">{{
          formData.file ? "重新上传" : "上传合同"
        }}</el-button>
      </el-upload>
      <a
        v-if="formData.file && formData?.status == 0"
        style="margin-left: 10px; color: #4a5dff"
        :href="formData.file"
        target="_blank"
        >合同已上传,点击查看</a
      >
      <el-button type="primary" v-if="formData.status > 0" @click="test"
        >查看合同</el-button
      >
    </div>
    <el-button type="primary" v-if="formData.status == 0" @click="create"
      >确定</el-button
    >
  </div>
</template>
<script setup>
import { reactive, ref, inject } from "vue";
import { leaseUpContract, leaseContractDetail } from "@/api/contract";
import useUserStore from "@/stores/modules/user";
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const checkList = ref([]);
const formData = reactive({
  contract_logistic_id: "",
  contract_no: "",
  company_a_id: "",
  company_a_name: "",
  company_a_code: "",
  company_a_user: "",
  company_a_phone: "",
  company_a_email: "@service.ebaoquan.org",
  company_b_id: "",
  company_b_name: "",
  company_b_user: "",
  company_b_phone: "",
  company_b_code: "",
  company_b_email: "@service.ebaoquan.org",
  num: "",
  cars_info: {
    id: "",
    license: "",
  },
  car_list: [],
  type: 0,
  status: 0,
  file: "",
  contract_url: "",
  signing_timer: 0,
  url: null,
  create_time: "2023-08-31 14:26:42",
  update_time: "2023-08-31 14:26:49",
  reject_message: "",
});
let arrs = [];

const base_url = inject("base_url");
const handChangeFn = (e) => {
  arrs = [];
  e.map((item) => {
    formData.car_list.forEach((element) => {
      if (element.license == item) {
        arrs.push(element);
      }
    });
  });
  // console.log(JSON.stringify(arrs));
  // console.log(arrs[0].id);
  // console.log(checkList.value);
  // console.log(e);
  // console.log(formData.car_list);
  // console.log(formData.file);
};
const test = () => {
  window.open(formData.file, "_blank");
};
leaseContractDetail({ id: route.query.id }).then((res) => {
  for (let key in formData) {
    formData[key] = res[key];
  }
  if (formData.company_a_id) {
    // console.log(JSON.parse(formData.cars_info));
    // formData.cars_info = JSON.parse(formData.cars_info) || "";
  }
  formData.type ? (formData.type = "自有车辆") : (formData.type = "租赁车辆");
  console.log(formData.type);
});

const handleAvatarSuccess_three = (response, uploadFile) => {
  formData.file = response.data.uri;
};

const create = () => {
  leaseUpContract({
    id: route.query.id,
    file: formData.file,
    cars: JSON.stringify(arrs),
  }).then((res) => {
    console.log(res);
  });
};
</script>

<style lang="scss">
.tit {
  font-size: 1.2rem;
  translate: 1vw -1vw;
}

.avatar-uploader .el-upload {
  width: 10vw;
  height: 6.3vw;
  background-color: #fff;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.headimg {
  margin-left: 18px;
  margin-bottom: 18px;
  width: 120px;
  height: 140px;
  overflow: hidden;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  flex-shrink: 0;
}
.upload-demo {
  display: flex;
}
.avatar-uploader-head .el-upload {
  width: 120px;
  height: 140px;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.otherimg {
  img {
    width: 10vw;
    height: 6.3vw;
    border-radius: 5px;
    margin-left: 12px;
    margin-bottom: 12px;
  }
}

.el-card {
  margin-bottom: 10px;
  background-color: #fff;
}

.tit {
  margin-top: 15px;
}

.others {
  width: 100% !important;
}
</style>
