<template>
  <a-modal
    :visible="visible"
    title="新增旅行社"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    width="500px"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-form-item
        label="旅行社名称"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'name',
            {
              rules: [{required: true, message: '请输入旅行社名称'}]}
          ]"
        ></a-input>
      </a-form-item>

      <a-form-item
        label="登录用户名"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'username',
            {
              rules: [{ required: true, message: '请输入' },{ validator:verifyUsername }]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="密码"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'password',
            {
              rules: [{ required: true, message: '请输入' },{ validator:verifyPassword }]
            }
          ]"
        ></a-input>
      </a-form-item>

      <a-form-item
        label="可挂账金额"
        v-bind="formItemLayout"
      >
        <a-input-number
          style="width:100%"
          :min="0"
          :step="0.01"
          :precision="2"
          v-decorator="[
            'accountable_amount',
            {
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        ></a-input-number>
      </a-form-item>

      <a-form-item
        label="联系人"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'contact',
            {
              rules: [{ message: '请输入' }]
            }
          ]"
        ></a-input>
      </a-form-item>

      <a-form-item
        label="email"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'email',
            {
              rules: [{
                type: 'email', message: '不是有效的邮箱地址',
              }]
            }
          ]"
        ></a-input>
      </a-form-item>

      <a-form-item
        label="手机"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'phone',
            {
              rules: [{ validator:verifyPhone }]
            }
          ]"
        ></a-input>
      </a-form-item>

    </a-form>
  </a-modal>
</template>

<script>
import { addTravelAgencyUser } from '@/api/saleChannel/travelAgency'

import modalMixin from './modalMixin'

export default {
  mixins: [modalMixin],
  methods: {
    showCallback () {

    },
    handleOk () {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('values', values)
          this.confirmLoading = true
          addTravelAgencyUser(values).then(res => {
            this.$emit('ok')
            this.$message.success('创建成功')
            this.handleCancel()
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
