<template>
    <div class="detail" v-loading="loading">
        <el-card>
            <el-row type="flex" slot="header">
                <el-col :span="12" class="option">
                    <div class="header">
                        <div class="title" :style="{ fontSize: '16px' }">
                            <span>|</span>
                            <span>{{notice.task_name}}</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div style="text-align: right;">
                        <div style="display: inline-block; color: #409EFF; font-size: 20px; font-weight: bolder;">总进度</div>
                        <div style="display: inline-block; margin: 0 10px;"><el-progress :text-inside="true" :stroke-width="15" :percentage="total_percent" style="width: 200px;"></el-progress></div>
                        <div style="display: inline-block;">{{total_done_job}}/{{total_doing_job + total_done_job}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col :span="12">
                    <el-form label-width="120px">
                        <el-form-item label="专项检查代号:">
                            <span>{{notice.task_code}}</span>
                        </el-form-item>
                        <el-form-item label="发布日期:">
                            <span>{{ dateFormat('YYYY-mm-dd HH:MM:SS', new Date(notice.create_time)) }}</span>
                        </el-form-item>
                        <el-form-item label="发布机构:">
                            <span>{{notice.enforce_org_name}}</span>
                        </el-form-item>
                        <el-form-item label="发布人:">
                            <span>{{notice.create_user_name}}</span>
                        </el-form-item>
                        <el-form-item label="持续时间:">
                            <span>{{notice.start_time}}~{{notice.end_time}}</span>
                        </el-form-item>
                        <el-form-item label="专项检查描述:">
                            <div v-html="notice.content"></div>
                        </el-form-item>
                        <el-form-item label="附件:">
                          <el-row>
                            <el-col v-for="(item, index) in notice.attachments" :key="index" :span="4" style="text-align: center;">
                              <div @click="downloadFile(item.id)">
                                <div>
                                  <el-image
                                      style="width: 50px; height: 50px"
                                      :src="buildFileImage(item.name)"
                                      fit="fit"></el-image>
                                </div>
                                <div>{{item.name}}</div>
                              </div>
                            </el-col>
                          </el-row>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                    <div style="margin-bottom: 5px;"><span style="color: #409EFF; font-weight: bolder; font-size: 20px;">各机构进度</span><span>(如专项检查持续多月，任务进度累计计算)</span></div>
                    <div v-for="(item, index) in progressList" :key="index" style="height: 30px;">
                        <div style="display: inline-block;">{{item.enforce_org_name}}</div>
                        <div style="display: inline-block; margin: 0 10px;"><el-progress :text-inside="true" :stroke-width="15" :percentage="item.percent" style="width: 200px;"></el-progress></div>
                        <div style="display: inline-block;">{{item.done_job_num}}/{{item.doing_job_num + item.done_job_num}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-button v-if="!notice_id" size="mini" round icon="el-icon-arrow-left" @click="back">返回</el-button>
        </el-card>
    </div>
</template>

<script>

import {queryRuleList, querySpecialNoticeDetail} from "@/api/random";
import {dateFormat} from "@/utils/tool";

export default {
    components: {},
    mixins: [],
    data() {
        return {
            loading: false,
            noticeId: 0,
            notice: {},
            progressList: [],
            total_doing_job: 0,
            total_done_job: 0,
            total_percent: 0,
            activeNames: ['1']
        }
    },
    props: {
      notice_id: {
        type: Number
      }
    },
    computed: {
    },
    mounted() {
        let noticeId = this.$route.query.id
        if (noticeId) {
          this.noticeId = noticeId
        } else {
          this.noticeId = this.notice_id
        }
        this.loadNoticeDetail()
        this.loadTaskProgress()
    },
    methods: {
        back() {
            this.$router.back()
        },
        dateFormat,
        loadNoticeDetail() {
            querySpecialNoticeDetail(this.noticeId).then(res => {
                this.notice = res
            })
        },
        loadTaskProgress() {
            let query = {
              page: 1,
              size: 1000,
              query: 'notify_id==' + this.noticeId
            }
            queryRuleList(query).then(res => {
              let progressList = res.data
              let total_doing_job = 0
              let total_done_job = 0
              for (let index in progressList) {
                let progress = progressList[index]
                total_doing_job += (progress.doing_job_num ? progress.doing_job_num : 0)
                total_done_job += (progress.done_job_num ? progress.done_job_num : 0)
                let percent = progress['doing_job_num'] + progress['done_job_num'] === 0 ? 0 : Math.round(progress['done_job_num'] * 100 / (progress['doing_job_num'] + progress['done_job_num']))
                progress['doing_job_num'] = (progress.doing_job_num ? progress.doing_job_num : 0)
                progress['done_job_num'] = (progress.done_job_num ? progress.done_job_num : 0)
                progress['percent'] = percent
              }
              this.total_doing_job = total_doing_job
              this.total_done_job = total_done_job
              this.total_percent = ((total_done_job + total_doing_job === 0) ? 0 : Math.round(total_done_job * 100 / (total_done_job + total_doing_job)))
              this.progressList = progressList
            })
        },
        buildFileImage(name) {
          if (/.(doc|docx)$/.test(name.toLowerCase())) {
            return require('@/assets/file/word.png')
          }
          if (/.(ppt|pptx)$/.test(name.toLowerCase())) {
            return require('@/assets/file/ppt.png')
          }
          if (/.(xls|xlsx)$/.test(name.toLowerCase())) {
            return require('@/assets/file/excel.png')
          }
          return require('@/assets/file/word.png')
        },
        downloadFile(id) {
          document.location.href = process.env.VUE_APP_API + '/v2/api/file/' + id
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.option {
    background-color: #FFFFFF;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .title {
        color: #000000;

        & > span:first-child {
            color: $blueColor;
            font-weight: bolder;
            margin-right: 8px;
        }
    }
}
</style>
