<template>
  <div class="app-container">
    <el-row style="margin-bottom: 20px">
      <el-col :span="3">
        <el-image
          style="width: 100px; height: 100px; border-radius: 50px;"
          :src="'http://localhost:9102/img' + user.headUrl"
        ></el-image>
      </el-col>
      <el-col class="detail" :span="2">
        <span>{{user.name}}</span>
      </el-col>
      <el-col class="detail" :span="4">
        <span>{{user.phone}}</span>
      </el-col>
      <el-col class="detail" :span="4">
        <span>本月得分</span>
      </el-col>
      <el-col class="detail" :span="4">
        <span>所属资产</span>
      </el-col>
      <el-col class="detail" :span="7">
        <el-button type="primary" @click="backToList" style="float:right">返回</el-button>
      </el-col>
      <el-col class="detail" :span="6">
        <span>第{{user.deptId}}部门</span>
      </el-col>
      <el-col class="detail" :span="4">
        <span>暂无</span>
      </el-col>
      <el-col class="detail" :span="11">
        <span class="asset" v-for="item in asset" :key="item">{{item}}</span>
      </el-col>
    </el-row>

    <!-- 标签页 -->
    <el-tabs v-model="tabsName">
      <el-tab-pane label="评分记录" name="0">
        <!-- 评分记录列表 -->
        <el-table :data="score" v-loading="loading" width="100%">
          <el-table-column type="index" width="40"></el-table-column>
          <el-table-column prop="scoringYearMonth" label="时间" width="100"></el-table-column>
          <el-table-column prop="personalScore" label="个人得分" width="80"></el-table-column>
          <el-table-column prop="ideaScore" label="建议得分" width="80"></el-table-column>
          <el-table-column prop="total" label="总分" width="80"></el-table-column>
        </el-table>
        <!-- 页码区域 -->
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="pageIndex1"
          :page-sizes="[20, 50, 100]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total1"
          background
          style="float:right"
        ></el-pagination>
      </el-tab-pane>

      <!-- 建议记录列表 -->
      <el-tab-pane label="建议记录" name="1">
        <!-- 评分记录列表 -->
        <el-table :data="advise" v-loading="loading">
          <el-table-column type="index" width="40"></el-table-column>
          <el-table-column prop="indate" label="建议时间" width="100"></el-table-column>
          <el-table-column prop="content" label="建议内容"></el-table-column>
          <el-table-column prop="ideaScore" label="评分人" width="80">
            <template slot-scope="scope">
              <span>{{reply[scope.$index].responder}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="total" label="回复内容">
            <template slot-scope="scope">
              <span>{{reply[scope.$index].content}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="score" label="得分" width="80"></el-table-column>
          <el-table-column prop="indate" label="打分时间" width="80"></el-table-column>
        </el-table>
        <!-- 页码区域 -->
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="pageIndex2"
          :page-sizes="[20, 50, 100]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total1"
          background
          style="float:right"
        ></el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      user: {},
      asset: [],
      score: [],
      advise: [],
      reply: [],
      userId: this.$route.params.id,
      loading: false,
      tabsName: 0,
      //分页相关
      pageIndex1: 1,
      pageSize1: 20,
      total1: 0,
      pageIndex2: 1,
      pageSize2: 20,
      total2: 0
    };
  },
  methods: {
    //获取用户信息
    getUser() {
      this.loading = true;
      request({
        url: "/user/getUserById",
        method: "post",
        params: {
          id: this.userId
        }
      })
        .then(response => {
          this.user = response.data.user;
          this.asset = response.data.asset;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    //获取评分
    getScore() {
      this.loading = true;
      request({
        url: "/score/getScoreByPage",
        method: "post",
        params: {
          id: this.userId,
          pageIndex: this.pageIndex1,
          pageSize: this.pageSize1
        }
      })
        .then(response => {
          this.score = response.data.records;
          this.total1 = response.data.total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    //获取评价
    getAdvise() {
      this.loading = true;
      request({
        url: "/score/getAdviseByPage",
        method: "post",
        params: {
          id: this.userId,
          pageIndex: this.pageIndex2,
          pageSize: this.pageSize2
        }
      })
        .then(response => {
          this.advise = response.data.advise.records;
          this.total2 = response.data.advise.total;
          this.reply = response.data.reply;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    //页码规格变更1
    handleSizeChange1(val) {
      this.pageSize1 = val;
      this.getScore();
    },

    //页码页数变更1
    handleCurrentChange1(val) {
      this.pageIndex1 = val;
      this.getScore();
    },

    //页码规格变更2
    handleSizeChange2(val) {
      this.pageSize2 = val;
      this.getAdvise();
    },

    //页码页数变更2
    handleCurrentChange2(val) {
      this.pageIndex2 = val;
      this.getAdvise();
    },

    //回到前一个页面
    backToList() {
      this.$router.go(-1);
    }
  },
  mounted() {
    if (this.userId == null) {
      this.$router.go("/404");
    } else {
      this.getUser();
      this.getScore();
      this.getAdvise();
    }
  }
};
</script>

<style scoped>
.detail {
  line-height: 50px;
  height: 50px;
}
.detail span {
  color: #444;
  font-size: 14px;
}
.detail asset {
  margin-right: 5px;
}
</style>

