<template>
  <div class="event-info__wrap">
    <van-nav-bar title="事件详情" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>

    <div class="event-info__content">
      <scroller>
        <van-skeleton title avatar :row="3" :loading="loading" style="padding:0.32rem;background-color:#fff;">
          <div class="flex-box-v flex-center-center event-info__header">
                <userImage class="about-me__avatar" :id="eventInfo.employee_id" :img_url="eventInfo.img_url" :user_name="eventInfo.employee_name" width="1.12rem" height="1.12rem"></userImage>
                <span class="event-employee__name"><Wxopendata type="userName" :openid="eventInfo.employee_name"></Wxopendata></span>
                <span class="event-info__value green" v-if="eventInfo.point >= 0">+{{ eventInfo.point}} {{types_list[eventInfo.pt_id]}}</span>
                <span class="event-info__value" v-else>{{ eventInfo.point}} {{types_list[eventInfo.pt_id]}}</span>
          </div>
          <div class="event-task__wrap">
            <div class="event-task__item" v-if="eventInfo.remark !== null && eventInfo.remark.customize">
              <div class="task-item__label">事件内容</div>
              <div class="task-item__value">{{eventInfo.remark.customize || eventInfo.remark.rule }}</div>
            </div>
            <div class="event-task__item" v-if="eventInfo.rule_list">
              <div class="task-item__label">事件分类</div>
              <div class="task-item__value">{{eventInfo.rule_list }}</div>
            </div>
            <div class="event-task__item" v-if="eventInfo.source_type_mark">
              <div class="task-item__label">来源类型</div>
              <div class="task-item__value">{{eventInfo.source_type_mark }}</div>
            </div>
            <div class="event-task__item" v-if="eventInfo.date">
              <div class="task-item__label">时间</div>
              <div class="task-item__value">{{eventInfo.date}}</div>
            </div>
            <div class="event-task__item" v-if="hasAttachmentFile">
              <div class="task-item__label">图片</div>
              <div class="task-item__value">
                <van-image style="margin-right: 0.1rem" v-for="(src, i) in eventInfo.files" :src="src"
                 @click="show_imgae(i, eventInfo.files)"  width="40"  height="40"  radius="5"   type="contain" :key="i"/>
              </div>
            </div>
            <div class="event-task__item" v-if="eventInfo.recorder_name">
              <div class="task-item__label">记录人</div>
              <div class="task-item__value"><Wxopendata type="userName" :openid="eventInfo.recorder_name"></Wxopendata></div>
            </div>
          </div>
          <div class="event-rule__wrap" v-if="hasRule">
            <div class="event-rule__header" style="margin-bottom:0.24rem;">
              <span class="event-rule__title">规则依据</span>
              <span class="event-process__sub-title">此事件打分参考以下积分规则</span>
            </div>
            <div class="event-rule__item" v-if="eventInfo.rule_list">
              <div class="rule-item__label">规则分类</div>
              <div class="rule-item__value">{{ eventInfo.rule_list }}</div>
            </div>
            <div class="event-rule__item" v-if="eventInfo.remark && eventInfo.remark.rule">
              <div class="rule-item__label">积分规则</div>
              <div class="rule-item__value">{{ eventInfo.remark.rule }}</div>
            </div>
            <div class="event-rule__item" v-if="eventInfo.rule_item">
              <div class="rule-item__label">规则积分</div>
              <div class="rule-item__value" v-if="eventInfo.rule_item">
                <span v-if="eventInfo.rule_item.range_type == 1">{{ eventInfo.rule_item.min_point }}</span><span v-if="eventInfo.rule_item.range_type == 2">{{ eventInfo.rule_item.min_point }} ~ {{ eventInfo.rule_item.max_point }}</span><span>{{types_list[eventInfo.pt_id]}}</span>
              </div>
            </div>
          </div>

          <div class="event-process__wrap" v-if="eventInfo.process && eventInfo.process.length > 0">
            <div class="event-process__header">
              <span class="event-process__title">审批</span>
              <span class="event-process__sub-title">多人审批时, 以最后一人为准</span>
            </div>
            <div class="event-process__item" v-for="(item, i) in eventInfo.process" :key="i">
              <div class="event-process__icon" :class="{before:eventInfo.process.length > i + 1}">
                 <userImage class="about-me__avatar" :img_url="item.img_url" :user_name="item.name" width="0.72rem" height="0.72rem"></userImage>
              </div>
              <div class="process-item__content">
                <div>
                  <span class="process-item__name"><Wxopendata type="userName" :openid="item.name"></Wxopendata></span>
                  <span class="process-item__remark">{{ item.remark }}</span>
                </div>
                <div class="process-item__time">
                    <span>{{ item.time }}</span>
                    <div v-if="item.remark != '申请人'" style="color: #323233;font-size: 0.28rem;margin-top: 0.12rem;">
                          {{item.review_remark}}
                    </div>
                </div>
              </div>
              <div class="process-item__point">
                <span v-if="item.review_point > 0">+{{ item.review_point }}</span>
                <span v-else>{{ item.review_point || '' }}</span>
              </div>
              <!-- <div class="event-process__line" v-if="eventInfo.process.length > i + 1"></div> -->
            </div>
          </div>
        </van-skeleton>
        <div style="height: 1.5rem;"></div>
      </scroller>
      <!-- 奖扣者 ||  -->
      <footer class="flex-box flex-v-ce footer" v-if="eventInfo.process.length == 1 && (eventInfo.event_type == 3 || eventInfo.event_type == 4)">
        <div class="flex-2">撤销后数据将不可恢复</div>
        <van-button type="info" @click="revocation()" class="flex-1">撤销</van-button>
      </footer>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import userImage from '@/components/common/user_image'
