<template>
  <el-collapse v-model="taskDetailCollapse">
    <!-- 任务信息 start -->
    <el-collapse-item class="collapse-item" name="info">
      <template #title>
        <span class="title-icon">|</span>
        <span class="title-content">任务信息</span>
      </template>
      <div class="task-info-box" v-if="taskType <= 2">
        <div class="task-info-item-multi" v-if="taskDetailData.no">
          <span class="item-left">任务派单号：</span>
          <span class="item-right">{{ taskDetailData.no }}</span>
        </div>
        <div class="task-info-item-multi" v-if="taskDetailData.name">
          <span class="item-left">任务名称:</span>
          <span class="item-right">{{ taskDetailData.name }}</span>
        </div>
        <div class="task-info-item-row" v-if="taskDetailData.taskPosition">
          <span class="item-left"> 任务位置: </span>
          <span class="item-right">{{ taskDetailData.taskPosition }}</span>
        </div>
        <div class="task-info-item-multi" v-if="taskDetailData.name">
          <span class="item-left">任务类型:</span>
          <span class="item-right">{{ taskTypeMap[taskType] }}</span>
        </div>
        <div class="task-info-item-multi" v-if="taskDetailData.name">
          <span class="item-left">任务生成类型:</span>
          <span class="item-right">{{
            taskCreateTypeMap[taskDetailData.taskCreateType]
          }}</span>
        </div>
        <div
          class="task-info-item-multi"
          v-if="taskType == 1 && taskDetailData.snCode"
        >
          <span class="item-left">设备编号:</span>
          <span class="item-right">{{ taskDetailData.snCode }}</span>
        </div>
        <div class="task-info-item-multi" v-if="taskDetailData.createTime">
          <span class="item-left">任务生成时间:</span>
          <span class="item-right">{{
            $common.fomatDateTime(taskDetailData.createTime)
          }}</span>
        </div>
        <div class="task-info-item-multi" v-if="taskDetailData.preFinishTime">
          <span class="item-left">要求完成时间:</span>
          <span class="item-right">{{
            $common.fomatDateTime(taskDetailData.preFinishTime)
          }}</span>
        </div>
        <div class="task-info-item-multi" v-if="taskDetailData.sendTime">
          <span class="item-left">任务派发时间:</span>
          <span class="item-right">{{
            $common.fomatDateTime(taskDetailData.sendTime)
          }}</span>
        </div>
        <div
          class="task-info-item-multi"
          v-if="taskType == 0 && taskDetailData.userStatus >= 0"
        >
          <span class="item-left">是否合作完成:</span>
          <span class="item-right">{{
            taskDetailData.userStatus == 0 ? "否" : "是"
          }}</span>
        </div>
        <div
          class="task-info-item-row"
          v-if="taskDetailData.taskDistributiUser"
        >
          <span class="item-left"> 任务派单人员: </span>
          <span class="item-right">{{
            taskDetailData.taskDistributiUser
          }}</span>
        </div>
        <div class="task-info-item-row" v-if="taskDetailData.taskAcceptUser">
          <span class="item-left"> 任务接单人员: </span>
          <span class="item-right">{{ taskDetailData.taskAcceptUser }}</span>
        </div>
        <div
          class="task-info-item-row"
          style="margin-top: 10px"
          v-if="taskType <= 2 && taskDetailData.standard"
        >
          <span class="item-left"> {{ taskStandardMap[taskType] }} </span>
          <el-input
            type="textarea"
            autosize
            class="item-input"
            disabled
            v-model="taskDetailData.standard"
          />
        </div>
        <div
          class="task-info-item-row"
          style="margin-top: 10px"
          v-if="taskType <= 2 && taskDetailData.content"
        >
          <span class="item-left"> {{ taskContentMap[taskType] }} </span>
          <el-input
            type="textarea"
            autosize
            style="width: 80%"
            disabled
            v-model="taskDetailData.content"
          />
        </div>
        <div
          class="task-info-item-row"
          style="margin-top: 10px"
          v-if="taskType == 0 && taskDetailData.taskObjects?.length"
        >
          <span class="item-left">任务对象:</span>
          <div style="width: 80%">
            <qu-table
              :custom="false"
              :showPage="false"
              :showIndex="true"
              :tableHeader="taskObjAndWork.taskObjectTableHeader"
              :tableData="taskDetailData.taskObjects"
            ></qu-table>
          </div>
        </div>
        <div
          class="task-info-item-row"
          style="margin-top: 10px"
          v-if="taskType == 0 && taskDetailData.taskOperations?.length"
        >
          <span class="item-left">任务作业:</span>
          <div style="width: 80%">
            <qu-table
              :custom="false"
              :showPage="false"
              :showIndex="true"
              :tableHeader="taskObjAndWork.taskOperationsTableHeader"
              :tableData="taskDetailData.taskOperations"
            ></qu-table>
          </div>
        </div>
      </div>
      <div class="task-info-box" v-else>
        <div class="task-info-item-row" v-if="taskDetailData.no">
          <span class="item-left">任务派单号：</span>
          <span class="item-right">{{ taskDetailData.no }}</span>
        </div>
        <div class="task-info-item-multi" v-if="taskDetailData.taskPosition">
          <span class="item-left"> 上报区域: </span>
          <span class="item-right">{{ taskDetailData.taskPosition }}</span>
        </div>
        <div class="task-info-item-multi" v-if="taskDetailData.name">
          <span class="item-left">上报事项:</span>
          <span class="item-right">{{ taskDetailData.name }}</span>
        </div>
        <div class="task-info-item-row" v-if="taskDetailData.content">
          <span class="item-left">上报描述:</span>
          <el-input
            class="item-input"
            type="textarea"
            autosize
            disabled
            v-model="taskDetailData.content"
          />
        </div>
        <div class="task-info-item-multi" v-if="taskDetailData.createName">
          <span class="item-left"> 上报人员: </span>
          <span class="item-right">{{ taskDetailData.createName }}</span>
        </div>
        <div
          class="task-info-item-multi"
          v-if="taskDetailData.createNameMobile"
        >
          <span class="item-left"> 上报人手机号: </span>
          <span class="item-right">{{ taskDetailData.createNameMobile }}</span>
        </div>
        <div
          class="task-info-item-row"
          style="margin-top: 10px"
          v-if="taskDetailData.voice?.length"
        >
          <span class="item-left"> 录音：</span>
          <audio
            controls
            style="height: 36px"
            :src="taskDetailData.voice[0].url"
          ></audio>
        </div>
        <div
          class="task-info-image"
          style="margin-top: 10px"
          v-if="taskDetailData.uploadPic?.length"
        >
          <span class="task-info-image-left"> 图片: </span>
          <div
            v-for="(item, index) in taskDetailData.uploadPic"
            class="image-box"
          >
            <el-image
              class="image-item"
              :src="item.url"
              :preview-src-list="
                taskDetailData.uploadPic.map((item) => item.url)
              "
              fit="cover"
            />
          </div>
        </div>
      </div>
    </el-collapse-item>
    <!-- 任务信息 end -->

    <!-- 任务进度 start -->
    <el-collapse-item
      class="collapse-item"
      name="progress"
      v-if="taskDetailData.taskProgresss?.length"
    >
      <template #title>
        <span class="title-icon">|</span>
        <span class="title-content">任务进度</span>
      </template>
      <div class="task-Progress-box">
        <el-steps style="margin-top: 30px" direction="vertical">
          <el-step
            v-for="(item, index) in taskDetailData.taskProgresss"
            :key="index"
            :status="
              item.taskStatus <= 4
                ? 'finish'
                : item.taskStatus <= 6 || item.taskStatus == 10
                ? 'success'
                : 'error'
            "
          >
            <template #title>
              <div class="task-Progress-title">
                <div class="title-time">
                  {{ $common.fomatDateTime(item.createTime) }}
                </div>
                <div class="title-state">
                  {{ taskStatusDictionaries[item.taskStatus] }}
                </div>
              </div>
            </template>
            <template #description>
              <div class="task-Progress-item-box">
                <div class="task-Progress-item" v-if="item.operate">
                  <span>{{ item.operate }}</span>
                </div>
                <div class="task-Progress-item" v-if="item.assign">
                  <span>{{ item.assign }}</span>
                </div>

                <div
                  v-if="item.cancelReason || item.detailReason"
                  class="task-Progress-item-cancel"
                >
                  <span style="width: 70px">取消原因:</span>
                  <span class="cancel-cause">{{
                    item.detailReason ? item.detailReason : item.cancelReason
                  }}</span>
                </div>
                <div class="task-info-image" v-if="item.uploadPic?.length">
                  <div
                    v-for="(progressImage, index) in item.uploadPic"
                    class="image-box"
                  >
                    <el-image
                      class="image-item"
                      :src="progressImage.url"
                      :preview-src-list="item.uploadPic.map((item) => item.url)"
                      fit="cover"
                    />
                  </div>
                </div>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
    </el-collapse-item>
    <!-- 任务进度 end -->

    <!-- 任务积分 start -->
    <el-collapse-item
      class="collapse-item"
      name="point"
      v-if="taskDetailData.taskPoint && taskDetailData.taskPoint.point"
    >
      <template #title>
        <span class="title-icon">|</span>
        <span class="title-content">任务积分</span>
      </template>
      <div class="task-info-box">
        <div class="task-info-item-multi">
          <span class="item-left">任务积分:</span>
          <div class="item-right" style="font-weight: bold; color: #409eff">
            <span style="font-size: 20px">+</span>
            <span style="font-size: 18px">{{
              taskDetailData.taskPoint.point
            }}</span>
          </div>
        </div>
        <div
          class="task-info-item-multi"
          v-if="taskDetailData.taskPoint.createTime"
        >
          <span class="item-left">积分时间:</span>
          <span class="item-right">
            {{ $common.fomatDateTime(taskDetailData.taskPoint.createTime) }}
          </span>
        </div>
      </div>
    </el-collapse-item>
  </el-collapse>
  <!-- 任务积分 end -->
  <div
    style="
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 30px; ;
    "
  >
    <el-button
      style="width: 90px"
      type="warning"
      round
      @click="$emits('update:showLookDialog', false)"
      >取消</el-button
    >
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
const props = defineProps({
  taskDetailData: {
    type: Object,
    default: {},
  },
  showLookDialog: {
    type: Boolean,
    default: false,
  },
  taskType: {
    type: [Number, String],
    default: "",
  },
});
onMounted(() => {
  if (props.taskDetailData.taskProgresss?.length) {
    props.taskDetailData.taskProgresss.map((item) => {
      if (
        item.content &&
        item.content.indexOf("、") > -1 &&
        item.content.indexOf(",") > -1
      ) {
        item.operate = item.content.slice(0, item.content.indexOf(","));
        item.assign = item.content.slice(item.content.indexOf(",") + 1);
      } else if (item.content && item.content.indexOf(",") > -1) {
        item.operate = item.content.slice(0, item.content.indexOf(","));
        item.assign = item.content.slice(item.content.indexOf(",") + 1);
      } else if (item.content) {
        item.operate = item.content;
      }
    });
  }
});
const $emits = defineEmits(["update:showLookDialog"]);
const closeLookDialog = (obj) => {
  $emits("update:showLookDialog", false);
};
const taskDetailCollapse = ref(["info", "progress", "point"]);
const taskStatusDictionaries = [
  "已生成",
  "已指派",
  "待抢单",
  "已接单",
  "作业中",
  "按时完成",
  "超时完成",
  "人工取消",
  "系统取消",
  "未完成",
  "上传纪录",
];
const taskTypeMap = [
  "计划任务",
  "设备维护任务",
  "指派任务",
  "用户上报任务",
  "巡检上报任务",
];
const taskCreateTypeMap = ["定时定期", "人流", "系统监控"];
const taskStandardMap = ["任务完成标准", "任务生成条件"];
const taskContentMap = ["任务执行方法", "任务要求", "任务描述"];
const taskObjAndWork = reactive({
  taskObjectTableHeader: [
    {
      cnName: "id",
      enName: "id",
      isTableShow: true,
    },
    {
      cnName: "对象名称",
      enName: "objectName",
      isTableShow: true,
    },
    {
      cnName: "对象分类",
      enName: "objectParentName",
      isTableShow: true,
    },
  ],
  taskOperationsTableHeader: [
    {
      cnName: "id",
      enName: "id",
      isTableShow: true,
    },
    {
      cnName: "作业名称",
      enName: "operationName",
      isTableShow: true,
    },
    {
      cnName: "作业分类",
      enName: "typeString",
      isTableShow: true,
    },
    {
      cnName: "对象名称",
      enName: "objectName",
      isTableShow: true,
    },
    {
      cnName: "对象分类",
      enName: "objectParentName",
      isTableShow: true,
    },
    {
      cnName: "作业标准",
      enName: "operationStandard",
      isTableShow: true,
    },
    {
      cnName: "作业工具",
      enName: "operationToolNames",
      isTableShow: true,
    },
    {
      cnName: "作业方法",
      enName: "operationMethod",
      isTableShow: true,
    },
  ],
});
</script>

