<template>
<Layout-Child class='page-scroll'>
  <div class="w-7/12 mx-auto my-6">
    <app-steps :data='mySteps' :currentStep='currentStep' @stepOnChange="stepOnChange" @stepOnFinished='stepOnFinished'></app-steps>
  </div>
  <div class="w-11/12 mx-auto">
    <div class="step-one" v-if="currentStep==1">
        <app-cell v-model="createNFT.value_name" type="input" text='剧本名称' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
        <app-cell v-model="createNFT.value_publisher" type="input" text='发行人' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
        <app-cell :pickValue="mySteps" type="pick" text='剧本题材' class="text-font-white my-3" @onClick="what"></app-cell>
        <div>
            <div class="text-font-white my-2">剧本简介</div>
            <textarea v-model="createNFT.value_des" name="des" id="nft-des" cols="30" rows="10" class=" w-full bg-font-gray bg-opacity-20 text-font-white p-3 text-sm"></textarea>
        </div>
        <div class="fixed bottom-0 w-full left-0 z-30">
            <app-btn text="下一步" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue" :disabled="validation" border='none' @btnClicked='currentStepChange(1)'></app-btn>
        </div>
    </div>
    <div class="step-two" v-if="currentStep==2">
        <app-cell  text='剧本上传' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
        <app-cell  text='剧本HASH' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
        <app-cell  text='平台存档' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
        <app-cell  text='授权阅读' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
        <div class="fixed bottom-0 w-full left-0 flex flex-row z-30">   
            <app-btn text="上一步" class=" w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(-1)'></app-btn>
            <app-btn text="下一步" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" :disabled="validation" border='none' @btnClicked='currentStepChange(1)'></app-btn>
        </div>
    </div>
    <div class="step-three" v-if="currentStep==3">
        <app-cell  text='NFT编号' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
        <app-cell  text='剧本HASH' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
        <app-cell  text='发行人地址' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
        <app-cell  text='数量' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
        <div class="fixed bottom-0 w-full left-0 flex flex-row z-30">   
            <app-btn text="上一步" class=" w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(-1)'></app-btn>
            <app-btn text="发行NFT" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' :disabled="validation" @btnClicked='currentStepChange(1)'></app-btn>
        </div>
    </div>
  </div>
</Layout-Child>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data(){
    return{
      createNFT:{
        value_name:'',
        value_publisher:'',
        value_picker:[],
        value_des:''
      },
      // validation:{
      //   step_one:true,
      //   step_two:true,
      //   step_three:true
      // },

      mySteps:[
          {
            text:'step1'
          },
                    {
            text:'step2'
          },
          {
            text:'step3'
          },
        ],
      currentStep:1
    }
  },
  components:{
       'Layout-Child':()=>import('@/layout/Child.vue'),
       'app-steps':()=>import('@/components/common/Steps.vue'),
       'app-cell':()=>import('@/components/common/Cell.vue'),
        'app-btn':()=>import('@/components/common/Btn.vue')
  },
  computed:{
    validation:function(){
      let disabled = true
      const {value_name,value_publisher } = this.createNFT
      if(this.currentStep === 1){
        if(value_name&&value_publisher){
          disabled = false
        }
        disabled = true
      }
      return disabled
    }
  },
  methods:{
    addStep(){
      this.currentStep ++
    },
    stepOnFinished(e:boolean){
      console.log(e,'finished');
    },
    stepOnChange(e:string){
      console.log(e,'change');
    },
    getValue(val:string){
      console.log(val);
      
    },
    what(item:Function){
      item(this.$router.push('/Nft/create/pick'))
    },
    currentStepChange(val:number){
        console.log(1111,this.currentStep, this.mySteps.length+1,this.currentStep + val);
        if(this.currentStep < this.mySteps.length+1){
            this.currentStep += val
        }
    },
  }
});
</script>
