<template>
  <div class="g-p20 g-fx main">
    <div class="left p40">
      <h3>{{ orderState[allData.data.state] }}</h3>
      <div class="middle g-p20">
        <div class="middle__first g-fx-j">
          <div>
            <div class="title">故障编号</div>
            <div class="text">{{ allData.data.orderNumber }}</div>
          </div>
          <div class="first__type">
            <div class="title">报修类型</div>
            <div class="text">{{ allData.data.faultTypeFormat }}</div>
          </div>
        </div>
        <el-divider />
        <div>
          <div class="title">故障描述</div>
          <div class="text">{{ allData?.data?.description }}</div>
        </div>
        <div class="img g-fx">
          <el-image
            style="width: 100px; height: 100px"
            :src="img"
            :preview-src-list="allData.data?.images"
            :initial-index="index"
            fit="cover"
            v-for="(img, index) in allData.data?.images"
          />
        </div>
        <el-divider />
        <div style="margin-top: 20px">
          <div class="g-fx">
            <div class="first__type">
              <div class="title">报修人</div>
              <div class="text">{{ allData.data.customer }}</div>
            </div>
            <div class="first__type">
              <div class="title">联系电话</div>
              <div class="text">{{ allData.data.customerPhoneNumber }}</div>
            </div>
            <div class="first__type">
              <div class="title">报修时间</div>
              <div class="text">{{ allData.data.creationTime }}</div>
            </div>
          </div>
          <el-divider />
          <div class="g-fx" v-if="allData.data.assigner">
            <div class="first__type">
              <div class="title">派单人</div>
              <div class="text">{{ allData.data.assigner }}</div>
            </div>
            <div class="first__type">
              <div class="title">联系电话</div>
              <div class="text">{{ allData.data.assignerPhoneNumber }}</div>
            </div>
            <div class="first__type">
              <div class="title">派单时间</div>
              <div class="text">{{ allData.data.assignTime }}</div>
            </div>
          </div>
          <el-divider v-if="allData.data.assigner" />
        </div>
      </div>
      <div class="footer g-textarea">
        <pro-select
          v-if="allData.data.isCanAssign"
          :options="personOption.arr"
          v-model:selectValue="selectValue"
          placeholder="请选择维修人员"
        >
        </pro-select>
        <div class="middle g-p20" v-if="allData.data.repairer != null">
          <div>
            <div v-if="allData.data.reportTime != null && allData.data.reportTime != ''">
              <div class="title">维修报告</div>
              <div class="text">{{ allData.data.report?.repairResult }}</div>
            </div>
            <div class="img g-fx" v-if="allData.data.report?.repairResult">
              <el-image
                style="width: 100px; height: 100px"
                :preview-src-list="allData.data?.images"
                :initial-index="index"
                :src="el"
                fit="cover"
                v-for="(el, index) in allData.data.images"
              />
            </div>
            <el-divider v-if="allData.data.report?.repairResult" />
          </div>
          <div class="g-fx">
            <div class="first__type">
              <div class="title">维修人</div>
              <div class="text">{{ allData.data.repairer }}</div>
            </div>
            <div class="first__type">
              <div class="title">联系电话</div>
              <div class="text">{{ allData.data.repairerPhoneNumber }}</div>
            </div>
            <div class="first__type" v-if="allData.data.acceptTime != ''">
              <div class="title">接单时间</div>
              <div class="text">{{ allData.data.acceptTime }}</div>
            </div>
          </div>
          <el-divider />
          <div class="g-fx" v-if="allData.data.auditTime != ''">
            <div class="first__type">
              <div class="title">审核单</div>
            </div>
            <div class="first__type">
              <div class="title">审核人</div>
              <div class="text">{{ allData.data.auditor }}</div>
            </div>
            <div class="first__type">
              <div class="title">审核时间</div>
              <div class="text">{{ allData.data.auditTime }}</div>
            </div>
          </div>
        </div>
        <div style="position: relative">
          <div v-if="allData.data.isCanAudit">
            <el-button class="footer__btn" type="primary" :loading="loading" @click="onTake1">通过</el-button>
            <el-button
              class="footer__btn"
              style="margin-right: 10px"
              :loading="loading1"
              type="danger"
              @click="dialogVisible4 = true"
              >驳回</el-button
            >
          </div>

          <div v-if="allData.data.isCanAssign">
            <pro-input
              show-word-limit
              type="textarea"
              maxlength="300"
              :rows="4"
              v-model="textarea"
              style="margin-top: 20px; border-radius: 8px"
            >
            </pro-input>
            <el-button class="footer__btn" type="primary" :loading="loading" @click="onSend">派单</el-button>
            <el-button
              class="footer__btn"
              style="margin-right: 10px"
              :loading="loading1"
              type="success"
              @click="onSuccess"
              >标记已完成</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class="right p40">
      <h3>进度追踪</h3>
      <div class="g-p20">
        <div class="timeline" v-for="(activity, index) in activities.arr">
          <div class="time">
            <div>{{ activity.data }}</div>
            <div class="g-mt10">{{ activity.time }}</div>
          </div>
          <div class="line"></div>
          <div class="timeline-content">
            <div>{{ activity.node }}</div>
            <div>{{ activity.userName }} {{ activity.content }}</div>
            <el-image
              style="width: 42px; height: 42px; border-radius: 8px; margin-top: 5px; margin-right: 5px"
              :preview-src-list="activity.images"
              :initial-index="index"
              v-for="(img, index) in activity.images"
              :src="img"
              fit="cover"
            />
          </div>
        </div>
        <div class="timeline">
          <div class="time"></div>
          <div class="line line-end"></div>
          <div class="timeline-content bgf"></div>
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogVisible4" title="工单驳回" width="30%" draggable>
      <div>问题描述</div>
      <pro-input
        show-word-limit
        type="textarea"
        maxlength="300"
        :rows="4"
        v-model="textareaNo"
        style="margin-top: 20px; border-radius: 8px"
      >
      </pro-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" :loading="loading2" @click="onNoPass1"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="工单详情">
  import {
    acceptRepair,
    assignRepair,
    auditRepair,
    feedbackRepair,
    getRepairInfo,
    markCompleted,
    searchRepairer,
    submitRepair
  } from '@/api'
  import { ElMessage, ElMessageBox } from 'element-plus'
  const orderState: any = {
    1: '待派单',
    2: '待接单',
    3: '维修中',
    4: '待审核',
    5: '已完成'
  }
  let activities: any = reactive({
    arr: []
  })
  const orderId = useQuery('orderId')
  const textarea = ref('')
  const personOption = reactive({
    arr: []
  })
  onMounted(async () => {
    await allData.getData()
    await allPerson.getData()
    textarea.value = allData?.data?.description

    activities.arr = allData.data.tracks
    personOption.arr = allPerson.data.map((el: { trueName: any; id: any }) => ({
      label: el.trueName,
      value: el.id
    }))
  })
  const loading = ref(false)
  const loading1 = ref(false)
  const router = useRouter()
  const selectValue = ref('')
  /** 派单 */
  const onSend = async () => {
    if (!selectValue.value) return ElMessage.warning('请选择维修人员')
    if (!textarea.value) return ElMessage.warning('请填写故障描述')
    try {
      loading.value = true
      const data = await assignRepair({
        orderId,
        repairerId: selectValue.value,
        description: textarea.value,
        phoneNumber: allData.data.customerPhoneNumber,
        trueName: allData.data.customer
      })
    } finally {
      loading.value = false
    }
    ElMessage.success('操作成功')
    router.push('/order-center/my-order')
  }
  const onSuccess = async () => {
    try {
      loading1.value = true
      const data = await markCompleted({
        orderId,
        remark: textarea.value
      })
    } finally {
      loading1.value = false
    }
    ElMessage.success('操作成功')
    router.push('/order-center/my-order')
  }

  const dialogVisible = ref(false)
  const textareaNo = ref('')
  const loading2 = ref(false)

  const allData = useRequest(() => getRepairInfo({ orderId }), false)
  const allPerson = useRequest(
    () => searchRepairer({ deviceId: useQuery('orderId'), faultType: allData.data.faultType }),
    false
  )
  const dialogVisible4 = ref(false)
  /** 驳回 */
  const onNoPass1 = async () => {
    if (!textareaNo.value) return ElMessage.warning('请输入驳回原因')
    try {
      loading2.value = true
      await auditRepair({
        orderId,
        remark: textareaNo.value
      })
    } finally {
      loading2.value = false
    }
    ElMessage.success('操作成功')
    router.push('/order-center/my-order')
  }
  /** 通过 */
  const onTake1 = async () => {
    ElMessageBox.confirm('是否通过 ?', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true
    }).then(async () => {
      await auditRepair({
        orderId
      })
      ElMessage.success('操作成功')
      router.push('/order-center/my-order')
    })
  }
