<template>
  <div class="tab2">
    <!-- 代办业务 -->
    <criteria-paged :model="model" v-ref:cp>
      <criteria partial='criteria' @condition-changed='$parent.searchCondition' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>工程编号：</strong></label>
              <input type="text" style="width:60%" class="input_search" placeholder='工程编号' v-model="model.f_apply_num"
                     v-on:keyup.enter="$parent.$parent.search()"
                     condition="u.f_apply_num like '%{}%'">
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>客户名称：</strong></label>
              <input type="text" style="width:60%" class="input_search" v-model="model.f_user_name"
                     v-on:keyup.enter="$parent.$parent.search()" condition="f_user_name like '%{}%'" placeholder='客户名称'>
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>联系电话：</strong></label>
              <input type="text" style="width:60%" class="input_search" placeholder='联系电话' v-model="model.f_phone"
                     v-on:keyup.enter="$parent.$parent.search()"
                     condition="f_phone like '%{}%'">
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>联&ensp;系&ensp;人：</strong></label>
              <input type="text" style="width:60%" class="input_search" v-model="model.f_contact"
                     v-on:keyup.enter="$parent.$parent.search()" condition="f_contact like '%{}%'" placeholder='联系人'>
            </div>
            <div class="form-group col-sm-3 button-range">
              <button class="button_new button_spacing" style="width: max-content"
                      v-if="$parent.$parent.projectStart"
                      @click="$parent.$parent.apply()">工程发起</button>
              <export-excel :data="$parent.$parent.getCondition"
                               :field="$parent.$parent.getfield"
                               sqlurl="rs/logic/applyExportfile"
                               sql-name="checkuserExcel"
                               template-name='报建待办信息导出'
                               :choose-col="true"></export-excel>
              <button class="button_search button_spacing" @click="$parent.$parent.search()" v-el:cx>查询</button>
<!--              <button class="button_search button_spacing" @click="$parent.$parent.loadPage()">返回</button>-->
              <button class="button_clear button_spacing"  @click="$parent.$parent.clear()">清空</button>
              <div
                :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                @click="$parent.$parent.criteriaShow = !$parent.$parent.criteriaShow"
                class="button_spacing"
                style="float: right">
              </div>
            </div>
          </div>
          <div class="row" v-show="$parent.$parent.criteriaShow">
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>合同编号：</strong></label>
              <input type="text" style="width:60%" class="input_search" placeholder='合同编号' v-model="model.f_contract_number"
                     v-on:keyup.enter="$parent.$parent.search()"
                     condition="f_contract_number like '%{}%'">
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>报建类型：</strong></label>
              <v-select
                v-model="model.f_apply_type"
                placeholder='报建类型'
                condition="u.f_apply_type in {}"
                :value.sync="model.f_apply_type"
                :options='$parent.$parent.applytype'
                class="select select_list"
                multiple
                @change="$parent.$parent.applyTypeChange()" ></v-select>
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>办理环节：</strong></label>
              <v-select
                v-model="model.defname"
                placeholder='办理环节'
                condition="act.defname = '{}'"
                :value.sync="model.defname"
                :options='$parent.$parent.defnames'
                class="select select_list"
                :value-single="true"
                close-on-select ></v-select>
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>报建性质：</strong></label>
              <v-select
                v-model="model.f_apply_nature"
                placeholder='报建性质'
                condition="f_apply_nature = '{}'"
                :value.sync="model.f_apply_nature"
                :options='$parent.$parent.applyNatures'
                class="select select_list"
                :value-single="true"
                close-on-select ></v-select>
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>用户分类：</strong></label>
              <v-select
                v-model="model.f_user_classification"
                placeholder='用户分类'
                condition="f_user_classification = '{}'"
                :value.sync="model.f_user_classification"
                :options='$parent.$parent.UserList'
                class="select select_list"
                :value-single="true"
                close-on-select ></v-select>
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>用户类型：</strong></label>
              <v-select
                v-model="model.f_user_type"
                placeholder='普通/煤改'
                condition="f_user_type = '{}'"
                :value.sync="model.f_user_type"
                :options='$parent.$parent.UserType'
                class="select select_list"
                :value-single="true"
                close-on-select ></v-select>
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>设计人员：</strong></label>
              <v-select class="select select_list"
                        placeholder='设计人员'
                        v-model="model.f_designer_people"
                        :value.sync="model.f_designer_people"
                        :options='$parent.$parent.designerPeoples'
                        :value-single="true"
                        close-on-select
                        condition="f_designer_people = '{}'">
              </v-select>
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>用户地址：</strong></label>
              <input type="text" style="width:60%" class="input_search" placeholder='用户地址' v-model="model.f_address"
                     v-on:keyup.enter="$parent.$parent.search()"
                     condition="f_address like '%{}%'">
            </div>
