<template>
  <div class="issue-ticket__container">
    <van-nav-bar title="发放奖票" left-text="返回" @click-left="$route_back" left-arrow/>
    <div class="issue-ticket__content">
      <van-cell-group>
        <EmployeeSelectorCell required title="发放对象" name="发放对象" v-validate="'required'" :max="10"
                              v-model="employeeList" use_employee_list :employee_list="manageScope"/>
      </van-cell-group>
      <div class="related-events__wrap">
        <EventSelector @confirm="onRelatedEvents" title="关联已有事件" point_type="all"/>
      </div>
      <div>
        <van-field required v-model="message" rows="4" label="奖票原因" type="textarea"
                   maxlength="50" placeholder="请输入" show-word-limit/>
      </div>
      <div class="submit-button__wrap">
        <van-button round block type="info" :loading="loading" @click="submitHandle">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {CellGroup, Field} from 'vant'
  import request from '@/utils/request'
  import EventSelector from '@/components/common/EventSelector'
  import EmployeeSelectorCell from '@/components/common/EmployeeSelectorCell'

  Vue.use(CellGroup).use(Field)

  export default {
    name: 'issue_lottery_ticket',
    data () {
      return {
        message: '',
        loading: false,
        employeeList: []
      }
    },
    components: {EmployeeSelectorCell, EventSelector},
    computed: {
      manageScope () {
        return this.$store.getters.user_info.employee_detail.manage_scope
      }
    },
    methods: {
      onRelatedEvents (event) {
        this.message = event.remark
      },
      submitHandle () {
        this.validator((err) => {
          if (err) {
            this.$toast.fail(err.message)
            //this.$notify({type: 'warning', message: err.message})
            return
          }

          this.loading = true
          const data = this.getFormData()
          request('put','/api/integral/ticket',data).then(res => {
            if (res.data.code === 1) {
              this.$toast.success('发放成功')
              this.$route_back()
            } else {
              this.$toast.fail(res.data.msg)
            }
          }).finally(() => this.loading = false)
        })
      },
      getFormData () {
        return {items: this.employeeList.map(item => ({employee_id: item.id, count: 1, remark: this.message}))}
      },
      validator (callback) {
        if (typeof callback !== 'function') {
          throw new Error('callback is not a function')
        } else if (this.employeeList.length === 0) {
          callback(new Error('必须选择发放对象'))
        } else if (!this.message || !this.message.trim()) {
          callback(new Error('奖票原因为必填项'))
        } else {
          callback()
        }
      }
    }
  }
</script>

<style scoped lang="less">

  .issue-ticket__container {
    position: relative;

    & /deep/ .van-nav-bar {
      background-color: #26a2ff;
    }

    & .issue-ticket__content {
      position: relative;
      height: calc(100% - 0.92rem);
    }

    & .related-events__wrap {
      position: relative;
      padding: 0.24rem 0.32rem 0.08rem 0.32rem;
      text-align: right;

      /deep/ .display-inline > a {
        font-size: 0.28rem;
        color: #26a2ff;
      }
    }

    & .submit-button__wrap {
      position: relative;
      padding: 0.32rem;
    }
  }
  .submit-button__wrap /deep/ button{
    border-radius:0.12rem !important;
  }

</style>
