<template>
  <a-card :loading="loading">
    <div :class="$style.divsteps">
      <a-steps direction="vertical" :current="current">
        <a-step v-for="(item, index) in steps" :key="index">
          <span slot="icon" :class="item.isParent ? $style.parenticon : $style.childicon"></span>
          <span slot="title" :class="item.isParent ? $style.parenttitle : $style.childtitle">
            {{ item.text }}
            <span :class="$style.timespan">
              {{ new Date(parseInt(item.props.creationTime)) | sdDateFormat('YYYY年MM月DD日') }}
            </span>
          </span>
          <span slot="description" :class="$style.attspan">
            <li v-for="(ite, ind) in item.attachments" :key="ind">
              <sd-attachment v-model="files" list-type="text" :group-id="ite" :read-only="true" />
            </li>
          </span>
        </a-step>
      </a-steps>
    </div>
  </a-card>
</template>

<script>
import LawService from '../../law-service'
import components from './_import-components/case-memorabilia-page-import'

export default {
  name: 'CaseMemorabiliaPage',
  metaInfo: {
    title: '案件大事记',
  },
  components: {
    ...components,
  },
  data() {
    return { current: 0, steps: [], files: [], loading: false }
  },
  mounted() {
    // 获取数据
    if (this.$route.params.id) {
      this.initData(this.$route.params.id)
    }
  },
  methods: {
    // 初始化数据
    initData(caseid) {
      this.loading = true
      LawService.getMemoir(caseid).then((res) => {
        // 生成步骤树数据
        if (res.data && res.data[0]) {
          res.data.forEach((item) => {
            if (item.props.stepType === 'regist') {
              item.text = '案件上报'
            }
            if (item.props.stepType === 'finish') {
              item.text = '案件结案'
            }
            item.attachments = item.props.detailAttachments?.split(',') || []
            item.isParent = true
            this.steps.push(item)
            this.current++
            // 追加子项
            if (item.children && item.children[0]) {
              item.children.forEach((citm) => {
                citm.attachments = citm.props.detailAttachments?.split(',') || []
                this.steps.push(citm)
                this.current++
              })
            }
          })
        }
        this.loading = false
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.divsteps {
  width: 90%;
  margin: 50px 10%;
  padding-left: 200px;
  :global(.ant-steps-item-title) {
    position: absolute;
    display: block;
    text-align: right;
    width: 200px;
    left: -150px;
    padding-right: 60px;
  }
  :global(.ant-steps-vertical .ant-steps-item-content) {
    min-height: 100px;
  }
}
.parenticon {
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 50%;
  background: none;
  border: 3px solid;
}
.childicon {
  width: 10px;
  height: 10px;
  display: inline-block;
  background: #aaaaaa;
  margin: auto;
  border-radius: 50%;
}
.parenttitle {
  font-weight: bolder;
  color: $alert-info-icon-color;
}
.timespan {
  display: block;
  color: $text-color;
  font-weight: normal;
  font-size: 16px;
}
.attspan {
  display: inline-block;
  width: 70%;
  background: #f7fbff;
}
</style>
