<template>
  <div class="app-container">
    <el-dialog title="投保" :visible.sync="show">
      <div style="height: 500px;overflow: auto;">
        <el-form :model="addForm" ref="addRef" :rules="rules">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item prop="start_date" label="投保开始日期:">
                <el-date-picker v-model="addForm.start_date" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                  placeholder="选择日期时间" :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="end_date" label="投保结束日期:">
                <el-date-picker v-model="addForm.end_date" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间" :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row :gutter="10">
          <el-col :span="8">
            <div style="display: flex;flex-wrap: wrap;justify-content: flex-start;">
              <div style="line-height: 35px;margin-right: 10px;">姓名：</div>
              <el-input v-model="SearchName" placeholder="请输入姓名" style="width: 77%;"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <el-button type="primary" @click="gain()">查询</el-button>
          </el-col>
        </el-row>
        <el-table :data="list" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="workerName" label="姓名" align="center" />
          <el-table-column prop="idCard" label="身份证" />
        </el-table> 
      </div>
      <br/>
        <el-row>已选人员</el-row>
        <el-table :data="addForm.persons" style="width: 100%"  > 
          <el-table-column prop="workerName" label="姓名" align="center" />
          <el-table-column prop="idCard" label="身份证" />
        </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="confirm" :loading="loading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPersonList, fraPolicyAdd } from '@/api/insurance/list'
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < new Date(this.startTime).getTime() - 1000 * 60 * 60 * 24
        }
      },
      startTime: new Date(),
      addForm: {
        persons:[]
      }, 
      rules: {
        start_date: [
          { required: true, message: '请选择投保开始日期', trigger: 'change' }
        ],
        end_date: [
          { required: true, message: '请选择投保结束日期', trigger: 'change' }
        ],
      },
      SearchName: '',
      addData: [],
    };
  },
  props: {
    show: false,
    list: Array,
    loading: false
  },
  methods: {
    handleSelectionChange(e) {
      console.log(e);
      this.addForm.persons = e
    },
    confirm() {
      let _this = this
      this.$refs['addRef'].validate((valid) => {
        if (valid) {
          _this.$emit('add', this.addForm)
        } else {
          return false;
        }
      })
    },
    async gain() {
      let { data } = await getPersonList({ name: this.SearchName })
      data.data.forEach(a => {
        a.idcard = a.idCard
      })
      this.addData = data.data
    },
    async add() {
      this.gain()
      this.show = true
      this.addForm.persons=[];
    }
  },
};
</script>

<style></style>
