<!--
     自定义时间轴
    @Author:laiyh
    @Date:  2020-08-03
-->
<template>
  <div>
    <p v-if="timeData.result.length == 0" class="no-data">暂无对应的授权管理范围审计信息</p>
    <el-timeline :reverse="reverse" class="my-time-line" v-if="timeData.result && timeData.result.length > 0">
      <template>
        <h1 class="header-year" @click="doShowHide($event, timeData.createYear)">
          {{ timeData.createYear }}年 <span class="turn-down"></span>
        </h1>
        <h1 class="header-title"><i class="el-icon-time"></i>{{ title }}</h1>
        <el-timeline-item
          color="#1890ff"
          placement="top"
          v-for="(childItem, childIndex) in showTimeData"
          :key="childIndex"
          :class="'year-child' + timeData.createYear"
        >
          <!--<span class="dateMonth">{{ childItem.dateStr }}</span>-->
          <div v-show="childItem.auditType == 'role'">
            <h4 class="line-title">角色创建</h4>
            <p class="line-sub-title">
              操作人姓名：
              <span class="line-sub-text">{{
                timeData.roleCreatorName == null || timeData.roleInfoVo.creator == '' ? '无' : timeData.roleCreatorName
              }}</span>
              &nbsp;&nbsp;&nbsp; 单位名称：
              <span class="line-sub-text">{{
                timeData.roleCreatorOrg == null || timeData.roleInfoVo.creator == '' ? '无' : timeData.roleCreatorOrg
              }}</span>
              &nbsp;&nbsp;&nbsp; 操作时间：
              <span class="line-sub-text">{{ childItem.createTime }}</span>
            </p>
          </div>
          <div v-show="childItem.auditType == 'orgQutoLogMaps'">
            <h4 class="line-title">机构配额设置</h4>
            <p class="line-sub-title">
              单位名称：<span class="line-sub-text">{{ childItem.targetOrgName }}</span> &nbsp;&nbsp;机构配额：<span
                class="line-sub-text"
                >{{ childItem.number }}</span
              >
            </p>
            <p class="line-sub-title">
              操作人姓名：
              <span class="line-sub-text">{{
                childItem.managerName == null || childItem.managerName == '' ? '无' : childItem.managerName
              }}</span>
              &nbsp;&nbsp;&nbsp; 单位名称：
              <span class="line-sub-text">{{ childItem.managerOrg }}</span>
              &nbsp;&nbsp;&nbsp; 操作时间：
              <span class="line-sub-text">{{ childItem.createTime }}</span>
            </p>
          </div>
          <div v-show="childItem.auditType == 'roleAuthList'">
            <h4 class="line-title">角色权限分配</h4>
            <p class="line-sub-title">
              权限信息：<span class="color-blue">{{ childItem.name }}</span>
            </p>
            <p class="line-sub-title">
              操作人姓名：
              <span class="line-sub-text">{{
                childItem.createUserName == null || childItem.createUserName == '' ? '无' : childItem.createUserName
              }}</span>
              &nbsp;&nbsp;&nbsp; 单位名称：
              <span class="line-sub-text">{{ childItem.createUserOrg }}</span>
              &nbsp;&nbsp;&nbsp; 操作时间：
              <span class="line-sub-text">{{ childItem.createTime }}</span>
            </p>
          </div>
          <div v-show="childItem.auditType == 'logMaps'">
            <h4 class="line-title">人员授权</h4>
            <p class="line-sub-title">
              分配角色：<span class="color-blue">{{ timeData.roleInfoVo.name }}</span>
            </p>
            <p class="line-sub-title">
              操作：<span class="color-blue" v-show="childItem.status == 10"
                >新增&nbsp;&nbsp;&nbsp;&nbsp;{{ childItem.changeContent }}</span
              >
              <span class="color-blue" v-show="childItem.status == 20"
                >修改&nbsp;&nbsp;&nbsp;&nbsp;修改内容：{{ childItem.changeContent }}</span
              >
              <span class="color-blue" v-show="childItem.status == 30">取消授权</span>
            </p>
            <p class="line-sub-title">
              操作人姓名：
              <span class="line-sub-text">{{
                childItem.managerName == null || childItem.managerName == '' ? '无' : childItem.managerName
              }}</span>
              &nbsp;&nbsp;&nbsp; 单位名称：
              <span class="line-sub-text">{{ childItem.managerOrg }}</span>
              &nbsp;&nbsp;&nbsp; 操作时间：
              <span class="line-sub-text">{{ childItem.createTime }}</span>
            </p>
          </div>
        </el-timeline-item>
      </template>
    </el-timeline>
    <el-row v-footer>
      <dg-button @click="handleClose">关闭</dg-button>
    </el-row>
  </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
  name: 'timeLine',
  // 接收父页面传过来的属性
  props: {
    title: {
      type: String,
      default: '人员角色授权情况信息'
    },
    timeData: {
      type: Object,
      required: false,
      default: () => {
        return {};
      }
    },
    // 审计类型
    auditType: {
      type: String,
      default: 'user_audit'
    },
    reverse: {
      type: Boolean,
      default: false
    }
  },
  // 页面数据绑定
  data() {
    return {
      formData: []
    };
  },
  // 计算属性
  computed: {
    // TODO 最好不要去尝试改变父组件的参数
    showTimeData() {
      return this.timeData.result.map((item) => {
        let tmp = item;
        if (tmp.createTime) {
          tmp.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss');
        }
        return tmp;
      });
    }
  },
  mounted() {},
  // 方法
  methods: {
    doShowHide(e, year) {
      let $span = $(e.target);
      if ($span && $span.hasClass('turn-right')) {
        $span.removeClass('turn-right');
        $('.year-child' + year).slideDown(1000);
      } else {
        $span.addClass('turn-right');
        $('.year-child' + year).slideUp(1000);
      }
    },
    handleClose() {
      this.$emit('close');
    }
  },
  // 创建组件时调用
  created() {
  }
};
</script>

<style scope lang="scss">
@import url('../style.scss');
</style>
