<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="180">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120" 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="210" 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="220" 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="260" 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="loanAmount" label='贷款额度(万元)' width="200" align="center">
          </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="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
            layout="total, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          month: '2016-05',
          status: '未更新',
          monthlyInvestment: 1000,
          cumulativeInvestment: 1000,
          cumulativeArea: 1000,
          loanAmount: 500,
          progressDetails: '项目进展详情1',
          isEditing: false,
        },
        {
          month: '2016-06',
          status: '已更新',
          monthlyInvestment: 1000,
          cumulativeInvestment: 2000,
          cumulativeArea: 1500,
          loanAmount: 600,
          progressDetails: '项目进展详情2',
          isEditing: false,
        },
        {
          month: '2016-07',
          status: '未更新',
          monthlyInvestment: 1000,
          cumulativeInvestment: 3000,
          cumulativeArea: 2000,
          loanAmount: 700,
          progressDetails: '项目进展详情3',
          isEditing: false,
        },
        {
          month: '2016-08',
          status: '已更新',
          monthlyInvestment: 1000,
          cumulativeInvestment: 4000,
          cumulativeArea: 2500,
          loanAmount: 800,
          progressDetails: '项目进展详情4',
          isEditing: false,
        }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 40,
    }
  },
  methods: {
    getStatusColor(status) {
      switch (status) {
        case '未更新':
          return 'color: #2DD29F;';
        case '已更新':
          return 'color: #2B62F1;';
      }
    },
    handleEdit(row) {
      row.isEditing = true;
    },
    handleSave(row) {
      row.isEditing = false;
      // 实现保存逻辑，例如调用后端API保存数据
      console.log('保存:', row);
      this.$message({
        type: 'success',
        message: '保存成功!'
      });
    },
    handleDelete(row) {
      this.$confirm('你确定要删除此条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('删除:', row);
        // 实现删除逻辑
        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: '已取消删除'
        });
      });
    }
  }
}
</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>