<style lang="scss" scoped>
.collapse-item {
  padding-top: 20px;
  :deep(.el-collapse-item__header) {
    background-color: #f0f0f0;
  }
  .title-icon {
    color: #409eff;
    margin: 0 4px;
    font-size: 18px;
    font-weight: bold;
    margin-top: -1px;
  }
  .title-content {
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
  }
}
.task-info-box {
  width: 100%;
  margin-top: 10px;
  margin-left: 24px;
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  .task-info-item-row {
    width: 100%;
    line-height: 35px;
    display: flex;
    align-items: center;
  }
  .task-info-item-multi {
    width: 50%;
    line-height: 35px;
    display: flex;
    align-items: center;
  }
  .item-left {
    width: 160px;
    display: inline-block;
  }
  .item-right {
    flex: 1;
  }
  .item-input {
    width: 80%;
    justify-content: center;
    align-items: center;
  }
  .task-object-and-work {
    display: flex;
    margin-top: 20px;
    line-height: 40px;
  }
}
.task-info-image {
  display: flex;
  line-height: 30px;
  .task-info-image-left {
    width: 160px;
    display: flex;
    align-items: center;
  }
  .image-box {
    display: flex;
    align-items: center;
    .image-item {
      width: 100px;
      height: 60px;
      margin: 10px 10px;
      box-shadow: 5px 5px 5px grey;
    }
  }
}
.task-Progress-box {
  .task-Progress-title {
    display: flex;
    background-color: #f0f0f0;
    line-height: 30px;
  }
  .title-time {
    // color: black;
    margin-left: 10px;
  }
  .title-state {
    width: 70%;
    // color: black;
    font-weight: bold;
    margin-left: 100px;
  }
  .task-Progress-item-box {
    margin: 10px 0;
    .task-Progress-item {
      display: flex;
      line-height: 30px;
      color: black;
      font-size: 15px;
      margin-left: 10px;
    }
    .task-Progress-item-cancel {
      width: 100%;
      display: flex;
      line-height: 30px;
      color: black;
      font-size: 15px;
      margin-left: 10px;
      .cancel-cause {
        flex: 1;
        flex-wrap: wrap;
        line-height: 20px;
        padding: 5px 15px 5px 10px;
      }
    }
  }
}
.task-point-content {
  margin-top: 10px;
  margin-left: 24px;
  font-size: 16px;
}
</style>
