<template>
    <d2-container>
        <div class="d2-table-view-full" style="overflow: hidden">
            <div class="d2-table-view-header">
                <el-form
                        size="small"
                        :inline="true"
                        :model="filter"
                        @keyup.enter.native="handleList"
                        class="demo-form-inline"
                        labelPosition="right"
                >
                    <el-form-item label="计费规则名称">
                        <el-input v-model.trim="filter.feeTypNm"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleList('1')">查询</el-button>
                    </el-form-item>

                </el-form>
            </div>
            <div class="d2-table-view-content">
                <div class="d2-table-view-handle">
                    <el-button @click="onCreateClick" size="small" icon="el-icon-plus">新增</el-button>
                    <el-button size="small" @click="onMutilDelClick">批量删除</el-button>
                </div>
                <d2-crud
                        title="计费规则"
                        ref="d2Crud"
                        :options="tableOptions"
                        :loading="loading"
                        :columns="columns"
                        :data="data"
                        :rowHandle="rowHandle"
                        @edit="handleRowEdit"
                        @delete="handleRowRemove"
                        selection-row
                        @selection-change="handleSelectionChange"
                >
                </d2-crud>
            </div>
            <div class="d2-table-view-footer">
                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :page-size="tableOptions.pageList[0]"
                        :page-sizes="tableOptions.pageList"
                        :current-page.sync="currentPage"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="pagination.total"
                ></el-pagination>
            </div>
        </div>
        <el-dialog
                :title="diaLogName"
                :visible.sync="operVisible"
                @close="clearForm"
                width="60%"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="120px" labelPosition="right" :rules="rules">
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item label="计费规则编号" prop="ruleId">
                            <el-input maxlength="50" disabled v-model.trim="form.ruleId" placeholder="系统自动生成"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="计费规则名称" prop="feeTypNm">
                            <el-input maxlength="25" v-model.trim="form.feeTypNm"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="免费分钟" prop="freeMin">
                            <el-input  v-model.trim="form.freeMin" placeholder="0"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="停车卡类型" prop="parkCardTyp">
                            <!--<el-input maxlength="50" v-model.trim="form.parkCardTyp"/>-->
                            <custom-select :value="form.parkCardTyp" v-model="form.parkCardTyp" typeName="停车卡类型" style="width: 100%"></custom-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                    <el-form-item label="区域名称" prop="areaCode">
                        <!--<el-input maxlength="50" v-model.trim="form.areaCode"/>-->
                        <el-select v-model="form.areaCode" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.areaId"
                                    :label="item.areaNm"
                                    :value="item.areaId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <el-checkbox v-model="form.isFreeCount">免费时间计费</el-checkbox>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="每日最高收费" prop="maxFee">
                        <el-input v-model.trim="form.maxFee" style="width: 100px" placeholder="0" type="number" min="0"></el-input> 元
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="收费类型" prop="feeTyp">
                            <el-radio v-model="form.feeTyp" label="标准收费" @change="changeFeeTyp">标准收费</el-radio>
                        <el-form-item label="标准收费(计费单位：元)"  label-width="200px">
                            <div class="timeBox">
                                <el-col :span="8">
                                    <el-form-item  prop="hrOne">
                                        1小时：<el-input v-model="form.hrOne" style="width: 100px" :disabled="isBiaozhun" type="Number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrNine">
                                         9小时：<el-input v-model="form.hrNine" style="width: 100px" class="timePay" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrOneSeven">
                                        17小时：<el-input v-model="form.hrOneSeven" style="width: 100px" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                            </div>
                            <div class="timeBox">
                                <el-col :span="8">
                                    <el-form-item  prop="hrTwo">
                                        2小时：<el-input v-model="form.hrTwo" style="width: 100px" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrOneZero">
                                        10小时：<el-input v-model="form.hrOneZero" style="width: 100px" class="timePay" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrOneEight">
                                        18小时：<el-input v-model="form.hrOneEight" style="width: 100px" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                            </div>
                            <div class="timeBox">
                                <el-col :span="8">
                                    <el-form-item  prop="hrThree">
                                        3小时：<el-input v-model="form.hrThree" style="width: 100px" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrOneOne">
                                        11小时：<el-input v-model="form.hrOneOne" style="width: 100px" class="timePay" :disabled="isBiaozhun" type="number" min="0"> </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrOneNine">
                                        19小时：<el-input v-model="form.hrOneNine" style="width: 100px" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                            </div>
                            <div class="timeBox">
                                <el-col :span="8">
                                    <el-form-item  prop="hrFour">
                                        4小时：<el-input v-model="form.hrFour" style="width: 100px" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrOneTwo">
                                        12小时：<el-input v-model="form.hrOneTwo" style="width: 100px" class="timePay" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrTwoZero">
                                        20小时：<el-input v-model="form.hrTwoZero" style="width: 100px" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                            </div>
                            <div class="timeBox">
                                <el-col :span="8">
                                    <el-form-item  prop="hrFive">
                                        5小时：<el-input v-model="form.hrFive" style="width: 100px" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrOneThree">
                                        13小时：<el-input v-model="form.hrOneThree" style="width: 100px" class="timePay" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrThreeOne">
                                        21小时：<el-input v-model="form.hrThreeOne" style="width: 100px" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                            </div>
                            <div class="timeBox">
                                <el-col :span="8">
                                    <el-form-item  prop="hrSix">
                                        6小时：<el-input v-model="form.hrSix" style="width: 100px" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrOneFour">
                                        14小时：<el-input v-model="form.hrOneFour" style="width: 100px" class="timePay" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrThreeTwo">
                                        22小时：<el-input v-model="form.hrThreeTwo" style="width: 100px" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                            </div>
                            <div class="timeBox">
                                <el-col :span="8">
                                    <el-form-item  prop="hrSeven">
                                        7小时：<el-input v-model="form.hrSeven" style="width: 100px" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrOneFive">
                                        15小时：<el-input v-model="form.hrOneFive" style="width: 100px" class="timePay" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrThreeThree">
                                        23小时：<el-input v-model="form.hrThreeThree" style="width: 100px" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                            </div>
                            <div class="timeBox">
                                <el-col :span="8">
                                    <el-form-item  prop="hrEight">
                                        8小时：<el-input v-model="form.hrEight" style="width: 100px" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrOneSix">
                                        16小时：<el-input v-model="form.hrOneSix" style="width: 100px" class="timePay" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item  prop="hrThreeFour">
                                        24小时：<el-input v-model="form.hrThreeFour" style="width: 100px" :disabled="isBiaozhun" type="number" min="0"></el-input>
                                    </el-form-item>
                                </el-col>
                            </div>
                        </el-form-item>
                            <el-radio v-model="form.feeTyp" label="按次收费" @change="changeFeeTyp">按次收费</el-radio>
                        <el-form-item label=" 按次收费(计费单位：元)" label-width="200px">
                            <el-radio  label=0 v-model="form.tollSts" :disabled="isAnci" @change="changeAnci">当天只收一次费</el-radio>
                            <br>
                            <el-radio  label=1 v-model="form.tollSts" :disabled="isAnci" @change="changeAnci">连续</el-radio> <el-input v-model="form.sucsionTm" style="width: 100px" :disabled="isAnciRadio1"  type="number" min="0"></el-input>小时只收一次费
                            <br>
                            <el-radio  label=2 v-model="form.tollSts" :disabled="isAnci" @change="changeAnci">按次收费</el-radio> 收费金额：<el-input v-model="form.seqMoney" style="width: 100px" :disabled="isAnciRadio2" type="number" min="0"></el-input>
                        </el-form-item>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <zl-button :loading="staLoading" @click="operInstance">保存</zl-button>
      </span>
        </el-dialog>
    </d2-container>
