<template>
    <van-popup
      class="add-baseinfo"
      round
      v-model="show"
      position="bottom" 
      :close-on-click-overlay="false"
      :style="{height: '80%'}">
       <header>
         <common-svg name="shanchu5" @click.native="cancle"></common-svg>
         <div>创建存证</div>
         <div style="color:#B6B5BA;font-size:16px;" @click="next" :style="(proofName && templateInfo.name) ? {color: '#3F79FE'} : {}">下一步</div>
       </header>
       <van-field :value="proofName" placeholder="填写存证名称" @input="change"></van-field>
       <div style="padding: 12px;">
          <div style="background:#F9F9FB;padding:10px 0;" class="select-template" @click="$emit('select-template')">
            <common-svg name="tianjia" style="margin-right:10px;"></common-svg>
            <span class="select">{{templateInfo.name? `已选择 ${templateInfo.name}`: '选择模板'}}</span>
            <common-svg name="jinru"></common-svg>
          </div>
       </div>
    </van-popup>
</template>
<script lang="ts">
import { Component, Prop, Watch, Vue, Emit, Model } from 'vue-property-decorator';
import { Button, Field, Popup, Image } from 'vant';
import { Getter } from 'vuex-class';
import { TemplateDataItem } from '@/const/interface';
import { Route } from 'vue-router';
@Component({
  components: {
    [Button.name]: Button,
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Image.name]: Image,
  },
})
export default class AddBaseinfo extends Vue {
  private show: boolean = true;
  @Prop({}) private templateInfo!: any;
  @Model('input', {})
  private proofName!: string;
  @Emit('input')
  private change(value: string ) {
    return value;
  }
  private cancle() {
    this.$dialog({
      message: '是否放弃当前的存证',
      confirmButtonText: '继续存证',
      confirmButtonColor: '#3175FF',
      showCancelButton: true,
      cancelButtonText: '放弃',
      cancelButtonColor: '#353535',
    }).catch(() => {
      this.$emit('cancle');
    });
  }
  private next() {
    const { proofName, templateInfo: { name }} = this;
    if (!name) {
      this.$toast('请选择模板');
      return;
    }
    if (!proofName) {
      this.$toast('请填写存证名称');
      return;
    }
    this.$emit('next');
  }
}
</script>
<style scoped lang="scss">
  .add-baseinfo{
    ::v-deep .van-field__control{
      color: #353535;
      font-size: 22px;
    }
    ::-webkit-input-placeholder{
      color: #CDCDCD
    }

    header{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 15px;
      font-weight: 500;
    }
    .select-template{
      display: grid;
      grid-template-columns: 30px auto 30px;
      grid-gap: 5px;
      place-items: center;
      margin-top: 15px;
      .select{
        justify-self: start;
      }
    }
  }
</style>