/* eslint-disable */
<template>
  <el-form v-loading="loading">
    <el-tabs type="border-card" v-model="index" @tab-click="tabClick()">
      <el-tab-pane v-for="itemC of CriterionList" :key="itemC.ReadingQuestionCriterionTrialId">
        <span slot="label">
          {{itemC.ReadingQuestionCriterionTrialName}}
        </span>
          <el-collapse v-model="activeNames">
            <el-collapse-item style="position: relative" v-for="(item, index) of QuestionList" :key="item.ReadingQuestionTrialId" :name="item.ReadingQuestionTrialId">
              <div slot="title">
                Q{{index + 1}}：{{item.QuestionName}}
              </div>
              <div style="position: relative">
                <el-button style="position: absolute;right:0;top: 0;z-index: 10" size="mini" type="primary" @click="apply(item.ReadingQuestionTrialId, index)">应用</el-button>
                <el-button style="position: absolute;right:60px;top: 0;z-index: 10" size="mini" type="primary" @click="reset(item.ReadingQuestionTrialId, index)">重置</el-button>
                <el-form-item :label-width="'150px'" :label="'产生裁判阅片的条件'">
                  <el-radio-group v-model="QuestionList[index].JudgeType">
                    <el-radio v-for="item of $d.JudgeTypeEnum" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <div style="text-align: right;margin: 10px 0;" v-if="QuestionList[index].JudgeType === 3">
                <el-button size="mini" type="primary" @click="addGroup(index, null)">添加规则</el-button>
              </div>
              <el-table
                v-loading="loading"
                v-if="QuestionList[index].JudgeType === 3"
                :data="QuestionList[index].AnswerGroupList"
                border
                stripe
              >
                <el-table-column
                  prop="AnswerGroupA"
                  label="序号"
                  width="50"
                >
                  <template slot-scope="scope">
                    {{scope.$index + 1}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="AnswerGroupA"
                  label="阅片人A"
                  min-width="100"
                >
                  <template slot-scope="scope">
                    {{scope.row.AnswerGroupA.toString()}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="AnswerGroupB"
                  label="阅片人B"
                  min-width="100"
                >
                  <template slot-scope="scope">
                    {{scope.row.AnswerGroupB.toString()}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="AnswerGroupB"
                  label="操作"
                  min-width="80"
                >
                  <template slot-scope="scope">
                    <el-button
                      icon="el-icon-edit"
                      circle
                      title="编辑"
                      size="mini"
                      @click="addGroup(index, scope.$index)"
                    />
                    <el-button
                      icon="el-icon-delete"
                      circle
                      title="删除"
                      size="mini"
                      @click="tagClose(index, scope.$index)"
                    />
                  </template>
                </el-table-column>
              </el-table>
              <div v-if="QuestionList[index].JudgeType === 2">
                <div style="background: #f6f6f6;border-radius: 20px;padding: 15px 20px;margin-top: 10px;">
                <el-checkbox-group v-model="QuestionList[index].grouping">
                  <el-checkbox v-for="(item, index) of item.TypeValue.split('|')" :label="item" :key="item">{{item}}</el-checkbox>
                </el-checkbox-group>
                <div style="margin-top: 20px;">当前选择答案分组: <el-tag v-if="QuestionList[index].grouping.length > 0">{{QuestionList[index].grouping.toString().replaceAll(',', '|')}}</el-tag> <el-button size="mini" type="primary" @click="addGroup2(index)">添加分组</el-button></div>
                </div>
                <div style="margin-top: 20px;">分组: <el-tag closable @close="() => {return tagClose2(index, indexA)}" v-for="itemA of QuestionList[index].AnswerGroup2List" style="margin-right:10px;">{{itemA}}</el-tag></div>
              </div>
            </el-collapse-item>
          </el-collapse>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="选择答案"
      v-if="QuestionVisible"
      :visible.sync="QuestionVisible"
      width="800px"
      :close-on-click-modal="false"
      custom-class="base-dialog-wrapper"
      append-to-body
    >
      <div class="base-dialog-body">
        <el-form-item label-width="110px" label="阅片人A">
          <el-checkbox-group v-model="QuestionList[selectIndex].groupingA">
            <el-checkbox v-for="(item, index) of QuestionList[selectIndex].TypeValue.split('|')" :label="item" :disabled="QuestionList[selectIndex].groupingB.length ? ~QuestionList[selectIndex].groupingB.indexOf(item) : false" :key="item">A{{index+1}}：{{item}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label-width="110px" label="阅片人B">
          <el-checkbox-group v-model="QuestionList[selectIndex].groupingB">
            <el-checkbox v-for="(item, index) of QuestionList[selectIndex].TypeValue.split('|')" :label="item" :disabled="QuestionList[selectIndex].groupingA.length ? ~QuestionList[selectIndex].groupingA.indexOf(item) : false" :key="item">A{{index+1}}：{{item}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
        <!-- 取消 -->
        <el-button
          :disabled="btnLoading"
          size="small"
          type="primary"
          @click="QuestionVisible = false;$set(QuestionList[selectIndex], 'groupingA', []);$set(QuestionList[selectIndex], 'groupingB', [])"
        >
          {{ $t('common:button:cancel') }}
        </el-button>
        <el-button
          :disabled="btnLoading"
          size="small"
          type="primary"
          @click="save"
        >
          保存
        </el-button>
      </div>
    </el-dialog>
  </el-form>
</template>

<script>
import { getTrialConfirmCriterionList, getTrialCriterionJudgeQuestionList, setTrialCriterionJudgeQuestionAnswerGroup } from '@/api/trials/reading'
export default {
  data() {
    return {
      CriterionList: [],
      QuestionList: [],
      ReadingQuestionCriterionTrialId: null,
      btnLoading: false,
      loading: false,
      index: 0,
      QuestionVisible: false,
      activeNames: null,
      indexA: null,
      type: null
    }
  },
  watch: {
    ReadingQuestionCriterionTrialId(v) {
      this.loading = true
      getTrialCriterionJudgeQuestionList({
        ReadingQuestionCriterionTrialId: v
      }).then(res => {
        this.loading = false
        this.QuestionList = res.Result
        this.activeNames = this.QuestionList[0].ReadingQuestionTrialId
        this.QuestionList.forEach(v => {
          this.$set(v, 'grouping', [])
          this.$set(v, 'groupingA', [])
          this.$set(v, 'groupingB', [])
          this.$set(v, 'AnswerGroupList', Object.assign([], v.AnswerCombination))
          this.$set(v, 'AnswerGroup2List', Object.assign([], v.AnswerGroup))
          console.log(v)
        })
      }).catch(() => {
        this.btnLoading = false
        this.loading = false
      })
    }
  },
  methods: {
    tagClose2(index, indexA) {
      this.$confirm('删除该规则组？').then(() => {
        this.QuestionList[index].AnswerGroup2List.splice(indexA, 1)
      })
    },
    tagClose(index, indexA) {
      this.$confirm('删除该规则组？').then(() => {
        this.QuestionList[index].AnswerGroupList.splice(indexA, 1)
      })
    },
    save() {
      var index = this.selectIndex
      var indexA = this.indexA
      if (this.QuestionList[index].groupingA.length === 0) {
        this.$alert('请先选择答案A')
        return
      }
      if (this.QuestionList[index].groupingB.length === 0) {
        this.$alert('请先选择答案B')
        return
      }
      if (this.type === 'add') {
        this.QuestionList[index].AnswerGroupList.push({
          AnswerGroupA: this.QuestionList[index].groupingA,
          AnswerGroupB: this.QuestionList[index].groupingB
        })
      } else {
        this.$set(this.QuestionList[index].AnswerGroupList[indexA], 'AnswerGroupA', this.QuestionList[index].groupingA)
        this.$set(this.QuestionList[index].AnswerGroupList[indexA], 'AnswerGroupB', this.QuestionList[index].groupingB)
      }
      this.$set(this.QuestionList[index], 'groupingA', [])
      this.$set(this.QuestionList[index], 'groupingB', [])
      this.$message.success('成功新增答案规则')
      this.QuestionVisible = false
    },
    addGroup2(index) {
      if (this.QuestionList[index].grouping.length === 0) {
        this.$alert('请先选择答案,再添加分组')
        return
      }
      var grouping = this.QuestionList[index].grouping.toString().replaceAll(',', '|')
      this.QuestionList[index].AnswerGroup2List.push(`|${grouping}|`)
      this.$set(this.QuestionList[index], 'grouping', [])
    },
    addGroup(index, indexA) {
      this.selectIndex = index
      this.type = 'add'
      if (indexA !== null) {
        this.indexA = indexA
        this.type = 'edit'
        console.log(this.QuestionList[index].AnswerGroupList[indexA].AnswerGroupA)
        console.log(this.QuestionList[index].AnswerGroupList[indexA].AnswerGroupB)
        this.$set(this.QuestionList[index], 'groupingA', this.QuestionList[index].AnswerGroupList[indexA].AnswerGroupA)
        this.$set(this.QuestionList[index], 'groupingB', this.QuestionList[index].AnswerGroupList[indexA].AnswerGroupB)
      }
      this.QuestionVisible = true
    },
    reset(ReadingQuestionTrialId, index) {
      this.$confirm('确定重置当前设置的裁判任务生成规则吗？').then(() => {
        this.btnLoading = true
        this.loading = true
        setTrialCriterionJudgeQuestionAnswerGroup({
          ReadingQuestionTrialId: ReadingQuestionTrialId,
          AnswerGroup: [],
          AnswerCombination: [],
          JudgeType: 1
        }).then(res => {
          this.$set(this.QuestionList[index], 'AnswerGroup2List', [])
          this.$set(this.QuestionList[index], 'AnswerGroupList', [])
          this.$set(this.QuestionList[index], 'JudgeType', 1)
          this.$message.success('重置成功')
          this.btnLoading = false
          this.loading = false
        }).catch(() => {
          this.btnLoading = false
          this.loading = false
        })
      })
    },
    apply(ReadingQuestionTrialId, index) {
      if (this.QuestionList[index].JudgeType === 2 && this.QuestionList[index].AnswerGroup2List.length === 0) {
        this.$alert('请先配置规则才能应用')
        return
      }
      if (this.QuestionList[index].JudgeType === 3 && this.QuestionList[index].AnswerGroupList.length === 0) {
        this.$alert('请先配置规则才能应用')
        return
      }
      this.btnLoading = true
      this.loading = true
      setTrialCriterionJudgeQuestionAnswerGroup({
        ReadingQuestionTrialId: ReadingQuestionTrialId,
        AnswerGroup: this.QuestionList[index].AnswerGroup2List,
        AnswerCombination: this.QuestionList[index].AnswerGroupList,
        JudgeType: this.QuestionList[index].JudgeType
      }).then(res => {
        this.$message.success('应用成功')
        this.btnLoading = false
        this.loading = false
      }).catch(() => {
        this.btnLoading = false
        this.loading = false
      })
    },
    tabClick(v) {
      this.ReadingQuestionCriterionTrialId = this.CriterionList[this.index].ReadingQuestionCriterionTrialId
    },
    getList() {
      this.btnLoading = true
      this.loading = true
      getTrialConfirmCriterionList({
        TrialId: this.$route.query.trialId
      }).then(res => {
        this.CriterionList = res.Result
        if (this.CriterionList.length) {
          this.ReadingQuestionCriterionTrialId = this.CriterionList[0].ReadingQuestionCriterionTrialId
        }
        this.btnLoading = false
        this.loading = false
      }).catch(() => {
        this.btnLoading = false
        this.loading = false
      })
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style scoped>

</style>