<!--
     自定义时间轴
    @Author:laiyh
    @Date:  2020-08-03
-->
<template>
  <div>
    <p v-if="formData.length == 0" class="no-data">暂无对应的授权管理范围审计信息</p>
    <el-timeline :reverse="reverse" class="my-time-line" v-if="formData && formData.length > 0">
      <template v-for="(item, index) in formData">
        <div :key="index">
          <h1 class="header-year" :id="'year' + index" @click="doShowHide($event, index)">
            {{ item.YEAR }}年 <span class="turn-down"></span>
          </h1>
          <h1 class="header-title"><i class="el-icon-time"></i>{{ title }}</h1>
          <el-timeline-item
            :timestamp="item.date"
            color="#1890ff"
            placement="top"
            v-for="(childItem, childIndex) in item.childrens"
            :key="childIndex"
            :class="'year-child' + index"
          >
            <span class="dateMonth">{{ childItem.dateStr }}</span>
            <h4 class="line-title">{{ transformOperateType(childItem) }}</h4>
            <p class="line-sub-title">
              授权管理机构：<span class="color-blue">{{ childItem.objectName }}</span>
              <!--&nbsp;&nbsp;&nbsp;机构配额：<span class="color-blue">{{ childItem.number }}</span>-->
            </p>
            <p class="line-sub-title">
              操作人姓名：
              <span class="line-sub-text">{{ childItem.operateUserName }}</span>
              &nbsp;&nbsp;&nbsp; 单位名称：
              <span class="line-sub-text">{{ childItem.operateOrgName }}</span>
              &nbsp;&nbsp;&nbsp; 操作时间：
              <span class="line-sub-text">{{ childItem.operateTime }}</span>
            </p>
          </el-timeline-item>
        </div>
      </template>
    </el-timeline>
    <el-row v-footer>
      <dg-button @click="handleClose">关闭</dg-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'timeLine',
  // 接收父页面传过来的属性
  props: {
    title: {
      type: String,
      default: '授权管理范围信息审计'
    },
    timeData: {
      type: Array,
      required: false,
      default: () => {
        return [];
      }
    },
    // 审计类型
    auditType: {
      type: String,
      required: true,
      default: ''
    },
    reverse: {
      type: Boolean,
      default: false
    }
  },
  // 页面数据绑定
  data() {
    return {
      formData: []
    };
  },
  // 计算属性
  computed: {},
  mounted() {
    for (let i = 0; i < this.timeData.length; i++) {
      let obj = {
        YEAR: '',
        childrens: []
      };
      if (this.timeData[i].operateTime) {
        let arr1 = this.timeData[i].operateTime.split(' ');
        let arr2 = arr1[0].split('-');
        if (this.formData.length == 0) {
          obj.YEAR = arr2[0];
          obj.childrens.push({
            ...this.timeData[i],
            dateStr: arr2[1] + '月' + arr2[2] + '日'
          });
          this.formData.push(obj);
        } else {
          let falg = false;
          let index;
          for (let j = 0; j < this.formData.length; j++) {
            if (arr2[0] == this.formData[j].YEAR) {
              falg = true;
              index = j;
              break;
            }
          }
          if (!falg) {
            obj.YEAR = arr2[0];
            obj.childrens.push({ ...this.timeData[i], dateStr: arr2[1] + '月' + arr2[2] + '日' });
            this.formData.push(obj);
          } else {
            this.formData[index].YEAR = arr2[0];
            this.formData[index].childrens.push({
              ...this.timeData[i],
              dateStr: arr2[1] + '月' + arr2[2] + '日'
            });
          }
        }
      }
    }
    // console.log(this.formData);
  },
  // 方法
  methods: {
    transformOperateType({ operateType, objectType }) {
      let transformString = '';
      if (this.auditType == 'user_audit') {
        if (operateType == '10') {
          transformString = '新增';
        } else if (operateType == '20') {
          transformString = '修改';
        } else if (operateType == '30') {
          transformString = '删除';
        } else if (operateType == '40') {
          transformString = '审批通过';
        } else if (operateType == '41') {
          transformString = '审批不通过';
        } else if (operateType == '50') {
          transformString = '启用';
        } else if (operateType == '51') {
          transformString = '停用';
        } else if (operateType == '61') {
          transformString = '入职';
        } else if (objectType == '62') {
          transformString = '离职';
        } else {
          transformString = '';
        }
      }
      if (this.auditType == 'org_audit') {
        if (operateType == '10') {
          transformString = '新增机构';
        } else if (operateType == '20') {
          transformString = '修改机构';
        } else if (operateType == '30') {
          transformString = '删除机构';
        } else if (operateType == '40') {
          transformString = '调离机构';
        } else if (operateType == '50') {
          transformString = '合并机构';
        } else {
          transformString = '';
        }
      } else {
        if (operateType == '10') {
          transformString = '管理员创建';
        } else if (operateType == '11') {
          transformString = '管理员删除';
        } else if (operateType == '20') {
          transformString = '平台菜单权限新增';
        } else if (operateType == '21') {
          transformString = '平台菜单权限移除';
        } else if (operateType == '30') {
          transformString = '机构管理范围新增';
        } else if (operateType == '31') {
          transformString = '机构管理范围变更';
        } else if (operateType == '40') {
          transformString = '用户管理范围新增';
        } else if (operateType == '41') {
          transformString = '用户管理范围变更';
        } else if (operateType == '50') {
          transformString = '授权管理范围新增';
        } else if (operateType == '51') {
          transformString = '授权管理范围变更';
        } else if (operateType == '60') {
          transformString = '管理员管理范围新增';
        } else if (operateType == '61') {
          transformString = '管理员管理范围变更';
        } else {
          transformString = '';
        }
      }
      return transformString;
    },
    doShowHide(e, index) {
      let $span = $(e.target);
      if ($span && $span.hasClass('turn-right')) {
        // console.log(1);
        $span.removeClass('turn-right');
        $('.year-child' + index).slideDown(1000);
      } else {
        $span.addClass('turn-right');
        $('.year-child' + index).slideUp(1000);
      }
    },
    handleClose() {
      this.$emit('close');
    }
  },
  // 创建组件时调用
  created() {}
};
</script>

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