<template>
  <div class="jeecg-basic-table-form-container" :loading="loading">
    <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="12" :span="2" :offset="0" style="text-align: right">
          <!-- <a-button type="link" @click="handlerStandardlibSwitch">管理后台</a-button> -->
          <!-- <a-button type="link" @click="handelCreateIndex" :loading="loading">创建索引</a-button> -->
          <a-button type="link" @click="handelCreateDocLib" v-if="hasPermission('stm:es:common:createDocLib')">导入数据</a-button>
        </a-col>
      </a-row>
      <a-form style="margin-top: 10%; margin-bottom: 20%" :loading="loading">
        <a-row :gutter="24">
          <a-col :lg="4" />
          <a-col :lg="16">
            <a-typography-title class="stm-typography">标准库内容搜索</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"
                :loading="loading"
                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-tabs v-model:activeKey="queryParam.sctype">
              <a-tab-pane v-for="item in standardlibQueryRadioArr" :key="item.value" :tab="item.label" />
            </a-tabs>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-show="_showLables">
          <a-col :lg="4" />
          <a-col :lg="16">
            <a-radio-group
              v-model:value="queryParam.lableNames"
              :options="dataListLabels"
              name="radioGroupLabel"
              @change="handlerRadioChange"
              style="min-width: 100px; margin: 5px"
            />
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div v-else class="stm-query">
      <a-form style="position: fixed; top: 2; width: 98%; margin-top: -50px; z-index: 11; padding-top: 20px; opacity: 1">
        <a-card
          :bordered="false"
          style="height: 120px; display: hidden; overflow: hidden; width: 100%; padding-top: 20px; padding-right: 10px"
          :body-style="{ padding: 0 }"
        >
          <a-row :gutter="24">
            <a-col :lg="14">
              <a-input-search
                ref="stminput2"
                size="large"
                placeholder="请输入"
                v-model:value="queryParam.name"
                :loading="loading"
                enter-button="搜索"
                @search="handlerStandSearch"
              />
            </a-col>
          </a-row>
          <a-row>
            <a-col :lg="16">
              <a-tabs v-model:activeKey="queryParam.sctype" @change="handlerRadioChange">
                <a-button v-for="item in standardlibQueryRadioArr" :key="item.value" :tab="item.label" />
              </a-tabs>
            </a-col>
          </a-row>
        </a-card>
      </a-form>
      <div style="top: 100px; min-height: 200px; z-index: 10">
        <a-list item-layout="horizontal" :data-source="dataList" style="width: 100%; z-index: 10; top: 100px">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta>
                <template #description>
                  <div v-if="item.scdesc" style="width: 100%; font-weight: 500; line-height: 26px; font-size: medium; color: black">
                    <span v-html="item.scdesc.substring(0, 500)" style="width: 100%; font-size: 15px; color: #222; line-height: 30px"> </span>
                    <span v-if="item.scdesc.length > 500"> .......... </span>
                  </div>
                  <div style="margin: 5px 0px">
                    <a-button ghost type="link" @click="handlerShowDetail(item)" style="margin-left: 0px; padding-left: 0px">查看详细信息</a-button>
                  </div>
                </template>
                <template #title>
                  <h5 style="color: #000000d9; font-size: 1.2em; font-weight: 600">
                    <span v-html="item.name"></span>
                    <Tag style="margin-left: 10px"><span v-html="item.tag"></span></Tag>
                    <span style="color: #8c8c8c; font-weight: 400; font-size: 12px" v-if="item.fileName">《{{ item.fileName }}》</span>
                    <!-- 
                    <Tag v-if="item.lableNames && item.lableNames.length>0" v-for="(t,i) in item.lables"  :key="i"  :color="t.color" >
                      <a style="color: #1890ff;font-size: 10px;" @click="handlerGotoPage2(item,t.code)">
                       <span  v-html="t.name"></span>
                      </a>    
                    </Tag> -->
                  </h5>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
        <Pagination
          style="text-align: center; margin-top: 100px"
          v-model:current="pagination.current"
          show-quick-jumper
          :total="pagination.total"
          @change="pageChange"
        />
      </div>
    </div>
    <div>
      <EsDetail @register="registerModalDetail" />
    </div>
  </div>
