<template>
  <el-dialog title="考题审核列表" v-model="dialogVisible" width="1300px" :before-close="CloseEvent"
    :close-on-click-modal="false">
    <div>
      <div class="flex just-end">
        <el-button type="primary" @click="doPass(true)" :loading="loading">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>全部通过</span>
        </el-button>
        <el-button type="primary" @click="doPass(false)" :loading="loading">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>全部不通过</span>
        </el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%;" height="calc(85vh - 150px - 100px)">
        <el-table-column v-if="isShowExpand" type="expand">
          <template #default="{ row }">
            <div class="pl30">
              <div>
                题目：<span style="color: #666666;">{{ row.questionname }}</span>
              </div>
              <div class="mt5">
                <span>内容：</span>
                <div style="color: #666666;" class="pl20">
                  <span v-if="row.qtype == '0'">A、正确 B、错误</span>
                  <div v-else-if="row.qtype == '1'">
                    A、{{ row.a }} <br>
                    B、{{ row.b }} <br>
                    C、{{ row.c }} <br>
                    D、{{ row.d }}
                  </div>
                  <div v-else-if="row.qtype == '2'">
                    A、{{ row.a }} <br>
                    B、{{ row.b }} <br>
                    C、{{ row.c }} <br>
                    D、{{ row.d }}
                  </div>
                </div>
              </div>
              <div class="mt5">
                <div>答案：<span style="color:green">{{ row.answer }}</span></div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="65" />
        <el-table-column prop="questionname" label="题目" width="300" />
        <el-table-column prop="qtype" label="内容">
          <template #default="{ row }">
            <span v-if="row.qtype == '0'">A、正确 B、错误</span>
            <div v-else-if="row.qtype == '1'">
              A、{{ row.a }} <br>
              B、{{ row.b }} <br>
              C、{{ row.c }} <br>
              D、{{ row.d }}
            </div>
            <div v-else-if="row.qtype == '2'">
              A、{{ row.a }} <br>
              B、{{ row.b }} <br>
              C、{{ row.c }} <br>
              D、{{ row.d }}
            </div>
          </template>
        </el-table-column>
        <!-- 答案 -->
        <el-table-column prop="answer" label="答案" width="70">
          <template #default="{ row }">
            <span>{{ row.answer }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="authorname" label="出题人" width="70">
          <template #default="{ row }">
            <span>{{ row.authorname }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="qtype" label="题型" width="80">
          <template #default="{ row }">
            <el-tag>{{ { 0: '判断题', 1: '多选题', 2: '多断题' }[row.qtype] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="qclass" label="业务类型" width="100">
          <template #default="{ row }">

            <dict-tag :options="D_BZ_KTKYWLX" :value="row.qclass" :tag="true" style='display:flex;flex-wrap:wrap;' />
          </template>
        </el-table-column>

        <el-table-column prop="checked" label="是否通过" width="180">
          <template #default="{ row }">
            <div>
              <el-radio-group v-model="row.isPass">
                <el-radio label="1">通过</el-radio>
                <el-radio label="0">不通过</el-radio>
              </el-radio-group>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="mt15 mb15">
        <span>审核意见：</span>
        <el-input v-model="reviewerInfo" style="width: calc(100% - 5.5em)"></el-input>
      </div> -->
      <el-form :model="form" :rules="rules" ref="formRef">
        <div class="mt15 mb15">
          <span>审核意见：</span>
          <el-form-item label="" prop="reviewerInfo" style="display: inline-block; width: 1190px;">
            <el-input v-model="form.reviewerInfo"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <template #footer>
      <div class="flex just-center mt10">

        <el-button type="primary" @click="doAudit('set')" :loading="loading">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>审核</span>
        </el-button>

        <el-button type="primary" @click="CloseEvent">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </div>

    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, onBeforeMount, defineEmits, computed, getCurrentInstance } from 'vue';
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus"
const { proxy } = getCurrentInstance();
const { D_BZ_KTKYWLX } = proxy.$dict("D_BZ_KTKYWLX");

const emits = defineEmits(['close']);
const props = defineProps({
  /** 回传的数据 */
  resData: {
    type: Array,
    default: []
  },
  dictObj: {
    type: Object,
    default: () => ({})
  }
});
/**表单 */
const form = ref({
  /**审核意见 */
  reviewerInfo: ''
});

const rules = {
  reviewerInfo: [
    { required: true, message: '审核意见不能为空', trigger: 'blur' }
  ]
};

const formRef = ref();
const dialogVisible = ref(true);
const isShowExpand = ref(false);// 先不展示，因为点击radio会自动关闭
const loading = ref(false)
/** 表格数据 */
const tableData = ref([]);
const reviewerInfo = ref('')
const CloseEvent = () => {
  emits('close')
};

/** 获取需要的判断题答案(AB 转TF)
 * @param {String} answer 答案
 */
function getNeedPdAnswer(answer) {
  if (answer === 'T') return "A"
  if (answer === 'F') return "B"
  return answer
}
/** 全通过，全拒绝 */
const doPass = (isPass) => {
  tableData.value = tableData.value.map(item => {
    return {
      ...item,
      isPass: isPass ? '1' : '0'
    }
  })
};
/**
 * 审核
 * @param type 'all' 全部通过  allnot:都不通过，set，根据设置
 */
const doAudit = (type) => {
  formRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      const items = tableData.value.map(row => {
        let status = row.isPass == '0' ? '05' : row.status
        // if (type === 'all') status = row.status
        // if (type === 'allnot') status = '05'
        return {
          id: row.id,
          status: status
        }
      })

      let params = {
        items: items,
        rwid: props.resData?.id,
        reviewerInfo: form.value.reviewerInfo,
      }
      postApi(params, `/mosty-jcgl/examlib/examineExaminationInfo`).then(() => {
        ElMessage.success("审核完成");
        // getTableData()
        CloseEvent()
      }).finally(() => {
        loading.value = false
      })
    } else {
      ElMessage.error('请填写审核意见');
      return false;
    }
  })
}
/** 获取列表 */
const getTableData = () => {
  getApi({ rwId: props.resData?.rwid }, '/mosty-jcgl/rw/getRwId').then(res => {
    tableData.value = Array.isArray(res) ? res : []
    tableData.value = tableData.value.map(item => {
      return {
        ...item,
        answer: getNeedPdAnswer(item.answer),
        qclass: item.qclass ? item.qclass.split(',') : [],
        isPass: '0' // 默认不通过
      }
    })
  })
}
onBeforeMount(() => {
  getTableData()
});
</script>

<style scoped lang="scss">
.el-dialog {
  .el-table {
    margin-top: 20px;
  }
}
</style>