import Vue from 'vue'
import { Panel, Skeleton, Image, ImagePreview, Dialog } from 'vant'

Vue.use(Panel)
  .use(Skeleton)
  .use(Image)
  .use(ImagePreview)
  .use(Dialog)
export default {
  name: 'event_detail_info',
  components: {userImage},
  data () {
    return {
      loading: true,
      eventInfo: {remark: {customize: ''}},
      types_list: {}
    }
  },
  computed: {
    hasRule () {
      return !!this.eventInfo.rule_item_id
    },
    hasAttachmentFile () {
      return Array.isArray(this.eventInfo.files) && this.eventInfo.files.length > 0
    }
  },
  methods: {
    // 撤销奖扣
    revocation () {
      var that = this
      Dialog.confirm({
        title: '提示',
        message: '您确定要撤销此项吗?'
      }).then(() => {
        let data = { target_id: this.$route.query.id, type: 1}
        request('post', '/api/integral/review/prize/destroy', data).then(res => {
          if (res.data.code == 1) {
            that.$toast('已撤销')
            that.$keep_alive_update('update_list_pk', this.$route.query.id)
            that.$route_back()
          }
        })
      }).catch(() => {
        // on cancel
      })
    },
    show_imgae (index, files) {
      ImagePreview({
        images: files,
        startPosition: index,
        onClose () {}
      })
    },
    getIconText (employeeName) {
      if (employeeName && employeeName.length > 2) {
        const len = employeeName.length
        return employeeName[len - 2] + employeeName[len - 1]
      }
      return employeeName
    },
    getEventDetail () {
      this.$toast.loading({ message: '正在加载' })
      const params = { event_id: this.$route.query.id }
      request('get','/api/integral/statistics/integral/info',params).then(res => {
          this.eventInfo = res.data.data
          this.eventInfo.status = '审批通过'
        }).finally(() => {
          this.$toast.clear()
          this.loading = false
        })
    },
    get_point_types () {
      let self = this
      for (let i in this.$store.getters.point_types) {
        self.types_list[this.$store.getters.point_types[i].id] = this.$store.getters.point_types[i].name
      }
    }
  },
  mounted () {
    this.get_point_types()
    this.getEventDetail()
  }
}
</script>

