<template>
  <div class="container">
    <!-- 顶部信息 -->
    <div class="containertop">
      <div class="topleft">
        <img src="../../../assets/images/detailsicon/1.png" alt="">
        <span>月度进展信息</span>
      </div>
      <div class="topright" style="visibility: hidden;">
        <el-button></el-button>
        <el-button></el-button>
      </div>
    </div>
    <!-- 内容区 -->
    <div class="content">
      <div class="descriptionsdiv">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="month" label="进度月份" width="200">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="200" align="center">
            <template slot-scope="scope">
              <span :style="getStatusColor(scope.row.status)">{{ scope.row.status }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="monthlyInvestment" label="当月完成投资" width="220" align="center">
            <template slot-scope="scope">
              <el-input v-if="scope.row.isEditing" v-model.number="scope.row.monthlyInvestment"
                style="width: 100%;"></el-input>
              <span v-else>{{ scope.row.monthlyInvestment }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="cumulativeInvestment" label="累计完成投资" width="280" align="center">
            <template slot-scope="scope">
              <el-input v-if="scope.row.isEditing" v-model.number="scope.row.cumulativeInvestment"
                style="width: 100%;"></el-input>
              <span v-else>{{ scope.row.cumulativeInvestment }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="cumulativeArea" label='截止目前累计建成面积(平方米)' width="280" align="center">
            <template slot-scope="scope">
              <el-input v-if="scope.row.isEditing" v-model.number="scope.row.cumulativeArea"
                style="width: 100%;"></el-input>
              <span v-else>{{ scope.row.cumulativeArea }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="progressDetails" label='项目进展详情' width="180" align="center">
            <template slot-scope="scope">
              <el-input v-if="scope.row.isEditing" v-model="scope.row.progressDetails" style="width: 100%;"></el-input>
              <span v-else>{{ scope.row.progressDetails }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.isEditing" size="mini" type="text" icon="el-icon-check"
                @click="handleSave(scope.row)">保存</el-button>
              <el-button v-else size="mini" type="text" icon="el-icon-edit"
                @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" style="color: #F25353;"
                @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <div style="visibility: hidden;"></div>
          <el-pagination :current-page="current" :page-sizes="[10, 20, 30, 40]" :page-size="size"
            layout="total, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMonthInformationPage } from "@/api/ManageApi/index";

export default {
  props: {
    action: {
      type: String,
      required: true,
    },
    xmId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      tableData: [
        {
          month: '2024-10',
          status: '未更新',
          monthlyInvestment: 0,
          cumulativeInvestment: 0,
          cumulativeArea: 0,
          progressDetails: '暂无数据',
          isEditing: false,
        },
      ],
      current: 1,
      size: 10,
      total: 0,
    };
  },
  methods: {
    getStatusColor(status) {
      switch (status) {
        case "未更新":
          return "color: #2DD29F;";
        case "已更新":
          return "color: #2B62F1;";
        default:
          return ""; 
      }
    },
    handleEdit(row) {
      row.isEditing = true;
    },
    handleSave(row) {
      row.isEditing = false;
      console.log("保存:", row);
      this.$message({
        type: "success",
        message: "保存成功!",
      });
    },
    handleDelete(row) {
      this.$confirm("你确定要删除此条记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("删除:", row);
          // 确保 tableData 是数组
          if (Array.isArray(this.tableData)) {
            const index = this.tableData.indexOf(row);
            if (index !== -1) {
              this.tableData.splice(index, 1);
            }
          }
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async getMonthInformationPage() {
      try {
        const response = await getMonthInformationPage({ xmId: this.xmId });
        // 确保 response.data.records 是数组
        if (Array.isArray(response.data.records) && response.data.records.length > 0) {
          this.tableData = response.data.records; 
          this.total = response.data.total || 0;
        } else {
          // 如果后端返回的数据为空数组，保留默认数据
          this.total = 0;
        }
      } catch (error) {
        console.error("获取月度进展信息失败:", error);
        this.$message.error("获取月度进展信息失败");
      }
    },
  },
  created() {
    this.getMonthInformationPage();
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.content {
  padding: 1rem;
  display: flex;
}

.containertop {
  height: auto;
  display: flex;
  justify-content: space-between;
  padding: .5rem;
  border-bottom: 1px solid #E5E5E5;
}

.topleft {
  width: 8rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.topleft img {
  width: 0.81rem;
  height: 0.81rem;
}

.topleft span {
  width: auto;
  height: 0.88rem;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 500;
  font-size: 0.88rem;
  color: #3D424C;
  line-height: 0.88rem;
  text-align: right;
  font-style: normal;
  text-transform: none;
}

.picturediv {
  width: 18.31rem;
  height: 25.31rem;
  background-color: lightblue;
}

.descriptionsdiv {
  width: 100%;
  margin-left: 1rem;
  height: auto;
}

.two-row-item {
  height: 20rem;
}

.block {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}
</style>