<template>
  <div>
    <!-- 用户实名信息 -->
    <a-card :bordered="false" style="margin-top: 24px" title="机构跟进记录">
      <template #extra>
        <a @click="addOpreation()" v-if="can.log" ><span>添加记录<a-icon type="plus" color="#1890ff" /></span></a>
        <a @click="addOpreation()" v-else ><span>查看记录</span></a>
        <a-divider style="margin-left:20px;" type="vertical" v-if="systemLogs.length > 1 || userLogs.length > 1" />
        <a class="seeMore" style="margin-left:20px;" v-if="systemLogs.length > 1 || userLogs.length>1" >
          <a class="more" @click="showAll = !showAll">{{ !showAll ? '展开' : '收起' }}<a-icon :type="!showAll ? 'down' : 'up'" color="#1890ff" /></a>
        </a>
      </template>
      <div class="logsContent" >
        <div class="logsContentTitle"><div class="logs-item-title">客户展示</div><div class="logs-item-title">系统展示</div></div>
        <!-- 展示多条 -->
        <div v-if="showAll" class="logs" :style="!showAll ? 'height:100px;' : 'max-height:500px;'">
          <a-timeline class="logsItem" v-if="userLogs.length>0">
            <a-timeline-item v-for="item in userLogs" :key="item.log_id">
              <div class="title">{{ item.description }}
                <div class="create-time"> {{ item.operate.name }} ({{ item.operate.type }}) {{ item.created_at }}</div>
              </div>
            </a-timeline-item>
          </a-timeline>
          <div class="logsItem" v-else>暂无数据~</div>
          <a-timeline class="logsItem" v-if="systemLogs.length > 0">
            <a-timeline-item v-for="item in systemLogs" :key="item.log_id">
              <div class="title">{{ item.description }}
                <div class="create-time">{{ item.operate.name }} ({{ item.operate.type }}) {{ item.created_at }}</div>
              </div>
            </a-timeline-item>
          </a-timeline>
          <div class="logsItem" v-else>暂无数据~</div>
        </div>
        <!-- 只展示一条 -->
        <div class="logsContent" v-if="!showAll">
          <div class="logs" :style="!showAll ? 'height:100px;' : 'max-height:500px;'">
            <a-timeline class="logsItem">
              <a-timeline-item v-if="userLogs.length > 0">
                <div class="title"> {{ userLogs[0].description }}
                  <div class="create-time">{{ userLogs[0].operate.name }} ({{ userLogs[0].operate.type }}) {{ userLogs[0].created_at }}</div>
                </div>
              </a-timeline-item>
              <div class="logsItem" v-else>暂无数据~</div>
            </a-timeline>
            <a-timeline class="logsItem">
              <a-timeline-item v-if="systemLogs.length > 0">
                <div class="title">{{ systemLogs[0].description }}
                  <div class="create-time">{{ systemLogs[0].operate.name }} ({{ systemLogs[0].operate.type }}) {{ systemLogs[0].created_at }}</div>
                </div>
              </a-timeline-item>
              <div class="logsItem" v-else>暂无数据~</div>
            </a-timeline>
          </div>
        </div>
        <div class="logsseeMore" v-if="userLogs.length > 1 || systemLogs.length>1" >
          <a class="more" @click="showAll = !showAll">{{ !showAll ? '展开' : '收起' }}<a-icon :type="!showAll ? 'down' : 'up'" color="#1890ff" /></a>
        </div>
      </div>
    </a-card>
  </div>
</template>
<script>
import ItemPopover from './modules/ItemPopover.vue'
export default {
  components: {
    ItemPopover
  },
  name: 'OrganizationInfoFollow',
  props: {
    orderId: {
      type: String,
      default: ''
    },
    itemId: {
      type: String,
      default: ''
    },
    can: {
      type: Object,
      default: () => {
        return {}
      }
    },
    systemLogs: {
      type: Array,
      default: () => {
        return []
      }
    },
    userLogs: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      showAll: false
    }
  },
  methods: {
    // 新增记录
    addOpreation () {
      this.$router.push({
        name: 'OperationList',
        params: {
          itemId: this.itemId,
          orderId: this.orderId
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ai_start {
  align-items: flex-start;
}
.jc_start {
  justify-content: flex-start;
}
.jc_sb {
  justify-content: space-between;
}
.js_start {
  justify-content: start;
}
.a-des-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  .pl50 {
    margin-left: 50px;
  }
  .inputT {
    flex: 1;
    margin-left: 50px;
  }
}
  .seeMore{
    text-align: center;
    width: 100%;
    margin-left: 10px;
    box-sizing: border-box;
  }
  .logsseeMore{
    text-align: center;
    width: 100%;
    margin-left: 10px;
    box-sizing: border-box;
    position: absolute;
    bottom:-20px;
    left: 0;
    text-align: center;
  }
  .logsContent{
    position: relative;
    .logsContentTitle{
      display: flex;
      flex-direction: row;
      .logs-item-title{
        flex: 1;
        font-weight: bold;
        text-align: left;
        font-size: 16px;
        color:#222;
        padding-bottom: 10px;
        &:nth-child(2){
          margin-left: 20px;
        }
      }
    }
    .logs{
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      box-sizing: border-box;
      overflow-y:scroll;
      overflow:scroll;
      padding-top: 20px;

      .logs-item{
        flex: 1;
        box-sizing: border-box;
        &:nth-child(2){
          padding-left: 20px;
        }
      }
      .logsItem{
        flex: 50%;
        &:nth-child(2){
          margin-left: 20px;
        }
      }

      .title{
        width: 100%;
      }
      .create-time{
        font-size: 13px;
        color: #999;
        margin-top: 4px;
      }
    }
  }
</style>