<!--            <div class="form-group col-sm-2">-->
<!--              <label class="font_normal_body">日期类型：</label>-->
<!--              <v-select class="select select_list"-->
<!--                        placeholder='日期类型'-->
<!--                        v-model="model.f_date_type"-->
<!--                        :value.sync="model.f_date_type"-->
<!--                        :options='$parent.$parent.dateType'-->
<!--                        :value-single="true"-->
<!--                        @change="$parent.$parent.updateDateType()"-->
<!--                        close-on-select>-->
<!--              </v-select>-->
<!--            </div>-->
            <div class="form-group col-sm-2">
              <label  for="startDate" class="font_normal_body"><strong>开始时间：</strong></label>
              <datepicker id="startDate" placeholder="开始日期"
                          style="width: 60%!important;"
                          v-model="model.startDate"
                          :value.sync="model.startDate"
                          :format="'yyyy-MM-dd 00:00:00'"
                          :show-reset-button="true"
                          condition="sendtime >= '{}'">
              </datepicker>
            </div>
            <div class="form-group col-sm-2">
              <label for="endDate" class="font_normal_body"><strong>结束时间：</strong></label>
              <datepicker id="endDate" placeholder="结束日期"
                          style="width: 60%!important;"
                          v-model="model.endDate"
                          :value.sync="model.endDate"
                          :format="'yyyy-MM-dd 23:59:59'"
                          :show-reset-button="true"
                          condition="sendtime <= '{}'">
              </datepicker>
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>来&emsp;&emsp;源：</strong></label>
              <v-select
                v-model="model.f_apply_source"
                placeholder='来源'
                condition="u.f_apply_source = '{}'"
                :value.sync="model.f_apply_source"
                :options='$parent.$parent.sources'
                class="select select_list"
                :value-single="true"
                close-on-select >
              </v-select>
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>保存状态：</strong></label>
              <v-select
                v-model="model.f_sub_save_state"
                placeholder='保存状态'
                condition="u.f_sub_save_state = '{}'"
                :value.sync="model.f_sub_save_state"
                :options='$parent.$parent.save_states'
                class="select select_list"
                :value-single="true"
                close-on-select >
              </v-select>
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>新旧报建：</strong></label>
              <v-select
                v-model="model.f_house_type"
                placeholder='新旧报建'
                condition="u.f_house_type  {}"
                :value.sync="model.f_house_type"
                :options='$parent.$parent.houseType'
                class="select select_list"
                :value-single="true"
                close-on-select >
              </v-select>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid v-if="$parent.showData" :model="model" partial='list' v-ref:grid class="list_area table_sy" style="height: 100%">
        <template partial='head'>
          <tr>
            <th style="white-space: nowrap;">序号</th>
            <th style="white-space: nowrap;">完成状态</th>
            <th style="white-space: nowrap;">工程编号</th>
            <th style="white-space: nowrap;">客户名称</th>
            <th style="white-space: nowrap;">联系人</th>
            <th style="white-space: nowrap;">电话</th>
            <th style="white-space: nowrap;">地址</th>
            <th style="white-space: nowrap;">合同编号</th>
            <th style="white-space: nowrap;">报建类型</th>
            <th style="white-space: nowrap;">报建性质</th>
            <th style="white-space: nowrap;">用户类型</th>
            <th style="white-space: nowrap;">办理环节</th>
            <th style="white-space: nowrap;">安装户数</th>
            <th style="white-space: nowrap;">设计人员</th>
            <th style="white-space: nowrap;">来源</th>
            <th style="white-space: nowrap;">流程状态</th>
            <th style="white-space: nowrap;">流程开始时间</th>
          </tr>
        </template>
        <template partial='body'>
          <tr >
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{$index+1}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_sub_save_state}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_apply_num}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_user_name}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_contact}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_phone}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_address}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_contract_number}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_apply_type}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_apply_nature}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_user_type}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.defname}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_install_count}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_designer_people}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_apply_source}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_sub_state}}</font></nobr>
            </td>
            <td @dblclick="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.sendtime}}</font></nobr>
            </td>
