<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="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" :disabled="disabled" />
            </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="displayOrder">
              <a-input-number v-model="formData.displayOrder" placeholder="项目组序号" style="width:160px" :min="1" :max="100" :default-value="0" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row v-if="false">
          <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 v-if="false">
          <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"
import { getType } from '@/views/utils/auth'

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, displayOrder: 1, 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 }],
      },
      disabled: true,
    }
  },
  created() {
    this.getYear()
    if (this.value) {
      this.loading = true
      this.getGroupById()
    }
  },
  methods: {
    moment,
    getYear () {
      this.$api.batch.getCurrentYearBatch({ type: 1, projType: getType() }).then(({ data = {} }) => {
        if (data) {
          this.formData.groupYear = data.year + ''
        }
      }).catch(() => { })
    },
    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>