<template>
  <div class="guns-layout">
    <div class="guns-layout-content">
      <div class="guns-layout">
        <div class="guns-layout-content-header" style="margin-top: 16px">
          <span>数据填报</span>
          <a-space :size="16">
            <a-input
              v-model:value="where.searchText"
              placeholder="请输入关键词(回车搜索)"
              @pressEnter="reload"
              class="search-input"
              allowClear
              style="width: 300px; height: 36px"
            >
              <template #prefix>
                <icon-font iconClass="icon-opt-search"></icon-font>
              </template>
            </a-input>
          </a-space>
        </div>
        <div class="guns-layout-content-application">
          <div class="content-mian">
            <div class="content-mian-body">
              <div class="table-content" style="height: 100%">
                <a-spin :spinning="loading" :delay="100">
                  <div style="height: calc(100% - 40px); overflow-y: auto; overflow-x: hidden; position: relative">
                    <a-row :gutter="[16, 16]">
                      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6" v-for="item in busiessList" :key="item.businessId"
                        ><div class="modular-item">
                          <div class="modular-item-header">
                            <div class="modular-item-header-top">
                              <div class="modular-item-header-top-left">
                                <img src="@/assets/project/task.svg" alt="" class="modular-item-header-top-left-img" />
                                <div class="modular-item-header-top-left-content">
                                  <div class="modular-item-header-top-left-content-title">
                                    {{ item.businessName }}
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="modular-item-header-dept">
                              <span class="dept-label">最近填报时间</span>
                              <span class="dept-name">{{ item?.lastFilingTime }}</span>
                            </div>
                            <a-row class="modular-item-header-bottom">
                              <a-col :span="12" class="modular-item-header-bottom-item" @click.stop="fillClick(item)">
                                <span>填报</span>
                              </a-col>
                              <a-col :span="12" class="modular-item-header-bottom-item" @click.stop="lookLog(item)">
                                <span>查看记录</span>
                              </a-col>
                            </a-row>
                          </div>
                        </div></a-col
                      >
                    </a-row>
                    <a-empty v-show="busiessList?.length == 0" :image="Empty.PRESENTED_IMAGE_SIMPLE" class="empty"></a-empty>
                  </div>
                  <a-pagination
                    :current="pageNo"
                    :page-size="pageSize"
                    :total="total"
                    v-if="total > 0"
                    size="small"
                    class="pagination"
                    show-size-changer
                    show-quick-jumper
                    @change="pageSizeChange"
                    @showSizeChange="showSizeChange"
                    :show-total="total => `共${total}条`"
                  />
                </a-spin>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="FillData">
import { onMounted, ref } from 'vue';
import { FillDataApi } from './api/FillDataApi';
import { Empty } from 'ant-design-vue/es';
import { useRouter } from 'vue-router';

const router = useRouter();

// 搜索条件
const where = ref({
  searchText: ''
});

// 业务列表
const busiessList = ref([]);

// 当前所在页数
const pageNo = ref(1);
// 当前分页条数
const pageSize = ref(24);
// 总数据
const total = ref(0);

const loading = ref(false);

onMounted(() => {
  getBusiessList();
});

// 获取业务列表
const getBusiessList = () => {
  loading.value = true;
  let params = {
    ...where.value,
    pageNo: pageNo.value,
    pageSize: pageSize.value
  };

  FillDataApi.getUserFilingPageList(params)
    .then(res => {
      if (res.code == '00000') {
        busiessList.value = res.data.rows ?? [];
        total.value = res.data.totalRows;
      }
    })
    .finally(() => (loading.value = false));
};

// 分页的页数改变
const pageSizeChange = (page, pageSize) => {
  pageNo.value = page;
  getBusiessList();
};

// 条数改变
const showSizeChange = (current, size) => {
  pageSize.value = size;
  getBusiessList();
};

// 点击搜索
const reload = () => {
  pageNo.value = 1;
  getBusiessList();
};

const fillClick = record => {
  router.push({
    path: '/mid/fill/submit',
    query: {
      businessId: record.businessId,
      type: 'add'
    }
  });
};

const lookLog = record => {
  router.push({
    path: '/mid/fill/detail',
    query: {
      businessId: record.businessId
    }
  });
};
</script>

<style scoped lang="less">
.pagination {
  text-align: right;
}
.empty {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -32px;
  margin-top: -42px;
}
.modular-item {
  display: flex;
  padding: 12px 16px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 4px;
  border: 1px solid rgba(197, 207, 209, 0.6);

  &:hover {
    border: 1px solid #3f78df;
  }

  .modular-item-header {
    width: 100%;
    height: calc(100%);
    overflow: hidden;

    .modular-item-header-top {
      width: 100%;
      align-items: flex-start;
      display: flex;
      margin-bottom: 8px;

      .modular-item-header-top-left {
        width: 100%;
        display: flex;
        align-items: center;

        .modular-item-header-top-left-img {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          margin-right: 8px;
        }
        .modular-item-header-top-left-content {
          width: calc(100% - 56px);
          height: 100%;

          .modular-item-header-top-left-content-title {
            width: 100%;
            color: #43505e;
            font-size: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
          }

          .modular-item-header-top-left-content-code {
            margin-top: 4px;
            width: 100%;
            color: #898e91;
            font-size: 14px;
            height: 22px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
          }
        }
      }
    }

    .modular-item-header-dept {
      margin-bottom: 8px;
      margin-left: 28px;
      display: flex;
      align-items: center;

      .dept-label {
        color: #898e91;
      }
      .dept-name {
        color: #60666b;
      }
    }

    .modular-item-header-bottom {
      padding-top: 12px;
      flex: auto;
      border-top: 1px solid #c5cfd166;

      .modular-item-header-bottom-item {
        text-align: center;
        cursor: pointer;
        color: #3f78df;
        font-size: 13px;

        &:not(:last-child) {
          border-right: 1.5px solid #c5cfd166;
        }
      }
      .modular-disabled {
        cursor: not-allowed !important;
        color: #adb5b8;
      }
    }
  }
}
.btn-item {
  display: flex;
  padding: 8px 16px;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #60666b;

  &:hover {
    background-color: var(--primary-1);
  }

  .btn-item-label {
    color: #60666b;
  }
}
</style>

<style lang="less">
.modular-pop {
  .ant-popover-inner {
    border-radius: 4px;
  }
  .ant-popover-inner-content {
    padding: 8px 0;
  }
}
</style>
