<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.houseName }}</div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="carInfo_Item">
                      <div class="label">维修项目:</div>
                      <div class="main">{{ form.maintenanceItemName }}</div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="carInfo_Item">
                      <div class="label">问题描述：</div>
                      <div class="main" style="font-size: small; max-width: 200px">
                        <span>{{ form.problem }}</span>
                      </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-col :span="8">
                    <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 :span="8">
                    <div class="carInfo_Item">
                      <div class="label">提交时间:</div>
                      <div class="main">{{ form.createTime }}</div>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="carInfo_Item">
                      <div class="label">附件:</div>
                      <div class="main fileImagebox" v-if="form.problemImageUrlList.length > 0">
                        <el-image
                          :preview-teleported="true"
                          :zoom-rate="1.2"
                          :max-scale="7"
                          :min-scale="0.2"
                          :preview-src-list="form.problemImageUrlList"
                          show-progress
                          v-for="(item, index) in form.problemImageUrlList"
                          :initial-index="index"
                          :key="index"
                          :src="item"
                          lazy
                          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="repair w-full h-full flex flex-items-start mt-2">
              <div class="title">维修师傅</div>
              <div class="preivewBodybox flex-1 ml-5">
                <repairUser :is-multiple="false" :username="form.repairName" :userid="form.repairUserId" @change="handleChange"> </repairUser>
                <div class="actions mt-5">
                  <el-button v-if="form.problemStatus === '0'" @click="handleSend" type="primary">确定派单</el-button>
                  <el-button v-if="form.problemStatus === '1'" @click="handleChangeRepairUser" 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">
              <StepTimeline :steps="stepList">
                <template #title="{ item }">{{ item.title }}</template>
                <template #subtitle="{ item }">{{ item.subtitle }}</template>
                <template #time="{ item }">{{ item.time }}</template>
              </StepTimeline>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import StepTimeline, { StepItem } from '@/components/StepTimeline/index.vue';
import repairUser from '@/components/Holder/repairUser.vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { getRepair, updateRepair } from '@/api/system/Repair';
import { RepairVO } from '@/api/system/Repair/type';
import { listRepairProcess, updateRepairProcess } from '@/api/system/repairProcess';

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

interface formType extends RepairVO {
  problemImageUrlList: string[];
}
const stepList = ref<StepItem[]>([
  { status: 'completed', title: '提交维修信息', subtitle: '等待提交', time: '', wrap: false },
  { status: 'pending', title: '待分配', subtitle: '等待物业派单中', time: '', wrap: true },
  { status: 'waiting', title: '维修', subtitle: '等待维修人员维修', time: '', wrap: false },
  { status: 'waiting', title: '完成维修', subtitle: '等待填写维修记录', time: '', wrap: false }
]);
const form = ref<formType>({
  'id': '',
  'houseId': '',
  'maintenanceItemId': null,
  'maintenanceItemName': null,
  'problem': '',
  'residentId': '',
  'residentName': null,
  'phone': '',
  'orderDate': '',
  'problemImageUrl': '',
  'problemStatus': '',
  'repairDes': '',
  'repairImageUrl': '',
  'repairId': '',
  'repairName': '',
  'houseName': '',
  'repairUserId': '',
  'item': null,
  'projectType': null,
  'updateTime': '',
  'projectTypeStr': '',
  'repairIsCheck': '1',
  'manageIsCheck': '1',
  'isCheckStr': null,
  'repairPhone': null,
  'repairRoleName': null,
  'repairStatus': null,
  'createTime': null,
  problemImageUrlList: []
});
const userid = ref();
// 审核流程
const reviewInfo = ref({
  'id': '',
  'repairId': '',
  'submitTime': '',
  'submitStatus': '0',
  'allocateTime': null,
  'allocateStatus': '0',
  'completeTime': null,
  'completeStatus': '0'
});
//  ! 房屋 ====================================================================================================
async function init() {
  // 报修详情
  getRepair(userid.value).then((res) => {
    form.value = {
      ...form.value,
      ...res.data
    };
    try {
      form.value.problemImageUrlList = form.value.problemImageUrl.split(',').filter((item) => item);
    } catch {
      form.value.problemImageUrlList = [];
    }
    // 获取保修审核状态
    listRepairProcess({
      repairId: res.data.id,
      pageSize: 9999,
      pageNum: 1
    }).then((info) => {
      reviewInfo.value = info.rows[info.rows.length - 1] || null;
      handleReview();
    });
  });
}

// 处理审核╬╬
function handleReview() {
  if (reviewInfo.value.submitStatus === '1') {
    // 提交完成
    stepList.value[0].status = 'completed';
    stepList.value[0].subtitle = '提交成功';
    stepList.value[1].status = 'pending';
    stepList.value[1].subtitle = '等待物业派单中';
    stepList.value[0].time = reviewInfo.value.submitTime;

    if (reviewInfo.value.allocateStatus === '1') {
      // 分配完成
      stepList.value[1].status = 'completed';
      stepList.value[1].title = '已分配';
      stepList.value[1].subtitle = `${form.value.repairName ?? ''} ${form.value.repairPhone ?? ''}`;
      stepList.value[1].time = reviewInfo.value.allocateTime;

      stepList.value[2].status = 'pending';
      stepList.value[2].subtitle = '等待维修人员维修';
      // 维修完成
      if (reviewInfo.value.completeStatus === '1') {
        stepList.value[2].time = reviewInfo.value.completeTime;
        stepList.value[2].status = 'completed';
        stepList.value[2].subtitle = '维修完成';
        stepList.value[3].status = 'completed';
        stepList.value[3].subtitle = '填写维修记录';
      }
    }
  } else {
    stepList.value[0].status = 'waiting';
  }
}

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

/** 派单 */
function handleSend() {
  if (form.value.repairUserId && form.value.repairUserId.trim()) {
    // 已分配
    form.value.problemStatus = '1';
    updateRepair(form.value).then(() => {
      form.value.problemStatus = '1';
      reviewInfo.value.allocateTime = new Date().toLocaleString().replaceAll('/', '-');
      if (form.value.repairUserId) {
        reviewInfo.value.allocateStatus = '1';
      } else {
        reviewInfo.value.allocateStatus = '0';
      }
      updateRepairProcess(reviewInfo.value).then(() => {
        backRouter();
      });
    });
  } else {
    ElMessage.warning('请选择维修人员');
  }
}

// 是否变更人员
const isChangeUse = ref(false);
/** 选择维修人员 */
function handleChange(row) {
  const oldValue = form.value.repairUserId;
  isChangeUse.value = oldValue !== '' && oldValue !== row;
  form.value.repairUserId = row;
}
function handleChangeRepairUser() {
  if (form.value.repairUserId && form.value.repairUserId.trim()) {
    handleSend();
  } else {
    ElMessage.warning('请选择维修人员');
  }
}

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

function handleEdit() {
  router.push({
    path: '/repair/editRepair',
    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: flex-start;
        font-size: 14px;
        .label {
          font-weight: 600;
          width: 80px;
          text-align: left;
          padding-right: 10px;
          white-space: nowrap;
        }
        .main {
          word-break: break-word;
        }
        .carInfoImage {
          margin: 10px;
          width: 200px;
          height: 150px;
        }
      }
    }
    .card-header,
    .subtitle {
      font-size: 15px;
    }
    .repair {
      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>
