<template>
  <div>
    <a-row>
      <a-col :span="24" style="border-top: 0px; text-align: center">
        <div class="main-title">
          <span>团队人员名单</span>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="1" class="bg-gray">
        <div class="special-middle">
          <div class="required">序号</div>
        </div>
      </a-col>
      <a-col :span="2" class="bg-gray">
        <div class="special-middle">
          <div class="required">姓名</div>
        </div>
      </a-col>
      <a-col :span="2" class="bg-gray">
        <div class="special-middle">
          <div class="required">性别</div>
        </div>
      </a-col>
      <a-col :span="2" class="bg-gray">
        <div class="special-middle">
          <div class="required">出生日期</div>
        </div>
      </a-col>
      <a-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div class="required">专业</div>
        </div>
      </a-col>
      <a-col :span="5" class="bg-gray">
        <div class="special-middle">
          <div class="required">技术职称</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div class="required">单位</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>工作分工(限10字)</div>
        </div>
      </a-col>
      <a-col :span="1" class="bg-gray">
        <div class="special-middle">
          <div>操作</div>
        </div>
      </a-col>
    </a-row>
    <a-row v-for="(item, index) in membersList" :key="'membersList'+index" type="flex" class="row_center">
      <a-col :span="1">
        <div style="margin-top:10px;">{{ item.showIndex }}</div>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'membersList.' + index + '.name'" :rules="{ required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.name" :maxLength="50" placeholder="姓名" style="width:85%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'membersList.' + index + '.sex'" :rules="{ required: true, message: '*', trigger: 'change',}">
          <base-select v-model="item.sex" :type="16" :isAll="true" :width="100" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'membersList.' + index + '.birthday'" :rules="{ required: true, message: '*', trigger: 'change',}">
          <a-date-picker placeholder="请选择日期" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="item.birthday" style="width: 120px" />
        </a-form-model-item>
      </a-col>
      <a-col :span="3">
        <a-form-model-item :prop="'membersList.' + index + '.spec'" :rules="{ required: true, message: '*', trigger: 'change',}">
          <cascader-select v-model="item.spec" />
        </a-form-model-item>
      </a-col>
      <a-col :span="5">
        <a-form-model-item :prop="'membersList.' + index + '.title'" :rules="{ required: true, message: '*', trigger: 'change',}">
          <para-multi-select v-model="item.title" :typeId="7" :width="120" />
        </a-form-model-item>
      </a-col>
      <a-col :span="4">
        <a-form-model-item :prop="'membersList.' + index + '.workUnit'" :rules="{ required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.workUnit" :maxLength="50" placeholder="单位" style="width:85%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="4">
        <a-form-model-item :prop="'membersList.' + index + '.projWork'" :rules="{ required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.projWork" :maxLength="100" placeholder="项目分工" style="width:85%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="1">
        <div class="special-middle">
          <a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteMemberArray(item)">
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </div>
      </a-col>
    </a-row>
    
    <a-row type="flex">
      <a-col :span="24" style="text-align: center">
        <div class="special-middle">
          <a-button type="dashed" style="width: 20%" @click="addMemberArray()">
            <a-icon type="plus" /> 添加 <span style="color:red;margin-left:10px"></span>
          </a-button>
        </div>
      </a-col>
    </a-row>

    <a-row type="flex" class="row_center">
      <a-col :span="24" class="bg-gray">
        <div class="special-middle" style="color:red;">注：“申报人所在团队主要人员”应为申报人所在的学科人员</div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import cascaderSelect from '@/views/components/common/cascaderSelect'

const Member = { id: null, talentId: null, name: null, sex: null, birthday: null, spec: null, title: null, workUnit: null, projWork: null, remark: null, showIndex: null, }

export default {
  name: "membersEdit",
  components: {
    cascaderSelect
  },
  props: {
    membersList: {
      type: Array,
      default: () => {
        return [{ ...Member }];
      },
    }
  },
  data() {
    return {};
  },
  created() {
    
  },
  methods: {
    addMemberArray() {
      const newItem = { 
        ...Member,
        showIndex: this.membersList.length + 1
      }
      this.membersList.push(newItem)
    },
    deleteMemberArray(item) {
      let index = this.membersList.indexOf(item)
      if (index !== -1) {
        this.membersList.splice(index, 1)
      }
    }
  },
};
</script>