<template>
  <el-dialog v-dialogDrag ref="diaFrom" title="一键检测" :close-on-click-modal="false" :visible.sync="isDiaBox"
    width="75%" top="10px" :before-close="cancel">
    <div class="dia-box">
       <div class="box-list">
         <div class="box-item">
           <div class="box">
              <i class="el-icon-coordinate"></i>
              <div class="text">真实性检测</div>
           </div>
           <div class="switch">
              <el-switch v-model="switch1"></el-switch>
           </div>
         </div>
         <div class="box-item">
           <div class="box">
              <i class="el-icon-aim"></i>
              <div class="text">完整性检测</div>
           </div>
           <div class="switch">
              <el-switch v-model="switch2"></el-switch>
           </div>
         </div>
         <div class="box-item">
           <div class="box">
              <i class="el-icon-circle-check"></i>
              <div class="text">可用性检测</div>
           </div>
           <div class="switch">
              <el-switch v-model="switch3"></el-switch>
           </div>
         </div>
         <div class="box-item">
           <div class="box">
              <i class="el-icon-brush"></i>
              <div class="text">安全性检测</div>
           </div>
           <div class="switch">
              <el-switch v-model="switch4"></el-switch>
           </div>
         </div>
       </div>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    props: {
      isDiaBox: {
        type: Boolean,
        default: () => false,
      },
      title: {
        type: String,
        default: () => "",
      },
    },
    data() {
      return {
        switch1: false,
        switch2: true,
        switch3: true,
        switch4: true,
      }
    },
    methods: {
      cancel() {
        this.$emit('cancel')
      },

    }
  }

</script>
<style lang='scss' scoped>
  .dia-box{
    padding: 50px 0;
     .box-list{
       display: flex;
       justify-content: space-between;
       align-items: center;
       .box-item{
         width: 23%;
         margin: 0 1%;
         text-align: center;
         .box{
            background: #5178dc;
            color: #fff;
            border-radius: 5px;
            width: 100%;
            height: 150px;
            i{
              font-size: 60px;
              padding: 15px 0 25px 0;
            }
            .text{
              font-size: 20px;
            }
         }
         .switch{
           text-align: right;
           margin-top: 10px;
         }
       }
     }
  }

</style>
