<template>
  <div class="app-content">
    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
      <a-form-model ref="form" :model="formData" :rules="rules" class="from-table">
        <a-row>
          <a-col :span="24">
            <div class="tb-title">
              <span>项目组信息</span>
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div class="required">项目组名称</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item prop="groupName">
              <a-input v-model="formData.groupName" placeholder="项目组名称" style="width:400px" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div class="required">年度</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item prop="groupYear">
              <base-select v-model="formData.groupYear" :type="8" :width="160" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div class="required">项目组学科</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item prop="knowledgeId">
              <para-select v-model="formData.knowledgeId" :typeId="56" />
              <!-- <para-multi-select v-model="formData.knowledgeId" :typeId="57" /> -->
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div class="required">项目数量</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item prop="projCount">
              <a-input-number v-model="formData.projCount" placeholder="项目数量" style="width:400px" :min="0" :max="1000" :disabled="true" :default-value="0" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div class="required">专家数量</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item prop="expertCount">
              <a-input-number v-model="formData.expertCount" placeholder="专家数量" style="width:400px" :min="0" :max="1000" :disabled="true" :default-value="0" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div class="required">分配状态</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item prop="assignState">
              <a-tag v-if="formData.assignState===0" :color="'red'">未分配</a-tag>
              <a-tag v-else v-for="data in formData.expertList" :key="data.id" :color="'orange'">{{data.personName}}</a-tag>
              <!-- <a-tag v-else :color="'green'">已分配</a-tag> -->
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div class="required">备注</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item prop="remark">
              <a-textarea v-model="formData.remark" placeholder="备注" :auto-size="{ minRows: 3, maxRows: 5 }"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </div>
</template>

<script>
import moment from 'moment'
import baseSelect from '@/views/components/common/baseSelect'
import paraSelect from '@/views/components/common/paraSelect'
import { isEmptyParams } from "@/views/utils/common"

export default {
  name: "GroupEdit",
  components: {
    baseSelect, paraSelect
  },
  props: {
    value: {
      type: String,
      default: () => {
        return null
      }
    }
  },
  data() {
    return {
      loading: false,
      formData: { id: null, groupName: null, groupYear: null, knowledgeId: null, projCount: 0, expertCount: 0, assignState: 0, remark: '' },
      rules: {
        groupName: [{ required: true, message: '请输入项目组名称' }],
        groupYear: { required: true, message: '请输入年度' },
        knowledgeId: { required: true, message: '请选择申报学科', trigger: 'change' },
        projCount: [{ required: false }],
        assignState: [{ required: false }],
        remark: [{ required: false }],
      }
    }
  },
  created() {
    if (this.value) {
      this.loading = true
      this.getGroupById()
    } else {
      this.formData.groupYear = moment().format('YYYY').toString()
    }
  },
  methods: {
    moment,
    getGroupById () {
      this.$api.projectGroupAssign.getGroupById({ id: this.value }).then(({ data = {} }) => {
        if (data) {
          data.groupYear = data.groupYear + ''
          this.formData = data
        }
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          let pars = isEmptyParams(this.formData)
          let par = { ...pars }
          if (!this.value) {
            this.$api.projectGroupAssign.addGroup(par).then(({ data = {} }) => {
              if (data) {
                this.$message.success('添加成功！')
                this.$emit('close', 'edit')
              }
              this.loading = false
            }).catch(() => { this.loading = false })
          } else {
            this.$api.projectGroupAssign.updateGroup(par).then(({ data = {} }) => {
              if (data) {
                this.$message.success('修改成功！')
                this.$emit('close', 'edit')
              }
              this.loading = false
            }).catch(() => { this.loading = false })
          }
        }
      })
    }
  },
};
</script>