<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model
        ref="form"
        :model="model"
        :rules="validatorRules"
        slot="detail"
      >
        <a-row>
          <a-col :span="24">
            <a-form-model-item
              label="姓名"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="cusName"
            >
              <a-auto-complete
                v-model="model.cusName"
                placeholder="联系人"
                @search="handleSearch"
                @select="(e) => handleSelectMember(e)"
                style="width: 70%;"
              >
                <template slot="dataSource">
                  <a-select-option
                    v-for="item in customerList"
                    :key="item.id"
                  >{{ item.name }}-{{ item.phone }}</a-select-option
                  >
                </template>
              </a-auto-complete>
              <a-button
                @click="readCardNo"
                style="margin-left: 10px"
              >读取身份证</a-button
              >
            </a-form-model-item>
          </a-col>
          <a-col :span="18" style="display: flex">
            <a-form-model-item
              label="性别"
              :labelCol="{
                xs: { span: 24 },
                sm: { span: 13 },
              }"
              :wrapperCol="{
                xs: { span: 24 },
                sm: { span: 11 },
              }"
              prop="gender"
              style="flex: 1"
            >
              <a-radio-group v-model="model.gender">
                <a-radio :value="1">男</a-radio>
                <a-radio :value="2">女</a-radio>
              </a-radio-group>
            </a-form-model-item>

            <a-form-model-item
              label="民族"
              :labelCol="{
                xs: { span: 24 },
                sm: { span: 3 },
              }"
              :wrapperCol="{
                xs: { span: 24 },
                sm: { span: 10 },
              }"
              prop="nation"
              style="flex: 1"
            >
              <a-select
                v-model="model.nation"

                :filterOption="filterOption">
                <a-select-option v-for="item in nationArr" :value="item">{{ item }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <!--          <a-col :span="8">-->
          <!--            <a-form-model-item-->
          <!--                label="年龄"-->
          <!--                :labelCol="labelCol"-->
          <!--                :wrapperCol="wrapperCol">-->
          <!--                <a-input></a-input>-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <!--          <a-col :span="8">-->
          <!--            <a-form-model-item-->
          <!--                label="名族："-->
          <!--                :labelCol="labelCol"-->
          <!--                :wrapperCol="wrapperCol">-->
          <!--              <a-input></a-input>-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <a-col :span="24">
            <a-form-model-item
              label="手机号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="cusPhone"
            >
              <a-input
                v-model="model.cusPhone"
                placeholder="请输入手机号"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" style="display: flex">
            <a-form-model-item
              label="证件类型："
              :labelCol="{
                xs: { span: 24 },
                sm: { span: 15 },
              }"
              :wrapperCol="{
                xs: { span: 24 },
                sm: { span: 9 },
              }"
              prop="certType"
              style="margin: 0px; flex:1"
            >
              <a-select v-model="model.certType">
                <a-select-option :value="1">身份证</a-select-option>
              </a-select>
            </a-form-model-item>

            <a-form-model-item
              label="证件号"
              :labelCol="{
                xs: { span: 24 },
                sm: { span: 5 },
              }"
              :wrapperCol="{
                xs: { span: 24 },
                sm: { span: 14 },
              }"
              prop="certNo"
              style="flex: 2"
            >
              <a-input
                v-model="model.certNo"
                placeholder="请输入证件号"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item
              label="地址"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="address">
              <a-input
                v-model="model.address"
                placeholder="地址">
              </a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'

export default {
  name: 'BusMemberCardForm',
  components: {},
  props: {
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      model: {
        orderId: '',
        cusName: '',
        cusPhone: '',
        certType: 1,
        certNo: '',
        address: '',
        cusId: 0,
        gender: 1,
        nation: '' },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        // mobile: [
        //   {
        //     required: true,
        //     pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        //     message: '请输入手机号!'
        //   }
        // ],
        cusPhone: [{ required: true, message: '电话号码格式不正确!', trigger: 'blur',pattern: /^[0-9]{11}$/ }],
        certNo: [{message: '请输入正确格式的身份证号', pattern: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[0-9Xx]$/ }],
        cardNo: [{ required: true, message: '请输入会员卡号!' }],
        gradeId: [{ required: true, message: '请输入等级类型!' }],
        payType: [{ required: true, message: '请输入付款类型!' }],
        paymentMethod: [{ required: true, message: '请输入付款方式!' }],
        cusName: [{ required: true, message: '请输入中文或英文姓名!',trigger: 'blur', pattern: /^[\u4E00-\u9FA5a-zA-Z]+$/ }],
        sex: [{ required: true, message: '请输入性别!' }],
        certificateType: [{ required: true, message: '请输入证件类型!' }],
        validity: [{ required: true, message: '请输入有效期!' }]
      },
      url: {
        add: '/business/busRoomBookingOrders/booking-to-live',
        edit: '/business/busMemberCard/edit',
        queryById: '/business/busMemberCard/queryById'
      },
      gradeList: [],
      paymentMethodList: [],
      staffList: [],
      customerList: [],
      oldcustomerList: [],
      nationArr: ['汉族', '壮族', '满族', '回族', '苗族', '维吾尔族', '土家族', '彝族', '蒙古族', '藏族', '布依族', '侗族', '瑶族',
        '朝鲜族', '白族', '哈尼族', '哈萨克族', '黎族', '傣族', '畲族', '傈僳族', '仡佬族', '东乡族', '高山族', '拉祜族', '水族',
        '佤族', '纳西族', '羌族', '土族', '仫佬族', '锡伯族', '柯尔克孜族', '达斡尔族', '景颇族', '毛南族', '撒拉族',
        '布朗族', '塔吉克族', '阿昌族', '普米族', '鄂温克族', '怒族', '京族', '基诺族', '德昂族', '保安族', '俄罗斯族',
        '裕固族', '乌孜别克族', '门巴族', '鄂伦春族', '独龙族', '塔塔尔族', '赫哲族', '珞巴族']
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
    var _info = JSON.parse(localStorage.getItem('storeInfo'))
    if (_info) {
      this.model.hotelId = _info.id
    }
    // 备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
    this.getbusCustomer()
  },
  methods: {
    readCardNo() {
      this.$message.error('接口程序未打开，请打开接口程序')
    },
    handleSearch(value) {
      let result
      if (!value) {
        result = this.oldcustomerList
      } else {
        result = this.oldcustomerList.filter((t) => t.name.includes(value))
      }
      this.customerList = result
    },
    handleSelectMember(e) {
      var find = this.customerList.find((t) => t.id === e)
      this.model.cusPhone = find.phone
      this.model.cusName = find.name
      this.model.cusId = find.id
    },
    getbusCustomer() {
      getAction('/bus/busCustomer/list', {}).then((res) => {
        if (res.success) {
          this.customerList = res.result.records
          this.oldcustomerList = JSON.parse(JSON.stringify(this.customerList))
        }
      })
    },
    filterOption(input, nationArr) {
      return nationArr.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    add(livingOrderId, roomId) {
      this.modelDefault.livingOrderId = livingOrderId
      this.modelDefault.roomId = roomId
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          // var customers = [];
          // customers.push({
          //   certNo: this.model.certNo,
          //   certType: this.model.certType,
          //   customerId: this.model.customerId,
          //   customerName: this.model.customerName,
          //   gender: this.model.gender,
          //   phone: this.model.phone,
          //   roomId: this.model.roomId,
          // });
          httpAction(
            '/business/busRoomBookingOrders/update-orders?type=2',
            this.model,
            'post'
          )
            .then((res) => {
              if (res.success) {
                that.$message.success('修改成功')
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    }
  }
}
</script>
