<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="userInfobox">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>基础资料</span>
                </div>
              </template>
              <div class="w-full h-full">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <div class="userinfo_item">
                      <div class="title_item">住户姓名：</div>
                      <span> {{ userInfo.name }} </span>
                    </div>
                    <div class="userinfo_item">
                      <div class="title_item">手机号码：</div>
                      <span> {{ userInfo.phone }} </span>
                    </div>
                    <div class="userinfo_item">
                      <div class="title_item">证件类型：</div>
                      <span> 身份证 </span>
                    </div>
                    <div class="userinfo_item">
                      <div class="title_item">住户类型：</div>
                      <DictTag :options="com_resident_relationship" :value="userInfo.type"></DictTag>
                    </div>
                    <div class="userinfo_item">
                      <div class="title_item">住户来源：</div>
                      <span> {{ userInfo.name }} </span>
                    </div>
                    <div class="userinfo_item">
                      <div class="title_item">注册时间：</div>
                      <span> {{ userInfo.name }} </span>
                    </div>
                    <div class="userinfo_item img">
                      <div class="title_item">身份证正面：</div>
                      <div class="userinfo_itme_img">
                        <el-image class="w-full h-full" fit="fill" :src="splitImages(userInfo.cardImageFront)"></el-image>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="userinfo_item">
                      <div class="title_item">住户编号：</div>
                      <span> {{ userInfo.id }} </span>
                    </div>
                    <div class="userinfo_item">
                      <div class="title_item">住户性别：</div>
                      <span> {{ userInfo.gender === 1 ? '男' : '女' }} </span>
                    </div>
                    <div class="userinfo_item">
                      <div class="title_item">证件号码：</div>
                      <span> {{ userInfo.idCard }} </span>
                    </div>
                    <div class="userinfo_item">
                      <div class="title_item">备注：</div>
                      <span> {{ userInfo.remark ?? '无' }} </span>
                    </div>
                    <div class="userinfo_item">
                      <div class="title_item">提交审核时间：</div>
                      <span> 去丽丽 </span>
                    </div>
                    <div class="userinfo_item img">
                      <div class="title_item">身份证背面：</div>
                      <div class="userinfo_itme_img">
                        <el-image class="w-full h-full" fit="fill" :src="`/${userInfo.cardImageFront}`"></el-image>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
          <div class="previewbox">
            <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">
                  <el-input v-model="reviewInfo.propertyReviewFeedback" placeholder="请输入" type="textarea" :rows="5"></el-input>
                  <div class="actions">
                    <el-button type="primary" @click="updatePass('1')">审核通过</el-button>
                    <el-button type="danger" @click="updatePass('2')">审核不通过</el-button>
                    <el-button @click="backRoute">返回</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>
                    <DictTag :options="com_sub_status" :value="reviewInfo.submitStatus || '0'"></DictTag>
                  </template>
                </el-step>
                <el-step :description="reviewInfo.propertyTime">
                  <template #title>
                    <DictTag :options="com_review" :value="reviewInfo.propertyStatus || '0'"></DictTag>
                  </template>
                </el-step>
                <el-step :description="reviewInfo.certificationTime">
                  <template #title>
                    <DictTag :options="com_certification_status" :value="reviewInfo.certificationStatus || '0'"></DictTag>
                  </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';
import { getResident, getresidentReviewlistAPI, UpdateResidentReviewAPI } from '@/api/system/resident';
import { ResidentVO } from '@/api/system/resident/type';
import { splitImages } from '@/utils';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_review } = toRefs<any>(proxy?.useDict('com_review'));
const { com_sub_status } = toRefs<any>(proxy?.useDict('com_sub_status'));
const { com_resident_relationship } = toRefs<any>(proxy?.useDict('com_resident_relationship'));
const { com_certification_status } = toRefs<any>(proxy?.useDict('com_certification_status'));

const userInfo = ref<ResidentVO>({
  code: null,
  villageId: '',
  buildingId: '',
  'id': null,
  'name': '',
  'type': null,
  'gender': null,
  'status': null,
  'idCard': '',
  'phone': null,
  'houseId': null,
  'remark': null,
  'cardImageFront': '',
  'cardImageBack': ''
});

