<template>
  <transition name="move">
    <van-form
      v-show="showFlag"
      class="edit-table-num"
      @submit="onsubmit">
      <van-icon
        class="af-van-icon-back"
        color="#fff"
        name="arrow-left"
        size="30px"
        @click="showFlag = false"/>
      <div class="input-type">
        <van-button
          type="default"
          @click.stop.prevent="handleScanQRCode">扫码获取
        </van-button>
        <van-button class="active" type="default" @click.stop.prevent>手动输入</van-button>
      </div>
      <van-field
        v-model.trim="placeNum"
        :border="false"
        input-align="center"
        name="用户名"
        placeholder="请输入桌号"/>
      <van-button
        block
        class="af-submit"
        native-type="submit"
        type="info">提交
      </van-button>
    </van-form>
  </transition>
</template>

<script>
import { Form, Button, Field, Icon, Toast } from 'vant'
import wx from 'weixin-js-sdk'
import { platform } from '../../../utils/platform'

export default {
  name: 'index',
  components: {
    'van-form': Form,
    'van-button': Button,
    'van-field': Field,
    'van-icon': Icon
  },
  data () {
    return {
      showFlag: false
    }
  },
  computed: {
    placeNum: {
      get () {
        return this.$store.getters['shopcart/placeNum']
      },
      set (val) {
        this.$store.commit('shopcart/UPDATE_PLACENUM', val)
      }
    }
  },
  methods: {
    init () {
      this.showFlag = true
    },
    handleScanQRCode () {
      const vm = this
      if (platform.isWeixin) {
        wx.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: function (result) {
            setTimeout(() => {
              const { resultStr } = result
              vm.placeNum = resultStr && JSON.parse(resultStr).place_number
            }, 1000)
          },
          fail: err => {
            Toast(JSON.stringify(err))
          }
        })
      } else if (platform.isAlipay) {
        if (window.AlipayJSBridge) {
          window.AlipayJSBridge.call('scan', {
            scanType: ['qrCode', 'barCode']
          }, function (result) {
            const { codeContent } = result
            if (codeContent) {
              vm.placeNum = codeContent && JSON.parse(codeContent).place_number
            }
          })
        } else {
          Toast('扫码功能不可用，请退出重试')
        }
      } else {
        Toast('扫码功能不可用')
      }
    },
    onsubmit () {
      if (!this.placeNum) {
        Toast('请输入桌号')
        return
      }
      this.showFlag = false
      this.$router.push({ name: 'SellPay' })
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-table-num {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 70;
  width: 100%;
  min-height: 100vh;
  padding-top: 94px;
  background: rgba(0, 0, 0, 0.8);
  transform: translate3d(0, 0, 0);

  &.move-enter-active, &.move-leave-active {
    transition: all 0.2s linear;
  }

  &.move-enter, &.move-leave-active {
    transform: translate3d(100%, 0, 0);
  }

  .af-van-icon-back {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 1;
  }

  ::v-deep .van-cell {
    display: block;
    width: 275px;
    border-radius: 8px;
    padding: 14px 0;
    margin: 29px auto 23px;

    input,
    textarea {
      width: 100%;
      height: 22px;
      font-size: 16px;
      color: #222;
      word-break: break-all;
      resize: none;
      outline: 0 none;
      overflow: hidden;
      background: transparent;
      -webkit-text-fill-color: #222;
      opacity: 1;

      &::-webkit-input-placeholder {
        color: #736F6F;
        -webkit-text-fill-color: #736F6F;
        opacity: 1;
      }
    }
  }
}

.input-type {
  display: flex;
  justify-content: center;
  align-items: center;;

  ::v-deep .van-button {
    width: 120px;
    height: 36px;
    border-radius: 18px;
    border: none;
    background: rgba(0, 0, 0, 0.2);

    &:nth-of-type(2) {
      margin-left: 16px;
    }

    &.active {
      background: linear-gradient(90deg, #000000 0%, #525050 100%);
    }

    .van-button__text {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 36px;
    }
  }
}

.af-submit {
  width: 124px;
  height: 40px;
  background: #D32323;
  border-radius: 25px;
  border: none;
  margin: 0 auto;

  ::v-deep .van-button__text {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
  }
}
</style>
