
<script lang="ts">
export default {
  name: 'visualinspection' // 视力抽检
};
</script>
<script setup lang="ts">
import { onMounted, reactive, ref, nextTick,watch } from "vue";
import { ElMessage, ElMessageBox, FormRules,ElTree } from "element-plus";
import { queryExaminePlanYear } from "@/api/planscreening/visualinspection";
import { addExaminePlan,queryExaminePlanPage,updateExaminePlan,delExaminePlan,addSpotCheckExamineSchool,queryRulesSchoolList,queryPlanNum,getPlanCode} from "@/api/planscreening";
import Page from '@/components/Pagination/page.vue';
import Planmanages from "./planmanages.vue";
import { queryRegionById } from "@/api/regionmodule/region";
import { querySchoolList } from "@/api/regionmodule/school";

import { queryByIdsSchoolGradeList } from "@/api/regionmodule/schoolGrade";
import { queryByIdsSchoolClassList } from "@/api/regionmodule/schoolClass";



const queryInfo :any = ref({
  current:1,
  size:10,
  total:0
})
const searchval = ref('')
const planname = ref('')
const tableData = ref([])
const dialogFormVisible = ref(false)
const dialogtitle = ref('新增抽检计划')
const dialogVisible = ref(false)
const form:any = ref({})
const planform = ref();
const moduleinfo1 = ref(true);
const moduleinfo2 = ref(false);
const allchecked = ref(false)
const institutiondata = ref([])
const allgradechecked = ref(false)
const allclasschecked = ref(false)
const genderradio = ref('0')
const checkratio = ref('')
const loading = ref(false)
const treedata: any = ref([]);
const treeloading = ref(false)
const defaultProps = { label: "plan_name" }
const checktreeform:any = ref({})
const filterText = ref('')
const isCreateInspect =ref(false)
//树形控件类型定义
interface Tree {
  [x: string]: any;
  label: string;
  children?: Tree[];
}
const treeRef = ref<InstanceType<typeof ElTree>>()
watch(filterText, (val:any) => {
  treeRef.value!.filter(val)
})
const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.plan_name.includes(value)
}
const vMove = {
  mounted(el: any) {
    el.onmousedown = function (e: any) {
      var init = e.clientX;
      var parent: any = document.getElementById("silderLeft");
      const initWidth: any = parent.offsetWidth;
      document.onmousemove = function (e) {
        var end = e.clientX;
        var newWidth = end - init + initWidth;
        parent.style.width = newWidth + "px";
      };
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      };
    };
  }
}
const handleNodeClick = (data: Tree) => {
  checktreeform.value = data
  getTableDate()
};
const rules = reactive<FormRules>({
  plan_code: [{ required: true, message: "请输入计划代码", trigger: "blur" }],
  plan_name: [{ required: true, message: "请输入计划名称", trigger: "blur" }]
});
onMounted(() => {
  getData()
});
const planCode = ref("")
const tempName = ref("")
function getYear(){
  let year = checktreeform.value.plan_year.split("-")[0]
  let date = checktreeform.value.plan_year.split("-")[1]
  if(date == "1"){
    planCode.value = year + '01'
    tempName.value = year + '年第一学期'
  }else{
    planCode.value = year + '02'
    tempName.value = year + '年第二学期'
  }
  queryPlanNum({planYear:checktreeform.value.plan_year,examType:"02",orgid:checktreeform.value.org_id}).then((res:any) => {
    if(res.code == 0){
      if(res.data>8){
        planCode.value = planCode.value + (res.data+1)
      }else{
        planCode.value = planCode.value +"0" +""+  (res.data+1)
      }
        tempName.value = checktreeform.value.org_name +  tempName.value + '第'+(res.data+1) +'次视力抽检'
        form.value.plan_name = tempName.value
        // form.value.plan_code = planCode.value
    }
  })
  getPlanCode({planYear:checktreeform.value.plan_year,examType:"02",orgid:form.value.org_id}).then((res:any) => {
    form.value.plan_code = res.data
  })
  
    
}
function addinfo(){
  if (checktreeform.value.id === undefined) {
    ElMessage({
      message: "请选择普查计划！",
      type: "warning",
    });
    return
  }

  dialogtitle.value = '新增抽检计划'
  const forminfo = {
    plan_code:'',
    plan_name:'',
    exam_type:'02',
    plan_start_date:'',
    plan_end_date:'',
    status:'01',
    org_name:checktreeform.value.org_name,
    org_id:checktreeform.value.org_id,
    org_type:checktreeform.value.org_type,
    exam_items:checktreeform.value.exam_items,
    general_plan_id:checktreeform.value.id,
    plan_year:checktreeform.value.plan_year,
  }
  form.value = forminfo
  getYear()
  dialogFormVisible.value = true
}
function editinfo(row:any){
 form.value = JSON.parse(JSON.stringify(row)) 
 dialogtitle.value = '修改抽检计划'
 dialogFormVisible.value = true
}
function infosubmit(formEl: any){
    formEl.validate((valid: any) => {
    if (valid) {
      console.log(form.value.id)
      if(form.value.id){
        const data:any = {
          id:form.value.id,
          orgId: form.value.org_id,
          orgName: form.value.org_name,
          orgType: form.value.org_type,
          planCode: form.value.plan_code,
          planName: form.value.plan_name, 
          planYear: form.value.plan_year, 
          examType: "02", 
          visInstIds:"",
          examItems:form.value.exam_items,
          planStartDate:form.value.plan_start_date,
          planEndDate:form.value.plan_end_date,
          generalPlanId:form.value.general_plan_id
        };
        updateExaminePlan(data).then((item) => {
          dialogFormVisible.value = false;
          ElMessage({
            message: "修改成功",
            type: "success",
          });
          getTableDate()
        }).catch(()=>{
        })
      }else{
       const data:any = {
          id:form.value.id,
          orgId: form.value.org_id,
          orgName: form.value.org_name,
          orgType: form.value.org_type,
          planCode:form.value.plan_code,
          planName: form.value.plan_name, 
          planYear: form.value.plan_year, 
          examType: "02", //普查
          visInstIds:"",
          examItems:form.value.exam_items,
          planStartDate:form.value.plan_start_date,
          planEndDate:form.value.plan_end_date,
          generalPlanId:form.value.general_plan_id
        };
        addExaminePlan(data).then((res:any) => {
          ElMessage({
            message: "新增成功",
            type: "success",
          });
          dialogFormVisible.value = false
          getTableDate()
        })
      }
    }
  })
}
const isSwitch = ref(false) // 提交开关
function rulessubmit(){
  
  let params = {
    planId:form.value.id,
    gender:genderradio.value,
    schoolIds:schoolIds.value.join(","),
    gradeIds:gradeIds.value.join(","),
    classIds:classIds.value.join(","),
    ratio:checkratio.value // 抽查比例
  }
  if(isSwitch.value == true){
    return
  }
  isSwitch.value = true
  isCreateInspect.value = true
  addSpotCheckExamineSchool(params).then(() => {
    isCreateInspect.value = false
    dialogVisible.value = false
    ElMessage({
      message: "添加成功",
      type: "success",
    });
    isSwitch.value = false
  }).catch(()=>{
    isCreateInspect.value = false
    isSwitch.value = false
  });


}
function delinfo(row: any) {
  ElMessageBox.confirm("确定删除此普查计划吗?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let params = {
      ids: row.id,
    };
    delExaminePlan(params).then((res:any) => {
      if( res.code == '0'){
        getTableDate()
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      }
    });
  });
}
function searchclick(){
  getTableDate()
}
function getData(){
  let params = {
    planName: planname.value,
    examType:'01'
  };
  treeloading.value = true
  queryExaminePlanYear(params).then((res:any) => {
    treeloading.value = false
    treedata.value = res.data
    if(res.data.length> 0){
      checktreeform.value = res.data[0]
      getTableDate()
      nextTick(() => {
        treeRef.value?.setCurrentKey(checktreeform.value.id);
      });
    }
  })
}
function getTableDate() {
  let params = {
    planName:searchval.value,
    generalPlanId:checktreeform.value.id,
    examType:'02',
    current: queryInfo.value.current,
    size:queryInfo.value.size
  };
  loading.value = true
  queryExaminePlanPage(params).then((res:any) => {
    tableData.value = res.data.records;
    queryInfo.value.total = res.data.total
    loading.value = false
  });
}
function handleSelectionChange(){

}
function rulesclick(row:any){

  form.value = row
  allchecked.value = false
  allgradechecked.value = false
  allclasschecked.value = false
  genderradio.value = '0'
  checkratio.value = ''
  schoolIds.value = []
  gradeIds.value = []
  gradeData.value = []
  classIds.value = []
  classData.value = []
  getSchool()
  // if(row.org_type != '5'){
  //   regionId.value = row.org_id
  //   getRegionTree()
  //   getSchool()
  // }else{

  //   getSchool()
  // }
 
  dialogVisible.value = true
}
function planclick(row:any){
  form.value = row
  moduleinfo1.value = false
  moduleinfo2.value = true
}
const gradeData:any = ref([])
const classData:any = ref([])

