<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_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="headimg">
              <el-upload
                :disabled="isDisabled"
                v-model="formData.avatar"
                class="avatar-uploader-head"
                :data="{ cid: 1 }"
                action="https://worker-task.lihaink.cn/api/upload/image"
                :show-file-list="false"
                :on-success="handleAvatarSuccessAvatar"
              >
                <img
                  v-if="formData.avatar"
                  :src="formData.avatar"
                  class="avatar"
                />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </div> -->
            <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-col :span="10">
                        <el-form-item label="片区经理" prop="area_manager_name">
                            <el-input
                                :disabled="isDisabled"
                                v-model="formData.area_manager_name"
                                placeholder="选择片区经理"
                                clearable
                                :style="{ width: '100%' }"
                                @click="isAreaManager = true"
                            ></el-input>
                        </el-form-item>
                    </el-col> -->
              </el-row>
            </div>
          </div>
        </el-row>
      </el-col>

      <!-- <div style="font-size: 1.2rem; margin: 10px 0">资质信息</div> -->

      <el-col :span="24" class="el-card pt-6">
        <div class="tit">租赁信息</div>
        <el-row v-for="(item, index) in formData.cars_info">
          <el-col :span="4">
            <el-form-item label-width="120px" label="车牌号"
              ><el-input
                v-model="item.license"
                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>
      </el-col>
    </el-form>

    <!-- <el-button @click="create">完成</el-button> -->
    <el-button
      v-if="formData.status == 1"
      type="primary"
      :disabled="isDisabled"
      size="medium"
      @click="create"
      >发送合同</el-button
    ><el-button
      v-if="formData.status == 2"
      type="primary"
      :disabled="num"
      size="medium"
      @click="sendAgain"
      >重新发送{{ num ? num + "s" : "" }}</el-button
    >

    <el-button type="primary" @click="checkContract" v-if="formData.file"
      >查看合同</el-button
    >
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { contractDetail, sendContract, sendMsg } from "@/api/contract";
import feedback from "@/utils/feedback";

const router = useRouter();
const route = useRoute();
const formData = reactive({
  id: 8,
  contract_no: "",
  company_a_name: "",
  company_a_code: "",
  company_a_user: "",
  company_a_phone: "",
  company_a_email: "",
  company_b_id: 165,
  company_b_name: "",
  company_b_user: "",
  company_b_phone: "",
  company_b_code: "",
  company_b_email: "",
  num: 1,
  cars_info: [
    {
      id: 20,
      license: "",
    },
  ],
  status: 0,
  file: "",
  contract_url: "",
  signing_timer: 0,
  url: null,
  create_time: "",
  update_time: "",
});
const num = ref(0);
// route.query.flag

contractDetail({ id: route.query.id }).then((res) => {
  for (let key in formData) {
    formData[key] = res[key];
  }
  console.log(formData);
});
const checkContract = () => {
  window.open(formData.contract_url, "_blank");
};
const timeFn = () => {
  const timers = setInterval(() => {
    num.value--;
    if (num.value <= 0) {
      clearInterval(timeFn);
    }
  }, 1000);
};
const create = () => {
  sendContract({
    id: route.query.id,
  }).then((res) => {
    formData.status = 2;
    feedback.msgSuccess("发送成功");
    num.value = 10;
    timeFn();
  });
};
const sendAgain = () => {
  sendMsg({ id: route.query.id }).then((res) => {
    feedback.msgSuccess("发送成功");
    num.value = 10;
    timeFn();
  });
};
</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;
}

.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>
