<template>
  <div>
    <a-form-model ref="form" :model="formModel">
      <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="24" class="bg-gray">
          <div>
            <span>1、主要科研成果获奖情况(按获奖时间顺序填写,含专利、新药证书等不超过15项。)</span>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex" class="row_center">
        <a-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>序号</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>时间</div>
          </div>
        </a-col>
        <a-col :span="8" class="bg-gray">
          <div class="special-middle">
            <div>成果名称</div>
          </div>
        </a-col>
        <a-col :span="6" 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-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>操作</div>
          </div>
        </a-col>
      </a-row>
      <a-row v-for="(item, index) in gainList" :key="'gainList'+index" type="flex" class="row_center">
        <a-col :span="2">{{ item.showIndex }}</a-col>
        <a-col :span="4">
          <a-form-model-item :prop="`gainList.${index}.gainDate`" :rules="{ required: true, message: '*', trigger: 'change',}">
            <a-date-picker placeholder="请选择日期" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="item.gainDate" style="width: 140px" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item :prop="`gainList.${index}.gainName`" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-input v-model="item.gainName" :maxLength="50" placeholder="成果名称" style="width:85%" />
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item :prop="`gainList.${index}.gainDescription`" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-input v-model="item.gainDescription" :maxLength="100" placeholder="授奖部门及等级" style="width:85%" />
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-form-model-item :prop="`gainList.${index}.gainRemark`" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-input v-model="item.gainRemark" :maxLength="50" placeholder="本人排名" 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="deleteGainArray(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="addGainArray()">
              <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>
            <span>2、发表的主要科研论文(按时间顺序填写,不超过15篇,SCI论文等外文论文需提供影响因子证明(科技部门批准机构开具的证明))</span>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex" class="row_center">
        <a-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>序号</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>时间</div>
          </div>
        </a-col>
        <a-col :span="8" class="bg-gray">
          <div class="special-middle">
            <div>论文名称</div>
          </div>
        </a-col>
        <a-col :span="6" 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-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>操作</div>
          </div>
        </a-col>
      </a-row>
      <a-row v-for="(item, index) in thesisList" :key="'thesisList'+index" type="flex" class="row_center">
        <a-col :span="2">{{ item.showIndex }}</a-col>
        <a-col :span="4">
          <a-form-model-item :prop="`thesisList.${index}.gainDate`" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-date-picker placeholder="请选择日期" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="item.gainDate" style="width: 140px" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item :prop="`thesisList.${index}.gainName`" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-input v-model="item.gainName" :maxLength="50" placeholder="成果名称" style="width:85%" />
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item :prop="`thesisList.${index}.gainDescription`" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-input v-model="item.gainDescription" :maxLength="100" placeholder="授奖部门及等级" style="width:85%" />
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-form-model-item :prop="`thesisList.${index}.gainRemark`" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-input v-model="item.gainRemark" :maxLength="50" placeholder="本人排名" 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="deleteThesisArray(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="addThesisArray()">
              <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>
            <span>3、出版的专著和教材(按出版时间顺序填写,不超过15本。)</span>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex" class="row_center">
        <a-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>序号</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>时间</div>
          </div>
        </a-col>
        <a-col :span="8" class="bg-gray">
          <div class="special-middle">
            <div>专著及教材</div>
          </div>
        </a-col>
        <a-col :span="6" 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-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>操作</div>
          </div>
        </a-col>
      </a-row>
      <a-row v-for="(item, index) in appearList" :key="'appearList'+index" type="flex" class="row_center">
        <a-col :span="2">{{ item.showIndex }}</a-col>
        <a-col :span="4">
          <a-form-model-item :prop="`appearList.${index}.gainDate`" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-date-picker placeholder="请选择日期" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="item.gainDate" style="width: 140px" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item :prop="`appearList.${index}.gainName`" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-input v-model="item.gainName" :maxLength="50" placeholder="成果名称" style="width:85%" />
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item :prop="`appearList.${index}.gainDescription`" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-input v-model="item.gainDescription" :maxLength="100" placeholder="授奖部门及等级" style="width:85%" />
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-form-model-item :prop="`appearList.${index}.gainRemark`" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-input v-model="item.gainRemark" :maxLength="50" placeholder="本人排名" 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="deleteAppearArray(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="addAppearArray()">
              <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>
            <span>4、承担的课题(按立项时间顺序填写,不超过15项。)</span>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex" class="row_center">
        <a-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>序号</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>时间</div>
          </div>
        </a-col>
        <a-col :span="8" class="bg-gray">
          <div class="special-middle">
            <div>课题名称</div>
          </div>
        </a-col>
        <a-col :span="6" 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-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>操作</div>
          </div>
        </a-col>
      </a-row>
      <a-row v-for="(item, index) in courseList" :key="'courseList'+index" type="flex" class="row_center">
        <a-col :span="2">{{ item.showIndex }}</a-col>
        <a-col :span="4">
          <a-form-model-item :prop="`courseList.${index}.gainDate`" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-date-picker placeholder="请选择日期" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="item.gainDate" style="width: 140px" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item :prop="`courseList.${index}.gainName`" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-input v-model="item.gainName" :maxLength="50" placeholder="成果名称" style="width:85%" />
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item :prop="`courseList.${index}.gainDescription`" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-input v-model="item.gainDescription" :maxLength="100" placeholder="授奖部门及等级" style="width:85%" />
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-form-model-item :prop="`courseList.${index}.gainRemark`" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-input v-model="item.gainRemark" :maxLength="50" placeholder="本人排名" 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="deleteCourseArray(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="addCourseArray()">
              <a-icon type="plus" /> 添加 <span style="color:red;margin-left:10px"></span>
            </a-button>
          </div>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
