<template>
    <BasePanelRight>
    <div class="comprehensive-container">
        <div class="right">
            <BaseMain title="水文监测">
                <template v-slot:mainArea>
                    <div class="sw-container">
                        <div class="left">
                            <img src="@/assets/image/comprehensive/swIcon.png" alt="" class="icon1">
                            <span class="value"><span class="big">2</span> / 2</span>
                        </div>
                        <div class="right">
                            <div class="icon-text">
                                <div class="txt">水文</div>
                                <div class="txt2">雨量</div>
                            </div>
                            <div class="icon-text">
                                <div class="txt3">流速</div>
                                <div class="txt4">流量</div>
                            </div>
                        </div>
                    </div>
                </template>
            </BaseMain>
            <BaseMain title="四乱监测">
                <template v-slot:mainArea>
                    <div class="sl-container">
                        <div class="seach-btn">
                            <el-radio-group v-model="dateVal" size="mini" class="slRadio">
                               <el-radio-button  label="1">今日</el-radio-button>
                               <el-radio-button  label="2">近七日</el-radio-button>
                               <el-radio-button  label="3">近30日</el-radio-button>
                               <el-radio-button  label="4">全部</el-radio-button>
                           </el-radio-group>
                        </div>
                        <div class="dottTitle">
                            事件总数
                        </div>
                        <div class="data-info">
                            <div class="left">
                                <div class="val">40</div>
                                <img src="@/assets/image/comprehensive/midBg2.png"/>
                            </div>
                            <div class="right">
                                <div class="em">
                                    <div class="color1">乱建</div>
                                    <div>10</div>
                                </div>
                                <div class="em">
                                    <div class="color2">乱采</div>
                                    <div>10</div>
                                </div>
                                <div class="em">
                                    <div class="color3">乱堆</div>
                                    <div>10</div>
                                </div>
                                <div class="em">
                                    <div class="color4">乱占</div>
                                    <div>10</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </BaseMain>
            <BaseMain title="采砂监测">
                <template v-slot:mainArea>
                   <div class="card-item">
                        <div class="warning-content">
                        <div class="warning-title">
                            <div class="title">预警总数</div>
                            <div class="num">30</div>
                            <div class="unit">条</div>
                        </div>
                        <PieChart style="height: 1.45rem" />
                        </div>
                    </div>
                </template>
            </BaseMain>
        </div>
    </div>
  </BasePanelRight>
</template>

<script>
import BasePanelRight from '@/components/base-panel/base-panel-right'
import BaseMain from '@/components/base-main/base-main.vue';
import PieChart from './pie-chart/index.vue'
export default {
    components:{
        BaseMain,BasePanelRight,PieChart
    },
    data() {
        return {
            dateVal:1
        }
    },
    created(){
    },
    methods:{

    }
}
</script>

