<template>
  <el-collapse v-model="activeCollapse" v-loading="loading" class="setting-config">
    <!-- 逻辑配置 -->
    <el-collapse-item :title="$t('trials:trialConfig:title:logincCfg')" name="1">
      <LogicalConfig ref="logicalConfig" @refresh="getConfigInfo" />
    </el-collapse-item>
    <!-- 流程配置 -->
    <el-collapse-item :title="$t('trials:trialCfg:title:processCfg')" name="2">
      <ProcessConfig ref="processConfig" @refresh="getConfigInfo" />
    </el-collapse-item>
    <!-- 加急配置 -->
    <el-collapse-item :title="$t('trials:trialCfg:title:urgentCfg')" name="3">
      <UrgentConfig ref="urgentConfig" @refresh="getConfigInfo" />
    </el-collapse-item>
  </el-collapse>
</template>
<script>
import { getTrialConfigInfo } from '@/api/trials'
import LogicalConfig from './components/logicalConfig'
import ProcessConfig from './components/processConfig'
import UrgentConfig from './components/urgentConfig'
export default {
  name: 'SubjectConfig',
  components: { LogicalConfig, ProcessConfig, UrgentConfig },
  data() {
    return {
      activeCollapse: ['1', '2', '3'],
      form: {},
      loading: false
    }
  },
  mounted() {
    this.getConfigInfo()
  },
  methods: {
    getConfigInfo() {
      this.loading = true
      const trialId = this.$route.query.trialId
      getTrialConfigInfo(trialId).then(res => {
        this.loading = false
        if (Object.keys(res.Result).length) {
          this.form = { ...res.Result }
        }
        this.$refs['logicalConfig'].initForm(res.Result)
        this.$refs['processConfig'].initForm(res.Result)
        this.$refs['urgentConfig'].initForm(res.Result)
      }).catch(_ => { this.loading = false })
    }

  }
}
</script>
<style lang="scss">
.setting-config{
  .el-collapse-item__header{
    background:#e5ecef;
    padding-left:10px;
  }
}

</style>
