<template>
  <div class="detail-real-box">
    <div class="body-title">
      <div class="title-item"
           v-for="item in allData.toplist"
           :key="item.value"
           :class="allData.activeName == item.label ? 'actived' : ''"
           @click="change(item.label)">
        {{item.label}}
      </div>
    </div>

    <div class="box-bottom">
      <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>
    </div>

  </div>
</template>

<script setup>
import {
  getImageUrl,
} from "@/utils/ruoyi";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment"
import useUserStore from '@/store/modules/user'
const appStore = useUserStore()
import {
  processhistory,
} from "@/api/cockpit";

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

const status = ref(1)

const weatherpop = ref(false)
const allData = reactive({
  yuqingicon: getImageUrl('yujing_icon', 'cockpit'),
  buttonList: [
    {
      name: '查看详情',
      value: '1',
    },
    {
      name: '处置记录',
      value: '2',
    },
    {
      name: '成员单位',
      value: '3',
    },
    {
      name: '类似事件',
      value: '4',
    },
    {
      name: '参考预案',
      value: '5',
    },
  ],

  url: getImageUrl('anjian', 'cockpit'),
  srcList: [getImageUrl('anjian', 'cockpit')],

  activeName: '事件进展',
  toplist: [
    { label: '事件进展', value: 1 },
    // { label: '续报详情', value: 2 },
  ],
  stepsList: [
    // {
    //   assigneeName: '问题上报',
    //   activityName: '张三',
    //   des: '巡查人员上报,得中心进行立案',
    //   time: '2023-05-13',
    // },
    // {
    //   assigneeName: '问题上报',
    //   activityName: '张三',
    //   des: '巡查人员上报,得中心进行立案',
    //   time: '2023-05-13',
    // },
    // {
    //   assigneeName: '问题上报',
    //   activityName: '张三',
    //   des: '巡查人员上报,得中心进行立案',
    //   time: '2023-05-13',
    // },
    // {
    //   assigneeName: '问题上报',
    //   activityName: '张三',
    //   des: '巡查人员上报,得中心进行立案',
    //   time: '2023-05-13',
    // },
  ]
})
const GetObj = ref({})


function fuzhiobj () {
  GetObj.value = props.pointfeature
  Getdetails(GetObj.value.id, GetObj.value.workflowKey)
}

function Getdetails (businessKey, workflowKey) {
  let data = {
    businessKey: businessKey,
    workflowKey: workflowKey,
  }
  processhistory(data).then(res => {
    console.log('stepsList', res.data);
    allData.stepsList = res.data
  })
}

function change (name) {
  allData.activeName = name
}

function showpic () {

};

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

</script>
<style lang="scss" scoped>
.detail-real-box {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #b4cded;

  .body-title {
    height: 46px;
    display: flex;
    align-items: center;

    .title-item {
      cursor: pointer;
      color: #4678d4;
      background: linear-gradient(0deg, #032463 0%, #042d7a 100%);
      border-radius: 2px;
      height: 26px;
      padding: 3px 13px;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      margin-right: 10px;

      &.actived {
        border: 1px solid #50a3ff;
        color: #50a3ff;
      }
    }
  }

  .box-bottom {
    width: 100%;
    height: calc(100% - 50px);
    overflow: hidden;
    overflow-y: auto;
    padding: 10px;
    background: rgba(11, 83, 149, 0.2);
    display: flex;
    align-items: center;

    .btn-box {
      display: flex;
      width: 100%;
      justify-content: space-between;
      padding: 0 20px;
    }

    .btn-item {
      cursor: pointer;
      padding: 5px 10px;
      border: 1px solid #1cb2ff;
      color: #1cb2ff;
      background: linear-gradient(
        0deg,
        rgba(28, 178, 255, 0.2) 0%,
        rgba(28, 178, 255, 0.1) 100%
      );
      border-radius: 2px;
    }
  }
}
.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>