function allcheckchange(e:any,type:any){
  if (type === '1') {
    if(e == true){
      schoolIds.value = []
      for(let i =0;i<schoolData.value.length;i++) {
        schoolIds.value.push(schoolData.value[i].id)
      }
      getGradesList()
    }else{
      schoolIds.value = []
      gradeIds.value = []
      gradeData.value = []
      classIds.value = []
      classData.value = []
    }
    
  } else if (type === '2') {
      if(e == true){
        gradeIds.value = []
        for(let i =0;i<gradeData.value.length;i++) {
          gradeIds.value.push(gradeData.value[i].id)
        }
        getClassList()
      }else{
        gradeIds.value = []
        classIds.value = []
        classData.value = []
      }
  } else {
    if(e == true){
      classIds.value = []
        for(let i =0;i<classData.value.length;i++) {
          classIds.value.push(classData.value[i].id)
        }
        getClassList()
      }else{
        classIds.value = []
      }
  }
}
// 选中
function schoolChange(e:any){

  gradeIds.value = []
  classIds.value = []
  getGradesList()

}
// 选中
function gradesChange(e:any){
  classIds.value = []
   getClassList()
}

function handleClose(){
  if (planform.value != null) planform.value.resetFields();
  dialogFormVisible.value = false
}
function handleCloses(){
  allchecked.value = false
  institutiondata.value = []
  allgradechecked.value = false
  gradeData.value = []
  allclasschecked.value = false
  classData.value = []
  dialogVisible.value = false
}
function returnClick(){
  moduleinfo1.value = true
  moduleinfo2.value = false
}
function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  }
}