<!--            <td @click="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">-->
<!--              <dropdown>-->
<!--                <button type="button" data-toggle="dropdown" style="border: 0px;background: none;">-->
<!--                  <span class="glyphicon glyphicon-th-list" style="position: inherit;"></span>-->
<!--                </button>-->
<!--                <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-right">-->
<!--                  <li>-->
<!--                    <a href="#" @click="$parent.$parent.$parent.click(row)">{{row.defname}}</a>-->
<!--                  </li>-->
<!--                </ul>-->
<!--              </dropdown>-->
<!--            </td>-->
          </tr>
        </template>
      </data-grid>
    </criteria-paged>

    <modal
      v-if="showModal"
      :show.sync="showModal"
      backdrop="false"
      title="工程类型"
      cancel-text="取消"
      ok-text="确认"
      :callback="apply"
    >
      <div class="form-horizontal" slot="modal-body">
        <div class="form-group" style="margin: 10px auto">
          <label class="col-sm-3 control-label">报建类型：</label>
          <div class="col-sm-9">
            <v-select
              v-model="applyType"
              placeholder='请选择需要发起的工程类型'
              :value.sync="applyType"
              :options='$appdata.getParam("报建类型")'
              :value-single="true"
              class="select select_list"
              :search="false"
              close-on-select ></v-select>
          </div>
        </div>
      </div>
    </modal>
  </div>
</template>
<script>
import {HttpResetClass, PagedList} from 'vue-client'
import {isEmpty} from '../../Util'

