<template>
  <PageWrapper>
    <div style="display: flex; justify-content: center">
      <a-card title="" style="width: 100%; background: #fff; margin: 10px">
        <vxe-form
          v-model:collapseStatus="collapseStatus"
          :data="formData"
          title-align="right"
          title-width="100"
          prevent-submit
          title-colon
          custom-layout
        >
          <div style="padding: 3px">
            <div style="display: flex; justify-content: center; align-items: center; min-height: 80px">
              <vxe-input
                v-model="filterName"
                type="search"
                placeholder="全表搜索"
                @keyup="searchEvent"
                style="width: 50%; height: 50px; margin: 10px"
              />
              <!-- <vxe-checkbox v-model="collapseStatus" content="展开/收起" :checked-value="false" :unchecked-value="true" /> -->
            </div>

            <vxe-form-item title="处罚日期" field="date" :item-render="{}" folding>
              <template #default="{ data }">
                <vxe-input v-model="data.date" type="date" placeholder="请选择日期" clearable @change="searchEventDate" />
              </template>
            </vxe-form-item>
            <vxe-form-item title="地区" field="flagList" :item-render="{}" folding>
              <template #default="{ data }">
                <vxe-radio-group v-model="data.tp" @change="searchEventArea" :options="areaData">
                  <vxe-radio label="北京" content="北京" />
                  <vxe-radio label="天津" content="天津" />
                  <vxe-radio label="上海" content="上海" />
                  <vxe-radio label="河北" content="河北" />
                  <vxe-radio label="河南" content="河南" />
                  <vxe-radio label="山东" content="山东" />
                  <vxe-radio label="山西" content="山西" />
                  <vxe-radio label="陕西" content="陕西" />
                  <vxe-radio label="内蒙" content="内蒙" />
                </vxe-radio-group>
              </template>
            </vxe-form-item>
          </div>
        </vxe-form>

        <a-divider style="border-color: #fff" dashed />

        <vxe-table
          :border="{ size: '0px', style: 'solid', color: '#fff' }"
          :sort-config="{ multiple: true, chronological: true }"
          :row-style="setRowStyle"
          height="650"
          :show-header="false"
          :row-config="{ isHover: true }"
          :scroll-y="{ enabled: true }"
          :column-config="{ useKey: true }"
          :data="listData"
          :loading="loading"
        >
          <vxe-table-column title="#" type="seq" width="80">
            <template #default="{ rowIndex }">
              <div
                style="display: table-cell; vertical-align: middle; height: 200px; background: #fff; width: 80px; text-align: center; margin: 2px 0px"
              >
                <span style="font-size: 16px; font-weight: bold">{{ rowIndex + 1 }}</span>
              </div>
            </template>
          </vxe-table-column>
          <!-- <vxe-column field="tp" title="分类" type="html" width="80" sortable></vxe-column> -->
          <!-- <vxe-column field="docNo" title="处罚文号" type="html" width="150" sortable></vxe-column> -->
          <vxe-column field="punishBasis" title="行政处罚依据">
            <template #default="{ row }">
              <div style="margin: 2px; background: #fff; padding: 10px">
                <a-space direction="vertical">
                  <a-typography>
                    <a-typography-title :level="1" class="stm-typography">
                      <div style="display: flex">
                        <p v-html="row.tp" style="margin: 5px"></p>
                        <p v-html="row.punishDate" style="margin: 5px"></p>
                        <p v-html="row.docNo" style="margin: 5px"></p>
                      </div>
                    </a-typography-title>
                    <a-typography-title style="color: #000; font-weight: bold">
                      <p v-html="row.punishBasis"></p>
                    </a-typography-title>

                    <a-typography-text>
                      <p v-html="row.violationFact"></p>
                    </a-typography-text>

                    <a-typography-text type="danger" style="color: #000; font-weight: bold" strong underline>
                      <p v-html="row.punishDecision"></p>
                    </a-typography-text>

                    <a-typography-paragraph>
                      <p v-html="row.punishCom"></p>
                    </a-typography-paragraph>
                  </a-typography>
                </a-space>
              </div>
            </template>
          </vxe-column>
          <!-- <vxe-column field="punishDecision" title="行政处罚决定" type="html" width="280"></vxe-column>
          <vxe-column field="violationFact" title="违法违规事实" type="html" ></vxe-column> -->
          <!-- <vxe-column field="punishCom" title="处罚行政机关" type="html" width="300"></vxe-column>
          <vxe-column field="punishDate" title="处罚决定日期" type="html" width="150" sortable></vxe-column> -->
          <template #empty>
            <span>
              <p>暂无数据</p>
            </span>
          </template>
          <template #pager>
            <!--使用 pager 插槽-->
            <vxe-pager
              :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
              v-model:current-page="tablePage.currentPage"
              v-model:page-size="tablePage.pageSize"
              :total="tablePage.total"
              @page-change="handlePageChange"
            />
          </template>
        </vxe-table>
      </a-card>
    </div>
  </PageWrapper>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import VXETable from 'vxe-table';
  import { PageWrapper } from '/@/components/Page';
  import { EditOutlined, EllipsisOutlined, RedoOutlined, TableOutlined } from '@ant-design/icons-vue';
  import { List, Card, Image, Typography, Tooltip, Slider, Avatar } from 'ant-design-vue';
  import { JEllipsis } from '/@/components/Form';
  import { getAllList, list } from './WbTmpData.api';

  const loading = ref(false);
  const collapseStatus = ref(false);
  const filterName = ref('');
  const listData = ref([]);
  const tableData = ref([]);
  const TypographyText = Typography.Text;

  const ellipsis = ref(true);

  const formData = reactive({
    date: '',
    tp: '',
  });

  const tablePage = reactive({
    total: 100,
    currentPage: 1,
    pageSize: 10,
  });

  const handlePageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage;
    tablePage.pageSize = pageSize;
  };

  const searchEvent = () => {
    const filterVal = String(filterName.value).trim().toLowerCase();
    if (filterVal) {
      const filterRE = new RegExp(filterVal, 'gi');
      const searchProps = ['tp', 'docNo', 'punishBasis', 'punishDecision', 'violationFact', 'punishDate'];
      const rest = tableData.value.filter((item) => searchProps.some((key) => String(item[key]).toLowerCase().indexOf(filterVal) > -1));
      listData.value = rest.map((row) => {
        const item = Object.assign({}, row);
        searchProps.forEach((key) => {
          item[key] = String(item[key]).replace(filterRE, (match) => `<span class="keyword-lighten" style="color:red">${match}</span>`);
        });
        return item;
      });
    } else {
      listData.value = tableData.value;
    }
  };

  const searchEventDate = () => {
    if (formData.date) {
      const filterRE = new RegExp(formData.date, 'gi');
      const searchProps = ['punishDate'];
      const rest = tableData.value.filter((item) => searchProps.some((key) => String(item[key]).toLowerCase().indexOf(formData.date) > -1));
      listData.value = rest.map((row) => {
        const item = Object.assign({}, row);
        searchProps.forEach((key) => {
          item[key] = String(item[key]).replace(filterRE, (match) => `<span class="keyword-lighten" style="color:red">${match}</span>`);
        });
        return item;
      });
    } else {
      listData.value = tableData.value;
    }
  };

  const searchEventArea = () => {
    if (formData.tp) {
      const filterRE = new RegExp(formData.tp, 'gi');
      const searchProps = ['tp'];
      const rest = listData.value.filter((item) => searchProps.some((key) => String(item[key]).toLowerCase().indexOf(formData.tp) > -1));
      listData.value = rest.map((row) => {
        const item = Object.assign({}, row);
        searchProps.forEach((key) => {
          item[key] = String(item[key]).replace(filterRE, (match) => `<span class="keyword-lighten" style="color:red">${match}</span>`);
        });
        return item;
      });
    } else {
      listData.value = tableData.value;
    }
  };

  function setRowStyle({ row, rowIndex }) {
    return {
      maxHeight: '300px',
    };
  }

  async function loadDataList() {
    loading.value = true;
    let param = {};
    tableData.value = await getAllList();
    loading.value = false;
    searchEvent();
  }

  loadDataList();
</script>

<style lang="less" scoped>
  .keyword-lighten {
    color: red;
  }

  /deep/ .vxe-table--render-default .vxe-body--column.col--ellipsis > .vxe-cell,
  .vxe-table--render-default .vxe-footer--column.col--ellipsis > .vxe-cell,
  .vxe-table--render-default .vxe-header--column.col--ellipsis > .vxe-cell {
    min-height: 200px !important;
    background: #ccc;
  }

  /deep/ .vxe-table--render-default .vxe-cell {
    white-space: pre-line;
    word-break: break-all;
    padding-left: 0px;
    padding-right: 0px;
  }

  /deep/ .vxe-table--seq {
    color: red;
    font-weight: bold;
    font-size: 16px;
    background: red;
  }

  /deep/ .vxe-table--seq + .vxe-table--seq {
    color: blue;
  }

  .stm-typography {
    color: #009dff;
    font-size: 16px;
  }

  .container {
    width: 500px;
    overflow: none;
  }

  .container-text {
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
  }

  /deep/ .vxe-table--render-default .vxe-body--column.col--ellipsis:not(.col--actived) > .vxe-cell {
    width: 500px;
    text-overflow: ellipsis;
    white-space: normal !important;
  }
</style>
