<template>
  <div 
    class="proof-item">
    <div 
      class="header">
       <span 
        style="font-weight:500;font-size:18px;"
        class="van-ellipsis">{{proof.name}}</span>
       <div>
          <span 
            class="status" 
            :class="currentProofStatusAndClass.class"
          >{{currentProofStatusAndClass.text}}</span>
          <span 
            class="time">{{proof.update_time | timeFormat}}</span>
       </div>
       <common-svg 
        @click.stop.native="showMoreAction"
        name="sandian"
        class="more" 
        ></common-svg>
    </div>
    <div
      v-if="proof.increment_num > 0"
      class="increment van-hairline--top">  
        <van-steps
          v-show="showIncrementList"
          :active="active" 
          direction="vertical"
          class="list"
          active-color="#FF3661" >
          <van-step 
            v-for="({ id, name, status, update_time }, index) in incrementList"
            :key="id" 
            @click.native.stop="![ChainStatus.HIDING, ChainStatus.HIDED].includes(proof.status) && [ChainStatus.NONE, ChainStatus.FAILURE].includes(status)?
            editIncrementProof(index): goProofDetail(proof)"
            >
            <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;"
                class="van-ellipsis">{{name}}</div>
              <div>
                <span>{{getStatusTextAndClass(status).text}}</span>
                <span 
                  style="margin-left: 10px;color:#B6B5BA;">{{update_time | timeFormat}}</span>
              </div>
              <common-svg
                v-if="![ChainStatus.HIDING, ChainStatus.HIDED].includes(proof.status) && [ChainStatus.NONE, ChainStatus.FAILURE].includes(status)"
                @click.stop="editIncrementProof(index)" 
                name="bianji1"
                width="30px"
                height="30px"
                ></common-svg>
            </div>
          </van-step>
        </van-steps>
      <div 
        class="desc"
        @click.stop="toggleShowIncrementListHandler">
        <common-svg name="suyuan-duoshaotiao1"></common-svg>
        <div>{{ isSy ? '溯源' : '慈善' }}流程<span class="flow-count">{{ proof.increment_num }}</span>条</div>
        <common-svg
          name="fanhui"
          class="arrow" 
          :class="{ expand: showIncrementList }"></common-svg>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Inject, Mixins} from 'vue-property-decorator';
import { ChainStatus } from '@/const/enum';
import { ChainStatusStr } from '@/const/constants';
import MixinProof from '@/mixins/proof.ts';
const classEnum: any = {
  [ChainStatus.NONE]: 'none',
  [ChainStatus.CHAINING]: 'chaining',
  [ChainStatus.SUCCESS]: 'success',
  [ChainStatus.FAILURE]: 'failure',
};

@Component({
  name: 'proof-item',
})

export default class ProofItem extends Mixins(MixinProof)  {
  @Inject('isSy') private isSy!: boolean;
  @Prop( {
    required: true,
  })private proof!: any;
  private incrementList: any[] = [];
  private showIncrementList: boolean = false;
  private active: number = 0;
  private activeName: string = '1';
  private ChainStatus = ChainStatus;

  private get currentProofStatusAndClass() {
    return this.getStatusTextAndClass(this.proof.status);
  }
  @Emit('show-more-action')
  private async showMoreAction() {
    const { proof: { increment_num } } = this;
    if (increment_num > 0 && this.incrementList.length <= 0) {
      await this.getIncrementList(increment_num);
    }
    return this.proof;
  }
  private async getIncrementList(count: number) {
    const { hash } = this.proof;
    const { results } = await this.$api.proof.incrementList(hash);
    this.incrementList = results || [];
  }
  private toggleShowIncrementListHandler() {
    const {
      showIncrementList,
      incrementList: { length },
      proof: { increment_num },
    } = this;
    this.showIncrementList = !showIncrementList;
    if (this.showIncrementList && length <= 0) {
      this.getIncrementList(increment_num);
    }
  }
  private getStatusTextAndClass(status: number) {
    return {
      text: ChainStatusStr[status],
      class: classEnum[status],
    };
  }
  @Emit('edit-increment-proof')
  private editIncrementProof(currentIndex: number) {
    const preProof = this.incrementList.length < 2
                      ? this.proof
                      : this.incrementList[currentIndex + 1];
    return {
      incrementProof: this.incrementList[currentIndex],
      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: 5px;
    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, 25px);
      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;
        .flow-count{
          color: #3175FF;
          margin: 0 3px;
        }
        .arrow {
          transition: all .3s linear;
          &.expand {
            transform: rotate(180deg);
          }
        }
      }
    }
  }
</style>
