<template>
  <div>
    <a-modal
      class="modalBox"
      :title="titleText"
      v-model="isshow"
      @cancle="cancel"
      width="45%"
      :centered="true">
      <a-form :form="form" @submit="handleSubmit">
        <a-row :gutter="30">
          <a-col :span="10">
            <!-- 用户名称 -->
            <a-form-item label="骑手名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input
                placeholder="请输入骑手名称(最多30个字符)"
                allowClear
                id="userModal-userName"
                :maxLength="30"
                v-decorator="['formData.userName', {
                  initialValue: formData.userName,getValueFromEvent: $filterEmpty,
                  rules: [{ required: true, message: '请输入骑手名称(最多30个字符)!' },{pattern:'^[^<|>]{1,30}$',message:'请输入不含<或>的字符，最多30个字符'}] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <!-- 手机号码 -->
            <a-form-item label="骑手电话" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input
                placeholder="请输入骑手电话"
                allowClear
                :maxLength="11"
                id="userModal-userMobile"
                v-decorator="['formData.userMobile', {
                  initialValue: formData.userMobile,getValueFromEvent: $filterEmpty,
                  rules: [{ required: true, message: '请输入骑手电话!' },{pattern:/^[1][0-9]{10}$/, message: '请输入正确的骑手电话!'}] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 经纬度 -->
        <a-row :gutter="30">
          <a-col :span="10">
            <a-form-item label="纬度" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input
                id="network-edit-lat"
                v-decorator="[
                  'formData.lat',
                  { initialValue: formData.lat, rules: [
                    { required: true, message: '请输入纬度' },
                    { pattern: /^[\-\+]?([0-8]?\d{1}\.\d{1,8}|90\.0{1,8})$/, message: '请输入正确的纬度,整数部分为0～90，必须输入1到8位小数' }
                  ] }
                ]"
                placeholder="请输入纬度"
                allowClear />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item label="经度" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input
                id="network-edit-lng"
                v-decorator="[
                  'formData.lng',
                  { initialValue: formData.lng, getValueFromEvent: $filterEmpty, rules: [
                    { required: true, message: '请输入经度' },
                    { pattern: /^[\-\+]?(0?\d{1,2}\.\d{1,8}|1[0-7]?\d{1}\.\d{1,8}|180\.0{1,8})$/, message: '请输入正确的经度,整数部分为0～180，必须输入1到8位小数' }
                  ] }
                ]"
                placeholder="请输入经度"
                allowClear />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a href="https://lbs.qq.com/tool/getpoint/" target="_blank">
              <a-button type="primary" id="network-edit-search-jwd" class="network-edit-search-jwd" size="small">查询坐标</a-button>
            </a>
          </a-col>
        </a-row>
        <a-row :gutter="30" type="flex">
          <a-col :span="10">
            <a-form-item label="服务半径" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }" >
              <!-- <a-input
                v-decorator="[
                  'formData.serviceRadius',
                  { initialValue: formData.serviceRadius, getValueFromEvent: $filterEmpty, rules: [
                    { required: true, message: '请输入服务半径' },
                    { pattern: /^[1-9]\d*$/, message: '请输入正确的服务半径（大于0的正整数）' }
                  ] }
                ]"
                placeholder="请输入服务半径"
                allowClear /> -->
              <span>3KM</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item :wrapper-col="{ span: 24, offset: 10}">
          <a-button type="primary" @click="handleSubmit()" id="userModal-handleSubmit" :style="{ marginRight: '15px' }">
            保存
          </a-button>
          <a-button :style="{ marginLeft: '15px' }" @click="handleCancel()" id="userModal-handleCancel">
            取消
          </a-button>
        </a-form-item>
      </a-form>

    </a-modal>
  </div>
</template>

<script>
import { STable, VSelect } from '@/components'
import { savRider } from '@/api/recoveryManage.js'
export default {
  name: 'RiderModal',
  components: {
    STable, VSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      titleText: '新增用户',
      isshow: this.visible,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'miniForm' }),
      roleList: [],
      formData: {
        userName: '',
        userMobile: '',
        serviceRadius: '',
        lat: '',
        lng: ''
      }

    }
  },
  methods: {
    cancel (e) {
      this.clear()
      this.$emit('close')
    },

    // 保存提交
    handleSubmit () {
      const _this = this
      this.form.validateFields((err, values) => {
        console.log(values, 'values222')
        if (!err) {
          // values.formData.roleNames = values.formData.roleNames.join(',')
          // console.log(values.formData, ' formData.type222222222')
          // console.log(Object.assign({ id: this.data.id ? this.data.id : '' }, values.formData))
          savRider(Object.assign({ id: this.data.id ? this.data.id : '', userId: this.data.userId ? this.data.userId : '' }, values.formData)).then(res => {
            console.log(res, 'res--save')
            if (res.status + '' === '200') {
              this.$message.success(res.message ? res.message : '保存成功')
              this.$emit('refresh')
              setTimeout(function () {
                _this.cancel()
              }, 300)
            } else {
              // this.$message.error(res.message)
            }
          })
        }
      })
    },
    // 取消
    handleCancel () {
      this.cancel()
    },
    clear () {
      this.form.resetFields()
      delete this.formData.id
      delete this.formData.userId
      this.formData.userName = ''
      this.formData.userMobile = ''
      this.formData.lat = ''
      this.formData.lng = ''
      this.formData.serviceRadius = ''
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'miniForm' })
  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (newValue) {
        if (this.data.id) { // 编辑
          this.titleText = '编辑用户'
          this.formData = Object.assign({}, this.data)
          delete this.formData.no
        } else {
          this.titleText = '新增用户'
        }
      } else {
        this.cancel()
      }
    }
  }
}
</script>

<style lang="less">
  .ant-modal-footer {
    display: none;
  }
  .network-edit-search-jwd{
    margin-top: 8px;
  }
</style>