import moment from "moment";

const Gain = { id: null, talentId: null, gainType: 'dff44c90-ff10-11ef-b6cb-0c42a1380f01', gainDate: null, gainName: null, gainDescription: null, gainRemark: null, showIndex: null, }
const Thesis = { id: null, talentId: null, gainType: 'dff44c90-ff10-11ef-b6cb-0c42a1380f02', gainDate: null, gainName: null, gainDescription: null, gainRemark: null, showIndex: null, }
const Appear = { id: null, talentId: null, gainType: 'dff44c90-ff10-11ef-b6cb-0c42a1380f03', gainDate: null, gainName: null, gainDescription: null, gainRemark: null, showIndex: null, }
const Course = { id: null, talentId: null, gainType: 'dff44c90-ff10-11ef-b6cb-0c42a1380f04', gainDate: null, gainName: null, gainDescription: null, gainRemark: null, showIndex: null, }

export default {
  name: "scientificGainEdit",
  props: {
    scientificList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      gainList: [],
      thesisList: [],
      appearList: [],
      courseList: [],
      formModel: {
        gainList: [],
        thesisList: [],
        appearList: [],
        courseList: [],
      }
    };
  },
  created() {
    if (this.scientificList && this.scientificList.length > 0) {
        this.gainList = this.scientificList
          .filter(item => item.gainType === 'dff44c90-ff10-11ef-b6cb-0c42a1380f01')
          .sort((a, b) => a.showIndex - b.showIndex)

        this.thesisList = this.scientificList
          .filter(item => item.gainType === 'dff44c90-ff10-11ef-b6cb-0c42a1380f02')
          .sort((a, b) => a.showIndex - b.showIndex)

        this.appearList = this.scientificList
          .filter(item => item.gainType === 'dff44c90-ff10-11ef-b6cb-0c42a1380f03')
          .sort((a, b) => a.showIndex - b.showIndex)

        this.courseList = this.scientificList
          .filter(item => item.gainType === 'dff44c90-ff10-11ef-b6cb-0c42a1380f04')
          .sort((a, b) => a.showIndex - b.showIndex)
        
        this.formModel.gainList = this.gainList
        this.formModel.thesisList = this.thesisList
        this.formModel.appearList = this.appearList
        this.formModel.courseList = this.courseList
      } else {
        this.gainList = []
        this.thesisList = []
        this.appearList = []
        this.courseList = []
        this.formModel.gainList = []
        this.formModel.thesisList = []
        this.formModel.appearList = []
        this.formModel.courseList = []
      }
  },
  methods: {
    addGainArray() {
      const newItem = { 
        ...Gain,
        showIndex: this.gainList.length + 1
      }
      this.gainList.push(newItem);
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },
    deleteGainArray(item) {
      let index = this.gainList.indexOf(item)
      if (index !== -1) {
        this.gainList.splice(index, 1)
      }
    },
    addThesisArray() {
      const newItem = { 
        ...Thesis,
        showIndex: this.thesisList.length + 1
      }
      this.thesisList.push(newItem)
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },
    deleteThesisArray(item) {
      let index = this.thesisList.indexOf(item)
      if (index !== -1) {
        this.thesisList.splice(index, 1)
      }
    },
    addAppearArray() {
      const newItem = { 
        ...Appear,
        showIndex: this.appearList.length + 1
      }
      this.appearList.push(newItem)
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },
    deleteAppearArray(item) {
      let index = this.appearList.indexOf(item)
      if (index !== -1) {
        this.appearList.splice(index, 1)
      }
    },
    addCourseArray() {
      const newItem = { 
        ...Course,
        showIndex: this.courseList.length + 1
      }
      this.courseList.push(newItem)
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },
    deleteCourseArray(item) {
      let index = this.courseList.indexOf(item)
      if (index !== -1) {
        this.courseList.splice(index, 1)
      }
    },
    mergeScientificList() {
      this.scientificList.length = 0

      const allLists = [
        ...this.gainList.map((item, index) => {
          const newItem = { ...item }
          newItem.showIndex = index + 1
          return newItem
        }),
        ...this.thesisList.map((item, index) => {
          const newItem = { ...item }
          newItem.showIndex = index + 1
          return newItem
        }),
        ...this.appearList.map((item, index) => {
          const newItem = { ...item }
          newItem.showIndex = index + 1
          return newItem
        }),
        ...this.courseList.map((item, index) => {
          const newItem = { ...item }
          newItem.showIndex = index + 1
          return newItem
        })
      ]

      this.scientificList.push(...allLists)
      return this.scientificList
    }
  },
  watch: {
    gainList: {
      handler(val) {
        this.formModel.gainList = val
      },
      deep: true,
      immediate: true
    },
    thesisList: {
      handler(val) {
        this.formModel.thesisList = val
      },
      deep: true,
      immediate: true
    },
    appearList: {
      handler(val) {
        this.formModel.appearList = val
      },
      deep: true,
      immediate: true
    },
    courseList: {
      handler(val) {
        this.formModel.courseList = val
      },
      deep: true,
      immediate: true
    },
  }
};
</script>