<template>
  <div class="proof-item">
    <div></div>
    <div class="header">
       <div>{{proof.name}}</div>
       <div>
          <span class="status" :class="statusStr.class">{{statusStr.text}}</span>
          <span class="time">{{proof.update_time|timeFormat}}</span>
       </div>
       <common-svg @click.stop.native="showMoreAction" class="more" name="cunzhengliebiao-gengduo"></common-svg>
    </div>
    
    <div class="increment" v-if="proof.increment_num > 0" >  
        <van-steps :active="active" direction="vertical" class="list" active-color="#FF3661" v-show="showIncrementList">
          <van-step v-for="(incrementProof, index) in incrementList" :key="incrementProof.id" >
            <template #active-icon>
                <common-svg name="suyuan-weishanglian"></common-svg>
            </template>
            <template #inactive-icon>
              <common-svg name="suyuan-yishanglian"></common-svg>
            </template>
            <div class="header">
              <div style="color:#737582;">{{incrementProof.name}}</div>
              <div>
                <span>{{getIncrementStatusStr(incrementProof.status).text}}</span>
                <span style="margin-left: 10px;color:#B6B5BA;">{{incrementProof.update_time|timeFormat}}</span>
              </div>
              <common-svg name="bianji1" :width="'25px'"
                v-if="incrementProof.status !== ChainStatus.SUCCESS"
                :height="'25px'" 
                @click.stop.native="editIncrementProof(incrementProof,index)" 
                ></common-svg>
            </div>
          </van-step>
        </van-steps>
      <div class="desc" @click.stop="showIncrementList = !showIncrementList;getIncrementList(3);">
        <common-svg name="suyuan-duoshaotiao1"></common-svg>
        <div>溯源流程{{proof.increment_num}}条</div>
        <common-svg name="fanhui"  :style="{transform: showIncrementList?'rotate(180deg)':'rotate(0)'}"></common-svg>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
import { Icon, Steps, Step, Collapse, CollapseItem } from 'vant';
import { ChainStatus } from '@/const/enum';
import { ChainStatusStr } from '@/const/constants';
const classEnum: any = {
  [ChainStatus.NONE]: 'none',
  [ChainStatus.CHAINING]: 'chaining',
  [ChainStatus.SUCCESS]: 'success',
  [ChainStatus.FAILURE]: 'failure',
};
@Component({
  components: {
    [Icon.name]: Icon,
    [Steps.name]: Steps,
    [Step.name]: Step,
    [CollapseItem.name]: CollapseItem,
    [Collapse.name]: Collapse,
  },
})
export default class ProofItem extends Vue {
  @Prop( {
    required: true,
  })private proof!: any;
  private incrementList: any[] = [];
  private showIncrementList: boolean = false;
  private active: number = 0;
  private activeName: string = '1';
  private ChainStatus = ChainStatus;

  @Emit('show-more-action')
  private async showMoreAction() {
    const { proof: { increment_num } } = this;
    if (increment_num > 0) {
      await this.getIncrementList(increment_num);
    }
    return this.proof;
  }
  private getIncrementList(count: number) {
    const { hash } = this.proof;
    return this.$api.proof.incrementList(hash).then((res: any) => {
      this.incrementList = res.results || [];
    });
  }
  get statusStr() {
    const { status } = this.proof;
    return {
      text: ChainStatusStr[status],
      class: classEnum[status],
    };
  }
  private getIncrementStatusStr(status: number) {
    return {
      text: ChainStatusStr[status],
    };
  }
  @Emit('edit-increment-proof')
  private editIncrementProof(incrementProof: any, currentIndex: number) {
    const preProof = this.incrementList.length < 2
                      ? this.proof
                      : this.incrementList.find( (proof, index) => index === (currentIndex - 1));
    return {
      incrementProof,
      baseProof: this.proof,
      preProof,
    };
  }
}
</script>
<style scoped lang="scss">
  .proof-item{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 15px;
    padding: 15px;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.06);
    border-radius: 15px;
    color:#353535;
    text-align: left;
    font-size: 16px;
    ::v-deep .van-step__line{
      background-color:#1B71FF;
    }
    .header{
      display: grid;
      grid-template-columns: auto 30px;
      grid-template-rows: repeat(2, 30px);
      grid-auto-flow: column dense;
    }
    .status,.time{
      font-size: 12px;
    }
    .time{
      margin-left: 20px;
    }
    .more{
      place-self: center;
      grid-row: 1/ span 2;
    }
    .none{
      color: #6CCFD2;     
    }
    .chaining{
      color: #FF9A16;
    }
    .success{
      color: #3175FF;
    }
    .failure{
      color: #FF4343;
    }
    .increment{
      display: flex;
      flex-direction: column;
      .list{
        .increment-item{
          display: grid;
          grid-template-columns: auto 30px;
          grid-template-rows: repeat(2, 30px);
          grid-auto-flow: column dense;
        }
      }
      .desc{
        display:grid;
        grid-template-columns: 20px auto 20px;
        align-items: center;
        padding-top: 10px;
        font-size: 12px;
        color:#B6B5BA;
      }
    }
  }
</style>
