<script setup name="portraitAnalysis">
import ElTree from '@/components/elTree/index.vue'
import { reactive, ref } from 'vue'
import { libAllList } from '@/http/apis/declareMange/renewalProjectCapitalDeclare'

const searchForm = reactive({
    projectName: undefined
  }),
  pageParams = reactive({
    pageNumber: 1,
    pageSize: 10
  }),
  tableData = ref([{}]),
  total = ref(0),
  getTableData = async () => {
    const res = await libAllList({
      ...pageParams,
      ...searchForm
    })
    tableData.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.name = undefined
    pageParams.pageNumber = 1
  },
  handleSizeChange = val => {
    pageParams.pageSize = val
    pageParams.pageNumber = 1
    getTableData()
  },
  handleCurrentChange = val => {
    pageParams.pageNumber = val
    getTableData()
  },
  getTree = (data) => {
    searchForm.regionCode = data.regionLevel === 3 ? data.regionCode : undefined
    searchForm.pageNumber = 1
    getTableData()
  }
</script>

<template>
  <el-row>
    <el-col style="padding-right: 16px" :span="4">
      <elTree @get-tree="getTree" />
    </el-col>
    <el-col :span="20">
      <div>
        <el-card class="search mb-16">
          <el-form label-suffix=":" :model="searchForm" size="small">
            <el-row :gutter="16">
              <el-col :span="8">
                <el-form-item label="项目名称">
                  <el-input
                    v-model="searchForm.projectName"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item class="btn">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button @click="reset">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card>
          <template #header>
            <div class="flex justify-between items-center">
              <span>项目列表</span>
            </div>
          </template>
          <el-row v-if="tableData.length" :gutter="24" class="card-list">
            <el-col
              v-for="i in tableData"
              :key="i.id"
              :sm="12"
              :lg="8"
              :xl="6"
              class="mb-24"
            >
              <div class="card-list-item">
                <a class="title">{{ i.projectName }}</a>
                <div class="info">
                  <div>
                    <span class="label">申报单位：</span>
                    <span class="value">{{ i.buildOrg }}</span>
                  </div>
                  <div>
                    <span class="label">批复金额：</span>
                    <span class="value">{{ i.annualAccumulateAmount }}</span>
                  </div>
                </div>
                <el-divider />
                <div class="flex justify-center">
                  <el-button
                    plain
                    type="primary"
                    @click="$router.push({name:'portraitScreen',query:{projectCode:i.projectCode}})"
                  >查看画像</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
          <no-data v-else />
          <el-pagination
            v-model:currentPage="pageParams.pageNumber"
            v-model:page-size="pageParams.pageSize"
            background
            :page-sizes="pageParams.pageSizes"
            layout="total, sizes, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>
<style lang='less' scoped>
.card-list {
  box-shadow: inset 0px -1px 0px 0px #D8DADF;
  padding-bottom: 16px;
  &-item {
    border-radius: 8px;
    border: 1px solid #E9E9E9;
    padding: 16px;
    &:hover {
      background-color: rgba(236,245,255,0.45);
    }

    .title {
      color: rgba(0,0,0,0.85);
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 8px;
      &:hover {
        color: var(--el-color-primary);
        opacity: 0.9;
      }
      &:active {
        opacity: 1;
      }
    }
    .info {
      font-size: 14px;
      .label{
        color: rgba(0,0,0,0.45);
      }
      .value {
        color: rgba(0,0,0,0.65);
      }
    }
    .el-divider--horizontal {
      margin: 16px 0;
    }
  }
}
.el-pagination {
  padding: 16px 16px 0 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
</style>
