<template>
  <div class="container">
    <div class="header">
      <el-form :inline="true" :model="memberQurey">
        <el-form-item>
          <el-button type="success" icon="el-icon-circle-plus-outline" @click="updataMember()">更新成员</el-button>
          <el-button @click="back()">返回</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="conter">
      <el-table :data="memberList" style="width: 100%; text-align: center" border>
        <el-table-column label="序号" width="50px">
          <template slot-scope="scope">
            {{
            (memberQurey.pageNum - 1) * memberQurey.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称" />
        <el-table-column prop="userName" label="员工姓名" />
        <el-table-column prop="projectAmount" label="角色">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.memberPression == 0 ? 'success':''"
              effect="dark"
            >{{ scope.row.memberPression == 0 ? '项目负责人':'普通成员' }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

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

<script>
import { selectByProjectId } from "@/api/member";
export default {
  data() {
    return {
      memberQurey: {
        projectId: null,
        pageNum: 1,
        pageSize: 10
      },
      memberList: [],
      total: 0
    };
  },
  created() {
    this.memberId = this.$store.getters.memberId;
    this.memberQurey.projectId = this.$route.query.id;
    this.getMember();
  },
  methods: {
    //获取员工信息
    getMember() {
      console.log(selectByProjectId(this.memberQurey));
      selectByProjectId(this.memberQurey)
        .then(res => {
          if (res.success) {
            this.memberList = res.data.list;
            this.total = res.data.total;
          } else {
            this.$message.error(res.data);
          }
        })
        .catch(error => {
          this.$message.error("获取项目成员失败");
        });
    },
    //返回
    back() {
      this.$store.dispatch('tagsView/delView', this.$route)
      if (this.$store.getters.memberId == 0) {
        this.$router.push({
          path: "/projectList",
        });
      } else {
        this.$router.push({
          path: "/beresponsibleforList",
        });
      }
    },
    //换页
    handleCurrentChange(val) {
      this.memberQurey.pageNum = val;
      this.getMember();
    },
    //更新成员
    updataMember() {
      this.$router.push({
        path: "/memberUpdata",
        query: {
          id: this.$route.query.id
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 10px;
}
.conter {
  margin-bottom: 10px;
}
.footer {
  text-align: right;
}
</style>