<script setup name="projectList">
import { reactive } from 'vue'
import store from '@/store'
import noData from '@/components/noData/index.vue'
const { projectTypeOptions, businessTerritory, meetingTypeOptions } = store.dictStore.globalDicts || {},
  props = defineProps({
    listData: Array,
    // 分页
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40]
    },
    total: {
      type: Number,
      default: 0
    },
    small: {
      type: Boolean,
      default: false
    }
  }),
  emits = defineEmits(['getTableData', 'preExamDeclare', 'toDetail']),
  // 分页
  pageParams = reactive({
    pageNumber: 1,
    pageSize: props.pageSizes[0]
  }),
  handleSizeChange = () => {
    emits('getTableData', pageParams)
  },
  handleCurrentChange = () => {
    emits('getTableData', pageParams)
  },
  goToDetail = (item) => {
    if (new Date().getTime() >= new Date(item.reviewTime).getTime() && (!item.reviewed || (item.isHeadman && item.reviewed < 2))) {
      emits('toDetail', item, 1)
    } else {
      emits('toDetail', item, 2)
    }
  }
defineExpose({ pageParams })

</script>

<template>
  <div class="projectList">
    <template v-if="listData?.length">
      <div v-for="(item,index) in listData" :key="index" class="list">
        <div class="left">
          <svg-icon
            name="projectIcon"
            class="icon"
          />
          <div class="info">
            <div class="tit">
              <p class="mb-4 pointTit" @click="goToDetail(item)">{{ item.projectName }}</p>
              <el-tag v-if="item.bizDomain">{{ businessTerritory[item.bizDomain] }}</el-tag>
            </div>
            <el-row :gutter="4">
              <el-col :span="6" class="mb-8">
                <span class="label">申报单位：</span>
                <span class="value">{{ item.buildOrgName || '-' }}</span>
              </el-col>
              <el-col :span="6" class="mb-8">
                <span class="label">项目类型：</span>
                <span class="value">{{ projectTypeOptions[item.projectType] || '-' }}</span>
              </el-col>
              <el-col :span="6" class="mb-8">
                <span class="label">申报金额：</span>
                <span class="value">{{ item.declaredAmount || '-' }}万元</span>
              </el-col>
              <el-col :span="6" class="mb-8">
                <span class="label">预算年度：</span>
                <span class="value">{{ item.projectYear }}年</span>
              </el-col>
              <el-col :span="12" class="mb-8">
                <span class="label">评审时间：</span>
                <span class="value">{{ item.reviewTime }}~{{ item.endReviewTime }}</span>
              </el-col>
              <el-col :span="6" class="mb-8">
                <span class="label">评审类型：</span>
                <span class="value">{{ meetingTypeOptions[item.reviewType] }}</span>
              </el-col>
              <el-col :span="6" class="mb-8">
                <span class="label">联系人：</span>
                <span class="value">{{ item.connecter }}</span>
              </el-col>
              <el-col :span="6" class="mb-8">
                <span class="label">联系方式：</span>
                <span class="value">{{ item.contact }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="right">
          <a v-if="new Date().getTime()>=new Date(item.reviewTime).getTime()&&(!item.reviewed||(item.isHeadman&&item.reviewed<2))" @click="emits('toDetail',item,1)">处理</a>
          <a v-else @click="emits('toDetail',item,2)">详情</a>
        </div>
      </div>
    </template>
    <noData v-else />
    <el-pagination
      v-model:currentPage="pageParams.pageNumber"
      v-model:page-size="pageParams.pageSize"
      :small="small"
      background
      :page-sizes="props.pageSizes"
      layout="total, sizes, prev, pager, next"
      :total="props.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<style lang="less">
.projectList {
  .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding: 16px;
    box-shadow: inset 0px -1px 0px 0px #D8DADF;

    .left {
      display: flex;
      flex: 1;

      .icon {
        font-size: 44px;
        margin-right: 24px;
      }

      .info {
        flex: 1;

        .tit {
          font-weight: 400;
          color: rgba(0, 0, 0, 0.85);
          margin: 11px 0 16px;
        }

        .label {
          color: rgba(0, 0, 0, 0.45);
        }

        .value {
          color: rgba(0, 0, 0, 0.65);
        }
        .statusTag {
          font-weight: 400;
          line-height: 18px;
          border-radius: 4px;
          display: inline-block;
          padding: 4px;

          &.status-warning {
            color: #FFA43D;
            background: rgba(255, 164, 61, 0.06);
          }
          &.status-success {
            color: #4ECB74;
            background: rgba(78,203,116,0.06);
          }
          &.status-danger {
            color: #FF3B30;
            background: rgba(255,59,48,0.06);
          }
        }
      }
    }
    .right{
      display: flex;
      flex-direction: column;
      align-items: center;
      a{
        margin:0
      }
    }
  }

  .el-pagination {
    padding: 16px 16px 0 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
</style>
