<template>
  <div>
    <a-row type="flex" class="row_center">
      <a-col :span="3" 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="3" 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="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 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>操作</div>
        </div>
      </a-col>
    </a-row>
    <a-row v-for="(item, index) in projectResearchList" :key="'projectResearchList'+index" type="flex" class="row_center">
      <a-col :span="3">
        <a-form-model-item :prop="'projectResearchList.' + index + '.projNo'" :rules="{ required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.projNo" :maxLength="50" placeholder="项目编号" style="width:85%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="3">
        <a-form-model-item :prop="'projectResearchList.' + index + '.projName'" :rules="{ required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.projName" :projName="50" placeholder="项目名称" style="width:85%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="3">
        <a-form-model-item :prop="'projectResearchList.' + index + '.approveUnit'" :rules="{ required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.approveUnit" :maxLength="50" placeholder="批准单位" style="width:85%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="3">
        <a-form-model-item :prop="'projectResearchList.' + index + '.leader'" :rules="{ required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.leader" :maxLength="100" placeholder="负责人" style="width:85%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="4">
        <a-form-model-item :prop="'projectResearchList.' + index + '.startDate'" :rules="{ required: true, message: '*', trigger: 'change',}">
          <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="开始日期" v-model="item.startDate" style="width:85%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="4">
        <a-form-model-item :prop="'projectResearchList.' + index + '.endDate'" :rules="{ required: true, message: '*', trigger: 'change',}">
          <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="结束日期" v-model="item.endDate" style="width:85%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'projectResearchList.' + index + '.funds'" :rules="{ required: true, message: '*', trigger: 'blur',}">
          <a-input-number v-model="item.funds" placeholder="项目经费" :min="0" :step="0.01" style="width:85%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">
          <a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteArray(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="addArray()">
            <a-icon type="plus" /> 添加 <span style="color:red;margin-left:10px"></span>
          </a-button>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
const ProjResearch = { projNo: null, projName: null, approveUnit: null, leader: null, startDate: null, endDate: null, funds: null }



export default {
  name: "projectResearchEdit",
  components: {

  },
  props: {
    projectResearchList: {
      type: Array,
      default: () => {
        return [{ ...ProjResearch }]
      }
    },
  },
  data () {
    return {

    };
  },
  created () {

  },
  computed: {

  },
  methods: {
    addArray () {//添加成员
      this.projectResearchList.push({ ...ProjResearch })
    },
    deleteArray (item) {//移除成员
      let index = this.projectResearchList.indexOf(item)
      if (index !== -1) {
        this.projectResearchList.splice(index, 1)
      }
    },
  },
};
</script>
<style scoped lang="less">
.file-description {
  display: block;
  width: 100%;
  line-height: 22px;
  padding: 3px 3px 3px 3px;
  color: red;
  white-space: normal;
  word-wrap: break-word;
  //   text-indent: 1em;
}
.inner_from {
  .ant-row-flex:last-child .ant-col {
    border-bottom: 0;
  }
  .ant-row-flex .ant-col:first-child {
    border-left: 0;
  }
  .ant-row-flex {
    border-right: 0;
  }
}
.special-middle {
  .font_s {
    margin: 0 6px;
  }
}
</style>