<template>
  <div>
    <div class="jeecg-basic-table-form-container">
      <div v-if="searchFlag" class="stm-query" @keyup.enter="handlerStandSearch">
        <a-row :gutter="24">
          <a-col class="gutter-row" :lg="6" />
          <a-col class="gutter-row" :lg="6" />
          <a-col class="gutter-row" :lg="6" />
          <a-col class="gutter-row" :lg="2" />
          <a-col class="gutter-row" :lg="2" />
          <a-col class="gutter-row" :lg="2">
            <a-button type="link" v-if="hasPermission('stm:standardlib:tomanage')" @click="handlerStandardlibSwitch">管理后台</a-button>
          </a-col>
        </a-row>
        <a-form style="margin-top: 10%; margin-bottom: 20%">
          <a-row :gutter="24">
            <a-col :lg="4" />
            <a-col :lg="16">
              <a-typography-title class="stm-typography" :loading="loading">标准库综合查询</a-typography-title>
            </a-col>
            <a-col :lg="3" />
          </a-row>
          <a-row :gutter="24">
            <a-col :lg="4" />
            <a-col :lg="14">
              <a-form-item>
                <a-input-search
                  ref="stminput1"
                  size="large"
                  placeholder="请输入"
                  v-model:value="queryParam.name"
                  enter-button="搜索"
                  autofocus="autofocus"
                  @search="handlerStandSearch"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :lg="4" />
            <a-col :lg="16">
              <a-radio-group v-model:value="queryParam.sctype" :options="standardlibQueryRadioArr" name="radioGroup" />
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div v-else class="stm-query">
        <a-form>
          <a-row :gutter="24">
            <a-col :lg="12">
              <a-form-item>
                <a-input-search
                  ref="stminput2"
                  size="large"
                  placeholder="请输入"
                  v-model:value="queryParam.name"
                  enter-button="搜索"
                  @search="handlerStandSearch"
                />
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="2" :offset="10">
              <a-button type="link" v-if="hasPermission('stm:standardlib:tomanage')" @click="handlerStandardlibSwitch">管理后台</a-button>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :lg="18">
              <a-radio-group v-model:value="queryParam.sctype" :options="standardlibQueryRadioArr" name="radioGroup" @change="handlerRadioChange" />
            </a-col>
          </a-row>
        </a-form>
        <a-list item-layout="horizontal" :data-source="dataList" :loading="loading">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta :description="item.scdesc">
                <template #title>
                  <a style="color: #1890ff; font-size: 1.4em" @click="handlerGotoPage(item)">
                    <span v-html="item.name"></span>
                  </a>
                  <Tag style="margin-left: 10px">{{ item.tag }}</Tag>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
        <Pagination
          style="text-align: center"
          v-model:current="pagination.current"
          show-quick-jumper
          :total="pagination.total"
          @change="pageChange"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" name="standardlibquery" setup>
  import { Pagination, Tag } from 'ant-design-vue';
  import { nextTick, ref, unref } from 'vue';
  import { useRouter } from 'vue-router';
  import { list } from './index.api';

  import { usePermission } from '/@/hooks/web/usePermission';
  const { hasPermission } = usePermission();


  const stminput1 = ref(null);
  const stminput2 = ref(null);
  const loading = ref(false);
  const searchFlag = ref(true);
  const pagination = ref({
    current: 1,
    pageSize: 10,
    total: 100,
  });

  const standardlibQueryRadioArr = ref([
    { label: '全部', value: '' },
    { label: '合规', value: '1' },
    { label: '内控策略', value: '2' },
    { label: '内控制度', value: '3' },
    { label: '问题库', value: '4' },
    { label: '检查方法', value: '5' },
    { label: '风险事件', value: '6' },
    { label: '行业实践', value: '7' },
    { label: '风险分类', value: '8' },
    { label: '控制项', value: '9'},
    { label: '监管处罚', value: '10' }
  ]);

  nextTick(() => {
    stminput1.value?.focus();
  });
  const router = useRouter();
  const queryParam = ref({
    name: '',
    sctype: '1',
    pageNo: pagination.value.current,
    pageSize: pagination.value.pageSize,
  });
  interface DataItem {
    bizNo: string;
    name: string;
    scdesc: string;
    sctype: string;
    tag: string;
    lableNames: string;
    lables: any;
  }
  const dataList: DataItem[] = ref([]);
  
  function handlerStandardlibSwitch() {
    // sessionStorage.setItem("stm.index.switchFlag",switchFlag.value?'1':'0')
    router.push({ path: '/newlib/index' });
    
  }
  async function handlerStandSearch() {
    searchFlag.value = false;
    //   sessionStorage.setItem("stm.index.searchFlag","0")
    // 重新查询重置参数
    queryParam.value.pageNo = 1;
    pagination.value.current = 1;
    pagination.value.total = 0;
    await onSearch();
    nextTick(()=>{
      stminput2.value?.focus();
    })
  }
  function handlerRadioChange(e) {
    handlerStandSearch();
  }
  async function onSearch() {
    loading.value =true
    list(unref(queryParam)).then((rep) => {
      dataList.value = rep.records;
      pagination.value.current = rep.current;
      pagination.value.total = rep.total;
      pagination.value.pageSize = rep.size;
      loading.value =false
    });
  }
  function pageChange(page, pageSize) {
    queryParam.value.pageNo = page;
    queryParam.value.pageSize = pageSize;
    onSearch();
  }


  function handlerGotoPage(item) {
    router.push({ path: '/newlib/index', query: { id: item.id, tp:item.sctype } });
  }

  setTimeout(() => {
    loading.value = false;
  }, 500);
</script>
<style scoped>
  .jeecg-basic-table-form-container {
    padding: 10px;
    position: relative;
  }
  .jeecg-basic-table-form-container .stm-query {
    padding: 12px 10px 6px 10px;
    margin-bottom: 8px;
    background-color: #fff;
    border-radius: 2px;
    position: relative;
  }
  .stm-typography {
    color: #009dff;
    font-size: 18px;
  }
</style>
