<!--
 * @Author: wally
 * @email: 18603454788@163.com
 * @Date: 2021-04-19 10:23:19
 * @LastEditors: aBin
 * @LastEditTime: 2021-05-28 09:28:47
-->
<template>
  <!-- search -->
  <div>
    <div class="d-flex flex-row flex-nowrap">
      <a-form :form="form" @submit="handleSubmit" class="d-flex flex-wrap align-center" layout="inline">
        <a-form-item>
          <a-input placeholder="研究编号" style="width: 10em" v-decorator="['code']" />
        </a-form-item>
        <a-form-item>
          <a-input placeholder="住院号" style="width: 10em" v-decorator="['hospitalization']" />
        </a-form-item>
        <a-form-item>
          <a-select placeholder="请选择组别" style="min-width: 160px" v-decorator="['groupValue']" allow-clear>
            <a-select-option :key="item.id" :value="item.id" v-for="item in controlGroups">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <div class="flex-1"></div>
      <div style="text-align: right">
        <a-button class="mt-1 mb-1" html-type="submit" icon="search" type="primary">搜索</a-button>
        <a-button @click="showModal" class="ml-2 mt-1" html-type="submit" icon="plus" type="primary">新增</a-button>
      </div>
    </div>
    <patient-add :visible="visible" @closeModal="closeModal" @searchMes="searchMes" />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import PatientAdd from 'components/PatientInfo/PatientAdd.vue';

export default {
  name: 'Search',
  components: { PatientAdd },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'search' }),
      visible: false,
    };
  },

  computed: mapState('home', ['controlGroups']),

  methods: {
    showModal() {
      this.visible = true;
    },

    closeModal() {
      this.visible = false;
    },

    // 提交
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields(async (err, values) => {
        if (!err) {
          console.log('values: ', values);
          this.$emit('searchPatientMes', values);
        }
      });
    },

    // 加入成功后再次查询
    searchMes() {
      this.$emit('searchPatientMes');
    },
  },
};
</script>
