<template>
  <div class="container">
    <div class="onecontent" ref="onecontent">   
      <div v-for="item in items" :key="item.id" class="oneitem" ref="oneitem">
            <div class="header"><span>{{item.date}}</span> <span>{{item.method}}</span></div>
            <div class="footer">{{item.info}}</div>
      </div>
    </div>
    <div class="button">
      <div @click="loadMore"><span>{{text}}</span></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop,Watch } from 'vue-property-decorator';
import { CodeListService } from "@/ibiz-core";

@Component({
    components: {}
})
export default class APPHistoryList extends Vue {
    /**
     * 代码表服务对象
     *
     * @type {CodeListService}
     * @memberof APPHistoryList
     */

    public codeListService: CodeListService = new CodeListService();

    /**
     * 传入数据items
     *
     * @type {Array}
     * @memberof APPHistoryList
     */
    @Prop() public items!: Array<any>;

    /**
     * 传入数据itemNameDetail
     *
     * @type {any}
     * @memberof APPHistoryList
     */
    @Prop() public itemNameDetail?:any;

    /**
     * 监听itemNameDetail
     *
     * @returns {void}
     * @memberof APPHistoryList
     */
    @Watch('itemNameDetail')
    itemNameDetailChange(){
      this.handler();
    }

    /**
     * 监听items
     *
     * @returns {void}
     * @memberof APPHistoryList
     */
    @Watch('items')
    itemsChange(){
      this.handler();
      this.setHeight();
    }

    /**
     * 获取代码表
     *
     * @returns {void}
     * @memberof APPHistoryList
     */
    public getCodeList(tag:string,type:string,value:any){
      if (type == 'STATIC') {
        let infos:any = this.$store.getters.getCodeListItems(tag);
        let info:any = infos.find((v:any)=>v.value == value);
        return info;
      }
    }

    /**
     * 解析代码表获取数据
     *
     * @returns {void}
     * @memberof APPHistoryList
     */
    public handler(){
      this.items.forEach((v:any)=>{
        if(v.actions){
          let info:any = this.getCodeList(this.codeListAAA.actions.tag,'STATIC',v.actions);
            v.method = info.text;
            v.info = info.text;
        }
      })
    }    

    /**
     * 按钮文本
     *
     * @type {String}
     * @memberof APPHistoryList
     */
    public text:string = '查看更多记录';

    /**
     * 文本切换
     *
     * @type {Boolean}
     * @memberof APPHistoryList
     */
    public isShow:boolean = false;

    /**
     * 代码表规范
     *
     * @memberof APPHistoryList
     */
    public codeListAAA :any= {
      "actions":{
        type:"static",
        tag:"Action__type"
      },
      "old":{
        type:"static",
        tag:"Product__status"
      }
    }

    /**
     * 初始个数
     *
     * @type {Number}
     * @memberof APPHistoryList
     */
    public num:number = 3;

    /**
     * 初始高度
     *
     * @type {Number}
     * @memberof APPHistoryList
     */
    public startHeig:number = 0;

    /**
     * 终止高度
     *
     * @type {Number}
     * @memberof APPHistoryList
     */
    public endHeig:number = 0;

    /**
     * 点击展开
     *
     * @returns {void}
     * @memberof APPHistoryList
     */
    public loadMore():void {
          this.isShow = !this.isShow;
          this.text = this.isShow?  '收起':'查看更多记录';
          let ele:any =  document.querySelector('.onecontent');
          let ite:any =  document.querySelectorAll('.oneitem');
          this.startHeig = 0;
          this.endHeig = 0;
          for(let i = 0; i <= this.num; i++){
            this.startHeig += ite[i].offsetHeight;
          }
          for(let i = 0; i < ite.length; i++){
            this.endHeig += ite[i].offsetHeight + 20;
          }
          ele.style.height = this.isShow?this.endHeig+'px':  + this.startHeig+'px';
    }

    /**
     * 生命周期created
     *
     * @returns {void}
     * @memberof APPHistoryList
     */
    public created(){
      this.handler();
    }

    /**
     * 设置初始高度
     *
     * @returns {void}
     * @memberof APPHistoryList
     */
    public setHeight(){
      let ele:any =  this.$refs.onecontent;
      let ite:any =  this.$refs.oneitem;
      for(let i = 0; i <= this.num; i++){
        this.startHeig += ite[i].offsetHeight;
      }
      ele.style.height = this.startHeig + 'px';
    }

    /**
     * 生命周期mounted
     *
     * @returns {void}
     * @memberof APPHistoryList
     */
    public mounted(){
      this.setHeight();
    }

}
</script>

<style lang="less">
@import "./app-history-list.less";
</style>