// 详情页
<template>
  <ws-page :menuIndex="1">
    <section v-if="detail" class="group-detail">
      <section class="member-box">
        <h2 class="detail-title">{{detail.name}}</h2>
        <section class="strc">
          <section class="strc-info">
            <p>群组成员: {{detail.member_num}}人</p>
            <p>创建者: {{detail.nickname}}</p>
            <p>管理者: {{detail.manager_name}}</p>
          </section>
          <section class="strc-ctrls">
            <i class="el-icon-delete" v-if="detail.role_info.can_delete" @click="clickDelete">删除</i>
            <i class="el-icon-setting" v-if="detail.role_info.can_update" @click="clickSetting">设置</i>
          </section>
        </section>
        <h3 class="detail-list-title">工时统计</h3>
        <el-table class="reports-box" v-if="reports" :data="reports" style="width: 100%">
          <el-table-column prop="id" label="工作ID"></el-table-column>
          <el-table-column prop="nickname" label="开发者" width="70"></el-table-column>
          <el-table-column prop="hours" label="每周工时"></el-table-column>
          <el-table-column prop="today_hours" label="今天" width="50"></el-table-column>
          <el-table-column prop="weekly_hours" label="本周" width="50"></el-table-column>
          <el-table-column prop="period" label="本周周期" width="140"></el-table-column>
          <el-table-column prop="period_total_hours" label="本期工时"></el-table-column>
          <el-table-column prop="last_period" label="上周周期" width="140"></el-table-column>
          <el-table-column prop="last_period_total_hours" label="上期工时"></el-table-column>
        </el-table>
      </section>
      <section class="dynamic-box">
        <h3>日报动态</h3>
        <el-select
          class="member-selector"
          v-if="options"
          v-model="option"
          placeholder="请选择"
          @change="changeOption"
        >
          <el-option v-for="item of options" :key="item.id" :label="item.nickname" :value="item.id"></el-option>
        </el-select>
        <section v-if="dynamics" class="dynamics">
          <section class="dynamic" v-for="(item, index) of dynamics" :key="index">
            <section v-if="item.dev_info" class="dynamic-top">
              <img :src="item.dev_info.icon_url" alt class="avatar">
              <section class="user-info">
                <a :href="item.dev_info.seo_uri">
                  {{item.dev_info.nickname}}
                  <span>ID: {{item.job_id}}</span>
                </a>
                <p class="time">
                  {{item.report_day}}
                  <span>
                    工时
                    <span class="dynamic-red">+{{item.hours}}</span>
                  </span>
                </p>
              </section>
              <span class="dynamic-date">{{item.create_date}}</span>
            </section>
            <section class="dynamic-detail">
              <pre>{{item.description}}</pre>
              <a v-for="file of item.files" :key="file.id" :href="file.fileUrl" target="_blank">
                <img class="annex" src="~@/assets/img/group/annex.png">
                <span class="filename">{{file.file_name}}</span>
              </a>
            </section>
          </section>
        </section>
        <section class="dynamics dynamics-empty" v-else>
          <img src="~@/assets/img/group/empty.png" alt="empty">
          <p>暂无动态</p>
        </section>
        <el-pagination
          v-if="pageTotal"
          background
          layout="prev, pager, next"
          :total="pageTotal"
          :page-size="pageSize"
          @current-change="changePage"
        ></el-pagination>
      </section>
    </section>
  </ws-page>
</template>

<script>
import mixinGroup from '@/mixins/group'