</script>

<style lang="less" scoped>
  .main {
    background: #c8cfdf;
    min-height: calc(100vh - 90px);
    margin-bottom: 40px;
  }

  .timeline {
    display: flex;
    color: #5d78ce;
    margin-bottom: 8px;

    .line {
      margin: 0 20px;
      width: 2px;
      min-height: 50px;
      background-color: #5d78ce;
      position: relative;
      margin-top: 15px;

      &::after {
        content: '';
        position: absolute;
        width: 9px;
        height: 9px;
        background: #5d78ce;
        border-radius: 50%;
        left: 0;
        top: -15px;
        transform: translateX(-50%);
      }
    }

    .time {
      text-align: right;
      width: 100px;
      padding-top: 5px;
      font-size: 12px;
    }

    &-content {
      width: 305px;
      min-height: 75px;
      background: rgba(93, 120, 206, 0.1);
      padding: 15px;
      border-radius: 10px;
      font-weight: bold;
      font-size: 14px;
    }

    .bgf {
      background-color: transparent;
    }

    .line-end {
      background-color: #ccc;
      transform: translateY(-84px);
      min-height: 120px;
      position: relative;
    }

    .line-end::after {
      content: 'END';
      width: 30px;
      height: 30px;
      background: #cccccc;
      border-radius: 50%;
      position: absolute;
      top: 120px;
      color: #fff;
      left: 0;
      line-height: 30px;
      text-align: center;
      font-size: 12px;
    }
  }

  .upload {
    margin-top: 10px;
    width: 50px !important;
    height: 50px !important;
  }

  .p40 {
    padding: 40px;
  }

  .title {
    color: #999999;
    margin-bottom: 8px;
  }

  ::v-deep(.upload) {
    .el-upload {
      height: 100px;
      width: 100px;
    }
  }

  .text {
    font-weight: bold;
  }

  h3 {
    margin-bottom: 30px;
  }

  .left {
    min-width: 1150px;
    width: 75%;
    min-height: calc(100vh - 160px);
    background-color: #fff;
    border-radius: 10px;

    .middle {
      border: 5px solid #dee2eb;
      border-radius: 10px;
      width: 100%;
      min-height: 80px;

      .first__type {
        width: 30%;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: -20px;
          height: 50px;
          border-left: 1px solid #eee;
        }
      }
    }

    .footer {
      margin-top: 50px;

      &__btn {
        margin-top: 20px;
        float: right;
      }
    }

    .img {
      margin-top: 20px;

      .el-image {
        margin-right: 10px;
        border-radius: 8px;
        height: 80px;
        width: 80px;
      }
    }
  }

  :deep(.refusal-cause) {
    .el-textarea__inner {
      padding-top: 40px;
      padding-left: 20px;
    }
  }

  .cause {
    position: absolute;
    top: 30px;
    left: 20px;
    font-weight: bold;
    font-size: 16px;
  }

  .right {
    min-width: 414px;
    width: calc(100% - 75% - 10px);
    background-color: #fff;
    margin-left: 10px;
    min-height: 900px;
    border-radius: 10px;
  }
</style>
