<template>
  <div class="grid-container">
    <div class="grid-item item-1">
      <!-- 整体项目情况 -->
      <div class="allarea">
        <AllArea2 />
      </div>
    </div>
    <div class="grid-item item-2">
      <!-- 消息通知 -->
      <div class="itemhead">
        <span>消息通知</span>
      </div>
      <div class="mainarea">
        <Message2 />
      </div>
    </div>
    <div class="grid-item bottombox">
      <!-- 关联项目 -->
      <div class="itemhead">
        <span>关联项目</span>
      </div>
      <div class="mainarea" style="height: 22rem; overflow: auto;">
        <div v-if="postList.length > 0">
          <div class="mainareaitem" v-for="(item, index) in postList" :key="index">
            <div class="itemleft">
              <div class="xmmctitle" @click="getInfo(item, 'detail')">{{ item.name }}</div>
              <div class="lefttwo">
                <div style="display: flex;">
                  现状分类：<dict-tag :options="dict.type.xzfl" :value="item.xzfl" />
                </div>
                <div>总投资额：{{ item.ztze }}</div>
                <div>填报时间：{{ item.updateTime }}</div>
                <div style="display: flex;align-items: center;">
                  状态：<dict-tag :options="dict.type.tbzt" :value="item.status" />
                </div>
              </div>
            </div>
            <div class="itemright" :class="getStatusClass(item.status)">
              <div class="rightword">{{ statusMap[item.status] }}</div>
            </div>
          </div>
        </div>
        <div v-else class="no-data">
          暂无数据
        </div>
      </div>
    </div>
    <div class="grid-item item-2">
      <!-- 我的待办 -->
      <div class="itemhead">
        <span>我的待办</span>
      </div>
      <div class="mainarea">
        <daiban />
      </div>
    </div>
  </div>
</template>

<script>
import AllArea2 from '@/views/components/analysis/allcompany.vue'
import Message2 from '@/views/components/analysis/messagecompany.vue'
import daiban from '@/views/components/analysis/daiban.vue'
import { getBasicInformationPage } from "@/api/ManageApi/index";

export default {
  name: "Pc2FbEcharts",
  dicts:['xzfl','tbzt'],
  components: {
    AllArea2,
    Message2,
    daiban
  },
  data() {
    return {
      // 项目表格数据
      postList: [],
      // 状态颜色映射
      statusColors: {
        '审核通过': '#6EDABE',
        '待填报': '#FFBF6B',
        '待审核': '#7693D8'
      },
      // 状态文本映射
      statusMap: {
        1: '待填报',
        2: '待审核',
        3: '审核通过'
      },
      xzflMap: {
        1: '已建',
        2: '在建',
        3: '拟建'
      },
      // 遮罩层
      loading: true,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 详情按钮操作 */
    getInfo(row, type) {
      this.$store.commit("SET_CRUMBS", "项目详情");
      const id = row.id || this.ids[0];
      this.$router.push({ path: `/manage-info/${id}`, query: { action: type } });
    },
    getStatusClass(status) {
      const statusClasses = {
        1: 'status-red',     
        2: 'status-yellow',  
        3: 'status-green'    
      };
      return statusClasses[status] || '';
    },
    /** 查询项目列表 */
    getList() {
      this.loading = true;

      getBasicInformationPage().then((response) => {
        this.postList = response.data.records;
        this.loading = false;
      }).catch(error => {
        console.error('查询失败:', error);
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 三列 */
  grid-template-rows: auto auto auto;
  /* 三行 */
  gap: 1rem;
  /* 模块之间的间隔 */
  padding: 1rem;
  /* 容器内边距 */
}

.grid-item {
  background-color: #FFFFFF;
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.item-2{
  width: auto;
}
.itemhead {
  border-left: 0.25rem solid #2B62F1;
  margin: 0.94rem 0;
  height: 1.25rem;
  display: flex;
  align-items: center;
}

.itemhead span {
  margin-left: 1rem;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 600;
  font-size: 1rem;
  color: #3D424C;
  line-height: 1.69rem;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.mainarea {
  padding: 0rem 0rem 0 1.4rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 第一行：第一个模块占两列 */
.item-1 {
  /* background-image: url(../../../src/assets/images/allbg.png); */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.allarea {
  width: auto;
  height: auto;
  padding: 1rem 1.5rem;
}

/* 最后一行：一个模块占一整行 */
.item-6 {
  grid-column: span 3;
  /* 占三列 */
}

.mainareaitem {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
  margin: 0 1rem 0.5rem 0;
}

.itemleft {
  padding: .5rem 0 .5rem .5rem;
  display: flex;
  flex-direction: column;
  width: 70%;
  gap: 1rem;
}

.itemright {
  width: 8rem;
  height: 5rem;
  display: flex;
  color: white;
  font-size: 1rem;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 101% 100%);
  justify-content: flex-end;
  align-items: flex-start;
}

.rightword {
  transform: rotate(32deg);
  margin-top: -0.3rem;
  padding: 25px 0.5rem 2px 5px;
}

.status-red {
  background-color: #FFC77C;
}

.status-yellow {
  background-color: #7F99DB;
}

.status-green {
  background-color: #74DCC1;
}

.bottombox {
  height: 26rem;
}

.xmmctitle {
  color: #2B62F1;
  cursor: pointer;
}

.lefttwo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.no-data{
  color: gray;
}
</style>