<template>
  <div class="jiZhiJianShe">
    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
    <div class="ListBoxBody">
      <div class="content">
        <div class="table_content">
          <el-table ref="table" :data="tableData" height="170">
            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
            <el-table-column label="操作" class-name="small-padding fixed-width" width="100">
              <template #default="scope">
                <div @click="handleFileDetail(scope.row)" style="cursor: pointer; color: #00d1ff">查看</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 查看对应内容 -->
    <el-dialog v-model="dialogShow" :title="titleModal + '佐证材料'" append-to-body width="1500px">
      <!-- 满意度统计 -->
      <div class="satisfied" v-if="titleModal == '群众满意度'">
        <div class="part" v-for="(item, index) in tableDataCount" :key="item.id">
          <p>
            <span>{{ index + 1 }},题目名称:{{ item.problemName }},</span>
            <span> 题目类型:{{ item.problemType == 'radio' ? '单选' : item.problemType == 'answers' ? '简答题' : '--' }} </span>
            <span>,本题有效填写人次:{{ item.fillTimes || 0 }}</span>
          </p>
          <el-table :data="item.problemOptionList">
            <el-table-column label="选项名称" prop="optionName" />
            <el-table-column label="问题选项填报次数" prop="optionTimes" />
            <el-table-column label="问题选项填报百分比" prop="percentage" />
          </el-table>
        </div>
      </div>
      <!-- 海绵文化宣传培训 -->
      <div v-else>
        <SpecialPX></SpecialPX>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { quesNaireCount } from '@/api/publicService/index';
import SpecialPX from '@/views/publicService/special.vue';

const { proxy } = getCurrentInstance();
const tableData = ref([
  { partitionName: '海绵文化宣传培训', reformProjectName: '培训4次,宣传6次', reformAchievement: '培训7次,宣传9次' },
  { partitionName: '群众满意度', reformProjectName: '96%', reformAchievement: '96.9%' },
]);
const dialogShow = ref(false);
const titleModal = ref('');
const tableDataCount = ref([]);

// 查看详情
function handleFileDetail(row) {
  titleModal.value = row.partitionName;
  if (titleModal.value == '群众满意度') {
    handleCount();
  }
  dialogShow.value = true;
}

// 满意度统计
function handleCount() {
  quesNaireCount('1808379104653017089').then(res => {
    tableDataCount.value = res.data.problemConfigList;
  });
}

onMounted(() => {});

onBeforeUnmount(() => {});
</script>

<style lang="scss">
.satisfied {
  margin-bottom: 20px;
  max-height: 800px;
  overflow: auto;
  .part {
    p {
      display: flex;
      color: #c6c6c6;
    }
    .el-table {
      margin: 10px 0px;
    }
  }
}
.jiZhiJianShe {
  width: 49%;
  margin-left: 10px;

  .ListBoxBody {
    background: rgba(8, 75, 125, 1);
    padding: 10px;
    margin-top: -3px;
    .content {
      width: 100%;
      height: 100%;

      .img_box {
        width: 100%;
        height: 100%;
      }

      .tabs {
        height: 36px;
        color: #fff;
        margin-bottom: 10px;
      }

      .table_content {
        height: 98%;
      }

      .monitor {
        width: 20px;
        height: 20px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

#tables {
  width: 100%;
  ::v-deep .el-table__header-wrapper .el-table__header thead {
    background: transparent !important;
    border-bottom: 1px solid #579ff6 !important;
  }
  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
    background: transparent !important;
    border-bottom: 2px solid #2eafbf !important;
  }
}

::v-deep .table_content .el-table__body-wrapper {
  padding-top: 5px;
}
</style>