<template>
    <div style="margin: 0 auto;">
        <el-card class="box-card" style="width: 800px;">
            <el-button size="mini" round icon="el-icon-arrow-left" @click="back">返回</el-button>
            <div style="color: #409EFF; font-size: 20px; font-weight: bold; text-align: center;">{{task.random_execute_time && task.random_execute_time.length > 0 ? task.random_execute_time[0].task_month : ''}}的抽查任务规则详情</div>
            <el-form label-position="left" ref="ruleSettingForm" label-width="160px">
                <el-form-item label="抽查生成时间：">
                    <label>{{task.random_execute_time && task.random_execute_time.length > 0 ? dateFormat('YYYY-mm-dd HH:MM:SS', new Date(task.random_execute_time[0].task_execute_time)) : ''}}</label>
                </el-form-item>
                <el-form-item label="火灾高危单位数：">
                    <label>{{task.risk_num}}</label>
                </el-form-item>
                <div v-for="(item, index) in task.risk_tag" :key="'risk_' + index" :style="{marginTop: (index > 0 ? 5: -20) + 'px', border: '1px solid #F2F2F2', paddingLeft: '10px'}">
                    <el-collapse v-model="activeNames['1'][index]" style="border: none !important;">
                        <el-collapse-item name="1">
                            <template slot="title">
                                <el-row style="width: 100%;">
                                    <el-col :span="18"><span style="color: #1B90FF; font-weight: bolder; margin-right: 8px;">|</span><span>{{item.tag_name}}</span>
                                    </el-col>
                                    <el-col :span="6" style="text-align: right; padding-right: 10px;"><span>{{item.percent}}%</span>
                                    </el-col>
                                </el-row>
                            </template>
                            <el-row v-for="(subItem, subIndex) in item.sub_tags" :key="subIndex" style="width: 100%;">
                                <el-col :span="18" style="padding-left: 25px;"><span>{{subItem.tag_name}}</span></el-col>
                                <el-col :span="6" style="text-align: right; padding-right: 30px;"><span>{{subItem.percent}}%</span></el-col>
                            </el-row>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <div :style="{marginTop: '5px', border: '1px solid #F2F2F2', paddingLeft: '10px'}">
                  <el-collapse style="border: none !important;">
                    <el-collapse-item name="1">
                      <template slot="title">
                        <el-row style="width: 100%;">
                          <el-col :span="18"><span
                              style="color: #1B90FF; font-weight: bolder; margin-right: 8px;">|</span><span>默认</span>
                          </el-col>
                          <el-col :span="6" style="text-align: right; padding-right: 10px;"><span>{{calcRemain(task.risk_tag)}}%</span>
                          </el-col>
                        </el-row>
                      </template>
                    </el-collapse-item>
                  </el-collapse>
                </div>
                <el-form-item label="消防安全重点单位数">
                    <label>{{task.focus_num}}</label>
                </el-form-item>
                <div v-for="(item, index) in task.focus_tag" :key="'focus_' + index" :style="{marginTop: (index > 0 ? 5: -20) + 'px', border: '1px solid #F2F2F2', paddingLeft: '10px'}">
                    <el-collapse v-model="activeNames['2'][index]" style="border: none !important;">
                        <el-collapse-item name="1">
                            <template slot="title">
                                <el-row style="width: 100%;">
                                    <el-col :span="18"><span
                                        style="color: #1B90FF; font-weight: bolder; margin-right: 8px;">|</span><span>{{item.tag_name}}</span>
                                    </el-col>
                                    <el-col :span="6" style="text-align: right; padding-right: 10px;"><span>{{item.percent}}%</span>
                                    </el-col>
                                </el-row>
                            </template>
                            <el-row v-for="(subItem, subIndex) in item.sub_tags" :key="subIndex" style="width: 100%;">
                                <el-col :span="18" style="padding-left: 25px;"><span>{{subItem.tag_name}}</span></el-col>
                                <el-col :span="6" style="text-align: right; padding-right: 30px;"><span>{{subItem.percent}}%</span></el-col>
                            </el-row>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <div :style="{marginTop: '5px', border: '1px solid #F2F2F2', paddingLeft: '10px'}">
                  <el-collapse style="border: none !important;">
                    <el-collapse-item name="1">
                      <template slot="title">
                        <el-row style="width: 100%;">
                          <el-col :span="18"><span
                              style="color: #1B90FF; font-weight: bolder; margin-right: 8px;">|</span><span>默认</span>
                          </el-col>
                          <el-col :span="6" style="text-align: right; padding-right: 10px;"><span>{{calcRemain(task.focus_tag)}}%</span>
                          </el-col>
                        </el-row>
                      </template>
                    </el-collapse-item>
                  </el-collapse>
                </div>
                <el-form-item label="一般单位数">
                    <label>{{task.police_num}}</label>
                </el-form-item>
                <div v-for="(item, index) in task.police_tag" :key="'police_' + index" :style="{marginTop: (index > 0 ? 5: -20) + 'px', border: '1px solid #F2F2F2', paddingLeft: '10px'}">
                    <el-collapse v-model="activeNames['3'][index]" style="border: none !important;">
                        <el-collapse-item name="1">
                            <template slot="title">
                                <el-row style="width: 100%;">
                                    <el-col :span="18"><span
                                        style="color: #1B90FF; font-weight: bolder; margin-right: 8px;">|</span><span>{{item.tag_name}}</span>
                                    </el-col>
                                    <el-col :span="6" style="text-align: right; padding-right: 10px;"><span>{{item.percent}}%</span>
                                    </el-col>
                                </el-row>
                            </template>
                            <el-row v-for="(subItem, subIndex) in item.sub_tags" :key="subIndex" style="width: 100%;">
                                <el-col :span="18" style="padding-left: 25px;"><span>{{subItem.tag_name}}</span></el-col>
                                <el-col :span="6" style="text-align: right; padding-right: 30px;"><span>{{subItem.percent}}%</span></el-col>
                            </el-row>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <div :style="{marginTop: '5px', border: '1px solid #F2F2F2', paddingLeft: '10px'}">
                  <el-collapse style="border: none !important;">
                    <el-collapse-item name="1">
                      <template slot="title">
                        <el-row style="width: 100%;">
                          <el-col :span="18"><span
                              style="color: #1B90FF; font-weight: bolder; margin-right: 8px;">|</span><span>默认</span>
                          </el-col>
                          <el-col :span="6" style="text-align: right; padding-right: 10px;"><span>{{calcRemain(task.police_tag)}}%</span>
                          </el-col>
                        </el-row>
                      </template>
                    </el-collapse-item>
                  </el-collapse>
                </div>
                <el-form-item label="其他单位数">
                    <label>{{task.other_num}}</label>
                </el-form-item>
                <div v-for="(item, index) in task.other_tag" :key="'other_' + index" :style="{marginTop: (index > 0 ? 5: -20) + 'px', border: '1px solid #F2F2F2', paddingLeft: '10px'}">
                    <el-collapse v-model="activeNames['4'][index]" style="border: none !important;">
                        <el-collapse-item name="1">
                            <template slot="title">
                                <el-row style="width: 100%;">
                                    <el-col :span="18"><span
                                        style="color: #1B90FF; font-weight: bolder; margin-right: 8px;">|</span><span>{{item.tag_name}}</span>
                                    </el-col>
                                    <el-col :span="6" style="text-align: right; padding-right: 10px;"><span>{{item.percent}}%</span>
                                    </el-col>
                                </el-row>
                            </template>
                            <el-row v-for="(subItem, subIndex) in item.sub_tags" :key="subIndex" style="width: 100%;">
                                <el-col :span="18" style="padding-left: 25px;"><span>{{subItem.tag_name}}</span></el-col>
                                <el-col :span="6" style="text-align: right; padding-right: 30px;"><span>{{subItem.percent}}%</span></el-col>
                            </el-row>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <div :style="{marginTop: '5px', border: '1px solid #F2F2F2', paddingLeft: '10px'}">
                  <el-collapse style="border: none !important;">
                    <el-collapse-item name="1">
                      <template slot="title">
                        <el-row style="width: 100%;">
                          <el-col :span="18"><span
                              style="color: #1B90FF; font-weight: bolder; margin-right: 8px;">|</span><span>默认</span>
                          </el-col>
                          <el-col :span="6" style="text-align: right; padding-right: 10px;"><span>{{calcRemain(task.other_tag)}}%</span>
                          </el-col>
                        </el-row>
                      </template>
                    </el-collapse-item>
                  </el-collapse>
                </div>
                <el-form-item label="设置备注">
                    <label>{{task.remark}}</label>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>

