<template>
    <div class="random">
        <div class="option" style="margin-top: 10px; padding-bottom: 5px; width: 800px;">
            <div class="header">
                <div class="title" :style="{ fontSize: '16px' }">
                    <span>|</span>
                    <span>基本设置</span>
                </div>
                <slot name="optionRight">
                    <div >
                        <el-button size="mini" round icon="el-icon-arrow-left" @click="back">返回
                        </el-button>
                    </div>
                </slot>
            </div>
            <el-form label-position="left" ref="ruleSettingForm" label-width="160px">
                <el-form-item label="火灾高危单位数：">
                    <label>{{task.risk_num}}</label>
                </el-form-item>
                <div v-for="(item, index) in task.risk_tag" :key="'par1_' + index" :style="{marginTop: (index > 0 ? 5: -20) + 'px', border: '1px solid #F2F2F2', paddingLeft: '10px'}">
                    <el-collapse v-model="activeNames" 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="'sub1_' + 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>
                <el-form-item label="消防安全重点单位数">
                    <label>{{task.focus_num}}</label>
                </el-form-item>
                <div v-for="(item, index) in task.focus_tag" :key="'par2_' + index" :style="{marginTop: (index > 0 ? 5: -20) + 'px', border: '1px solid #F2F2F2', paddingLeft: '10px'}">
                    <el-collapse v-model="activeNames" style="border: none !important;">
                        <el-collapse-item :name="item.id">
                            <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="'sub2_' + 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>
                <el-form-item label="一般单位数">
                    <label>{{task.police_num}}</label>
                </el-form-item>
                <div v-for="(item, index) in task.police_tag" :key="'par3_' + index" :style="{marginTop: (index > 0 ? 5: -20) + 'px', border: '1px solid #F2F2F2', paddingLeft: '10px'}">
                    <el-collapse v-model="activeNames" 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="'sub3_' + 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>
                <el-form-item label="其他单位数">
                    <label>{{task.other_num}}</label>
                </el-form-item>
                <div v-for="(item, index) in task.other_tag" :key="'par4_' + index" :style="{marginTop: (index > 0 ? 5: -20) + 'px', border: '1px solid #F2F2F2', paddingLeft: '10px'}">
                    <el-collapse v-model="activeNames" 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="'sub4_' + 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>
            </el-form>
        </div>
        <div class="option" style="margin-top: 10px; padding-bottom: 5px; width: 800px;">
            <div class="header">
                <div class="title" :style="{ fontSize: '16px' }">
                    <span>|</span>
                    <span>时间设置</span>
                </div>
            </div>
            <el-form ref="timeForm" :model="timeForm" label-width="100px">
                <div v-for="(item, key) in task.random_execute_time" :key="'time_' + key" style="width: 640px; background-color: #F2F2F2; position: relative; margin-bottom: 10px;">
                    <div style="position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 50px solid #409EFF; border-right: 50px solid transparent;"></div>
                    <div style="position: absolute; top: 0; left: 0; font-size: 18px; color: #FFF; font-weight: bold; padding: 5px;">{{dateFormat('mm', new Date(item.task_month + '-01 00:00:00'))}}</div>
                    <div style="padding: 10px 50px; font-size: 14px;">{{buildTimeRange(item.task_month)}}</div>
                    <el-row type="flex" style="padding: 0 0;">
                        <el-col :span="12">
                            <el-form-item label="时间" required style="margin-bottom: 10px;">
                                <span>{{dateFormat('YYYY-mm-dd HH:MM:SS', new Date(item.task_execute_time))}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="检查占总比例" style="margin-bottom: 10px;">
                                <span>{{item.percent}}%</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>

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

export default {
    components: {
    },
    data() {
        return {
            dateFormat,
            taskId: 0,
            task: {},
            baseForm: {
                risk_num: null,
                focus_num: null,
                police_num: null,
                other_num: null
            },
            enforce_obj_count: {},
            timeForm: {},
            userStat: [],
            enforceStat: {},
            tags: {},
            tempTags: [],
            validTags: {},
            type: 0,
            showTagDialog: false,
            showNoticeDialog: false,
            timeRangeMap: {},
            activeNames: ['1']
        }
    },
    mounted() {
        this.taskId = this.$route.query.id
        this.loadRuleDetail()
    },
    methods: {
        back() {
            this.$router.back()
        },
        loadRuleDetail() {
            queryRuleDetail(this.taskId).then(res => {
                this.task = res
            })
        },
        showNoticeDetail() {
            let enforce_obj_id = this.enforce_obj_id
            this.$router.push({
                path: '/random/special/notice/detail',
                query: {
                    id: enforce_obj_id
                }
            })
        },
        buildTimeRange(month) {
          let begin = month + '-01 00:00:00'
          let endDate = new Date(begin)
          endDate.setMonth(endDate.getMonth() + 1)
          endDate.setSeconds(endDate.getSeconds() - 1)
          let end = dateFormat('YYYY-mm-dd HH:MM:SS', endDate)
          return begin + ' ~ ' + end
        }
    }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';

.option {
    padding: 16px 16px 0;
    background-color: #FFFFFF;
    border-radius: 10px;

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

    .title {
        color: #000000;
        margin-bottom: 15px;

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