</template>
<script lang="ts" name="es-esStandLibQuery" setup>
  import { useDrawer } from '/@/components/Drawer';
  import EsDetail from './EsDetail.vue';
  import { Pagination, Tag } from 'ant-design-vue';
  import { nextTick, ref, unref } from 'vue';
  import { useRouter } from 'vue-router';
  import { list, createIndex, createDocLib, listLabels } from './esStandLibQuery.api';
  import ClassifyCheckbox from '/@/views/standardlib/components/ClassifyCheckbox.vue';
  import { usePermission } from '/@/hooks/web/usePermission';
  const { hasPermission } = usePermission();

  const stminput1 = ref(null);
  const stminput2 = ref(null);
  const loading = ref(true);
  const searchFlag = ref(true);

  const _showLables = ref(false);
  const _showLabelItme = ref(false);

  const pagination = ref({
    current: 1,
    pageSize: 10,
    total: 100,
  });
  const standardlibQueryRadioArr = ref([
    { label: '全部', value: '' },
    { label: '控制项', value: '9' },
    { 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: '10' },
  ]);

  const [registerModalDetail, { openDrawer }] = useDrawer();

  nextTick(() => {
    stminput1.value?.focus();
  });

  const router = useRouter();
  const queryParam = ref({
    name: '',
    sctype: '',
    lableNames: '',
    pageNo: pagination.value.current,
    pageSize: pagination.value.pageSize,
  });

  const dataList = ref([]);
  const dataListLabels = ref([]);

  function handlerStandardlibSwitch() {
    router.push({ path: '/standardlib' });
  }

  function handleShowLabel() {}

  function colseLabelTag() {
    queryParam.value.lableNames = '';
    _showLabelItme.value = false;
    handlerStandSearch();
  }

  function handlerShowDetail(record) {
    openDrawer(true, { data: record, srh: queryParam.value.name });
  }

  function handlerStandSearch() {
    searchFlag.value = false;
    queryParam.value.pageNo = 1;
    pagination.value.current = 1;
    pagination.value.total = 0;
    loading.value = true;
    onSearch();
    setTimeout(function () {
      stminput2.value?.focus();
    }, 1000);
  }

  function handlerRadioChangeLabel(val) {
    _showLables.value = true;
    _showLabelItme.value = true;
    queryParam.value.lableNames = val;
    handlerStandSearch();
  }

  function handlerSearchByLabel() {
    _showLables.value = true;
  }

  function handlerRadioChange() {
    //_showLables.value=false;
    //_showLabelItme.value= false

    // if(queryParam.value.sctype=="100") {
    //   _showLables.value=true;
    //   queryParam.value.sctype = ""
    // } else {

    //   _showLables.value=false;
    // }

    handlerStandSearch();
  }
  function onSearch() {
    dataList.value = [];
    list(unref(queryParam)).then((rep) => {
      dataList.value = rep.rows;
      pagination.value.current = queryParam.value.pageNo;
      pagination.value.total = rep.total;
      pagination.value.pageSize = queryParam.value.pageSize;
      loading.value = false;
    });
  }
  function pageChange(page, pageSize) {
    queryParam.value.pageNo = page;
    queryParam.value.pageSize = pageSize;
    onSearch();
  }
  function handlerGotoPage(item) {
    if (item.sctype == '2') {
      router.push({ path: '/standardlib/controlactivity/StCaMainList', query: { bizNo: item.bizNo, querName: queryParam.value.name } });
    } else if (item.sctype == '3') {
      router.push({ path: '/standardlib/controlactivity/StMetricList', query: { bizNo: item.bizNo, querName: queryParam.value.name } });
    } else if (item.sctype == '4') {
      if (item.tag == '合规库-法律') {
        router.push({ path: '/standardlib/compliane/fl', query: { bizNo: item.bizNo, querName: queryParam.value.name } });
      } else if (item.tag == '合规库-法规') {
        router.push({ path: '/standardlib/compliane/fg', query: { bizNo: item.bizNo, querName: queryParam.value.name } });
      } else if (item.tag == '合规库-监管意见') {
        router.push({ path: '/standardlib/compliane/jg', query: { bizNo: item.bizNo, querName: queryParam.value.name } });
      } else if (item.tag == '合规库-风险提示') {
        router.push({ path: '/standardlib/compliane/fx', query: { bizNo: item.bizNo, querName: queryParam.value.name } });
      } else if (item.tag == '合规库-处罚通知') {
        router.push({ path: '/standardlib/compliane/cf', query: { bizNo: item.bizNo, querName: queryParam.value.name } });
      }
    } else if (item.sctype == '5') {
      if (item.tag == '内控库-内控策略') {
        router.push({ path: '/standardlib/inner/stInnerControlList', query: { bizNo: item.bizNo, querName: queryParam.value.name } });
      } else if (item.tag == '内控库-内控制度') {
        router.push({ path: '/standardlib/inner/stInnerControlOrderList', query: { bizNo: item.bizNo, querName: queryParam.value.name } });
      }
    } else if (item.sctype == '6') {
      if (item.tag == '风险库-风险场景') {
        router.push({ path: '/standardlib/risk/StRiskScenarioList', query: { bizNo: item.bizNo, querName: queryParam.value.name } });
      } else if (item.tag == '风险库-风险事件') {
        router.push({ path: '/standardlib/risk/StRiskEventList', query: { bizNo: item.bizNo, querName: queryParam.value.name } });
      }
    } else if (item.sctype == '7') {
      router.push({ path: '/standardlib/problem', query: { bizNo: item.bizNo, querName: queryParam.value.name } });
    } else if (item.sctype == '8') {
      router.push({ path: '/standardlib/controlactivity/StCaMainCheckList', query: { bizNo: item.bizNo, querName: queryParam.value.name } });
    } else if (item.sctype == '9') {
      router.push({ path: '/standardlib/StBestPracticesList', query: { bizNo: item.bizNo, querName: queryParam.value.name } });
    }
  }

  function handelCreateIndex() {
    loading.value = true;
    createIndex(handleSuccess);
  }

  function handelCreateDocLib() {
    loading.value = true;
    createDocLib(handleSuccess);
  }

  function handleSuccess() {
    loading.value = false;
  }

  function setLabels() {
    dataListLabels.value = [];
    listLabels({ pageNo: 1, pageSize: 1000 }).then((rep) => {
      let tmpAry: any = rep.records;
      let nameAry: any = [];
      //nameAry.push({label: '全部',value: ''})
      for (let i = 0; i < tmpAry.length; i++) {
        nameAry.push(tmpAry[i].lableName);
      }
      dataListLabels.value = nameAry;
    });
  }

  setLabels();

  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;
  }

  .stm-query em {
    color: red;
  }

  .ant-tabs-tab + .ant-tabs-tab {
    margin: 0 0 0 10px !important;
  }

  .ant-tabs-ink-bar {
    background-color: transparent !important;
  }

  .ant-tabs-top .ant-tabs-ink-bar-animated:before {
    content: ' ';
    background-color: red;
    width: 50px;
    height: 2px;
    position: absolute;
    margin: auto;
    margin-left: 25%;
  }
</style>
