<template>
  <div>
    <a-card :bordered="false" :loading="loading">
      <a-timeline ref="timeline" :pending="pendingText" :reverse="true" mode="alternate" style="max-width: 800px;margin: 0 auto;">
        <a-timeline-item v-if="index < 3 ? true : advanced" :key="index" v-for="(value,index) in workFLowList" color="green">
          <div style="color: #0d1a26;font-weight: 500;">
            <span style="font-size: 16px;">{{ value.name }}</span>
            <span style="margin-left: 5px;">({{ format(value.created_time,'yyyy-MM-dd hh:mm:ss') }} 至 {{ format(value.end_time,'yyyy-MM-dd hh:mm:ss') }})</span>
          </div>
          <div class="antd-pro-pages-profile-advanced-style-stepDescription" style="margin-top: 5px;margin-bottom: 5px">
            <span class="note" style="font-size: 1.1em;margin-top: 5px;margin-bottom: 5px">留言：{{ value.note }}</span>
          </div>
          <img
            v-for="(item,n) in value.images"
            :src="'data:image/png;base64,' + item.url"
            :key="'s' + n"
            @click="changePhotoClass(item)"
            class="img_sm"
            alt="">
        </a-timeline-item>
      </a-timeline>
      <a-col :md="!advanced && 8 || 24" :sm="24" v-if="workFLowList.length > 3">
        <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
          <a @click="toggleAdvanced" style="margin-left: 8px">
            {{ advanced ? '收起' : '展开' }}
            <a-icon :type="advanced ? 'up' : 'down'"/>
          </a>
        </span>
      </a-col>
    </a-card>
  </div>
</template>
<script>
  import { formatDate } from '@vue2-client/utils/util'
  import { mapState } from 'vuex'
  import { TicketDetailsViewApi, post } from '@vue2-client/services/api'

  export default {
    name: 'TicketDetailsFlow',
    props: {
      ticketId: {
        type: String,
        required: true
      },
      disableCloseBtn: {
        type: Boolean,
        required: true
      },
      id: {
        type: Number,
        required: true
      }
    },
    computed: {
      ...mapState('setting', ['isMobile'])
    },
    data () {
      return {
        // 历史操作 展开/关闭
        advanced: false,
        workFLowList: [],
        loading: false,
        pendingText: '持续记录中...',
        // 工单流转留言，详细信息框可见性
        workFlowDetailsVisible: false,
        // 模态框中内容
        modalData: {
          note: '',
          images: []
        },
        // 选中照片是否显示
        selectedImageShow: false,
        // 选中的照片
        selectedImage: null
      }
    },
    mounted () {
      this.getTicketWorkFlowDetail(this.ticketId)
    },
    methods: {
      format (date, format) {
        return formatDate(date, format)
      },
      // 图像点击切换放大缩小
      changePhotoClass (item) {
        this.$emit('imageClick', item)
      },
      // 获取流转工单详情
      getTicketWorkFlowDetail (num) {
        if (this.disableCloseBtn) {
          this.pendingText = ''
        } else {
          this.pendingText = '持续记录中...'
        }
        this.loading = true
        return post(TicketDetailsViewApi.getTicketWorkFlowDetails, {
          ticketId: num
        }).then(res => {
          this.workFLowDetails = res
          // 解析workFLowDetails数据
          this.workFLowList = []
          const len = this.workFLowDetails.length
          for (let i = 0; i < len; i++) {
            if (this.workFLowDetails[i].note === undefined) {
              this.workFLowDetails[i].note = ''
            }
            if (this.workFLowDetails[i].images === undefined) {
              this.workFLowDetails[i].images = []
            }
            this.workFLowList.push({
              name: this.workFLowDetails[i].name,
              created_time: this.workFLowDetails[i].created_time,
              end_time: this.workFLowDetails[i].end_time,
              note: this.workFLowDetails[i].note,
              images: this.workFLowDetails[i].images
            })
            for (let j = 0; j < this.workFLowDetails[i].images.length; j++) {
              this.workFLowDetails[i].images[j].isLarge = false
            }
          }
          this.workFLowList = this.workFLowList.reverse()
          this.loading = false
        })
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      }
    },
    watch: {
      'ticketId' () {
        this.getTicketWorkFlowDetail(this.ticketId)
      },
      'disableCloseBtn' () {
        this.getTicketWorkFlowDetail(this.ticketId)
      },
      'id' () {
        this.getTicketWorkFlowDetail(this.ticketId)
      }
    }
  }
</script>

<style lang="less" scoped>
  .card_view {
    width: 70%;
    min-width: 700px;
  }

  .card_view_mobile {
    width: 100%;
  }

  .card_details_title {
    margin: 4px 0;
    font-size: 14px;
  }

  .card_details_value {
    font-size: 16px;
    font-weight: bold;
    color: #444;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }

  .card_guid {
    width: 25%;
    text-align:left;
  }

  .card_guid_mobile {
    width: 50%;
    text-align:left;
  }

  .detail-layout {
    margin-left: 44px;
  }
  .text {
    color: rgba(0, 0, 0, .45);
  }

  .heading {
    color: rgba(0, 0, 0, .85);
    font-size: 20px;
  }

  .no-data {
    color: rgba(0, 0, 0, .25);
    text-align: center;
    line-height: 64px;
    font-size: 16px;

    i {
      font-size: 24px;
      margin-right: 16px;
      position: relative;
      top: 3px;
    }
  }

  .mobile {
    .detail-layout {
      margin-left: unset;
    }
    .text {

    }
    .status-list {
      text-align: left;
    }
  }

  .img_sm {
    border: rgba(84, 84, 84, 0.2) solid 1.5px;
    border-radius: 5px;
    padding: 10px;
    width: 160px;
    height: 120px;
  }
  .img_xl {
    position: absolute;
    top:0;bottom:0;left:0;right:0;
    margin: auto;
    width: 100%;
    max-width: 1000px;
    cursor: zoom-out;
    z-index: 9999;
    animation: imgZoomIn 0.4s;
    -webkit-animation: imgZoomIn 0.4s;
  }
  @keyframes imgZoomIn
  {
    from {width: 160px;}
    to {width: 100%;}
  }
  .img_sm:hover {
    opacity: 0.6;
    cursor: zoom-in;
  }
  .img_sm_dark{
    filter: grayscale(100%);
    opacity: 0.6;
    border: rgba(84, 84, 84, 0.2) solid 1.5px;
    border-radius: 5px;
    padding: 10px;
    width: 160px;
    height: 120px;
  }
  .imgBackground {
    position: absolute;
    top:0;bottom:0;left:0;right:0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    background-color: rgba(0,0,0,0.7);
  }
</style>