/**
 * 抽检方法
 */
 const cascaderdata: any = ref([]); 
 // 方法
const props1 = {
  checkStrictly: true,
  value:'id',
  label:'name'
}
const regionId = ref("")
//获取行政区域
function getRegionTree() {
  const params = {
    regionId: form.value.org_id,
  };
  queryRegionById(params).then((res: any) => {
    cascaderdata.value = res.data;
  })
  .catch((error:any)=>{
  })
}
// function handleChange(value:any){
//   if(value.length != 0){
//     regionId.value = value[value.length -1]
//   }
//   getSchool()
// }
const schoolData:any = ref([])
const schoolLoading = ref(false)
const gradeLoading = ref(false)
const classLoading = ref(false)

//获取表格类型
function getSchool() {
   let params = {
    planId:checktreeform.value.id
   }
  //  if(form.value.org_type != '5'){
  //   params = {
  //     regionId: regionId.value,
  //     current: queryInfo.value.current,
  //     size:queryInfo.value.size
  //   };
  // } else {
  //   params = {
  //     SchoolId:form.value.org_id,
  //     current: queryInfo.value.current,
  //     size:queryInfo.value.size
  //   };
  // }
  schoolLoading.value = true
  queryRulesSchoolList(params).then((res) => {
    schoolData.value = res.data;
    schoolLoading.value = false
  }).catch(()=>{
    schoolLoading.value = false
  });
}
const schoolIds:any = ref([])
const gradeIds:any = ref([])
const classIds:any = ref([])
function getGradesList(){
  let params =  {
    schoolIds: schoolIds.value.join(",")
  }
  gradeLoading.value = true
  queryByIdsSchoolGradeList(params).then((res) => {
    gradeData.value = res.data;
    gradeLoading.value = false
  }).catch(()=>{
    gradeLoading.value = false
  });
}
function getClassList(){
  let params =  {
    gradeIds: gradeIds.value.join(",")
  }
  classLoading.value = true
  queryByIdsSchoolClassList(params).then((res) => {
    classData.value = res.data;
    classLoading.value = false
  }).catch(()=>{
    classLoading.value = false
  });
}

