<script setup name="projectList">
import { getCurrentInstance, reactive } from 'vue'
import store from '@/store'
import NoData from '@/components/noData/index.vue'
import PreExaminationDialog from '@/pages/declareManage/preExaminationDeclare/components/preExaminationDialog.vue'
import SetTagDialog from '@/pages/projectStoreManage/projectStore/components/setTagDialog.vue'
import { removeProject } from '@/http/apis/projectPortrait/tagsManage'
import { getIsShowRegionTree } from '@/utils/getIsShowRegionTree'

const { statusOptions, businessTerritory, statusGjOptions } = store.dictStore.globalDicts || {},
  { proxy } = getCurrentInstance(),
  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)
  },
  // 预审申报
  preExamDeclare = (data) => {
    dialogData.visible = true
    dialogData.data = data
  },
  dialogData = reactive({
    visible: undefined,
    data: undefined
  }),
  close = (flag) => {
    dialogData.visible = false
    flag && emits('getTableData', pageParams)
  },
  // 设置标签
  tagDialogData = reactive({
    visible: false,
    data: undefined
  }),
  showTagDialog = (data) => {
    tagDialogData.visible = true
    tagDialogData.data = data
  },
  closeTagDialog = (flag) => {
    tagDialogData.visible = false
    flag && emits('getTableData', pageParams)
  },
  closeTag = (data, tag) => {
    proxy.$messageBox
      .confirm(`确定要删除${tag.name}吗?`, '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await removeProject({
          tagId: tag.id,
          projectCode: data.projectCode
        })
        emits('getTableData', pageParams)
      })
  },
  signOut = () => {
    proxy.$messageBox
      .confirm(`请去IRS平台下架项目，以及释放相关资源`, '提示！', {
        type: 'warning',
        showCancelButton: false
      })
  }
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="emits('toDetail',item)">{{ item.projectName }}</p>
              <span v-if="item.bizDomain" class="statusTag status-primary mr-6">{{ businessTerritory[item.bizDomain] }}</span>
              <template v-if="item.tags">
                <el-tag
                  v-for="(tag,key) in item.tags"
                  :key="key"
                  class="myTag mx-2 mb-2"
                  closable
                  @close="closeTag(item,tag)"
                >
                  {{ tag.name }}
                </el-tag>
              </template>
            </div>
            <el-row :gutter="4">
              <el-col :span="5" class="mb-8">
                <span class="label">申报单位：</span>
                <span class="value">{{ item.buildOrg || '-' }}</span>
              </el-col>
              <el-col :span="7" class="mb-8">
                <span class="label">项目类型：</span>
                <span class="value">{{ item.projectTypeName || '-' }}</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.approvedAmount || '-' }}万元</span>
              </el-col>
              <el-col :span="5" class="mb-8">
                <span class="label">预算年度：</span>
                <span class="value">{{ item.projectYear }}年</span>
              </el-col>
              <el-col :span="7" class="mb-8">
                <span class="label">创建时间：</span>
                <span class="value">{{ item.createOn }}</span>
              </el-col>
              <el-col :span="12" class="mb-8">
                <span class="label">项目状态：</span>
                <span v-if="item.fromType==='1'" :class="`value statusTag status-${statusOptions[item.status]?.color}`">
                  {{ statusOptions[item.stage]?.name }}-{{ statusOptions[item.status]?.name }}
                </span>
                <span v-if="item.fromType==='2'" :class="`value statusTag status-${statusGjOptions[item.status]?.color}`">
                  {{ statusGjOptions[item.status]?.name||'-' }}
                </span>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="right">
          <a v-if="item.canPreDeclared" @click="preExamDeclare(item)">预审申报</a>
          <a @click="emits('toDetail',item)">详情</a>
          <a v-if="item.fromType==='1'" @click="$router.push({name:'projectHistory',query:{id:item.id}})">历史记录</a>
          <a v-if="item.fromType==='2'" @click="$router.push({name:'operationProjectStoreEdit',query:{id:item.projectCode,type:1}})">编辑</a>
          <a v-if="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER'])" @click="showTagDialog(item)">设置标签</a>
          <a @click="signOut">注销</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>
  <pre-examination-dialog :visible="dialogData.visible" :data="dialogData.data" @close="close" />
  <set-tag-dialog :visible="tagDialogData.visible" :data="tagDialogData.data" @close="closeTagDialog" />
</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);
          }
          &.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;
  }
  .myTag{
    color: #0057FF;
    background: rgba(0, 87, 255, 0.06);
    border: 0;
    height: 26px;
    border-radius: 4px;
    line-height: 26px;
    font-size: 14px;
  }
}
</style>
