<template>
  <div class="ResidentMainBox p-2 w-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>
                  <span class="ml-20px color-blue cursor-pointer" @click="handleEdit">编辑</span>
                </div>
              </template>
              <div class="w-full h-full CarinfoBox">
                <el-row class="mb-20px">
                  <el-col :span="8">
                    <div class="carinfo_item">
                      <div class="label">报修房屋</div>
                      <div class="main">{{ form.house }}</div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="carinfo_item">
                      <div class="label">维修项目</div>
                      <div class="main">{{ form.maintenanceItem }}</div>
                    </div>
                  </el-col>
                </el-row>

                <el-row class="mb-20px">
                  <el-col :span="8">
                    <div class="carinfo_item">
                      <div class="label">报修人</div>
                      <div class="main">{{ form.residentName }}</div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="carinfo_item">
                      <div class="label">手机号码</div>
                      <div class="main">{{ form.phone }}</div>
                    </div>
                  </el-col>
                </el-row>
                <el-row class="mb-20px">
                  <el-col>
                    <div class="carinfo_item">
                      <div class="label">预约日期</div>
                      <div class="main">{{ form.orderDate }}</div>
                    </div>
                  </el-col>
                </el-row>
                <el-row class="mb-20px">
                  <el-col>
                    <div class="carinfo_item">
                      <div class="label">问题描述</div>
                      <div class="main">{{ form.problem }}</div>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="carinfo_item">
                      <div class="label">附件</div>
                      <div class="main fileImagebox">
                        <el-image
                          :preview-teleported="true"
                          :zoom-rate="1.2"
                          :max-scale="7"
                          :min-scale="0.2"
                          :preview-src-list="form.problemImageUrlList"
                          show-progress
                          :initial-index="0"
                          v-for="(item, index) in form.problemImageUrlList"
                          :key="index"
                          :src="splitImages(item)"
                          class="carinfoImage"
                        ></el-image>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
          <el-card>
            <template #header>
              <div class="card-header">
                <span>分配工单</span>
              </div>
            </template>
            <div class="preivewBody w-full h-full flex flex-items-start mt-2">
              <div class="title">维修师傅</div>
              <div class="preivewBodybox flex-1 ml-5">
                <repairUser :userid="form.repairId" @change="handleChange"></repairUser>
                <div class="actions mt-5">
                  <el-button @click="handleSend" type="primary">确定派单</el-button>
                  <el-button @click="backRouter">返回</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card style="position: relative; height: 100%">
            <template #header>
              <div class="asideCardHeader w-full">
                <div class="cardSubtitle">
                  <div class="line"></div>
                  <div class="subtitle">审批流程</div>
                </div>
              </div>
            </template>
            <div class="h-full w-full">
              <el-steps space="108px" direction="vertical" :active="activeStop">
                <el-step>
                  <template #title>
                    <span>已提交维护信息</span>
                  </template>
                  <template #description> {{ reviewInfo.submitTime ?? '' }} </template>
                </el-step>
                <el-step>
                  <template #title>
                    <span>{{ reviewInfo.allocateStatus === '0' ? '待分配' : '已分配' }} </span>
                  </template>
                  <template #description>{{ reviewInfo.allocateTime ?? '等待物业派单中' }} </template>
                </el-step>
                <el-step>
                  <template #title>
                    <span>{{ reviewInfo.completeStatus === '0' ? '待维修' : '已维修' }} </span>
                  </template>
                  <template #description> {{ reviewInfo.completeTime ?? '维修人员进行维修' }}</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 repairUser from '@/components/Holder/repairUser.vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { getRepair, updateRepair } from '@/api/system/Repair';
import { convertBuildingToTree, getHousePathById } from '@/utils/house';
import { listRepairProject } from '@/api/system/RepairProject';
import { listResident } from '@/api/system/resident';
import { RepairVO } from '@/api/system/Repair/type';
import { useHouseStore } from '@/store/modules/house';
import { listRepairProcess, updateRepairProcess } from '@/api/system/repairProcess';
import { splitImages } from '@/utils';

const houseStore = useHouseStore();
const { treedata } = storeToRefs(houseStore);

const route = useRoute();
const router = useRouter();

const active = ref(0);
const activeStop = ref(0);