</script>

<template>
  <div v-if="moduleinfo1" class="w-full">
    <div v-show="moduleinfo1" class="contents-box">
      <aside id="silderLeft">
        <div class="lefttitle">
          <div class="line"></div>
          <div class="treetitle">普检计划列表</div>
        </div>
        <div style="width:100%;padding: 5px 15px;">
          <el-input v-model="filterText" placeholder="请输入普检计划名称" clearable  />
        </div>
        <div>
          <el-tree v-loading="treeloading" ref="treeRef" node-key="id" :data="treedata" :filter-node-method="filterNode"
          :highlight-current="true" default-expand-all :props="defaultProps" :expand-on-click-node="false"
          @node-click="handleNodeClick" style="height: calc(100vh - 240px); overflow: auto">
        </el-tree>
        </div>
        <div class="moveBtn" v-move>
          <div class="moveBtn-line" v-move></div>
        </div>
      </aside>
      <div class="silderRight">
        <div class="searchinfo">
           <div class="flex">
              <el-input v-model="searchval" style="width:240px;" placeholder="请输入计划名称" clearable />
              <el-button type="primary" class="ml-[10px]" @click="searchclick">搜索</el-button>
           </div>
           <el-button type="primary" @click="addinfo"><img src="@/assets/visionscreening/jscz_xz.png" alt="" style="margin-right: 4px;" >新增抽检计划</el-button>
        </div>
        <div v-loading="loading">
        <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%; height:calc(100vh - 280px)" @selection-change="handleSelectionChange" :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}">
            <el-table-column prop="plan_code" label="计划编号" width="110" />
            <el-table-column prop="plan_name" label="计划名称"  min-width="110"/>
            <el-table-column prop="org_name" label="组织机构" />
            <el-table-column prop="org_type" label="机构类型" width="100">
              <template #default="scope">
                <span v-if="scope.row.org_type =='2'">省/直辖市</span>
                <span v-if="scope.row.org_type == '3'">市/自治州</span>
                <span v-else-if="scope.row.status == '4'">区/县/县级市</span>
                <span v-else-if="scope.row.status == '5'">学校</span>
                <span v-else></span>
            </template>
            </el-table-column>
            <el-table-column prop="plan_start_date" width="110" label="开始日期" />
            <el-table-column prop="plan_end_date" width="110" label="结束日期" />
            <el-table-column prop="status" width="100" label="状态">
            <template #default="scope">
                <span v-if="scope.row.status === '01'" style="color:#409EFF">初始创建</span>
                <span v-else-if="scope.row.status === '02'" style="color:#009966">筛查完成</span>
                <span v-else ></span>
            </template>
            </el-table-column>
            <el-table-column prop="Complete_date" width="100" label="完成日期" />
            <el-table-column prop="creator" width="100" label="创建人" />
            <el-table-column prop="create_time" label="创建日期" width="196">
            <template #default="scope">
              {{ dateFormat(scope.row.create_time) }}
            </template>
          </el-table-column>
            <el-table-column label="操作" width="140" fixed="right" align="center">
              <template #default="scope">
                <div style="display: -webkit-flex;display: flex; justify-content: space-around;-webkit-justify-content: space-around; ">
                  <img src="@/assets/MenuIcon/lbcz_xg.png" alt="" title="修改" @click="editinfo(scope.row)" style="cursor: pointer;">
                  <img src="@/assets/visionscreening/spotcheck.png" alt="" title="抽检规则" @click="rulesclick(scope.row)" style="cursor: pointer;">
                  <img src="@/assets/visionscreening/bg-jhgl.png" alt="" title="计划管理" @click="planclick(scope.row)" style="cursor: pointer;">
                  <img src="@/assets/MenuIcon/lbcz_sc.png" alt="" title="删除" @click="delinfo(scope.row)" style="cursor: pointer;">
                </div>
              </template>
            </el-table-column>
          </el-table>
          <Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
          @pagination="getTableDate" />
      </div>
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" :close-on-click-modal="false" :title="dialogtitle" :before-close="handleClose" width="620px" draggable append-to-body>
      <el-form ref="planform" :model="form" :rules="rules" label-width="90px">
        <el-form-item label="计划编号" prop="plan_code">
          <el-input v-model="form.plan_code" autocomplete="off" placeholder="请输入计划编号" />
        </el-form-item>
        <el-form-item label="计划名称" prop="plan_name">
          <el-input v-model="form.plan_name" autocomplete="off" placeholder="请输入计划名称" />
        </el-form-item>
        <el-form-item label="组织机构">
          <el-input v-model="form.org_name" autocomplete="off" disabled placeholder="请输入组织机构" />
        </el-form-item>
        <el-form-item label="机构类型">
          <el-radio-group v-model="form.org_type" disabled>
            <el-radio :label="'3'">市/自治州</el-radio>
            <el-radio :label="'4'">区/县/县级市</el-radio>
            <el-radio :label="'5'">学校</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker v-model="form.plan_start_date" type="date" style="width:100%" placeholder="请输入开始日期"/>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker v-model="form.plan_end_date" type="date" style="width:100%" placeholder="请输入结束日期"/>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="infosubmit(planform)">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog v-model="dialogVisible" :close-on-click-modal="false" title="抽检规则" :before-close="handleCloses" width="860px" draggable append-to-body>
      <div v-loading="isCreateInspect" element-loading-text="正在生成抽检学生信息！">
        <div class="flex">
          <div class="rules-box mr-[20px]" v-loading="schoolLoading">
            <div class="rules-box-top">
              <el-checkbox v-model="allchecked" @change="allcheckchange($event,'1')" />
              <span class="ml-[10px]">选择学校</span>
            </div>
            <div class="rules-box-bottom h-[345px]">
              <el-checkbox-group
                v-model="schoolIds"
                @change="schoolChange"
                >
                <div v-for="(item,index) in schoolData">
                  <el-checkbox :key="item.id" :label="item.id">
                    {{ item.name }}
                  </el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </div>
            <div class="rules-box mr-[20px]">
              <div class="rules-box-top">
                <el-checkbox v-model="allgradechecked" @change="allcheckchange($event,'2')"/>
                <span class="ml-[10px]">选择年级</span>
              </div>
              <div class="rules-box-bottom h-[400px]">
                <el-checkbox-group
                  v-model="gradeIds"
                  @change="gradesChange"
                  >
                  <div v-for="(item,index) in gradeData">
                    <el-checkbox :key="item.id" :label="item.id">
                      {{ item.name }}
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </div> 
            <div class="rules-box">
              <div class="rules-box-top">
                  <el-checkbox v-model="allclasschecked" @change="allcheckchange($event,'3')" />
                  <span class="ml-[10px]">选择班级</span>
              </div>
              <div class="rules-box-bottom h-[400px]">
                <el-checkbox-group
                  v-model="classIds"
                  >
                  <div v-for="(item,index) in classData">
                    <el-checkbox :key="item.id" :label="item.id">
                      {{ item.name }}
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
                <!-- <div v-for="(itemss,indexss) in classData" :key="indexss">
                  <el-checkbox v-model="itemss.checked" :label="itemss.name" @change="checkchange($event,indexss,'3')" />
                </div> -->
              </div>
            </div> 
          </div>
          <div class="my-[20px] flex w-full">
            <div class="flex items-center" style="width:40%;" >
              <div class="mr-[20px]">性别</div>
              <el-radio-group v-model="genderradio">
              <el-radio :label="'0'" size="large">不限</el-radio>
              <el-radio :label="'1'" size="large">男</el-radio>
              <el-radio :label="'2'" size="large">女</el-radio>
            </el-radio-group>
            </div>
            <div style="width:60%;">
              <div class="flex items-center" >
              <div class="mr-[10px] w-[70px]">抽检比例</div>
              <el-input v-model.number="checkratio" oninput ="value=value.replace(/[^\d]/g,'')" placeholder="请输入抽检比例" clearable><template #suffix>%</template></el-input>
            </div>
          </div>
        </div>
        <span class="dialog-footer">
          <el-button @click="handleCloses">取消</el-button>
          <el-button type="primary" @click="rulessubmit">确定</el-button>
        </span>
      </div>
    </el-dialog>
   
  </div>
  <Planmanages v-if="moduleinfo2" @returnClick="returnClick" :planInfo="form" />