<style scoped lang="less">
  .before:before {
      content: " ";
      width: 0.02rem;
      border-left: 0.02rem dashed #979797;
      position: absolute;
      left:0.35rem;
      top: 0.72rem;
      bottom: -0.2rem;
  }
 .event-employee__name {
    font-weight: 600;
    margin: 0.2rem 0;
  }
  .event-info__wrap {
  position: relative;
  font-size: 0.32rem;
  height: calc(100% - 0.92rem);

  & /deep/ .van-nav-bar {
    background-color: #26a2ff;
  }

  & .event-info__content {
    position: relative;
    height: calc(100% - 0.92rem);
    & .event-info__header {
      padding: 0.32rem;
      background: #fff;
      position: relative;
      &:after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0.32rem;
        bottom: 0;
        left: 0.32rem;
        border-bottom: 1px solid #ebedf0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
    }

    & .event-info__name-icon {
      position: relative;
      display: flex;
      width: 0.72rem;
      height: 0.72rem;
      font-size: 0.28rem;
      color: #fff;
      background: #26a2ff;
      align-items: center;
      justify-content: center;
      border-radius: 100%;
    }
    & .event-info__value {
      font-size: 0.36rem;
      color: #ff0000;
      text-align: right;

      &.green {
        color: #4bd964;
      }
    }
    & .event-task__name {
      padding: 0.24rem 0.32rem 0 0.32rem;
      font-size: 0.36rem;
      color: #303133;
      font-weight: 400;
      line-height: 0.5rem;
      background: #fff;
    }

    & .event-task__wrap {
      padding-top: 0.16rem;
      background: #fff;
    }

    & .event-task__item {
      display: flex;
      padding: 0 0.32rem 0.16rem 0.32rem;
      flex-direction: row;

      & .task-item__label {
        display: flex;
        width: 1.45rem;
        color: #909399;
      }

      & .task-item__value {
        display: flex;
        flex: 1;
        color: #303133;
        flex-wrap: wrap;
      }
    }
  }

  & .event-process__wrap,
  .event-rule__wrap {
    margin-top: 0.24rem;
    padding: 0 0.36rem;
    background: #fff;
    padding-bottom: 0.24rem;
    & .event-process__header,
    .event-rule__header {
      position: relative;
      // display: flex;
      padding: 0.24rem 0;
      margin-bottom: 0.24rem;
      color: #303133;
      flex-direction: column;
      &:after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0;
        bottom: 0;
        left: 0;
        border-bottom: 1px solid #ebedf0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }

      & .event-process__title,
      .event-rule__title {
        font-weight: 600;
      }

      & .event-process__sub-title {
        font-size: 0.28rem;
        color: #909399;
      }
    }
    & .event-process__icon {
      display: flex;
      width: 0.72rem;
      height: 0.72rem;
      font-size: 0.28rem;
      color: #fff;
      background: #26a2ff;
      align-items: center;
      justify-content: center;
      border-radius: 100%;
    }
    & .event-process__item {
      position: relative;
      display: flex;
      // height: 1.28rem;
      margin-bottom: 0.2rem;
      // flex-direction: row;
      // align-items: center;
    }

    & .process-item__content {
      display: flex;
      flex: 1;
      padding-left: 0.2rem;
      flex-direction: column;

      & .process-item__time {
        padding-top: 0.06rem;
        font-size: 0.24rem;
        color: #909399;
      }
    }

    & .process-item__point {
      display: flex;
      font-size: 0.36rem;
      font-weight: 500;
      align-items: center;
    }

    & .event-process__line {
      position: absolute;
      top: 1.04rem;
      left: 0.35rem;
      width: 0.02rem;
      height: 0.48rem;
      background-color: #ff0000;
      background: repeating-linear-gradient(0, #979797 0, #979797 11%, transparent 0, transparent 21%);
    }
  }

  .event-rule__item {
    display: flex;
    padding-bottom: 0.16rem;

    & .rule-item__label {
      width: 1.45rem;
      color: #909399;
    }

    & .rule-item__value {
      color: #303133;
      & span{
        line-height: 1;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }

}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 0.16rem 0.3rem;
  border-top: 1px solid #f1f1f1;
}
.footer .flex-2 {
  font-size: 0.28rem;
  color: #909399;
}
</style>