interface formType extends RepairVO {
  maintenanceItem?: string;
  residentName?: string;
  problemImageUrlList?: string[];
  house?: string;
}

const form = ref<formType>({
  'id': null,
  'houseId': null,
  'maintenanceItemId': null,
  'problem': '',
  'residentId': null,
  'phone': null,
  'orderDate': '',
  'problemImageUrl': '',
  'problemStatus': '0',
  'repairDes': '',
  'repairImageUrl': '',
  'repairId': null
});
const userid = ref();

// 维修项目
const projectlist = ref([]);
// 住户
const residentList = ref([]);
// 审核流程
const reviewInfo = ref({
  'id': '',
  'repairId': '',
  'submitTime': '',
  'submitStatus': '0',
  'allocateTime': null,
  'allocateStatus': '0',
  'completeTime': null,
  'completeStatus': '0'
});
//  ! 房屋 ====================================================================================================
async function init() {
  // 项目
  const projectres = await listRepairProject();
  projectlist.value = projectres.rows;
  // 住户
  const residentlistres = await listResident();
  residentList.value = residentlistres.rows;
  // 报修详情
  const res = await getRepair(userid.value);
  form.value = res.data;
  const find = projectlist.value.find((item) => item.id === form.value.maintenanceItemId);
  if (find) {
    if (find.parentId) {
      const find2 = projectlist.value.find((item) => item.id === find.parentId);
      form.value.maintenanceItem = find2.projectName + ' - ' + find.projectName;
    } else {
      form.value.maintenanceItem = find.projectName;
    }
  }

  const houseinfo = getHousePathById(treedata.value, form.value.houseId, 'label');
  console.log(treedata.value, form.value.houseId, houseinfo);
  form.value.house = houseinfo.join(' - ');

  const residentinfo = residentList.value.find((item) => item.id === form.value.residentId);
  form.value.residentName = residentinfo.name;

  form.value.problemImageUrlList = form.value.problemImageUrl.split(',').filter((item) => item);

  // 获取保修审核状态
  const info = await listRepairProcess({ repairId: form.value.id, pageNum: 1, pageSize: 999999 });
  if (info && info.rows.length > 0) {
    reviewInfo.value = info.rows.pop();
    handleReview();
  }
}

// 处理审核
function handleReview() {
  if (reviewInfo.value.submitStatus === '1') {
    // 提交完成
    active.value = 1;
    activeStop.value = 1;

    if (reviewInfo.value.allocateStatus === '1') {
      // 分配完成
      active.value = 2;
      activeStop.value = 2;
      // 维修完成
      if (reviewInfo.value.completeStatus === '1') {
        active.value = 4;
        activeStop.value = 4;
      }
    }
  }
}

if (route.query.id) {
  userid.value = route.query.id;
  init();
}

/** 派单 */
function handleSend() {
  form.value.problemStatus = '1';
  updateRepair(form.value).then(() => {
    reviewInfo.value.allocateTime = new Date().toLocaleString().replaceAll('/', '-');
    if (form.value.repairId) {
      reviewInfo.value.allocateStatus = '1';
    } else {
      reviewInfo.value.allocateStatus = '0';
    }
    updateRepairProcess(reviewInfo.value).then(() => {
      backRouter();
    });
  });
}

/** 选择维修人员 */
function handleChange(row) {
  form.value.repairId = row;
}

/** 返回 */
function backRouter() {
  router.push({
    path: '/repair/repairlist'
  });
}

function handleEdit() {
  router.push({
    path: '/repair/addRepair',
    query: {
      id: form.value.id
    }
  });
}
</script>

<style scoped lang="scss">
.ResidentMainBox {
  display: flex;
  flex-direction: column;
  .ResidentMainBody {
    margin-top: 20px;
    flex: 1;
    .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 {
          margin: 10px;
          width: 200px;
          height: 150px;
        }
      }
    }
    .card-header,
    .subtitle {
      font-size: 15px;
    }
    .preivewBody {
      font-size: 16px;
    }
    .repairBox {
      width: 350px;
      height: 35px;
      line-height: 35px;
      border-radius: 5px;
      border: 1px solid rgba(187, 187, 187, 1);
    }
    &: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>
