<!--检查项统计--->
<template>
  <div class="page-container checkItem">
    <div class="page-container checkItem" v-if="pageType == 1">
      <div class="page-top-title-box">
        <p class="page-top-title-name-p">{{propsData.title}}</p>
        <p class="page-top-title-out-p" @click="backPage">返回</p>
      </div>
      <div class="tabs">
        <div class="tabs-li" :class="tabsIndex==index?'color-B':'color-A'" @click="tabsClick(index)"
             v-for="(item,index) in tabsList">
          <p>{{index+1}}</p>
          <p>{{item}}</p>
        </div>
      </div>
      <div class="content-box scrollbar-box">
        <div class="page-form-title-box" style="border:none;">
          <el-form :model="queryParams" class="form-box" ref="queryForm"
                   :inline="true" style="width:100%;">
            <div class="table-school-college-toggle-box">
              <p :class="rectifyStatus==null?'p-check':''" @click="tableCheck(null)">全部</p>
              <p :class="rectifyStatus==1?'p-check':''" @click="tableCheck(1)">已整改</p>
              <p :class="rectifyStatus==0?'p-check':''" @click="tableCheck(0)">未整改</p>
            </div>
            <el-form-item label="" prop="deptId" v-if="propsData.checkCategory == 1&&propsData.planId || (propsData.checkCategory == 1&&!propsData.planId&&!propsData.deptId&&!propsData.subId)">
              <el-select v-model="queryParams.deptId" placeholder="学院单位" style="width: 120px">
                <el-option
                  v-for="dict in optionList"
                  :key="dict.deptId"
                  :label="dict.deptName"
                  :value="dict.deptId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="subName" v-if="propsData.checkCategory == 2&&propsData.planId || (propsData.checkCategory == 2&&!propsData.subId)">
              <el-input
                maxLength="20"
                v-model="queryParams.subName"
                placeholder="实验室/房间号"
                style="width: 120px"
              />
            </el-form-item>
            <el-form-item label="" prop="hazardCheckPro2" v-if="tabsIndex==1">
              <el-cascader
                style="width: 150px"
                placeholder="检查指标"
                v-model="queryParams.hazardCheckPro2"
                filterable
                :show-all-levels="false"
                :options="cascaderDataTwo"
                :props="{ value: 'id', label: 'labelName',emitPath:false }"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="" prop="hazardCheckPro" v-if="tabsIndex==2">
              <el-cascader
                style="width: 150px"
                placeholder="检查指标"
                v-model="queryParams.hazardCheckPro"
                filterable
                :show-all-levels="false"
                :options="cascaderData"
                :props="{ value: 'id', label: 'labelName',emitPath:false }"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="" prop="searchValue" v-if="tabsIndex != 0">
              <el-input
                maxLength="20"
                v-model="queryParams.searchValue"
                placeholder="模糊搜索检查指标项"
                style="width: 160px"
              />
            </el-form-item>
            <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
            <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
            <div class="num-data-box">
              {{formTitleData}}
            </div>
            <p class="page-submit-common-style-button"
               style="float: right;"
               @click="tableButton(1)"

            >数据刷新</p>
            <el-form-item style="float: right;">
              <export-component :exportConfig="exportConfig"></export-component>
            </el-form-item>
          </el-form>
        </div>
        <div class="main">
          <div class="main-l" v-if="tabsIndex==0">
            <div class="main-title">隐患分布图</div>
            <div class="hiddenDanger" id="hiddenDanger-box" v-if="eChartsList[0]"></div>
            <p v-if="!eChartsList[0]" style="color:#999;text-align: center;line-height:200px;">暂无数据</p>
          </div>
          <div class="main-r">
            <div class="main-title">隐患统计表</div>
            <div class="page-content-box" style="padding-top:0;" v-if="tabsIndex==0">
              <el-table class="table-box" v-loading="loading" border ref="table-box" :data="dataList"
                        @selection-change="handleSelectionChange" :row-key="getRowKeysOne"
                        @sort-change="sortChange">
                <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
                <el-table-column label="序号" type="index" width="60"/>
                <el-table-column label="条款号" prop="oneLevelCode" width="100" show-overflow-tooltip/>
                <el-table-column label="一级检查项" prop="oneLevelName" show-overflow-tooltip/>
                <el-table-column label="隐患数" sortable="custom" prop="hazardNum" width="160" show-overflow-tooltip/>
                <el-table-column label="占比" prop="ratio" width="160" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{scope.row.ratio?scope.row.ratio+'%':''}}
                  </template>
                </el-table-column>
                <el-table-column label="二级检查项数量" prop="twoLevelNum" width="160" show-overflow-tooltip/>
                <el-table-column label="三级检查项数量" prop="threeLeveNum" width="160" show-overflow-tooltip/>
              </el-table>
              <pagination :page-sizes="[20, 30, 40, 50]"
                          v-show="total>0"
                          :total="total"
                          :page.sync="queryParams.page"
                          :limit.sync="queryParams.pageSize"
                          @pagination="getList"
              />
            </div>
            <div class="page-content-box" style="padding-top:0;" v-if="tabsIndex==1">
              <el-table class="table-box" v-loading="loading" border ref="table-box" :data="dataList"
                        @selection-change="handleSelectionChange" :row-key="getRowKeysTwo"
                        @sort-change="sortChange">
                <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
                <el-table-column label="序号" type="index" width="60"/>
                <el-table-column label="条款号" prop="twoLevelCode" width="100" show-overflow-tooltip/>
                <el-table-column label="二级检查项" prop="twoLevelName" show-overflow-tooltip/>
                <el-table-column label="隐患数" sortable="custom" prop="hazardNum" width="160" show-overflow-tooltip/>
                <el-table-column label="占比" prop="ratio" width="160" show-overflow-tooltip/>
              </el-table>
              <pagination :page-sizes="[20, 30, 40, 50]"
                          v-show="total>0"
                          :total="total"
                          :page.sync="queryParams.page"
                          :limit.sync="queryParams.pageSize"
                          @pagination="getList"
              />
            </div>
            <div class="page-content-box" style="padding-top:0;" v-if="tabsIndex==2">
              <el-table class="table-box" v-loading="loading" border ref="table-box" :data="dataList"
                        @selection-change="handleSelectionChange" :row-key="getRowKeysThree"
                        @sort-change="sortChange">
                <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
                <el-table-column label="序号" type="index" width="60"/>
                <el-table-column label="条款号" prop="threeLevelCode" width="100" show-overflow-tooltip/>
                <el-table-column label="三级检查项" prop="threeLevelName" show-overflow-tooltip/>
                <el-table-column label="隐患数" sortable="custom" prop="hazardNum" width="160" show-overflow-tooltip/>
                <el-table-column label="占比" prop="ratio" width="160" show-overflow-tooltip/>
              </el-table>
              <pagination :page-sizes="[20, 30, 40, 50]"
                          v-show="total>0"
                          :total="total"
                          :page.sync="queryParams.page"
                          :limit.sync="queryParams.pageSize"
                          @pagination="getList"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getDeptDropList,
  } from '@/api/commonality/permission'
  import {
    securityCheckOptionList,
    securityCheckDangerTodayDangerList,
    reportHazardItemsOneReportRefresh,
    reportHazardItemsTwoReportRefresh,
    reportHazardItemsThreeReportRefresh,
    reportHazardItemsOneReportPie,
    reportHazardItemsOneReportList,
    reportHazardItemsTwoReportPie,
    reportHazardItemsTwoReportList,
    reportHazardItemsThreeReportPie,
    reportHazardItemsThreeReportList,
    reportHazardItemsOneReportListCollege,
    reportHazardItemsOneReportPieCollege,
    reportHazardItemsTwoReportListCollege,
    reportHazardItemsTwoReportPieCollege,
    reportHazardItemsThreeReportListCollege,
    reportHazardItemsThreeReportPieCollege,
  } from "@/api/safetyCheck/index";
  import echarts from 'echarts'
  import exportComponent from "@/views/safetyCheck/components/exportComponent/exportComponent.vue";

  export default {
    name: 'checkItem',
    components: {
      exportComponent
    },
    props: {
      propsData: {}
    },
    data() {
      return {
        //导出配置
        exportConfig: {
          api:'',             //导出接口地址
          ids:'',                                       //勾选导出,勾选的IDS
          fileName:'',                         //导出文件的命名
          screenData:{},
        },
        //页面状态
        pageType: 1,
        //状态选项卡
        rectifyStatus: null,
        //页面遮罩
        loading: false,
        //学院列表
        optionList: [],
        //检查指标列表
        cascaderData:[],
        cascaderDataTwo:[],
        //查询条件
        queryParams: {
          page: 1,
          pageSize: 20,
          deptId: null,
          sort:'',
          hazardCheckPro2:null,
          hazardCheckPro:null,
          searchValue:'',
          subName:'',
        },
        //查询头部数据
        formTitleData:'',
        tabsList: ['一级指标隐患分布', '二级指标隐患分布', '三级指标隐患分布'],
        tabsIndex: 0,
        //列表数据
        dataList: [],
        //图标数据
        eChartsList:[],
        //数据数量
        total: 0
      }
    },
    created() {
      this.securityCheckOptionList();
      this.getDeptDropList();
    },
    mounted() {
      this.getList()
    },
    methods: {
      tabsClick(index) {
        if (this.tabsIndex !== index) {
          this.$set(this, 'tabsIndex', index)
          this.$set(this, 'rectifyStatus', null)
          this.resetQuery()
        }
      },
      //选项卡切换
      tableCheck(type) {
        if (this.rectifyStatus !== type) {
          this.$set(this, 'rectifyStatus', type)
          this.resetQuery()
        }
      },
      // 返回按钮
      backPage() {
        this.$parent.tableButton(6)
      },
      //查询按钮
      handleQuery() {
        this.$set(this.queryParams, 'page', 1)
        this.getList()
      },
      //重置按钮
      resetQuery() {
        this.$refs['table-box'].clearSelection();
        this.$set(this.exportConfig,'ids','');
        this.$set(this, 'queryParams', {
          page: 1,
          pageSize: 20,
          deptId: null,
          sort:'',
          hazardCheckPro2:null,
          hazardCheckPro:null,
          searchValue:'',
          subName:'',
        })
        this.getList()
      },
      getRowKeysOne(row) {
        return row.oneLevelId
      },
      getRowKeysTwo(row) {
        return row.twoLevelId
      },
      getRowKeysThree(row) {
        return row.threeLevelId
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        if(this.tabsIndex == 0){
          this.$set(this.exportConfig,'ids',selection.map(item => item.oneLevelId));
        } else if(this.tabsIndex == 1){
          this.$set(this.exportConfig,'ids',selection.map(item => item.twoLevelId));
        } else if(this.tabsIndex == 2){
          this.$set(this.exportConfig,'ids',selection.map(item => item.threeLevelId));
        }
      },
      //时间排序方法
      sortChange(val){
        if(val.prop == 'hazardNum'){
          this.$set(this.queryParams,'sort',val.order=='ascending'?'asc':(val.order=='descending'?'desc':''));
          this.handleQuery();
        }
      },
      //获取数据列表
      getList() {
        //列表请求数据
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        obj.rectifyStatus = this.rectifyStatus;
        //饼图请求数据
        let eChartsData = {
          rectifyStatus:this.rectifyStatus,
        }
        if(this.propsData.planId){
          obj.planId = this.propsData.planId;
          eChartsData.planId = this.propsData.planId;
          this.$set(this.exportConfig,'customKey','planId');
          this.$set(this.exportConfig,'customValue',obj.planId);
        }else if(this.propsData.deptId){
          obj.deptId = this.propsData.deptId;
          eChartsData.deptId = this.propsData.deptId;
          obj.planId = this.propsData.deptPlanId
          eChartsData.planId = this.propsData.deptPlanId;
          this.$set(this.exportConfig,'customKey','deptId');
          this.$set(this.exportConfig,'customValue',obj.deptId);
        }else if(this.propsData.subId){
          obj.subId = this.propsData.subId;
          eChartsData.subId = this.propsData.subId;
          obj.planId = this.propsData.subPlanId
          eChartsData.planId = this.propsData.subPlanId;
          this.$set(this.exportConfig,'customKey','subId');
          this.$set(this.exportConfig,'customValue',obj.subId);
        }
        if(this.propsData.planId || (!this.propsData.planId&&!this.propsData.deptId&&!this.propsData.subId)){
          eChartsData.deptId = this.queryParams.deptId;
        }
        this.$set(this.exportConfig,'screenData',obj);
        if(this.propsData.checkCategory == 1){
          //校级数据
          if(this.tabsIndex == 0){
            //一级隐患列表
            reportHazardItemsOneReportList(obj).then(response => {
              this.$set(this, 'dataList', response.data.records)
              this.$set(this, 'total', response.data.total)
            })
            //一级指标隐患分布 饼图/头部数据
            reportHazardItemsOneReportPie(obj).then(response => {
              let list = [];
              for(let i=0;i<response.data.pie.length;i++){
                list.push({
                  name:response.data.pie[i].oneLevelCode+' '+response.data.pie[i].oneLevelName,
                  value:response.data.pie[i].hazardNum
                })
              }
              this.$set(this,'eChartsList',list[0]?list:[]);
              this.$nextTick(()=>{
                this.eCharts(this.eChartsList);
              })
              this.$set(this,'formTitleData',response.data.topMsg);
            })
            this.$set(this.exportConfig,'api','/security/checkDanger/oneExport');
            this.$set(this.exportConfig,'fileName','一级指标隐患分布');
          }else if(this.tabsIndex == 1){
            //二级隐患列表
            reportHazardItemsTwoReportList(obj).then(response => {
              this.$set(this, 'dataList', response.data.records)
              this.$set(this, 'total', response.data.total)
            })
            //二级指标隐患分布 饼图/头部数据
            reportHazardItemsTwoReportPie(obj).then(response => {
              this.$set(this,'formTitleData',response.data.topMsg);
            })
            this.$set(this.exportConfig,'api','/security/checkDanger/twoExport');
            this.$set(this.exportConfig,'fileName','二级指标隐患分布');
          }else if(this.tabsIndex == 2){
            //三级隐患列表
            reportHazardItemsThreeReportList(obj).then(response => {
              this.$set(this, 'dataList', response.data.records)
              this.$set(this, 'total', response.data.total)
            })
            //三级指标隐患分布 饼图/头部数据
            reportHazardItemsThreeReportPie(obj).then(response => {
              this.$set(this,'formTitleData',response.data.topMsg);
            })
            this.$set(this.exportConfig,'api','/security/checkDanger/threeExport');
            this.$set(this.exportConfig,'fileName','三级指标隐患分布');
          }
        }else if(this.propsData.checkCategory == 2){
          //院级数据
          if(this.tabsIndex == 0){
            //一级隐患列表
            reportHazardItemsOneReportListCollege(obj).then(response => {
              this.$set(this, 'dataList', response.data.records)
              this.$set(this, 'total', response.data.total)
            })
            //一级指标隐患分布 饼图/头部数据
            reportHazardItemsOneReportPieCollege(obj).then(response => {
              let list = [];
              for(let i=0;i<response.data.pie.length;i++){
                list.push({
                  name:response.data.pie[i].oneLevelCode+' '+response.data.pie[i].oneLevelName,
                  value:response.data.pie[i].hazardNum
                })
              }
              this.$set(this,'eChartsList',list[0]?list:[]);
              this.$nextTick(()=>{
                this.eCharts(this.eChartsList);
              })
              this.$set(this,'formTitleData',response.data.topMsg);
            })
            this.$set(this.exportConfig,'api','/report/hazardItems/oneExportCollege');
            this.$set(this.exportConfig,'fileName','一级指标隐患分布');
          }else if(this.tabsIndex == 1){
            //二级隐患列表
            reportHazardItemsTwoReportListCollege(obj).then(response => {
              this.$set(this, 'dataList', response.data.records)
              this.$set(this, 'total', response.data.total)
            })
            //二级指标隐患分布 饼图/头部数据
            reportHazardItemsTwoReportPieCollege(obj).then(response => {
              this.$set(this,'formTitleData',response.data.topMsg);
            })
            this.$set(this.exportConfig,'api','/report/hazardItems/twoExportCollege');
            this.$set(this.exportConfig,'fileName','二级指标隐患分布');
          }else if(this.tabsIndex == 2){
            //三级隐患列表
            reportHazardItemsThreeReportListCollege(obj).then(response => {
              this.$set(this, 'dataList', response.data.records)
              this.$set(this, 'total', response.data.total)
            })
            //三级指标隐患分布 饼图/头部数据
            reportHazardItemsThreeReportPieCollege(obj).then(response => {
              this.$set(this,'formTitleData',response.data.topMsg);
            })
            this.$set(this.exportConfig,'api','/report/hazardItems/threeExportCollege');
            this.$set(this.exportConfig,'fileName','三级指标隐患分布');
          }
        }
      },
      eCharts(list) {
        let myChart = this.$echarts.init(document.getElementById('hiddenDanger-box'))
        let option = {
          legend: {
            show: false
          },
          tooltip: {
            confine: true,
            trigger: 'item',
            formatter: '{b} : {c}'
          },
          series: [
            {
              // avoidLabelOverlap: false,
              type: 'pie',
              left: 20,
              right: 20,
              roseType: 'area', // 玫瑰图
              center: ['50%', '50%'],
              radius: ['0%', '40%'],
              label: {
                normal: {
                  // formatter: '{b}\n{d}%',
                  formatter: function(params) {
                    let name = params.name;
                    let percent = params.percent+'%';
                    if (name.length > 10) {
                      name = name.substring(0, 10) + '...';
                    }
                    return name+'\n'+percent;
                  },
                  textStyle: {
                    fontSize: 12,
                    color: '#333'
                  },
                }
              },
              data: list,
              noData: {
                // 自定义缺省样式
                // 文本，支持使用 `\n` 换行
                text: '暂无数据',
                // 文本样式
                textStyle: {
                  color: '#333',
                  fontSize: 14
                },
              },
              itemStyle: {
                normal: {
                  color: function(colors) {
                    var colorList = ['#0183FA', '#FF5E86', '#FFE019', '#2758E0', '#41BE26', '#009DFF', '#FF2A00', '#39DBED', '#FFA200', '#7DD947', '#A069FF']
                    return colorList[colors.dataIndex]
                  }
                }
              }
            }
          ]
        }
        myChart.setOption(option)
      },
      //操作按钮
      tableButton(type, row) {
        let self = this
        if (type == 1) {
          //查询数据并刷新
          securityCheckDangerTodayDangerList().then(response => {
            //数据刷新
            if(response.data>0){
              if(this.tabsIndex == 0){
                reportHazardItemsOneReportRefresh().then(response => {
                  this.msgSuccess(response.message)
                  this.getList();
                });
              }else if(this.tabsIndex == 1){
                reportHazardItemsTwoReportRefresh().then(response => {
                  this.msgSuccess(response.message)
                  this.getList();
                });
              }else if(this.tabsIndex == 2){
                reportHazardItemsThreeReportRefresh().then(response => {
                  this.msgSuccess(response.message)
                  this.getList();
                });
              }
            }else{
              this.msgSuccess('已是最新数据,无需更新.')
            }
          });
        }else if (type == 6) {
          //返回并刷新
          this.$set(this, 'pageType', 1)
          this.getList()
        }
      },
      //学院列表
      getDeptDropList() {
        getDeptDropList({ deptName: '', level: 2, deptType: 1 }).then(response => {
          this.$set(this, 'optionList', response.data)
        })
      },
      //检查项列表
      securityCheckOptionList() {
        securityCheckOptionList({}).then(response => {
          let listTwo = this.getCascaderData(JSON.parse(JSON.stringify(response.data)),2)
          let list = this.getCascaderData(JSON.parse(JSON.stringify(response.data)),3)
          this.$nextTick(()=>{
            this.$set(this, 'cascaderDataTwo', listTwo)
            this.$set(this, 'cascaderData', list)
          })
        })
      },
      //检查项格式处理
      getCascaderData(list,type) {
        let self = this
        for (let i = 0; i < list.length; i++) {
          list[i].labelName = list[i].code ? list[i].code + ' ' + list[i].name : list[i].name
          if(list[i].level == type){
            delete list[i].children
          }else if (list[i].children) {
            if (list[i].children[0]) {
              list[i].children = self.getCascaderData(list[i].children,type)
            } else {
              list.splice(i, 1)
              i--
            }
          } else {
            list.splice(i, 1)
            i--
          }
        }
        for (let i = 0; i < list.length; i++) {
          list[i].labelName = list[i].code ? list[i].code + ' ' + list[i].name : list[i].name
          if(list[i].level == type){
            delete list[i].children
          }else if (list[i].children) {
            if (list[i].children[0]) {
              list[i].children = self.getCascaderData(list[i].children,type)
            } else {
              list.splice(i, 1)
              i--
            }
          } else {
            list.splice(i, 1)
            i--
          }
        }
        for (let i = 0; i < list.length; i++) {
          list[i].labelName = list[i].code ? list[i].code + ' ' + list[i].name : list[i].name
          if(list[i].level == type){
            delete list[i].children
          }else if (list[i].children) {
            if (list[i].children[0]) {
              list[i].children = self.getCascaderData(list[i].children,type)
            } else {
              list.splice(i, 1)
              i--
            }
          } else {
            list.splice(i, 1)
            i--
          }
        }
        return list
      },
    }
  }
