<template>
  <!-- 参与项目 -->
  <div class="container">
    <div class="header">
      <el-form :inline="true" :model="projectQurey">
        <el-form-item label="项目名称">
          <el-input v-model="projectQurey.projectName" placeholder="项目名称"></el-input>
        </el-form-item>
        <el-form-item label="项目编号">
          <el-input v-model="projectQurey.projectNumber" placeholder="项目编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="qurey()">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh-right" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="conter">
      <el-table :data="projectList" style="width: 100%; text-align: center" border>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" class="demo-table-expand">
              <el-form-item label="合作方：">
                <span>{{ props.row.projectPartyb }}</span>
              </el-form-item>
              <el-form-item label="项目详情：">
                <span>{{ props.row.projectInformation }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column label="序号" width="50px">
          <template slot-scope="scope">
            {{
            (projectQurey.pageNum - 1) * projectQurey.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称" />
        <el-table-column prop="projectNumber" label="项目编号" />
        <el-table-column label="项目合同金额">
          <template slot-scope="scope">
            <p class="amounttext">{{scope.row.projectAmount}}</p>
          </template>
        </el-table-column>
        <el-table-column label="项目总收入金额" align="center">
          <el-table-column label="金额">
            <template slot-scope="scope">
              <p class="incometext">{{scope.row.projectIncome}}</p>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="showIncome(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="项目总支出金额" align="center">
          <el-table-column label="金额">
            <template slot-scope="scope">
              <p class="expendtext">{{scope.row.projectExpend}}</p>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="showExpend(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="projectExpense" label="项目总报销金额">
          <template slot-scope="scope">
            <p class="expendtext">{{scope.row.projectExpense}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="projectStartTime"
          label="项目开始时间"
          align="center"
          :formatter="timestampToTime"
        />
        <el-table-column
          prop="projectEndTime"
          label="项目结束时间"
          align="center"
          :formatter="timestampToTime"
        />
      </el-table>
    </div>

    <div class="footer">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="projectQurey.pageNum"
        :page-size="projectQurey.pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { selectBYPression } from "@/api/project";

export default {
  data() {
    return {
      projectQurey: {
        projectName: null,
        projectNumber: null,
        pageNum: 1,
        pageSize: 10,
        userId: null,
        memberPression:1
      },
      projectList: [],
      total: null
    };
  },
  created() {
    this.projectQurey.userId = this.$store.getters.urId;
    this.getProjectList();
  },
  methods: {
    //获取项目列表
    getProjectList() {
      selectBYPression(this.projectQurey)
        .then(res => {
          if (res.success) {
            //请求成功，获取到了数据
            this.projectList = res.data.list;
            this.total = res.data.total;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          this.$message.error("获取数据失败");
        });
    },
    //查询
    qurey() {
      this.projectQurey.pageNum = 1;
      this.getProjectList();
    },
    //重置
    reset() {
      this.projectQurey = {
        projectName: null,
        projectNumber: null,
        pageNum: 1,
        pageSize: 10,
        userId: null,
        memberPression:1
      };
      this.projectQurey.userId = this.$store.getters.urId;
      this.getProjectList();
    },
    //添加项目
    addproject() {
      this.$router.push("/projectAdd");
    },
    //分页
    handleCurrentChange(val) {
      this.projectQurey.pageNum = val;
      this.getProjectList();
    },
    //修改项目
    updataProject(data) {
      this.$router.push({
        path: "/projectUpdata",
        query: {
          id: data.projectId
        }
      });
    },
    //时间处理
    timestampToTime(row, column, cellValue) {
      return cellValue.split(" ")[0];
    },
    //查看收入详情列表
    showIncome(data) {
      this.$router.push({
        path: "/incomeList",
        query: {
          id: data.projectId,
          state:0
        }
      });
    },
    //成员管理
    member(data) {
      this.$router.push({
        path: "/memberList",
        query: {
          id: data.projectId
        }
      });
    },
    //查看支出详情列表
    showExpend(data) {
      this.$router.push({
        path: "/expendList",
        query: {
          id: data.projectId,
          state:0
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 10px;
}
.conter {
  margin-bottom: 10px;
}
.footer {
  text-align: right;
}
.incometext {
  color: #13ce66;
  font-weight: 600;
  font-size: 15px;
}
.amounttext {
  color: #1890ff;
  font-weight: 600;
  font-size: 15px;
}

.expendtext {
  color: rgb(255, 0, 0);
  font-weight: 600;
  font-size: 15px;
}
</style>