</template>
<style scoped  lang="scss">
:deep() {
  .el-select--large .el-select__wrapper {
    min-height: 0px;
  }
}

.contents-box {
  height: calc(100vh - 130px);
  display: flex;
  width: 100%;

  #silderLeft {
    width: 280px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 3px;
    position: relative;

    &:hover {
      .moveBtn {
        opacity: 1;
      }
    }

    //   .el-tree-node__content{
    //   height: 40px;
    //   // padding-left: 12px !important;
    //   color: #505050;
    //  }
    //  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
    //   color: #409eff;
    //  }
    //  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content:hover{
    //   color: #409eff;
    //   background-color: #ecf5ff;
    //  }
    // .el-tree-node__content:hover{
    //   color: #409eff;
    //   background-color: transparent;
    //   // #ecf5ff
    // }
    // .el-tree-node__expand-icon{
    //   color: #333333;
    // }
  }

  /* 拖动条 */
  .moveBtn {
    height: 100%;
    width: 15px;
    padding: 0 6px;
    opacity: 0;
    position: absolute;
    right: -15px;
    top: 0;
  }

  .moveBtn-line {
    width: 100%;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    background-color: #60bfff;
  }

  .silderRight {
    flex: 1;
    position: relative;
    width: 100%;
    height: calc(100vh - 130px);
    overflow: auto;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 3px;
    padding: 20px;
    padding-bottom: 0px;
    margin-left: 15px;
    box-sizing: border-box;
  }
}

.lefttitle {
  min-width: 130px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #1B1B1B;
  border-bottom: 1px var(--el-border-color) var(--el-border-style);
  margin-bottom: 10px;

  .line {
    border-width: 0px;
    width: 5px;
    height: 14px;
    margin-right: 7px;
    background: inherit;
    background-color: rgba(64, 158, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

.dialog-footer {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}

:deep() {
  .el-input-group__append {
    background-color: transparent;
    border: none;
    padding: 0px 5px;
  }
}

.searchinfo {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: space-between;
}

.rules-box {
  width: 260px;
  height: 450px;
  border-radius: 4px;
  border: 1px solid #e6e8ec;

  .rules-box-top {
    height: 45px;
    border-bottom: 1px solid #e6e8ec;
    background-color: #f6f7fa;
    line-height: 45px;
    font-size: 16px;
    color: #606266;
    padding-left: 20px;
  }

  .rules-box-bottom {
    padding: 5px 20px;
    overflow: auto;
  }
}</style>
