<template>
  <a-modal
    :visible="visible"
    title="编辑旅行社"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    width="500px"
    @cancel="handleCancel"
  >
    <a-form-model :model="form" ref="form">
      <a-form-model-item
        label="旅行社名称"
        v-bind="formItemLayout"
        prop="name"

      >
        <a-input
          v-model="form.name"
        ></a-input>
      </a-form-model-item>

      <a-form-model-item
        label="联系人"
        v-bind="formItemLayout"
        prop="contact"
      >
        <a-input
          v-model="form.contact"
        ></a-input>
      </a-form-model-item>

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

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

      <a-form-model-item
        label="密码"
        v-bind="formItemLayout"
        prop="password"
        :rules="[{ validator:verifyPassword }]"
      >
        <a-input
          v-model="form.password"
        ></a-input>
      </a-form-model-item>

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

<script>
import { setTravelAgencyUserById } from '@/api/saleChannel/travelAgency'
import { verifyPhone, verifyUsername, verifyPassword } from '@/utils/validator'
import cloneDeep from 'lodash/cloneDeep'

export default {
  data () {
    return {
      visible: false,
      form: {
        name: '',
        contact: '',
        email: '',
        phone: '',
        password: ''
      },
      confirmLoading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      }
    }
  },
  methods: {
    verifyPhone,
    verifyUsername,
    verifyPassword,
    show (data) {
      this.visible = true
      this.form = cloneDeep(data)
    },
    handleOk () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          const { id, name, contact, email, phone, password } = this.form
          const params = { id, name, contact, email, phone, password }

          if (!params.password) {
            delete params.password
          }
          setTravelAgencyUserById(this.form.id, params).then(res => {
            this.$emit('ok')
            this.$message.success('修改成功')
            this.handleCancel()
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    handleCancel () {
      this.visible = false
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