import {queryRuleDetail} from "@/api/random";
import {dateFormat} from "@/utils/tool";

export default {
    components: {},
    data() {
        return {
            loading: false,
            taskId: 0,
            task: {},
            activeNames: {
              '1': [],
              '2': [],
              '3': [],
              '4': []
            }
        }
    },
    computed: {},
    created() {
        this.taskId = this.$route.query.id
        this.loadRuleDetail(this.$route.query.id)
    },
    methods: {
        back() {
            this.$router.back()
        },
        dateFormat,
        loadRuleDetail(taskId) {
            queryRuleDetail(taskId).then(res => {
                this.task = res
                let activeNames = {}
                if (res.risk_tag && res.risk_tag.length > 0) {
                  let item = []
                  for (let index in res.risk_tag) {
                    item[index] = ['1']
                  }
                  activeNames['1'] = item
                }
                if (res.focus_tag && res.focus_tag.length > 0) {
                  let item = []
                  for (let index in res.focus_tag) {
                    item[index] = ['1']
                  }
                  activeNames['2'] = item
                }
                if (res.police_tag && res.police_tag.length > 0) {
                  let item = []
                  for (let index in res.police_tag) {
                    item[index] = ['1']
                  }
                  activeNames['3'] = item
                }
                if (res.other_tag && res.other_tag.length > 0) {
                  let item = []
                  for (let index in res.other_tag) {
                    item[index] = ['1']
                  }
                  activeNames['4'] = item
                }

                this.activeNames = activeNames
            })
        },
        calcRemain(tags) {
          let remain = 100
          if (tags && tags.length > 0) {
            for (let index in tags) {
              if (tags[index].percent) {
                remain -= tags[index].percent
              }
            }
          }

          return remain > 0 ? remain : 0
        }
    }
}
</script>

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

#container {
    width: 100%;
    height: 400px;
}
</style>
