<template>
  <div style="height: 100%;padding: 10px 0;">
    <card01 :description="renderData(object, objectConfig.description2)" :title="object.ojbNm + ''" icon="label"
            style="margin-top: 0;"/>
    <van-collapse v-model="activeNames" class="pblm-list-wrapper">
      <van-collapse-item v-for="item in list" :key="item.id" :name="item.id">
        <template #title>
          <div>
            {{ item.name }}&nbsp;&nbsp;
            <van-tag v-if="item.pblmList && item.pblmList.length > 0" round type="primary">
              {{ item.pblmList.length }}
            </van-tag>
          </div>
        </template>
        <card01 v-for="pblm in item.pblmList" :key="pblm.pblmId" :title="pblm.pblmNm" icon="question"
                @click="jumpPage(`/problem/${pblm.id}`)">
          <template #right>
            <van-icon color="#000" name="delete-o" size="1rem" @click="deletePblm(item.id)"/>
          </template>
        </card01>
      </van-collapse-item>
    </van-collapse>

    <div style="position: absolute;right: 5px;bottom: 5px;">
      <van-popover v-model:show="showAddPopover"
                   :actions="list.map(a =>  { return {text: a.name.replace('专业', '')} })"
                   class="new-problem"
                   placement="top-end"
                   @select="onSelect">
        <template #reference>
          <van-button type="primary">新增问题</van-button>
        </template>
      </van-popover>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import card01 from '@/components/card01.vue';
import {getTacQuestionList} from "@/api/inspect";
import {getBaseByInspectType} from "@/assets/js/base";
import {renderData} from "@/utils/template";
import {jumpPage} from "@/utils/page";
import {deleteTacQuestion} from "@/api/questions";
const vConsole = new VConsole();
console.log("Hello VConsole!");
const route = useRoute();
const activeNames = ref(['1']);
const list = ref([
  {id: '1', name: '前期与设计专业', pblmList: []},
  {id: '2', name: '建设管理专业', pblmList: []},
  {id: '3', name: '计划下达与执行专业', pblmList: []},
  {id: '4', name: '资金使用与管理专业', pblmList: []},
  {id: '5', name: '工程质量专业', pblmList: []},
  {id: '6', name: '工程安全专业', pblmList: []}
]);
const loading = ref(false);
const inspectType = route.query.inspectType;
const object = ref(JSON.parse(route.query.object));
const objectConfig = ref(getBaseByInspectType(inspectType));
const showAddPopover = ref(false);

const onSelect = (action) => {
  const inspect = list.value.find(item => item.name === action.text + '专业')
  jumpPage(`/problemAdd`, {inspectType: inspect.id, rgstrId: object.value.id, objId: object.value.objId});
};

function getData() {
  getTacQuestionList(route.params.objId).then(res => {
    list.value.forEach(item => {
      item.pblmList = res.data.list.filter(pblm => pblm.listType === item.id);
    })
    loading.value = false;
  })
}
/**
 * 删除问题
 */
function deletePblm(pblmId) {
  deleteTacQuestion(pblmId).then(() => {
    getData();
  })
}

onMounted(() => {
  getData();
})
</script>
<style lang="scss">
.pblm-list-wrapper {
  padding: 0 10px;
  height: calc(100% - 120px);
  overflow: auto;

  .van-collapse-item__content {
    padding: 0;
    background-color: transparent;
  }
}

.new-problem {
  .van-popover__action {
    width: auto;
  }
}
</style>
