<template>
    <div class="random-rule-set-page">
        <el-tabs :value="tab" type="border-card">
            <el-tab-pane label="规则设置" name="1">
                <div class="option" style="margin-top: 10px; padding-bottom: 5px;">
                    <div class="header">
                        <div class="title" :style="{ fontSize: '16px' }">
                            <span>|</span>
                            <span>时间设置</span>
                        </div>
                    </div>
                    <el-form ref="timeForm" :model="timeForm" label-width="160px">
                        <el-form-item label="任务月份">
                            <el-date-picker
                                popper-class="random-rule-set"
                                v-model="timeForm.task_month"
                                type="month"
                                :default-value="(new Date())"
                                :picker-options="pickerOptions"
                                placeholder="选择任务月份">
                            </el-date-picker>
                            <span style="margin-left: 10px; color: red;">*任务月份不能选择历史月份</span>
                        </el-form-item>
                        <el-form-item label="抽查生成时间">
                            <el-date-picker
                                @change="loadEnforceStat"
                                v-model="timeForm.task_execute_time"
                                type="datetime"
                                :picker-options="pickerChkOptions"
                                format="yyyy-MM-dd HH:mm"
                                placeholder="选择抽查生成时间">
                            </el-date-picker>
                            <span style="margin-left: 10px; color: red;">*任务抽取生成时间不能超过最后一天22点</span>
                            <div v-if="enforceStat.flag > 0" style="padding: 0 10px; margin-top: 10px;">
                                <span style="color: #1B90FF;">当前满足单位抽取间隔总单位</span><span style="color: #1B90FF; font-size: 20px; font-weight: bolder;">{{enforceStat.focus_num + enforceStat.risk_num + enforceStat.police_num + enforceStat.other_num}}</span>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="option" style="margin-top: 10px; padding-bottom: 5px;">
                    <div class="header">
                        <div class="title" :style="{ fontSize: '16px' }">
                            <span>|</span>
                            <span>基本设置</span>
                        </div>
                    </div>
                    <el-form ref="baseForm" :model="baseForm" label-width="160px">
                        <el-form-item label="火灾高危单位数">
                            <el-input-number v-model.number="baseForm.risk_num" @blur="recalc(1)" style="width: 193px; margin-right: 10px;"></el-input-number>
                            <el-button @click="showTag(1)" type="primary">标签</el-button>
                            <span style="color: #1B90FF; margin-left: 5px;">满足抽取单位{{enforceStat.risk_num}}</span>
                            <span v-if="showTips && tipsInfo" style="color: #FF0000; margin-left: 5px;">今年还有{{tipsInfo.risk_num}}火灾高危单位未被抽取</span>
                            <div style="border: 1px dashed #1B90FF; border-radius: 5px; width: 170px; padding: 0 10px; margin-top: 10px;">
                              <span>当前预计抽取单位数</span><span style="color: #1B90FF; font-weight: bolder;">{{estimateNum.risk_num}}</span>
                            </div>
                        </el-form-item>
                        <el-form-item label="消防安全重点单位数">
                            <el-input-number v-model.number="baseForm.focus_num" @blur="recalc(2)" type="number" style="width: 193px; margin-right: 10px;"></el-input-number>
                            <el-button @click="showTag(2)" type="primary">标签</el-button>
                            <span style="color: #1B90FF; margin-left: 5px;">满足抽取单位{{enforceStat.focus_num}}</span>
                            <span v-if="showTips && tipsInfo" style="color: #FF0000; margin-left: 5px;">今年还有{{tipsInfo.focus_num}}消防安全重点单位未被抽取</span>
                            <div style="border: 1px dashed #1B90FF; border-radius: 5px; width: 170px; padding: 0 10px; margin-top: 10px;">
                              <span>当前预计抽取单位数</span><span style="color: #1B90FF; font-weight: bolder;">{{estimateNum.focus_num}}</span>
                            </div>
                        </el-form-item>
                        <el-form-item label="一般单位数">
                            <el-input-number v-model.number="baseForm.police_num" @blur="recalc(3)" type="number" style="width: 193px; margin-right: 10px;"></el-input-number>
                            <el-button @click="showTag(3)" type="primary">标签</el-button>
                            <span style="color: #1B90FF; margin-left: 5px;">满足抽取单位{{enforceStat.police_num}}</span>
                            <span v-if="showTips && tipsInfo" style="color: #FF0000; margin-left: 5px;">今年还有{{tipsInfo.police_num}}一般单位未被抽取</span>
                            <div style="border: 1px dashed #1B90FF; border-radius: 5px; width: 170px; padding: 0 10px; margin-top: 10px;">
                              <span>当前预计抽取单位数</span><span style="color: #1B90FF; font-weight: bolder;">{{estimateNum.police_num}}</span>
                            </div>
                        </el-form-item>
                        <el-form-item label="其他单位数">
                            <el-input-number v-model.number="baseForm.other_num" @blur="recalc(4)" type="number" style="width: 193px; margin-right: 10px;"></el-input-number>
                            <el-button @click="showTag(4)" type="primary">标签</el-button>
                            <span style="color: #1B90FF; margin-left: 5px;">满足抽取单位{{enforceStat.other_num}}</span>
                            <span v-if="showTips && tipsInfo" style="color: #FF0000; margin-left: 5px;">今年还有{{tipsInfo.other_num}}其他单位未被抽取</span>
                            <div style="border: 1px dashed #1B90FF; border-radius: 5px; width: 170px; padding: 0 10px; margin-top: 10px;">
                              <span>当前预计抽取单位数</span><span style="color: #1B90FF; font-weight: bolder;">{{estimateNum.other_num}}</span>
                            </div>
                        </el-form-item>
                        <el-form-item label="设置备注">
                            <el-input type="textarea" v-model="baseForm.remark" style="width: 273px;" maxlength="300" show-word-limit placeholder="请输入规则设置备注"></el-input>
                        </el-form-item>
                    </el-form>
                </div>

                <div>
                    <el-button @click="$router.back()">返回</el-button>
                    <el-button type="primary" @click="saveRule">确定</el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="限制参数" name="2">
                <div class="option" style="margin-top: 10px; padding-bottom: 5px;">
                    <div class="header">
                        <div class="title" :style="{ fontSize: '16px' }">
                            <span>|</span>
                            <span>单位抽取间隔</span>
                        </div>
                    </div>
                    <el-form ref="timeForm" :model="timeForm" label-width="120px">
                        <el-form-item label="单位抽间隔">
                            <label style="color: #409EFF; font-size: 20px; font-weight: bold;">{{randomLimit}}天</label>
                        </el-form-item>
                        <el-form-item label="参数设置源">
                            <label style="">{{(userInfo && userInfo.enforce_org_name) || ''}}</label>
                        </el-form-item>
                        <el-row type="flex" style="width: 522px; margin-left: 50px; background-color: #F2F2F2;">
                            <div style="width: 22px; background-color: #409EFF; color: #FFF; text-align: center; padding: 5px;">满足抽取数</div>
                            <el-col style="width: 100px; text-align: center; height: 95px; border-right: 2px solid white;">
                                <div style="font-weight: bolder; font-size: 22px; height: 50px; line-height: 50px;">{{enforceStat.risk_num + enforceStat.focus_num + enforceStat.police_num + enforceStat.other_num}}</div>
                                <div style="height: 45px; padding: 0 10px;">单位总数</div>
                            </el-col>
                            <el-col style="width: 100px; text-align: center; height: 95px; border-right: 2px solid white;">
                                <div style="font-weight: bolder; font-size: 22px; height: 50px; line-height: 50px;">{{enforceStat.risk_num}}</div>
                                <div style="height: 45px; padding: 0 10px;">火灾高危单位</div>
                            </el-col>
                            <el-col style="width: 100px; text-align: center; height: 95px; border-right: 2px solid white;">
                                <div style="font-weight: bolder; font-size: 22px; height: 50px; line-height: 50px;">{{enforceStat.focus_num}}</div>
                                <div style="height: 45px; padding: 0 10px;">消防安全重点单位</div>
                            </el-col>
                            <el-col style="width: 100px; text-align: center; height: 95px; border-right: 2px solid white;">
                                <div style="font-weight: bolder; font-size: 22px; height: 50px; line-height: 50px;">{{enforceStat.police_num}}</div>
                                <div style="height: 45px; padding: 0 10px;">一般单位</div>
                            </el-col>
                            <el-col style="width: 100px; text-align: center; height: 95px;">
                                <div style="font-weight: bolder; font-size: 22px; height: 50px; line-height: 50px;">{{enforceStat.other_num}}</div>
                                <div style="height: 45px; padding: 0 10px;">其他单位</div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="option" style="margin-top: 10px; padding-bottom: 5px;">
                    <div class="header">
                        <div class="title" :style="{ fontSize: '16px' }">
                            <span>|</span>
                            <span>人员参数</span>
                        </div>
                    </div>
                    <el-form ref="timeForm" :model="timeForm" label-width="120px">
                        <div style="margin-left: 50px;">职务参数</div>
                        <el-form-item label="状态" v-if="1 === 2">
                            <el-radio-group disabled>
                                <el-radio label="启用"></el-radio>
                                <el-radio label="未启用"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-table
                            :data="userStat"
                            border
                            style="margin-left: 50px; margin-top: -20px; width: 440px;">
                            <el-table-column
                                type="index"
                                label="#"
                                width="40">
                            </el-table-column>
                            <el-table-column
                                prop="role_name"
                                label="职务名称"
                                width="200">
                            </el-table-column>
                            <el-table-column
                                prop="user_num"
                                label="人数"
                                width="199">
                            </el-table-column>
                        </el-table>
                        <div style="margin-left: 50px; margin-top: 10px;">参与抽取人员</div>
                        <el-row type="flex" style=" width: 440px;margin-left: 50px; background-color: #F2F2F2;">
                            <el-col style="width: 110px; text-align: center; height: 95px; border-right: 2px solid white;">
                                <div style="font-weight: bolder; font-size: 22px; height: 50px; line-height: 50px;">
                                    {{userStat.reduce((pre, cur) => pre + cur.user_num, 0)}}
                                </div>
                                <div style="height: 45px; padding: 0 10px;">人员总数</div>
                            </el-col>
                            <el-col v-for="(item, index) in userStat" :key="index" style="width: 110px; text-align: center; height: 95px; border-right: 2px solid white;">
                                <div style="font-weight: bolder; font-size: 22px; height: 50px; line-height: 50px;">{{item.user_num}}</div>
                                <div style="height: 45px; padding: 0 10px;">{{item.role_name}}</div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-dialog :visible.sync="showTagDialog" v-if="showTagDialog" :title="'新增'" width="70%">
            <random-rule-setting-tag :enforce_obj_count="enforce_obj_count[type + '']" :type="type" :tags="tempTags"
                                     @handleCancel="showTagDialog = false" @handleSubmit="setTag"></random-rule-setting-tag>
        </el-dialog>
    </div>