export default {
  mixins: [mixinGroup],
  data() {
    return {
      detail: null,
      // 日报动态数据
      dynamics: null,
      pageTotal: 0,
      // 筛选条件
      options: null,
      // 选中的条件
      option: '0',
      // 当前页码
      currentPage: 1,
      // 一页显示多少条目
      pageSize: 15,
      // 获取动态的id
      jobID: 0,
    }
  },
  computed: {
    /**
     * 日报统计表
     */
    reports() {
      return this.detail && this.detail.reports
    }
  },
  mounted() {
    if(this.hasLogined) {
      this.getDetail()
      this.getDynamics()
      this.getOptions()
    } else {
      // 前往登录页
      this.goLogin()
    }
  },
  methods: {
    /**
     * 获取详情
     */
    async getDetail() {
      let res = await this.$post('/api/group/detail', { id: this.detailID })
      this.detail = res.data
    },
    /**
     * 获取成员列表
     */
    async getOptions() {
      let res = await this.$post(`/api/group/devList`, { id: this.detailID })
      let data = res.data.map(i => ({
        ...i,
        nickname: `${i.nickname}(${i.id})`
      }))
      data.unshift({
        id: "0",
        nickname: "全部成员",
        uid: "0",
      })
      this.options = data
    },
    /**
     * 群组日报列表
     */
    async getDynamics() {
      this.dynamics = []
      let res = await this.$post(`/api/group/reports`, { id: this.detailID, page_size: this.pageSize, page: this.currentPage, job_id: this.jobID })
      this.dynamics = res.data.list
      this.pageTotal = res.data.total
    },
    /**
     * 页面变化
     */
    changePage(page) {
      this.currentPage = page
      this.getDynamics()
    },
    /**
     * option变化
     */
    changeOption(jobID) {
      this.jobID = jobID
      this.getDynamics()
    },
    clickDelete() {
      this.$confirm('确定要删除本群组吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$post('/api/group/delete', { id: this.detailID })
        if(res) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          setTimeout(() => {
            this.$router.go(-1)
          }, 1500);
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async clickSetting() {
      this.$router.push({
        name: `group-detail-edit`,
        query: { isEdit: true }
      })
    }
  }
}
</script>

<style scoped>
.group-detail {
  display: flex;
  flex-direction: column;
  width: 816px;
}
.detail-title {
  font-size: 22px;
  text-align: center;
  margin: 5px 0 35px;
}
.member-box,
.dynamic-box {
  position: relative;
  padding: 20px;
  background: white;
}
.strc {
  display: flex;
  justify-content: space-between;
}
.strc-info {
  display: flex;
}
.strc-info p {
  margin-right: 28px;
}
.strc-ctrls i {
  margin-left: 30px;
  cursor: pointer;
}
.detail-list-title {
  margin: 27px 0 16px;
}
.reports-box {
  border: 1px solid #eee;
  border-bottom: 0;
}
.dynamic-box {
  margin-top: 10px;
}
.member-selector {
  position: absolute;
  right: 20px;
  top: 10px;
}
.dynamics {
  display: flex;
  flex-direction: column;
  min-height: 400px;
}
.dynamics-empty {
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 14px;
}
.dynamic,
.user-info a span {
  font-size: 13px;
  color: #999;
}
.time {
  margin-top: 10px;
}
.dynamic {
  padding: 24px 0;
  border-bottom: 1px solid #ebeef5;
}
.dynamic-top {
  position: relative;
  display: flex;
}
.avatar {
  --width: 48px;
  width: var(--width);
  height: var(--width);
  border-radius: 50%;
  margin-right: 10px;
}
.user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.user-info a {
  font-size: 14px;
  color: #1d2a3a;
  margin-bottom: 4px;
}
.dynamic-red {
  color: #ff5f00;
  font-size: 14px;
}
.dynamic-date {
  position: absolute;
  top: 10px;
  right: 0;
}
.dynamic-detail {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  font-size: 14px;
  color: #333;
}
.dynamic-detail > pre {
  margin-left: 58px;
  line-height: 24px;
}
.dynamic-detail > a {
  display: flex;
  align-items: center;
  margin: 10px 0 0 58px;
  color: var(--linkColor);
}
.annex {
  --width: 22px;
  width: var(--width);
  height: var(--width);
}
.filename {
  line-height: 22px;
}
.el-pagination {
  margin: 50px 0 30px;
  text-align: center;
}
</style>
