<template>
    <div>
        <Row type="flex" justify="center" align="middle" >
            <Col span="10">
                <Form ref="editfrom" :model="fromdata" :label-width="100" :rules="fromdata_rule">
                        <Form-item prop="name" label="姓名">
                            <Input type="text" v-model="fromdata.name" placeholder="姓名">
                            </Input>
                        </Form-item>
                        <Form-item prop="age" label="年龄">
                            <Input type="number" v-model="fromdata.age" placeholder="年龄">
                            </Input>
                        </Form-item>
                        <Form-item prop="gender" label="性别">
                            <Radio-group v-model="fromdata.gender">
                                <Radio label="男">男</Radio>
                                <Radio label="女">女</Radio>
                            </Radio-group>
                        </Form-item>
                        <Form-item prop="telno" label="电话">
                            <Input type="text" v-model="fromdata.telno" placeholder="电话">
                            </Input>
                        </Form-item>
                        <Form-item prop="address" label="地址">
                            <Input type="text" v-model="fromdata.address" placeholder="地址">
                            </Input>
                        </Form-item>
                        <Form-item prop="business_type" label="到访事由">
                            <Select v-model="fromdata.business_type" placeholder="到访事由">
                                <Option v-for="item in vbtlist" :value="item.id"  :key="item.id">
                                    {{ item.name }}
                                </Option>
                            </Select>
                        </Form-item>
                        <Form-item prop="remark" label="备注">
                            <Input type="textarea" v-model="fromdata.remark" placeholder="备注">
                            </Input>
                        </Form-item>
                        <Form-item prop="remark" label="是否为会员">
                            <i-switch v-model="fromdata.is_member" @on-change="ismemberchange">
                                <span slot="open">是</span>
                                <span slot="close">否</span>
                            </i-switch>
                        </Form-item>
                        <Form-item>
                            <Button type="primary" @click="saveinfo">提交</Button>
                        </Form-item>
                </Form>
            </Col>
        </Row>
    </div>
</template>
<script>
import { getvbtlist, newvisitinfo } from '@/api/data'
export default {
  name: 'visitinsert',
  data () {
    var self = this
    return {
      fromdata_rule: {
        name: [
          { type: 'string', required: true, message: '姓名必填' }
        ],
        age: [
          {
            required: true,
            validator (rule, value, callback, source, options) {
              if (value >= 100 || value <= 10 || parseInt(value) <= 0) {
                callback(new Error('年龄错误'))
              } else {
                callback()
              }
            }
          }
        ],
        telno: [
          { type: 'string', required: true, message: '手机号必填' },
          {
            validator (rule, value, callback, source, options) {
              var pattern = /^1[3-9]\d{9}$/
              var match = value.match(pattern)
              if (value.length === 11) {
                if (!match) {
                  callback(new Error('手机号错误'))
                } else {
                  callback()
                }
              } else {
                callback(new Error('手机号错误'))
              }
            }
          }
        ],
        business_type: [
          { required: true, type: 'number', trigger: 'change' }
        ]
      },
      vbtlist: [],
      fromdata: {
        id: 0,
        business_type: 1,
        name: '',
        age: 20,
        gender: '男',
        address: '',
        telno: '',
        is_member: false,
        remark: ''
      }
    }
  },
  methods: {
    getvbtlist () {
      getvbtlist().then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          this.vbtlist = data.data
        }
      })
    },
    saveinfo () {
      this.$refs['editfrom'].validate((valid) => {
        if (valid) {
          if (this.fromdata.id <= 0) {
            delete this.fromdata.id
          }
          newvisitinfo(this.fromdata).then(res => {
            const data = res.data
            if (data.code !== 200) {
              this.$Message.error(data.msg)
            } else {
              this.$Message.success('新增成功')
            }
          })
        } else {
          this.$Message.error('验证失败!')
        }
      })
    },
    ismemberchange (result) {
      if (result) {
        this.fromdata.is_member = 1
      } else {
        this.fromdata.is_member = 0
      }
    }
  },
  mounted () {
    this.getvbtlist()
  }
}
</script>
