<script setup name="projectList">
import { getCurrentInstance, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import noData from '@/components/noData/index.vue'
import { del } from '@/http/apis/performanceEvaluation/evaluationPlan'
const props = defineProps({
    listData: Array,
    // 分页
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40]
    },
    total: {
      type: Number,
      default: 0
    },
    small: {
      type: Boolean,
      default: false
    }
  }),
  { proxy } = getCurrentInstance(),
  emits = defineEmits(['getTableData', 'toDetail']),
  router = useRouter(),
  { listData } = toRefs(props),
  // 分页
  pageParams = reactive({
    pageNumber: 1,
    pageSize: props.pageSizes[0]
  }),
  handleSizeChange = () => {
    emits('getTableData', pageParams)
  },
  handleCurrentChange = () => {
    emits('getTableData', pageParams)
  },
  deleteProject = (row) => {
    proxy.$messageBox
      .confirm('确定要删除该计划吗?', '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await del(row.id)
        proxy.$message.success('删除成功')
      })
  }
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">
          <div class="info">
            <div class="tit">
              <p class="mb-4 pointTit">{{ item.name }}</p>
            </div>
            <el-row :gutter="4">
              <el-col :span="7" class="mb-8">
                <span class="label">自评时间：</span>
                <span class="value">{{ item.selfAppraisalStart.split(' ')[0] }}~{{ item.selfAppraisalEnd.split(' ')[0] }}</span>
              </el-col>
              <el-col :span="7" class="mb-8">
                <span class="label">复评时间：</span>
                <span class="value">{{ item.reAppraisalStart.split(' ')[0] }}~{{ item.reAppraisalEnd.split(' ')[0] }}</span>
              </el-col>
              <el-col :span="7" class="mb-8">
                <span class="label">核查时间：</span>
                <span class="value">{{ item.verificationStart.split(' ')[0] }}~{{ item.verificationEnd.split(' ')[0] }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="4">
              <el-col :span="7" class="mb-8">
                <span class="label">评价项目数量：</span>
                <a class="value">{{ item.projects?.length || 0 }}</a>
              </el-col>
              <el-col :span="6" class="mb-8">
                <span class="label">创建时间：</span>
                <span class="value">{{ item.createOn || '-' }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="4" justify="end">
              <el-button
                type="primary"
                size="small"
                plain
                @click="router.push({name:'addPlan',query:{id:item.id}})"
              >编辑</el-button>
              <el-button
                type="primary"
                size="small"
                plain
                @click="router.push({name:'projectGroup',query:{appraisalId:item.id}})"
              >项目分组</el-button>
              <el-button
                type="primary"
                size="small"
                plain
                @click="router.push({name:'planDetail',query:{id:item.id}})"
              >详情</el-button>
              <el-button
                v-if="new Date(item.selfAppraisalStart).getTime()>new Date().getTime()"
                type="danger"
                size="small"
                plain
                @click="deleteProject(item)"
              >删除</el-button>
            </el-row>
          </div>
        </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: 800;
          color: rgba(0, 0, 0, 0.85);
          margin: 0 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);
          }
          &.status-primary{
            color: #0057FF;
            background: rgba(0, 87, 255, 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>
