<template>
  <div>
    <a-row>
      <a-col :span="24">
        <div class="tb-title">
          <span>单位科研项目及资金管理制度</span>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <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 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="4" class="bg-gray">
        <div class="special-middle">
          <div class="required">主要内容</div>
        </div>
      </a-col>
      <a-col :span="8" class="bg-gray">
        <div class="special-middle">
          <div>附件</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 managementRuleList" :key="'managementRuleList'+index" type="flex" class="row_center">
      <a-col :span="4">
        <a-form-model-item :prop="'managementRuleList.' + index + '.policyName'" :rules="{ required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.policyName" :maxLength="100" placeholder="单位政策名称" style="width:85%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'managementRuleList.' + index + '.releaseDate'" :rules="{ required: true, message: '*', trigger: 'change',}">
          <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="出台日期" v-model="item.releaseDate" style="width:85%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'managementRuleList.' + index + '.documentNumber'" :rules="{ required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.documentNumber" :maxLength="100" placeholder="文号" style="width:85%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'managementRuleList.' + index + '.validityPeriod'" :rules="{ required: true, message: '*', trigger: 'change',}">
          <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="有效期" v-model="item.validityPeriod" style="width:85%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="4">
        <a-form-model-item :prop="'managementRuleList.' + index + '.mainContent'" :rules="{ required: true, message: '*', trigger: 'blur',}">
          <a-input-number v-model="item.mainContent" placeholder="主要内容" :min="0" :step="0.01" style="width:85%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <div class="special-middle">
          <file-load :file.sync="managementRuleList[index]" :index="index" :name="'managementRuleList'" />
        </div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">
          <a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteArrey(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="addArrey()">
            <a-icon type="plus" /> 添加 <span style="color:red;margin-left:10px"></span>
          </a-button>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
const ManagementRule = { policyName: null, releaseDate: null, documentNumber: null, validityPeriod: null, mainContent: null, fileId: null, downloadId: null, fileName: null, downloadUrl: null }

import { isEmptyParams } from "@/views/utils/common"
import fileLoad from '@/views/components/common/fileLoad'


export default {
  name: "managementRuleEdit",
  components: {
    fileLoad
  },
  props: {
    managementRuleList: {
      type: Array,
      default: () => {
        return [{ ...ManagementRule }]
      }
    },
  },
  data () {
    return {

    };
  },
  created () {

  },
  computed: {

  },
  methods: {
    addArrey () {//添加成员
      this.managementRuleList.push({ ...ManagementRule })
    },
    deleteArrey (item) {//移除成员
      let index = this.managementRuleList.indexOf(item)
      if (index !== -1) {
        this.managementRuleList.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>