<template>
  <div>
    <a-modal
      :footer="null"
      :title="titleText"
      v-model="isshow"
      @cancle="cancel"
      :centered="true">
      <a-spin :spinning="loading">
        <a-form-model ref="ruleForm" :model="formData" :rules="rules">
          <a-form-model-item label="司机姓名" prop="name" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
            <a-input v-model.trim="formData.name" :maxLength="30" placeholder="请输入司机姓名(最多30个字符)" id="addDiverModal-name"/>
          </a-form-model-item>
          <a-form-model-item label="手机号码" prop="phone" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
            <a-input v-model.trim="formData.phone" :maxLength="11" placeholder="请输入手机号" id="addDiverModal-phone"/>
          </a-form-model-item>
          <a-form-model-item label="状态" prop="loginFlag" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
            <a-radio-group
              name="radioGroup"
              v-model="formData.loginFlag"
              id="addDiverModal-loginFlag"
            >
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 24, offset: 8 }">
            <a-button type="primary" @click="onSubmit" :style="{ marginRight: '15px' }" id="addDiverModal-onSubmit">保存</a-button>
            <a-button @click="cancel" :style="{ marginLeft: '15px' }" id="addDiverModal-cancel">取消</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-spin >
    </a-modal>
  </div>
</template>

<script>
import {
  STable,
  VSelect
} from '@/components'
import { saveDriver, driverDetails } from '@/api/cleanManage.js'
export default {
  name: 'AddDiverModal',
  components: {
    STable,
    VSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    itemId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      titleText: '新增',
      isshow: this.visible,
      formLayout: 'horizontal',
      optionData: [],
      formData: {
        name: '',	// 姓名
        loginFlag: '', // 状态
        phone: '' // 手机号码
      },
      rules: {
        phone: [{ required: true, pattern: /^\d{11}$/, message: '请输入手机号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入司机姓名', trigger: 'blur' }],
        loginFlag: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      },
      loading: false
    }
  },
  methods: {
    cancel (e) {
      this.clear()
      this.$emit('close')
    },
    // 编辑查详情
    getPageInfo () {
      this.loading = true
      driverDetails({
        id: this.itemId
      }).then(res => {
        if (res.status == 200) {
          this.loading = false
          this.formData = Object.assign({}, this.formData, res.data)
          this.formData.loginFlag = Number(this.formData.loginFlag)
        }
      })
    },
    // 保存提交
    onSubmit () {
      this.$refs.ruleForm.validate(valid => {
        const _this = this
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.formData))
          saveDriver(params).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.$emit('refresh')
              setTimeout(function () {
                _this.cancel()
              }, 300)
            }
          })
        }
      })
    },
    // 取消
    handleCancel () {
      this.cancel()
    },
    clear () {
      this.$refs.ruleForm.resetFields()
      delete this.formData.id
      this.formData.name = ''
      this.formData.loginFlag = ''
      this.formData.phone = ''
    }
  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (val) {
      if (!val) {
        this.$emit('close')
      } else {
        this.$nextTick(() => {
          this.$refs.ruleForm.resetFields()
        })
      }
    },
    itemId (newValue, oldValue) {
      if (newValue && this.isshow) {
        this.titleText = '编辑'
        this.getPageInfo(newValue)
      } else {
        this.titleText = '新增'
        console.log(this.loading)
      }
    }
  }
}
</script>

<style>
</style>