</template>

<script>

import {statUser} from "@/api/base";
import {statEnforce} from "@/api/resource";
import {getTags, queryRuleLimit, saveRule, statBatchTag, statTag} from "@/api/random";
import RandomRuleSettingTag from './component/RandomRuleSettingTag.vue'
import {dateFormat} from "@/utils/tool";
import {auth} from "@/utils/auth";
import {Loading} from "element-ui";

export default {
    components: {
        RandomRuleSettingTag
    },
    mixins: [],
    data() {
        return {
            tab: '1',
            timeForm: {
                task_month: null,
                task_execute_time: null,
            },
            baseForm: {
                risk_num: 0,
                focus_num: 0,
                police_num: 0,
                other_num: 0,
                remark: ''
            },
            estimateNum: {
              risk_num: 0,
              focus_num: 0,
              police_num: 0,
              other_num: 0
            },
            pickerOptions: {
              disabledDate: time => {
                let newDate = new Date()
                newDate.setMonth(newDate.getMonth())
                newDate = new Date(dateFormat('YYYY-mm', newDate) + '-01 00:00:00')
                return time.getTime() < newDate.getTime()
              },
            },
            pickerChkOptions: {
              disabledDate: time => {
                let newDate = new Date()
                return time.getTime() < newDate.getTime()
              },
            },
            enforce_obj_count: {'1': {}, '2': {}, '3': {}, '4': {}},
            randomLimit: 0,
            userStat: [],
            enforceStat: {
              flag: 0,
              risk_num: 0,
              focus_num: 0,
              police_num: 0,
              other_num: 0
            },
            tags: {},
            tempTags: [],
            type: 0,
            showTagDialog: false,
            userInfo: {},
            showTips: false,
            tipsInfo: null,
        }
    },
    computed: {},
    created() {
      this.userInfo = auth.getUserInfo()
    },
    mounted() {
        this.userInfo = auth.getUserInfo()
        this.loadUserStat()
        this.loadEnforceStat()
        this.loadRandomLimit()
        this.loadTags()
    },
    methods: {
        loadUserStat() {
            statUser().then(res => {
                console.log("UserStat", res)
                this.userStat = res
            })
        },
        loadEnforceStat() {
            statEnforce({countType: 2, stat_date: this.timeForm.task_execute_time ? this.timeForm.task_execute_time : new Date()}).then(res => {
                console.log("EnforceStat", res)
                res.flag = 1
                this.enforceStat = res
            })

            const month = new Date().getMonth();
            if (month > 8) {
                this.showTips = true
                statEnforce({
                    countType: 3
                }).then(res => {
                    this.tipsInfo = res;
                })
            }
        },
        loadRandomLimit() {
            queryRuleLimit().then(res => {
                console.log("RuleLimit", res)
                if (res && res.limit) {
                    this.randomLimit = res.limit
                }
            })
        },
        loadTags() {
            getTags({page: 1, size: 1000, query: 'level==1'}).then(res => {
                if (res) {
                    // let tags = res.data.filter((cur, index, arr) => cur.sub_tags && cur.sub_tags.length > 0) || []
                    let tags = res.data
                    this.tags['1'] = JSON.parse(JSON.stringify(tags))
                    this.tags['2'] = JSON.parse(JSON.stringify(tags))
                    this.tags['3'] = JSON.parse(JSON.stringify(tags))
                    this.tags['4'] = JSON.parse(JSON.stringify(tags))

                    let tagIds = tags.map(item => item.id)
                    for (let index in tags) {
                        if (tags[index].sub_tags && tags[index].sub_tags.length > 0) {
                            let subTagIds = tags[index].sub_tags.map(item => item.id)
                            tagIds = tagIds.concat(subTagIds)
                        }
                    }
                }
            })
        },
        showTag(type) {
          let tags = this.tags[type + '']
          let tagIds = tags.map(item => item.id)
          for (let index in tags) {
            if (tags[index].sub_tags && tags[index].sub_tags.length > 0) {
              let subTagIds = tags[index].sub_tags.map(item => item.id)
              tagIds = tagIds.concat(subTagIds)
            }
          }
          let loading = Loading.service({ fullscreen: true, text: '正在加载'})
          let enforce_obj_count = {}
          let tasks = []
          for (let index in tagIds) {
            let tagId = tagIds[index]
            tasks.push(new Promise((resolve, reject) => {
              statTag(tagId, {enforce_obj_type: type, show_recent: false}).then(res => {
                console.log(tagId, res)
                enforce_obj_count[tagId + ''] = res.total
                resolve(res)
              })
            }))
          }
          Promise.all(tasks).then(res => {
            this.enforce_obj_count[type + ''] = enforce_obj_count
            this.type = type
            this.tempTags = this.tags[type + '']
            this.showTagDialog = true
            loading.close()
          })

          // statBatchTag({ids: tagIds.join(','), enforce_obj_type: type, show_recent: false}).then(res => {
          //   this.enforce_obj_count = JSON.parse(res.statics)
          // })
        },
        setTag(type, tags) {
            console.log(type, tags)
            let total_percent = 0
            for (let index in tags) {
              let tag = tags[index]
              total_percent += (tag.percent ? tag.percent : 0)

              if (tag.sub_tags && tag.sub_tags.length > 0) {
                let sub_total_percent = 0
                for (let subIndex in tag.sub_tags) {
                  let sub = tag.sub_tags[subIndex]
                  sub_total_percent += (sub.percent ? sub.percent : 0)
                }
                if (sub_total_percent > 100) {
                  this.$message.error('标签【' + tag.tag_name + '】下的子标签百分比之和不能大于100')
                  return
                }
              }
            }
            if (total_percent > 100) {
              this.$message.error('总的百分比不能大于100')
              return
            }
            this.tags[type + ''] = tags
            this.showTagDialog = false

            this.calcSelectCount(type, tags)

        },
        calcSelectCount(type, tags) {
          let estimateNum = Object.assign({}, this.estimateNum)
          if (type === 1) {
            let totalCount = 0
            let unsetTotalCount = 0;
            let totalPercent = 0
            for (let index in tags) {
              let tag = tags[index]
              let enforce_obj_count = this.enforce_obj_count[type + ''][tag.id + '']
              if (tag.percent) {
                let count = Math.min(Math.ceil(tag.percent * this.baseForm.risk_num / 100), enforce_obj_count)
                totalCount += count
                totalPercent += tag.percent
              } else {
                unsetTotalCount += enforce_obj_count
              }
            }
            if (totalPercent > 0) {
              unsetTotalCount = (totalPercent >= 100 ? 0 : Math.min(unsetTotalCount, Math.ceil((100 - totalPercent) * this.baseForm.risk_num / 100)))
              estimateNum.risk_num = Math.min(totalCount + unsetTotalCount, this.baseForm.risk_num, this.enforceStat.risk_num)
            } else {
              estimateNum.risk_num = Math.min(this.baseForm.risk_num, this.enforceStat.risk_num)
            }
          } else if (type === 2) {
            let totalCount = 0
            let unsetTotalCount = 0;
            let totalPercent = 0
            for (let index in tags) {
              let tag = tags[index]
              let enforce_obj_count = this.enforce_obj_count[type + ''][tag.id + '']
              if (tag.percent) {
                let count = Math.min(Math.ceil(tag.percent * this.baseForm.focus_num / 100), enforce_obj_count)
                totalCount += count
                totalPercent += tag.percent
              } else {
                unsetTotalCount += enforce_obj_count
              }
            }
            if (totalPercent > 0) {
              unsetTotalCount = (totalPercent >= 100 ? 0 : Math.min(unsetTotalCount, Math.ceil((100 - totalPercent) * this.baseForm.focus_num / 100)))
              estimateNum.focus_num = Math.min(totalCount + unsetTotalCount, this.baseForm.focus_num, this.enforceStat.focus_num)
            } else {
              estimateNum.focus_num = Math.min(this.baseForm.focus_num, this.enforceStat.focus_num)
            }
          } else if (type === 3) {
            let totalCount = 0
            let unsetTotalCount = 0;
            let totalPercent = 0
            for (let index in tags) {
              let tag = tags[index]
              let enforce_obj_count = this.enforce_obj_count[type + ''][tag.id + '']
              if (tag.percent) {
                let count = Math.min(Math.ceil(tag.percent * this.baseForm.police_num / 100), enforce_obj_count)
                totalCount += count
                totalPercent += tag.percent
              } else {
                unsetTotalCount += enforce_obj_count
              }
            }
            if (totalPercent > 0) {
              unsetTotalCount = (totalPercent >= 100 ? 0 : Math.min(unsetTotalCount, Math.ceil((100 - totalPercent) * this.baseForm.police_num / 100)))
              estimateNum.police_num = Math.min(totalCount + unsetTotalCount, this.baseForm.police_num, this.enforceStat.police_num)
            } else {
              estimateNum.police_num = Math.min(this.baseForm.police_num, this.enforceStat.police_num)
            }
          } else if (type === 4) {
            let totalCount = 0
            let unsetTotalCount = 0;
            let totalPercent = 0
            for (let index in tags) {
              let tag = tags[index]
              let enforce_obj_count = this.enforce_obj_count[type + ''][tag.id + '']
              if (tag.percent) {
                let count = Math.min(Math.ceil(tag.percent * this.baseForm.other_num / 100), enforce_obj_count)
                totalCount += count
                totalPercent += tag.percent
              } else {
                unsetTotalCount += enforce_obj_count
              }
            }
            if (totalPercent > 0) {
              unsetTotalCount = (totalPercent >= 100 ? 0 : Math.min(unsetTotalCount, Math.ceil((100 - totalPercent) * this.baseForm.other_num / 100)))
              estimateNum.other_num = Math.min(totalCount + unsetTotalCount, this.baseForm.other_num, this.enforceStat.other_num)
            } else {
              estimateNum.other_num = Math.min(this.baseForm.other_num, this.enforceStat.other_num)
            }
          }
          this.estimateNum = estimateNum
        },
        buildTag(tags) {
            let results = []
            for (let index in tags) {
                let tag = tags[index]
                if (tag.percent) {
                    let subTags = []
                    for (let subIndex in tag.sub_tags) {
                        let subTag = tag.sub_tags[subIndex]
                        if (subTag.percent) {
                            subTags.push({
                                tag_id: subTag.id,
                                tag_name: subTag.tag_name,
                                percent: subTag.percent,
                                tag_levet: subTag.level
                            })
                        }
                    }
                    results.push({
                        tag_id: tag.id,
                        tag_name: tag.tag_name,
                        percent: tag.percent,
                        tag_levet: tag.level,
                        sub_tags: subTags
                    })
                }
            }
            return results
        },
        recalc(type) {
            this.calcSelectCount(type, this.tags[type + ''])
            // let baseForm = JSON.parse(JSON.stringify(this.baseForm))
            // this.baseForm = baseForm
        },
        saveRule() {
            if (!this.timeForm.task_month) {
              this.$message.error('请选择任务月份')
              return
            }
            if (!this.timeForm.task_execute_time) {
              this.$message.error('请选择抽查生成时间')
              return
            }
            let begin = new Date(dateFormat('YYYY-mm-dd HH:MM:SS', this.timeForm.task_month))
            begin.setMonth(begin.getMonth())

            let end = new Date(dateFormat('YYYY-mm-dd HH:MM:SS', this.timeForm.task_month))
            end.setSeconds(end.getSeconds() - 1)
            end = new Date(dateFormat('YYYY-mm-dd', end) + ' 22:00:00')

            const newTime = this.timeForm.task_execute_time.getTime() + 24 * 3600 * 1000
            const nowMonth = new Date(this.timeForm.task_execute_time).getMonth()
            const newMonth = new Date(newTime).getMonth()
            if (nowMonth !== newMonth) {
              const hour = new Date(this.timeForm.task_execute_time).getHours()
              const min = new Date(this.timeForm.task_execute_time).getMinutes()
              const sec = new Date(this.timeForm.task_execute_time).getSeconds()
              if (hour > 22 || (hour == 22 && min > 0) || (hour == 22 && min == 0 && sec > 0)) {
                this.$message.error('任务抽取生成时间不能超过最后一天22点')
                return;
              }
            }
            // if (this.timeForm.task_execute_time.getTime() < begin.getTime() || this.timeForm.task_execute_time.getTime() > end.getTime()) {
            //   this.$message.error('任务抽取生成时间必须在目标任务前一个月内生成，且不能超过最后一天22点')
            //   this.$message.error('任务抽取生成时间不能超过最后一天22点')
            //   return;
            // }

            let risk_tags = this.buildTag(this.tags['1'])
            let focus_tags = this.buildTag(this.tags['2'])
            let police_tags = this.buildTag(this.tags['3'])
            let other_tags = this.buildTag(this.tags['4'])
            let params = {
                task_type: "0",
                ...this.baseForm,
                random_execute_time: [{
                    task_month: dateFormat('YYYY-mm', this.timeForm.task_month),
                    task_execute_time: this.timeForm.task_execute_time,
                    percent: 100
                }],
                risk_tag: risk_tags,
                focus_tag: focus_tags,
                police_tag: police_tags,
                other_tag: other_tags
            }
            console.log("RandomRule", params)
            saveRule(params).then(res => {
                this.$message.success('规则设置成功')
                this.$router.back()
            })
        }
    }
}
</script>
<style lang="scss">
.random-rule-set {
    .el-picker-panel__content {
        .el-month-table .today .cell {
            color: #606266;
            font-weight: normal;
        }
        .el-month-table .today.current .cell {
            color: #409EFF;
            font-weight: 700;
        }
    }
}
</style>
<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>