export default {
  title: '工程列表',
  props: ['showData', 'dataname'],
  data () {
    return {
      model: new PagedList('rs/sql/checkuser', 20, {
        data: {
          userid: this.$login.f.id,
          f_filiale: "榆林."+this.$login.f.orgs
        }
      }),
      showModal: false, // 控制发起类型选择
      applyType: this.dataname,  // 报建类型
      applytype: [{label: '全部', value: ''}, ...this.$appdata.getParam('报建类型')?this.$appdata.getParam('报建类型'):[]],
      defnames: isEmpty(this.$appdata.getParam('办理环节')) ? [{label: '全部', value: ''}] : [{label: '全部', value: ''}, ...this.$appdata.getParam('办理环节')?this.$appdata.getParam('办理环节'):[]], // 流程节点
      applyNatures: [{label: '全部', value: ''},{label: '工业', value: '工业'},{label: '商业', value: '商业'},{label: '散户', value: '散户'},{label: '小区', value: '小区'},{label: '分户挂表', value: '分户挂表'}], // 报建性质
      save_states: [{label: '全部', value: ''},{label: '已完成', value: '已完成'},{label: '已退回', value: '已退回'}], // 报建性质
      designerPeoples:  this.getDesigner(),
      UserList:[{label: '全部', value: ''}, ...this.$appdata.getParam('用户分类')?this.$appdata.getParam('用户分类'):[]],
      UserType:[{label: '全部', value: ''}, {label: '普通用户', value: '普通用户'}, {label: '煤改用户', value: '煤改用户'}],
      houseType:[{label: '全部', value: ''}, {label: '旧报建', value: ` = '旧报建导入'`}, {label: '新报建', value: ' is null' }],
      // dateType: [{label: '默认', value: ''}, ...this.$appdata.getParam('日期类型')],
      criteriaShow: false,
      sources:[{label: '微信公众号', value: '微信公众号'},{label: '线下发起', value: '线下发起'}],
      getfield: {
        'f_apply_num': ' 工 程 编 号 ',
        'f_user_name': '  客 户 名 称  ',
        'f_contact': ' 联 系 人 ',
        'f_phone': '   电   话   ',
        'f_user_type': '   用户类型   ',
        'f_user_classification': ' 用户分类 ',
        'f_address': '     地     址     ',
        'f_apply_type': ' 报 建 类 型 ',
        'f_apply_nature': ' 报 建 性 质 ',
        'defname': ' 办 理 环 节 ',
        'f_install_count': ' 安装户数 ',
        'f_designer_people':' 设计人员 ',
        'f_construction_name':' 安 装 单 位 ',
        'f_charge_date':'缴费时间'
      }
    }
  },
  ready () {
    // 调用查询
    this.search()
  },
  methods: {
    // 点击操作
    click (val) {
      this.$dispatch('apply', val)
    },
    // 获取流程id
    async getProcessId(processname) {
      let data = {
        workname: processname
      }
      let http = new HttpResetClass()
      let res = await http.load(
        'POST',
        'rs/logic/getProcessId',
        {data: data},
        {resolveMsg: null, rejectMsg: '流程标识获取失败！！！'}
      )

      return res.data
    },
    // 报装申请
    async apply () {
      if (this.applyType === '' || this.applyType === null) {
        this.$showMessage('请选择需要发起的类型')
        return
      }
      let data = {
        f_apply_type: this.applyType
      }
      if (this.getLoginDepartment){
        if (this.applyType === '民用报建') {
          data.processname = '民用报建流程'
          data.defname = '报装申请'
        } else if (this.applyType === '非民用报建') {
          data.processname = '非民用报建流程'
          data.defname = '报装申请'
        } else if (this.applyType === '分户挂表') {
          data.processname = '分户挂表报建流程'
          data.defname = '报装申请'
        } else if (this.applyType === '设备变更') {
          data.processname = '设备变更流程'
          data.defname = '报装申请'
        } else if (this.applyType === '设备拆除') {
          data.processname = '设备拆除流程'
          data.defname = '报建受理'
        } else {
          this.$showMessage('您没有权限办理此业务，或者暂无此类报装')
          return
        }
      }else if (this.$login.f.rolesnames.includes('工程部派工')){
        if (this.applyType === '改线业务') {
            data.processname = '改线业务流程'
            data.defname = '报装申请'
          } else {
          this.$showMessage('您没有权限办理此业务，或者暂无此类报装')
          return
        }
      } else {
        this.$showMessage('您没有权限办理此业务，或者暂无此类报装')
        return
      }

      data.f_sub_state = "新增"
      data.f_apply_source = "线下发起"
      data.f_process_id = await this.getProcessId(data.processname)

      // 调用ExplorationUser事件
      this.$dispatch('apply', data)

      // this.applyType = null
      this.showModal = false
    },
    loadPage () {
      this.$dispatch('loadPage')
    },
    searchCondition (args) {
      args.condition = args.condition
      if (args.condition.includes('民用报建')) {
        args.condition = args.condition.replace('f_apply_type = \'民用报建\'', '(f_apply_type = \'民用报建\' or f_apply_type = \'分户挂表\')');
      }
      if (this.dataname){
        args.condition += ` and f_apply_type = '${this.dataname}'`
      }
      // if (this.$login.f.rolesnames.includes('工程队派工')){
      //   args.condition = args.condition + ` and ((f_construction_unit = ${this.$login.f.id} and act.defname = '工程队派工' )or act.defname <> '工程队派工')`
      // }
      console.log("args.condition",args.condition)
      this.model.search(args.condition, args.model)

      console.log("当前数据",this.model)
    },
    search () {
      this.$dispatch('search')
    },
    async applyTypeChange () {
      if (!isEmpty(this.$refs.cp.$refs.cri.model.f_apply_type)) {
        let http = new HttpResetClass()
        let res = await http.load('POST', 'rs/logic/getDefnameByType', {
            f_apply_type: this.$refs.cp.$refs.cri.model.f_apply_type},
          {resolveMsg: null, rejectMsg: '流程标识获取失败！！！'}
        )
        this.defnames = [{label: '全部', value: ''}, ...res.data]
      } else {
        this.defnames = isEmpty(this.$appdata.getParam('办理环节')) ? [{label: '全部', value: ''}] : [{label: '全部', value: ''}, ...this.$appdata.getParam('办理环节')]
      }
    },
    async getDesigner() {
      let data = {
        source: 'this.getParentByType($organization$).getChildByName($设计人员$).getChildren()',
        userid: this.$login.f.id
      }
      let http = new HttpResetClass()
      let res = await http.load(
        'POST',
        'rs/search',
        {data: data},
        {resolveMsg: null, rejectMsg: '设计人员人员查询失败！！！'}
      )
      console.log("ces",res.data.map(item => {
        return {
          label: item.name,
          value: item.name
        }
      }))
      this.designerPeoples = res.data.map(item => {
        return {
          label: item.name,
          value: item.name
        }
      })
    },
    clear () {
      Object.keys(this.$refs.cp.$refs.cri.model).forEach((key) => {
        this.$refs.cp.$refs.cri.model[key] = null
        this.$refs.cp.$refs.cri.model.f_apply_type = []
      })
    }
  },
  computed: {
    projectStart () {
      return this.$login.r.includes('报建发起')
    },
    getLoginDepartment(){
      return this.$login.f.rolesnames.includes('市场部报装')
    },
    getCondition () {
      return {
        condition: this.$refs.cp.$refs.cri.condition,
        data: {
          userid: this.$login.f.id,
          f_filiale: "榆林."+this.$login.f.orgs
        }
      }
    }
  },
  watch: {
    // 'model.rows': {
    //   handler: function () {
    //     let isover = []           // 过期(超时)数据
    //     let isbeforeover = []     // 未过期 提前提醒
    //     for (let i = 0; i < this.model.rows.length; i++) {
    //       let item = this.model.rows[i]
    //       if (item.isover === '过期') {
    //         isover.push(i + 1)
    //       }
    //       if (item.isbeforeover === '预期提醒') {
    //         isbeforeover.push(i + 1)
    //       }
    //     }
    //     let msg1 = null
    //     let msg = null
    //     if (isover.length > 0) {
    //       msg1 = `第${isover.toString()}条数据已过期`
    //     }
    //
    //     if (isbeforeover.length > 0) {
    //       msg = `第${isbeforeover.toString()}条数据即将过期`
    //       this.$showAlert(msg, 'warning', 3000)
    //       if (isover.length > 0) {
    //         setTimeout(() => {
    //           this.$showAlert(msg1, 'warning', 3000)
    //         }, 2000)
    //       } else {
    //         if (isover.length > 0) {
    //           this.$showAlert(msg1, 'warning', 3000)
    //         }
    //
    //       }
    //     }
    //   }
    // }
  },
  events: {
  }
}
</script>
<style scoped>

.p1 {
  color: #dc0b12;
  font-weight:bold
}
.p {
  color: #ffaf4f;
}
.tab2{
  padding: 0.4%;
  border-radius: 14px;
  box-shadow: 0px 1px 10px 0px rgba(2, 56, 104, 0.13);
  background-color: #ffffff !important;
}
</style>
