<template>
  <div class="ResidentMainBox p-2 w-full h-full">
    <PageHeader title="车位详情"></PageHeader>
    <div class="ResidentMainBody">
      <el-row :span="24" :gutter="20">
        <el-col :span="16">
          <!-- 车位信息 -->
          <div class="mb-10">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>车位信息</span>
                </div>
              </template>
              <div class="w-full h-full CarinfoBox gridbox">
                <div class="carinfo_item">
                  <div class="label">区域：</div>
                  <div class="main">地下停车场A区</div>
                </div>
                <div class="carinfo_item">
                  <div class="label">车位编号：</div>
                  <div class="main">地下停车场A区</div>
                </div>
                <div class="carinfo_item">
                  <div class="label">车位面积：</div>
                  <div class="main">地下停车场A区</div>
                </div>
                <div class="carinfo_item">
                  <div class="label">楼层：</div>
                  <div class="main">地下停车场A区</div>
                </div>
                <div class="carinfo_item">
                  <div class="label">车位类型：</div>
                  <div class="main">地下停车场A区</div>
                </div>
                <div class="carinfo_item">
                  <div class="label">车位状态：</div>
                  <div class="main">地下停车场A区</div>
                </div>
                <div class="carinfo_item">
                  <div class="label">持有人：</div>
                  <div class="main">地下停车场A区</div>
                </div>
                <div class="carinfo_item">
                  <div class="label">添加时间：</div>
                  <div class="main">地下停车场A区</div>
                </div>
                <div class="carinfo_item">
                  <div class="label">添加人：</div>
                  <div class="main">地下停车场A区</div>
                </div>
                <div class="carinfo_item">
                  <div class="label">备注：</div>
                  <div class="main">地下停车场A区</div>
                </div>
              </div>
            </el-card>
          </div>
          <!-- 车辆信息 -->
          <div class="mb-10">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>车辆信息</span>
                </div>
              </template>
              <div class="w-full h-full CarinfoBox">
                <el-row>
                  <el-col :span="8">
                    <div class="carinfo_item">
                      <div class="label">车牌号：</div>
                      <div class="main">浙B·N6688</div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="carinfo_item">
                      <div class="label">车辆品牌：</div>
                      <div class="main">宝马</div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="carinfo_item">
                      <div class="label">车辆型号</div>
                      <div class="main">X5</div>
                    </div>
                  </el-col>
                </el-row>
                <el-row class="mt-30px mb-30px">
                  <el-col :span="8">
                    <div class="carinfo_item">
                      <div class="label">车身颜色：</div>
                      <div class="main">白色</div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="carinfo_item">
                      <div class="label">备注：</div>
                      <div class="main">无</div>
                    </div>
                  </el-col>
                  <el-col :span="8"> </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="carinfo_item flex-items-start">
                      <div class="label">车辆照片：</div>
                      <div class="main">
                        <el-image
                          class="carinfoImage"
                          src="https://ts1.tc.mm.bing.net/th?id=ORMS.76ee9c7ea9fe203b608f9048f54b3cbd&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0"
                        ></el-image>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
          <div class="">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>审核</span>
                </div>
              </template>
              <div class="w-full h-full flex mt-2">
                <div class="title">审批意见</div>
                <div class="preivewBodybox flex-1 ml-5">
                  <el-input type="textarea" :rows="5"></el-input>
                  <div class="actions mt-5">
                    <el-button type="primary">审核通过</el-button>
                    <el-button type="danger">审核不通过</el-button>
                    <el-button @click="handlBacK">返回</el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="8">
          <el-card style="position: relative" class="h-full">
            <template #header>
              <div class="asideCardHeader w-full h-full">
                <div class="cardSubtitle">
                  <div class="line"></div>
                  <div class="subtitle">审批流程</div>
                </div>
              </div>
            </template>
            <div class="w-full h-50%">
              <!-- <el-steps space="200px" direction="vertical" :active="activeStop">
                <el-step :description="reviewInfo.submitTime">
                  <template #title>
                    <span v-if="active === 0">未提交信息</span>
                    <span v-if="active >= 1">已提交信息</span>
                  </template>
                </el-step>
                <el-step :description="reviewInfo.propertyTime">
                  <template #title>
                    <span v-if="active <= 2">待审核</span>
                    <span v-if="active === 3">物业审核不通过</span>
                    <span v-if="active >= 4">物业审核通过</span>
                  </template>
                </el-step>
                <el-step :description="reviewInfo.certificationTime">
                  <template #title>
                    <span v-if="active <= 5">未认证</span>
                    <span v-if="active === 6">已认证</span>
                  </template>
                </el-step>
                <el-step>
                  <template #title>
                    <span>审核完成</span>
                  </template>
                </el-step>
              </el-steps> -->
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
/** 住户审核状态 */
enum reviewStatus {
  /** 未提交 */
  unSubmit = 0,
  /** 已提交 */
  Submited = 1,
  /** 待认证 */
  awaitReview = 2,
  /** 认证不通过 */
  unReviewPass = 3,
  /** 认证通过 */
  ReviewPass = 4,
  /** 未认证 */
  uncertification = 5,
  /** 已认证 */
  Certification = 6
}
type activeType = reviewStatus;
const active = ref<activeType>(6);
const activeStop = ref(4);

function handleActivestaus(rews) {
  if (rews.submitStatus === reviewStatus.unSubmit) {
    activeStop.value = 0;
    active.value = 0;
  } else if (rews.submitStatus === reviewStatus.Submited) {
    active.value = 1;
    activeStop.value = 1;
    // 待认证
    if (rews.propertyStatus === 0) {
      active.value = reviewStatus.awaitReview;
    } else if (rews.propertyStatus === 1) {
      active.value = reviewStatus.unReviewPass;
    } else if (rews.propertyStatus === 2) {
      active.value = reviewStatus.ReviewPass;
      activeStop.value = 2;

      if (rews.certificationStatus === 0) {
        active.value = reviewStatus.uncertification;
      } else if (rews.certificationStatus === 1) {
        active.value = reviewStatus.Certification;
        activeStop.value = 4;
      }
    }
  }
}

const router = useRouter();
function handlBacK() {
  router.back();
}
</script>

<style scoped lang="scss">
.ResidentMainBox {
  display: flex;
  flex-direction: column;
  .ResidentMainBody {
    flex: 1;
    margin-top: 20px;
    .CarinfoBox {
      &.gridbox {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 20px;
        row-gap: 40px;
      }
      .carinfo_item {
        display: flex;
        align-items: center;
        font-size: 14px;
        .label {
          font-weight: 600;
          width: 80px;
          text-align: right;
          padding-right: 10px;
        }
        .carinfoImage {
          width: 200px;
          height: 100px;
        }
      }
    }
    &:deep(div.el-step__head.is-process) {
      & > div.el-step__line {
        width: 0;
        border: 1px dashed gray;
        background: transparent;
      }
    }
    &:deep(.el-step.is-vertical .el-step__line) {
      top: 20px;
    }
    &:deep(div.el-step__head.is-finish) {
      & > div.el-step__line {
        width: 0;
        border: 1px solid var(--el-color-primary);
        background: transparent;
      }
    }
  }
}
</style>
