<template>
  <div style="height:65vh;overflow: auto;" class="app-content">
    <a-spin :spinning="loading">
      <div class="from-table">
        <a-row>
          <a-col :span="24" style="border-top: 0px;">
            <div class="tb-title">
              <span>批次信息</span>
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="2" class="bg-gray">
            <div>年 度：</div>
          </a-col>
          <a-col :span="10">
            {{formData.year}}
          </a-col>
          <a-col :span="2" class="bg-gray">
            <div>批 次：</div>
          </a-col>
          <a-col :span="10">
            {{formData.batch}}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="2" class="bg-gray expertGroupMembers">
            <div>批次名称：</div>
          </a-col>
          <a-col :span="22">
            {{formData.name}}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="2" class="bg-gray expertGroupMembers">
            <div>备 注：</div>
          </a-col>
          <a-col :span="22">
            {{formData.remark}}
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="24">
            <div class="tb-title">
              <span>专家组</span>
            </div>
          </a-col>
        </a-row>

        <a-row style="text-align: center;">
          <a-col :span="2" class="bg-gray">
            序号
          </a-col>
          <a-col :span="8" class="bg-gray">
            专家组名称
          </a-col>
          <a-col :span="6" class="bg-gray">
            备注
          </a-col>
          <a-col :span="8" class="bg-gray">
            专家数
          </a-col>
        </a-row>

        <a-row v-for="(expert, index) in formData.expertGroup" :key="index">
          <a-col :span="2" style="text-align: center;">
            {{index+1}}
          </a-col>
          <a-col :span="8" style="text-align: left;">
            {{expert.name}}
          </a-col>
          <a-col :span="6" style="text-align: left;">
            {{expert.remark}}
          </a-col>
          <a-col :span="8" style="text-align: center;">
            {{expert.members.length}}
          </a-col>
        </a-row>
      </div>
    </a-spin>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'expertGroupView',
  components: {

  },
  data () {
    return {
      // 表单
      formData: { year: null, batch: null, name: null, remark: null, expertGroup: [{ id: null, name: null, remark: null, members: [{}] }] },
      loading: true,
    }
  },
  props: {
    value: {
      type: String,
      default: () => {
        return null
      }
    },
  },
  created () {
    this.load()
  },
  methods: {
    load () {
      if (this.value != null) {
        let pars = { id: this.value }
        this.$api.expertBatch.getBatchById(pars).then(({ data = {} }) => {
          if (data) {
            this.formData = data
            this.loading = false
          }
        }).catch(() => { })
      } else {
        this.loading = false
        this.$message.warning('加载错误，请重试！')
        this.$emit('close', 'view')
      }
    },
  }
}
</script>