<style lang="scss" scoped>
.comprehensive-container{
    position: absolute;
    top: px-to-rem(66);
    z-index: 1;
    .sw-container{
        padding: px-to-rem(59) px-to-rem(12) px-to-rem(70) px-to-rem(16);
        display: flex;
        justify-content: flex-start;
        .left{
            position: relative;
            margin-right: px-to-rem(24);
            .icon1{
                width: px-to-rem(124);
                height: px-to-rem(124);
            }
            .value{
                position: absolute;
                font-weight: bold;
                font-size: px-to-rem(14);
                color: #fff;
                left: px-to-rem(45);
                bottom:px-to-rem(35);
                .big{
                    font-size: px-to-rem(18);
                    color: #91FFAB;
                }
            }
        }   
        .right{
            font-weight: 500;
            font-size: px-to-rem(14);
            color: #FFFFFF;
            width: calc(100% - px-to-rem(124));
            .icon-text{
                display: flex;
                justify-content: space-between;
                margin-bottom: px-to-rem(32);
                .txt{
                    background: url('@/assets/image/comprehensive/swIcon1.png') no-repeat;
                    background-size: contain;
                    width: px-to-rem(80);
                    height: px-to-rem(32);
                    line-height: px-to-rem(32);
                    padding-left: px-to-rem(39);
                }
                 .txt2{
                    background: url('@/assets/image/comprehensive/swIcon2.png') no-repeat;
                    background-size: contain;
                    width: px-to-rem(80);
                    height: px-to-rem(32);
                    line-height: px-to-rem(32);
                    padding-left: px-to-rem(39);
                }
                 .txt3{
                    background: url('@/assets/image/comprehensive/swIcon3.png') no-repeat;
                    background-size: contain;
                    width: px-to-rem(80);
                    height: px-to-rem(32);
                    line-height: px-to-rem(32);
                    padding-left: px-to-rem(39);
                }
                 .txt4{
                    background: url('@/assets/image/comprehensive/swIcon4.png') no-repeat;
                    background-size: contain;
                    width: px-to-rem(80);
                    height: px-to-rem(32);
                    line-height: px-to-rem(32);
                    padding-left: px-to-rem(39);
                }
            }
            .icon-text:first-child{
                margin-top: px-to-rem(9);
            }
        }
    }
    .sl-container{
        padding: px-to-rem(16) px-to-rem(15) px-to-rem(55) px-to-rem(11);
        height: px-to-rem(253);
        .slRadio{
            margin-bottom: px-to-rem(24);
            :deep(.el-radio-button__inner) {
                background: rgba(79,159,255,0.12);
                color: #4F9FFF;
                border-color: #4F9FFF;
                font-weight: 400;
                padding: px-to-rem(6);
                font-size: px-to-rem(14);
            }
            :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
                background-color: rgba(79,159,255,0.8);
                color: #fff;
            }
        }
        .dottTitle{
            position: relative;
            display: inline-block;
            font-weight: bold;
            font-size: px-to-rem(14);
            color: #F5F5F5;
            margin-bottom:px-to-rem(10);
            margin-left:px-to-rem(16);
            &::before,
            &::after {
                content: " "; 
                display: inline-block;
                width: px-to-rem(30); 
                height: px-to-rem(2); 
                background-color:  #4487D8; 
                vertical-align: middle; 
                margin: 0 0.5em; 
            }
            &::before {
                margin-left: 0; 
            }
            &::after {
                margin-right: 0;
            }
        }
        .data-info{
            display: flex;
            justify-content:space-between;
            .left{
                margin-top:px-to-rem(26);
                .val{
                    font-weight: bold;
                    font-size: px-to-rem(30);
                    color: #F5F5F5;
                    background: url('@/assets/image/comprehensive/midBg.png') no-repeat;
                    background-size: contain;
                    width: px-to-rem(86);
                    height: px-to-rem(50);
                    text-align: center;
                    margin-left: px-to-rem(50);
                }
                img{
                    width: px-to-rem(197);
                    height: px-to-rem(33);
                }
            }
            .right{
                width:30%;
                .em{
                    display: flex;
                    justify-content: space-between;
                    font-weight: 400;
                    font-size: px-to-rem(14);
                    color: #F5F5F5;
                    margin-bottom:px-to-rem(12);
                    .color1::before{
                        content: " "; 
                        display: inline-block;
                        width: px-to-rem(12); 
                        height: px-to-rem(6); 
                        background-color:  #6BFE91; 
                        border-radius: px-to-rem(2);
                        vertical-align: middle; 
                        margin-right: px-to-rem(6);
                    }
                    .color2::before{
                        content: " "; 
                        display: inline-block;
                        width: px-to-rem(12); 
                        height: px-to-rem(6); 
                        background-color:  #EFD800; 
                        border-radius: px-to-rem(2);
                        vertical-align: middle; 
                        margin-right: px-to-rem(6);
                    }
                    .color3::before{
                        content: " "; 
                        display: inline-block;
                        width: px-to-rem(12); 
                        height: px-to-rem(6); 
                        background-color:  #F17A23; 
                        border-radius: px-to-rem(2);
                        vertical-align: middle; 
                        margin-right: px-to-rem(6);
                    }
                    .color4::before{
                        content: " "; 
                        display: inline-block;
                        width: px-to-rem(12); 
                        height: px-to-rem(6); 
                        background-color:  #4487D8; 
                        border-radius: px-to-rem(2);
                        vertical-align: middle; 
                        margin-right: px-to-rem(6);
                    }
                }
            }
        }
    }
   .card-item {
    position: relative;
    width: 3.68rem;
    padding: px-to-rem(22) px-to-rem(16) px-to-rem(27) px-to-rem(26);
    .icon-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon-item-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .item-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-left: px-to-rem(10);
            margin-bottom: px-to-rem(-6);
            .label {
              font-weight: 500;
              font-size: px-to-rem(16);
              color: #ffffff;
            }
            .value {
              font-weight: bold;
              font-size: px-to-rem(18);
            }
          }
        }
      }
    }
    .progress-content {
      display: flex;
      flex-direction: column;
      margin-top: px-to-rem(10);
      .progress-item {
        display: flex;
        flex-direction: column;
        margin-bottom: px-to-rem(6);
        .progress-item-text {
          display: flex;
          justify-content: space-between;
          margin-bottom: px-to-rem(4);
          span {
            font-size: px-to-rem(16);
            color: #fff;
          }
        }
      }
    }
    .warning-content {
      height: px-to-rem(200);
      .warning-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-size: px-to-rem(16);
        .title {
          &::before {
            content: '';
            display: inline-block;
            background: #4487d8;
            width: px-to-rem(30);
            height: px-to-rem(2);
            margin-bottom: px-to-rem(4);
            margin-right: px-to-rem(6);
          }
          &::after {
            content: '';
            display: inline-block;
            background: #4487d8;
            width: px-to-rem(30);
            height: px-to-rem(2);
            margin-bottom: px-to-rem(4);
            margin-left: px-to-rem(6);
          }
        }
        .num {
          text-align: center;
          width: px-to-rem(75);
          height: px-to-rem(45);
          font-size: px-to-rem(30);
          color: #f5f5f5;
          background: url('@/assets/image/sand-monitor/mid-bg.png') no-repeat;
          background-size: 100% 100%;
        }
        .unit {
          margin-right: px-to-rem(10);
        }
      }
    }
    .info-content {
      color: #fff;
      .base-info-container {
        .title {
          font-size: px-to-rem(16);
          text-align: left;
          &::before {
            content: '';
            display: inline-block;
            width: px-to-rem(8);
            height: px-to-rem(10);
            background: #81b1f5;
            margin-right: px-to-rem(6);
          }
        }
        .base-info-card {
          display: flex;
          justify-content: space-between;
          .base-info-item {
            display: flex;
            flex-direction: column;
            margin-bottom: px-to-rem(10);
            span {
              font-weight: bold;
              font-size: px-to-rem(12);
              color: #c4c6c8;
            }
            .value {
              font-size: px-to-rem(14);
              color: #81b1f5;
            }
          }
        }
      }
    }
  }
}
</style>