<template>
  <div class="detail-real-box">
    <div class="realbox-left">
      <div class="left-item"
           v-for="(item,index) in allData.jsdList"
           :key="index">
        <div class="item-name">{{item.name}}:</div>
        <div class="item-value"
             v-if="item.type=='src'">
          <el-image style=" height: 40px"
                    :src="item.value"
                    :zoom-rate="1.2"
                    :preview-src-list="allData.srcList"
                    :initial-index="0"
                    fit="cover" />
        </div>
        <div class="item-value"
             v-else
             :title="item.value">{{item.value}}</div>
      </div>
    </div>
    <div class="realbox-right">
      <el-steps direction="vertical"
                finish-status="success"
                space="70px"
                :active="allData.stepsList.length-1">
        <el-step v-for="(item,index) in allData.stepsList"
                 :key="index">
          <template #title="{index}">
            <span class="detail-title">{{item.assigneeName}}{{item.activityName}}</span>
          </template>
          <template #description>
            <!-- <div class="detail-des"
                 :title="item.des">{{item.des}}</div> -->
            <div class="detail-des">{{item.time}}</div>
          </template>
        </el-step>

      </el-steps>
      <!-- <video controls
             preload="none"
             poster="@/assets/images/cockpit/video.png">
        <source src="@/assets/images/oneMap/JK4.mp4"
                type="video/mp4" />
      </video> -->
    </div>
  </div>
</template>

<script setup>
import {
  getImageUrl,
} from "@/utils/ruoyi";

import {
  pagepatrolBasicInfo,
  listHistoryActivity,
} from "@/api/workflow/workflowProcess";

import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment"
import useUserStore from '@/store/modules/user'
const appStore = useUserStore()

const props = defineProps({
  pointfeature: {
    type: Object,
    default: {},
  },
});
const GetObj = ref({})

const weatherpop = ref(false)
const allData = reactive({
  yuqingicon: getImageUrl('yujing_icon', 'cockpit'),
  jsdList: [
    // {
    //   name: '类型',
    //   value: '偷拍漏拍',
    // },
    // {
    //   name: '状态',
    //   value: '结束',
    // },
    // {
    //   name: '描述',
    //   value: '我是问题描述',
    // },

    // {
    //   name: '上报人',
    //   value: '张三 136****8659',
    // },
    // {
    //   name: '时间',
    //   value: '2023-05-13',
    // },
    // {
    //   name: '图片',
    //   type: 'src',
    //   value: getImageUrl('install', 'cockpit'),
    // },
  ],
  url: getImageUrl('install', 'cockpit'),
  srcList: [getImageUrl('install', 'cockpit')],

  stepsList: [
    // {
    //   title: '问题上报',
    //   people: '张三',
    //   des: '巡查人员上报,得中心进行立案',
    //   time: '2023-05-13',
    // },
    // {
    //   title: '问题上报',
    //   people: '张三',
    //   des: '巡查人员上报,得中心进行立案',
    //   time: '2023-05-13',
    // },
    // {
    //   title: '问题上报',
    //   people: '张三',
    //   des: '巡查人员上报,得中心进行立案',
    //   time: '2023-05-13',
    // },
    // {
    //   title: '问题上报',
    //   people: '张三',
    //   des: '巡查人员上报,得中心进行立案',
    //   time: '2023-05-13',
    // },
  ]
})

function fuzhiobj () {
  GetObj.value = props.pointfeature
  switch (Number(GetObj.value.pointType)) {
    // 巡查问题
    case 15:
      getListHistoryActivity()
      allData.jsdList = [
        {
          name: '类型',
          value: GetObj.value.caseTypeStr,
        },
        {
          name: '状态',
          value: GetObj.value.statusStr,
        },
        {
          name: '描述',
          value: GetObj.value.caseContent,
        },
        {
          name: '上报人',
          value: GetObj.value.reportPerson,
        },
        {
          name: '时间',
          value: GetObj.value.reportTime,
        },
        // {
        //   name: '图片',
        //   type: 'src',
        //   value: getImageUrl('install', 'cockpit'),
        // },
      ]
      break;
  }
}

//获取工作流历史活动记录
function getListHistoryActivity () {
  let data = {
    businessKey: GetObj.value.id,
    workflowKey: "PatrolCase",
    fileRefFieldPattern: "picture",
  };
  listHistoryActivity(data).then((res) => {
    // getDiagramView();
    allData.stepsList = res.data;
  });
}

onMounted(() => {
  fuzhiobj()
})

</script>
<style lang="scss" scoped>
@import "@/assets/styles/map-detail.scss";

.detail-real-box {
  background: transparent;
}

.realbox-left {
  width: 50% !important;
  padding: 0 !important;
  overflow: hidden;
  overflow-y: auto;
}

.realbox-right {
  width: 50% !important;
  background: #083257;
  overflow: hidden;
  overflow-y: auto;
}

.left-item {
  border-bottom: 1px solid #193b55;
  margin-bottom: 0px !important;
  padding: 5px 0px 5px 10px !important;
  align-items: center !important;
}

.left-item:last-child {
  border-bottom: none;
}

.item-value {
  flex: 3 !important;
  text-align: left !important;
  color: #54a5ff !important;
  justify-content: left !important;
}
.item-name {
  margin-right: 10px !important;
}

.detail-real-box {
  padding: 10px 0;
}

.detail-title {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #edf9ff;
}

.detail-des {
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #7daeff;
}

::v-deep .el-steps--vertical {
  width: 100%;
}

::v-deep .el-step__icon {
  background: #39c290;
}

::v-deep .el-step__head.is-success {
  color: #fff;
}

::v-deep .el-step__head.is-process {
  color: #fff;
  .el-step__icon {
    background: #185df7;
  }
}

::v-deep .el-step__icon.is-text {
  border: none;
}
</style>