</template>
<script>
  import { tableOptions } from '@/assets/options'
  import {getCostRuleList,getAreaOptions,saveOrUpdateCostRules,getCostRuleById,onDeleteCostRules} from '@/api/parking/costRules'
  export default {
    name: 'system-staff',
    components: {

    },
    data () {
      let checkNumber = (rule, value, callback) => {
        if(!value&&value!==0){
          return callback(new Error('不能为空'))
        }
        let reg = /^[0-9]*$/
          if (!reg.test(value)) {
            return callback(new Error('请输入数字'))
          } else {
            callback ()
        }
      }
      return {
        isAnciRadio1:true,
        isAnciRadio2:true,
        isBiaozhun:false,
        isAnci:true,
        ruleId:[],
        ruleIds:"",
        options:[],
        stationId:[],
        stationIds:"",
        isCreate:false,
        userId:"",
        checkList:[],
        // classVisible:false,
        staLoading: false,
        multipleSelection:[],
        func: {
          add: false,
          delete: false,
          update: false,
          select: false
        },
        falg: true,
        isExpend: true,
        tableOptions,
        loading: false,
        operVisible: false,
        diaLogName: '计费规则设置',
        lanuchs: [],
        form: {
          ruleId:"",
          feeTypNm:"",
          freeMin:"",
          parkCardTyp:"",
          feeTyp:"标准收费",
          areaCode:"",
          isFreeCount:"",
          maxFee:"",
          hrOne:'0',
          hrTwo:'0',
          hrThree:'0',
          hrFour:'0',
          hrFive:'0',
          hrSix:'0',
          hrSeven:'0',
          hrEight:'0',
          hrNine:'0',
          hrOneZero:'0',
          hrOneOne:'0',
          hrOneTwo:'0',
          hrOneThree:'0',
          hrOneFour:'0',
          hrOneFive:'0',
          hrOneSix:'0',
          hrOneSeven:'0',
          hrOneEight:'0',
          hrOneNine:'0',
          hrTwoZero:'0',
          hrThreeOne:'0',
          hrThreeTwo:'0',
          hrThreeThree:'0',
          hrThreeFour:'0',
          chargeSts:'',
          sucsionSts:'',
          sucsionTm:'',
          seqSts:'',
          seqMoney:"",
          tollSts:""
        },
        filter: {
          pageSize: 10,
          pageNum: 1,
          feeTypNm: '',
        },
        pagination: {
          total: 0
        },
        currentPage: 1,
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        columns: [
          {
            title: '计费规则编号',
            key: 'ruleId',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '计费规则名称',
            key: 'feeTypNm',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '停车卡类型',
            key: 'paramData',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '区域名称',
            key: 'areaNm',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '收费类型',
            key: 'feeTyp',
            minWidth: '120',
            showOverflowTooltip: true
          },
        ],
        rowHandle: {
          columnHeader: '操作',
          minWidth: '180',
          align: 'center',
          custom: [
            {
              text: '编辑',
              type: 'primary',
              size: 'small',
              emit: 'edit'
            },
            {
              text: '删除',
              type: 'danger',
              size: 'small',
              emit: 'delete'
            }
          ]
        },
        data: [],
        rules: {
          feeTypNm:[{required: true, message: '计费规则名称不能为空', trigger: 'blur'}],
          freeMin:[{validator: checkNumber,required: true,trigger: 'blur'}],
          parkCardTyp:[{required: true, message: '请选择停车卡类', trigger: 'blur'}],
          areaCode:[{required: true, message: '请选择区域名称', trigger: 'blur'}],
          feeTyp:[{required: true, message: '请选择收费类型', trigger: 'blur'}],
        }
      }
    },
    methods: {
      changeAnci(){
        if(this.form.tollSts==1){
          this.isAnciRadio1=false
          this.isAnciRadio2=true
          this.$set(this.form,"seqMoney","")
        }else if(this.form.tollSts==2){
          this.isAnciRadio2=false
          this.isAnciRadio1=true
          this.$set(this.form,"sucsionTm","")
        }else{
          this.isAnciRadio1=true
          this.isAnciRadio2=true
          this.$set(this.form,"sucsionTm","")
          this.$set(this.form,"seqMoney","")
        }
      },
      changeFeeTyp(){
        if(this.form.feeTyp==="标准收费"){
          this.isBiaozhun=false
          this.isAnci=true
          this.isAnciRadio1=true
          this.isAnciRadio2=true
          this.form.tollSts=""
        }else{
          this.isBiaozhun=true
          this.isAnci=false
          // this.form.tollSts=0
          // this.$set(this.form,"tollSts",0)
          this.$set(this.form,"hrOne","0")
          this.$set(this.form,"hrTwo","0")
          this.$set(this.form,"hrThree","0")
          this.$set(this.form,"hrFour","0")
          this.$set(this.form,"hrFive","0")
          this.$set(this.form,"hrSix","0")
          this.$set(this.form,"hrSeven","0")
          this.$set(this.form,"hrEight","0")
          this.$set(this.form,"hrNine","0")
          this.$set(this.form,"hrOneZero","0")
          this.$set(this.form,"hrOneOne","0")
          this.$set(this.form,"hrOneTwo","0")
          this.$set(this.form,"hrOneThree","0")
          this.$set(this.form,"hrOneFour","0")
          this.$set(this.form,"hrOneFive","0")
          this.$set(this.form,"hrOneSix","0")
          this.$set(this.form,"hrOneSeven","0")
          this.$set(this.form,"hrOneEight","0")
          this.$set(this.form,"hrOneNine","0")
          this.$set(this.form,"hrTwoZero","0")
          this.$set(this.form,"hrThreeOne","0")
          this.$set(this.form,"hrThreeTwo","0")
          this.$set(this.form,"hrThreeThree","0")
          this.$set(this.form,"hrThreeFour","0")
        }
      },
      onCreateClick(){
        this.operVisible=true
        this.clearForm()
      },
      handleTreeNode () {
        this.handleList()
      },
      handleList (val) {
        if (val) {
          this.filter.pageNum = 1
          this.currentPage = 1
        }
        this.loading = true
        getCostRuleList(this.filter)
          .then(res => {
            // console.log(res)
            this.loading = false
            this.data = res.page.list
            this.pagination.total = res.page.total
          })
          .catch(err => {
            this.loading = false
          })
      },
      handleSelectionChange(val) {
        this.isCreate=false
        this.multipleSelection = val;
      },
      handleCurrentChange (val) {
        this.filter.pageNum = val
        this.handleList()
      },
      handleSizeChange (val) {
        this.filter.pageNum = 1
        this.filter.pageSize = val
        this.handleList()
      },
      operInstance (val) {
        // console.log(this.form.tollSts)
        this.$refs['form'].validate(valid => {
          if (valid) {
            if(this.form.feeTyp==="按次收费"){
              if(!this.form.tollSts){
                this.$message({
                  message: '请选择按次收费选项',
                  type: 'warning'
                })
                return
              }
              if(this.form.tollSts==1){
                if(parseInt(this.form.sucsionTm)<0||!this.form.sucsionTm){
                  this.$message({
                    message: '不能为空或负数',
                    type: 'warning'
                  })
                  return
                }
              }
              if(this.form.tollSts==2){
                // console.log(this.form.seqMoney)
                if(parseInt(this.form.seqMoney)<0||!this.form.seqMoney){
                  this.$message({
                    message: '收费金额不能为空或负数',
                    type: 'warning'
                  })
                  return
                }
              }
            }
            this.staLoading = true
            if(this.form.isFreeCount){
              this.form.isFreeCount="1"
            }else{
              this.form.isFreeCount="0"
            }
            saveOrUpdateCostRules(this.form).then(res => {
              this.staLoading = false
              this.operVisible = false
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.clearForm()
              this.handleTreeNode()
            }).catch(err => {
              this.staLoading = false
            })
          }
        })
      },
      handleRowEdit ({index, row}) {
        this.diaLogName = '修改'
        getCostRuleById({ruleId:row.ruleId}).then(res => {
          this.form = res.parkFeeRule
          this.changeFeeTyp()
          this.changeAnci()
          if(res.parkFeeRule.isFreeCount=="1"){
            // this.form.canOpen==true
            this.$set(this.form,'isFreeCount',true)
          }else{
            // this.form.canOpen==false
            this.$set(this.form,'isFreeCount',false)
          }
        })
        this.operVisible = true
      },
      onMutilDelClick(){
        if(!this.multipleSelection.length){
          this.$message({
            message: '请选择记录',
            type: 'warning'
          })
        }else{
          this.$confirm(`确定要删除选定的工作站吗?`, '确认操作', {
            confirmButtonText: '确定',
            cancelButtonText: '放弃',
            type: 'warning'
          }).then(() => {
            this.ruleId=[]
            this.multipleSelection.forEach((item,index)=>{
              this.ruleId.push(item.ruleId)
            })
            this.ruleIds=this.ruleId.join(",")
            onDeleteCostRules({ruleId:this.ruleIds}).then(res=>{
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.handleTreeNode()
            })
          })
        }
      },
      handleRowRemove ({index, row}) {
        // console.log(row)
        this.$confirm(`确定要删除当前工作站吗?`, '确认操作', {
          confirmButtonText: '确定',
          cancelButtonText: '放弃',
          type: 'warning'
        }).then(() => {
          onDeleteCostRules({ruleId:row.ruleId}).then(res=>{
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.handleTreeNode()
          })
        })
      },
      clearForm () {
        if (this.$refs['form']!==undefined) {
          this.$refs['form'].resetFields();
        }
        this.form = {
        feeTyp:"标准收费",
          hrOne:'0',
          hrTwo:'0',
          hrThree:'0',
          hrFour:'0',
          hrFive:'0',
          hrSix:'0',
          hrSeven:'0',
          hrEight:'0',
          hrNine:'0',
          hrOneZero:'0',
          hrOneOne:'0',
          hrOneTwo:'0',
          hrOneThree:'0',
          hrOneFour:'0',
          hrOneFive:'0',
          hrOneSix:'0',
          hrOneSeven:'0',
          hrOneEight:'0',
          hrOneNine:'0',
          hrTwoZero:'0',
          hrThreeOne:'0',
          hrThreeTwo:'0',
          hrThreeThree:'0',
          hrThreeFour:'0',
        }
        this.diaLogName = '新增'
      },
    },
    mounted () {
      this.changeFeeTyp()
      this.changeAnci()
      getAreaOptions().then((res)=>{
       this.options=res.list
      })
      this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions, 51)
      this.handleTreeNode()
    }
  }