</script>

<style scoped lang="scss">
  .hiddenDanger {
    height: 400px;
  }

  .tabs {
    width: 100%;
    height: 50px;
    background: #F5F5F5;
    border-radius: 0px 0px 0px 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .tabs-li {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 256px;
      cursor: pointer;
      padding-left: 20px;
      box-sizing: border-box;
      > p:nth-of-type(1) {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        background: #A2A2A2;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 20px;
        text-align: center;
        border-radius: 10px;
      }
      > p:nth-of-type(2) {
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 16px;
      }
    }
    .color-A {
      > p:nth-of-type(1) {
        background: #A2A2A2;
      }
      > p:nth-of-type(2) {
        color: #333333;
      }
    }
    .color-B {
      > p:nth-of-type(1) {
        background: #0183FA;
      }
      > p:nth-of-type(2) {
        color: #0183FA;
      }
    }
  }

  .num-data-box {
    display: inline-block;
    vertical-align: top;
    background: rgba(1, 131, 250, 0.2);
    color: #0183FA;
    font-size: 14px;
    line-height: 40px;
    padding: 0 20px;
    border-radius: 4px;
    margin: 0px 15px 0px 15px;
    width: 455px;
  }

  .main {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    border-top: 1px solid #D8D8D8;
    overflow: hidden;
    .main-title {
      width: 159px;
      height: 40px;
      background: rgba(1, 131, 250, 0.2);
      border-radius: 0px 4px 4px 0px;
      font-weight: 400;
      font-size: 16px;
      color: #0183FA;
      line-height: 40px;
      letter-spacing: 2px;
      text-align: center;
      margin-bottom: 20px;
    }
    .main-l {
      width: 492px;
      border-right: 1px dashed #D8D8D8;
    }
    .main-r {
      width: 1086px;
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  }

  .checkItem {
    .content-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .table-school-college-toggle-box {
        overflow: hidden;
        display: inline-block;
        margin-right: 10px;
        p {
          display: inline-block;
          text-align: center;
          width: 80px;
          line-height: 40px;
          height: 40px;
          color: #333;
          background-color: #fff;
          border: 1px solid #E0E0E0;
          font-size: 14px;
          cursor: pointer;
        }
        p:nth-child(1) {
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
          /*border-right:none;*/
        }
        p:nth-child(4) {
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
          /*border-left:none;*/
        }
        .p-check {
          border: 1px solid #0183FA;
          background-color: #0183FA;
          color: #fff;
        }
      }
      .form-button-max-big-box-me {
        display: inline-block;
        overflow: hidden;
        margin-right: 10px;
        .form-button-big-box-me {
          display: flex;
          div {
            position: relative;
            height: 40px;
            width: 100px;
            line-height: 40px;
            text-align: center;
            color: #999;
            font-size: 14px;
            border: 1px solid #999;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            .icon-p-me {
              width: 15px;
              height: 15px;
              line-height: 15px;
              text-align: center;
              position: absolute;
              right: 0;
              bottom: 0;
              color: #fff;
              background: #0183fa;
              border-top-left-radius: 4px;
            }
          }
          .checkDiv-me {
            color: #0183FA !important;
            border: 1px solid #0183FA !important;
          }
        }
      }
    }
  }
</style>