const reviewInfo = ref({
  'id': null,
  'residentId': null,
  'submitTime': '',
  'submitStatus': '1',
  'propertyTime': '',
  'propertyStatus': '0',
  'propertyReviewFeedback': '', // 审核意见
  'certificationTime': '',
  'certificationStatus': '0'
});

const active = ref(0);
const userid = ref(null);
const route = useRoute();

if (route.query.id) {
  userid.value = route.query.id;
  // 获取住户信息
  getResident(userid.value).then((res) => {
    userInfo.value = res.data;
    // 获取 审核流程
    getresidentReviewlistAPI(userid.value).then((res) => {
      console.log(res);
      if (res.rows[0]) {
        reviewInfo.value = res.rows[0];
        console.log(reviewInfo.value);
        handleActivestaus(reviewInfo.value);
      }
    });
  });
}

function handleActivestaus(rews) {
  // 提交状态 0未提交 1已提交
  if (rews.submitStatus === '0') {
    active.value = 0;
  } else if (rews.submitStatus === '1') {
    active.value = 1;
    // 物业审核状态 0 待审核 1审核通过 2审核未通过
    // 待认证
    if (rews.propertyStatus === '0') {
      active.value = 2;
    } else if (rews.propertyStatus === '2') {
      active.value = 3;
    } else if (rews.propertyStatus === '1') {
      active.value = 4;
      // 认证状态 0未认证 1已认证
      if (rews.certificationStatus === '0') {
        active.value = 5;
      } else if (rews.certificationStatus === '1') {
        active.value = 6;
      } else if (rews.certificationStatus === '2') {
        active.value = 5;
      }
    }
  }
}
// TODO 住户审核
const activeStop = computed(() => {
  let status = 0;
  switch (active.value) {
    case 0:
      break;
    case 1:
    case 2:
    case 3:
      status = 1;
      break;
    case 4:
    case 5:
      status = 2;
      break;
    case 6:
      status = 4;
      break;
  }
  return status;
});

// 审核通过
function updatePass(val: '0' | '1' | '2') {
  reviewInfo.value = {
    ...reviewInfo.value,
    // 审核时间
    'propertyTime': new Date().toLocaleString().replaceAll('/', '-'),
    // 审核状态
    'propertyStatus': val,
    'residentId': userid.value
  };
  console.log(reviewInfo.value);
  update();
}

function update() {
  UpdateResidentReviewAPI(reviewInfo.value).then((res) => {
    backRoute();
  });
}
const router = useRouter();
function backRoute() {
  router.push({
    path: '/house/resident'
  });
}
</script>

<style scoped lang="scss">
.ResidentMainBox {
  display: flex;
  flex-direction: column;
  .ResidentMainBody {
    flex: 1;
    margin-top: 20px;
    .userInfobox {
      .card-header {
        font-size: 18px;
        height: 60px;
        line-height: 60px;
      }
      .userinfo_item {
        margin-bottom: 20px;
        min-height: 40px;
        line-height: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        .title_item {
          margin-right: 10px;
          width: 100px;
          text-align: right;
          font-weight: bold;
        }
        &.img {
          align-items: flex-start;
          height: 200px;
          .userinfo_itme_img {
            width: 300px;
            height: 200px;
          }
        }
      }
    }
    .previewbox {
      margin-top: 20px;
      .card-header {
        font-size: 18px;
        height: 60px;
        line-height: 60px;
      }
      .title {
        width: 120px;
        padding-right: 20px;
        text-align: right;
      }
      .preivewBodybox {
        flex: 1;
        height: 200px;
        .actions {
          margin-top: 20px;
        }
      }
    }

    .cardSubtitle {
      position: absolute;
      left: 0px;
      top: 28px;
      width: 100px;
      background: #fff;
      color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      .line {
        width: 5px;
        height: 19px;
        margin-right: 5px;
        border-radius: 5px;
        background-color: rgba(26, 117, 255, 1);
      }
      .subtitle {
        height: 23px;
        line-height: 23px;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
      }
    }

    &: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>