</script>
<style>
    /*.timeBox{*/
        /*margin-top: 10px;*/
    /*}*/
    /*.timeBox .el-form-item__content{*/
        /*margin-top: 20px;*/
    /*}*/
    /*.timePay{*/
        /*margin-left: 8px;*/
    /*}*/
    /*.avatar-uploader .el-upload {*/
        /*border: 1px dashed #d9d9d9;*/
        /*border-radius: 6px;*/
        /*cursor: pointer;*/
        /*position: relative;*/
        /*overflow: hidden;*/
    /*}*/

    /*.avatar-uploader .el-upload:hover {*/
        /*border-color: #409eff;*/
    /*}*/

    /*.avatar-uploader-icon {*/
        /*font-size: 28px;*/
        /*color: #8c939d;*/
        /*width: 178px;*/
        /*height: 178px;*/
        /*line-height: 178px;*/
        /*text-align: center;*/
    /*}*/

    /*.avatar {*/
        /*width: 178px;*/
        /*height: 178px;*/
        /*display: block;*/
    /*}*/
    /*.timeLabel label{*/
        /*width: 110px !important;*/
    /*}*/
    /*.bankLabel label{*/
        /*font-size: 13px;*/
    /*}*/
    /*.el-form-item__label {*/
        /*text-align: left !important;*/
    /*}*/
    /*.d2-table-view{*/
        /*overflow: hidden;*/
    /*}*/
    /*.d2-table-view-content{*/
        /*height: 100%;*/
    /*}*/
    /*.el-table{*/
        /*height: 450px !important;*/
    /*}*/
</style>