<!--新增/编辑管控-->
<template>
    <div class="gradeManage-addPage">
      <el-form v-if="pageType == 1" class="gradeManage-addPage-min scrollbar-box" :model="form" ref="form" :rules="rules">
        <div class="top-max-box">
          <div class="top-title-box">
            <p class="color_one">基本信息</p>
            <p class="reset-button-one" @click="backPage">返回</p>
          </div>
          <div class="info-max-box">
            <el-form-item label="管控名称" prop="name" label-width="80px" style="margin-bottom:20px;">
              <el-input
                style="width:180px;"
                maxlength="15"
                v-model="form.name"
                placeholder="请输入管控名称"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item label="学院" prop="deptId" label-width="80px" style="margin-bottom:20px;">
              <el-select v-model="form.deptId" placeholder="请选择学院" clearable style="width:180px;" @change="deptChange">
                <el-option
                  v-for="dict in deptList"
                  :key="dict.deptId"
                  :label="dict.deptName"
                  :value="dict.deptId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="实验室类型" prop="moldId" label-width="100px" style="margin-bottom:20px;">
              <el-select v-model="form.moldId" placeholder="请选择实验室类型" clearable style="width:180px;">
                <el-option
                  v-for="dict in labMoldList"
                  :key="dict.id"
                  :label="dict.moldName"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="安全分类" prop="typeId" label-width="80px" style="margin-bottom:20px;">
              <el-select v-model="form.typeId" placeholder="请选择安全分类" clearable style="width:180px;">
                <el-option
                  v-for="dict in typeList"
                  :key="dict.id"
                  :label="dict.typeName"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="安全分级" prop="level" label-width="80px" style="margin-bottom:20px;">
              <el-select v-model="form.level" placeholder="请选择安全分级" clearable style="width:180px;">
                <el-option
                  v-for="dict in levelList"
                  :key="dict.id"
                  :label="dict.classifiedName"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status" label-width="80px" style="margin-bottom:20px;">
              <el-switch
                class="switch captcha-img"
                :active-value="1"
                :inactive-value="0"
                active-color="#0183FA"
                inactive-color="#999"
                v-model="form.status"
                active-text="开"
                inactive-text="关"
              >
              </el-switch>
            </el-form-item>
          </div>
        </div>
        <div class="bottom-max-box" v-for="(item,index) in form.ruleList" :key="index">
          <div class="top-title-box" v-if="index == 0">
            <p class="color_one">管控规则</p>
          </div>
          <div class="list-info-max-box">
            <div class="list-info-top-box">
              <el-form-item label="规则名称" :prop="'ruleList.'+ index +'.name'" :rules="rules.ruleName" label-width="100px" class="list-info-top-item">
                <el-input
                  maxlength="15"
                  style="width:240px;"
                  v-model="item.name"
                  placeholder="请输入名称"
                  clearable
                  size="small"
                />
              </el-form-item>
              <el-form-item label="规则描述" :prop="'ruleList.'+ index +'.remark'" :rules="rules.remark" label-width="100px" class="list-info-top-item">
                <el-input
                  maxlength="30"
                  style="width:240px;"
                  v-model="item.remark"
                  placeholder="请输入规则描述"
                  clearable
                  size="small"
                />
              </el-form-item>
              <p class="list-info-top-del el-icon-delete" v-if="index != 0" @click="delFormBigList(index)"></p>
            </div>
            <div class="list-info-bottom-box"
                 style="position: relative;border-bottom:1px dashed #dedede;"
                 v-for="(minItem,minIndex) in item.ruleUserList" :key="minIndex">
              <div style="margin-bottom:20px;">
                <el-form-item label="确认周期" :prop="'ruleList.'+ index +'.ruleUserList.'+ minIndex +'.cycle'" :rules="rules.cycle" class="info-for-min-box" label-width="100px">
                  <el-select v-model="minItem.cycle" placeholder="请选择确认周期" clearable @change="(e)=>cycleChange(item,minIndex,e,)" style="width:240px;">
                    <el-option
                      v-for="dict in minItem.cycleList"
                      :key="dict"
                      :label="dict"
                      :value="dict"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="确认人员" :prop="'ruleList.'+ index +'.ruleUserList.'+ minIndex +'.type'" :rules="rules.type" class="info-for-min-box" label-width="100px">
                  <el-select v-model="minItem.type" placeholder="请选择确认人员" clearable @change="(e)=>userTypeClick(e,minItem)" style="width:240px;">
                    <el-option label="实验室负责人" :value="1" />
                    <el-option label="实验室准入人员" :value="4" />
                    <el-option label="当天进入实验室人员" :value="2" />
                    <el-option label="选择人员" :value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="选择人员" v-if="minItem.type == 3" :prop="'ruleList.'+ index +'.ruleUserList.'+ minIndex +'.userIds'" :rules="rules.userIds" label-width="100px" class="info-for-min-box">
                  <p class="subjectButton" @click="userClick(index,minIndex)">{{minItem.userIds[0]?'已选择'+minItem.userList.length+'人':'选择人员'}}</p>
                </el-form-item>
              </div>
              <div style="position: relative;margin-bottom:30px;">
                <el-form-item label="执行方式" :prop="'ruleList.'+ index +'.ruleUserList.'+ minIndex +'.isAll'" :rules="rules.isAll" class="info-for-min-box" label-width="80px">
                  <el-radio-group v-model="minItem.isAll" style="width:240px;">
                    <el-radio :label="1" style="width:90px;margin:3px 0 0 10px;">多人执行</el-radio>
                    <el-radio :label="0" style="width:90px;margin:3px 0 0 10px;">单人执行</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="需要上传材料" :prop="'ruleList.'+ index +'.ruleUserList.'+ minIndex +'.isUpload'" :rules="rules.isUpload" class="info-for-min-box" label-width="148px">
                  <el-radio-group v-model="minItem.isUpload" style="width:240px;">
                    <el-radio :label="1" style="width:60px;margin:3px 0 0 10px;">是</el-radio>
                    <el-radio :label="0" style="width:60px;margin:3px 0 0 10px;">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-tooltip placement="top" v-if="minItem.isUpload == 1" style="margin-left:10px;">
                  <div slot="content">文档格式包含： pdf / doc / docx / ppt / pptx
                    <br/>视频格式包含： mp4
                    <br/>图片格式包含： png / jpeg / gif
                  </div>
                  <p class="el-icon-question" style="color:#999;font-size:20px;position: absolute;left:680px;top:11px;"></p>
                </el-tooltip>
                <el-form-item label="文件格式" v-if="minItem.isUpload == 1"
                              :prop="'ruleList.'+ index +'.ruleUserList.'+ minIndex +'.fileFormat'" :rules="rules.fileFormat" class="info-for-min-box" label-width="90px">
                  <el-checkbox-group v-model="minItem.fileFormat" style="width:240px;">
                    <el-checkbox label="1" style="width:60px;margin:0 0 0 10px;">文档</el-checkbox>
                    <el-checkbox label="2" style="width:60px;margin:0 0 0 10px;">视频</el-checkbox>
                    <el-checkbox label="3" style="width:60px;margin:0 0 0 10px;">图片</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
              <p class="info-for-min-del el-icon-delete" style="position:absolute;top:50%;right:40px;margin-top:-10px;font-size:24px;" v-if="item.ruleUserList[1]" @click="delFormMinList(item,minIndex)"></p>
            </div>
            <p class="add-user-button reset-button-one" @click="addFormMinList(item)">+ 新增确认人员</p>
          </div>
        </div>
        <p class="addBigButton" @click="addFormBigList">+ 新增管控规则</p>
        <div class="add-button-bottom-box">
          <p class="reset-button-one" @click="backPage">取消</p>
          <p class="inquire-button-one" @click="submitForm">保存</p>
        </div>
      </el-form>
      <div v-if="pageType == 2" class="user-list-page">
        <div class="title-top-box">
          <p>选择人员</p>
          <p class="el-icon-close" @click="outUserClick"></p>
        </div>
        <div class="button-top-box">
          <p></p>
          <p class="add-button-two-90" @click="addUser">+ 新增管控人员</p>
          <p class="inquire-button-one" @click="okUserClick">确定</p>
        </div>
        <div class="table-user-list-box">
          <el-table border :data="tableUserListMin">
            <el-table-column label="身份" align="left" prop="positionName"/>
            <el-table-column label="名称" align="left" prop="nickName"/>
            <el-table-column label="联系方式" align="left" prop="phonenumber"/>
            <el-table-column label="学院" align="left" prop="deptName"/>
            <el-table-column label="专业" align="left" prop="major">
              <template slot-scope="scope">
                {{scope.row.major ? scope.row.major : '--'}}
              </template>
            </el-table-column>
            <el-table-column label="班级" align="left" prop="grade">
              <template slot-scope="scope">
                {{scope.row.gradeName ? scope.row.gradeName : '--'}}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="130">
              <template slot-scope="scope">
                <div class="button-box" style="width:90px;margin:0 auto;">
                  <p class="table-min-button"
                     @click="delItem(scope.row)"
                  >删除
                  </p>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination :page-sizes="[20, 30, 40, 50]"
            style="margin-top:10px;"
            :total="total"
            layout="total, prev, pager, next, jumper"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="pageLit"
          />
        </div>
      </div>
      <subject-list ref="subjectOpen"></subject-list>
      <user-list ref="userOpen"></user-list>
    </div>
</template>

<script>
  import subjectList from "./subjectList.vue"
  import { addGradeManage,getGradeManage,updateGradeManage,listInfo } from "@/api/laboratory/gradeManage";
  import { filterDept } from "@/api/medicUniversity-3_1/index";
  import { listClassifiedAll } from "@/api/laboratory/classified";
  import { listClasstypeAll } from "@/api/laboratory/classtype";
  import { queryOption } from "@/api/laboratory/labMold";
  import { listUser } from "@/api/permissionRequired";
  import userList from "./userList.vue"
  export default {
    name: "addPage",
    components: {
      subjectList,
      userList
    },
    props:{
      propsType:{},
      propsId:{},
    },
    data() {
      return {
        pageType:1,
        // 页面状态
        subjectOpen:false,
        //时间选择器数据
        createTimeDate: [],
        form:{
          name:"",//名称
          deptId:'',
          deptName:"",//学院
          subs:[],//选中实验室列表
          subsData:[],
          ruleList:[//添加选项
            {
              name:"",//名称
              remark:"",//规则描述
              ruleUserList:[
                {
                  type:"",//人员类型 1 实验室负责人，2 当天进入实验室人员，3 选择人员
                  isAll:"",
                  isUpload:"",//需要上传材料（0 否，1 是）
                  fileFormat:[],
                  cycle:"",//确认周期一天，一周，一月，一年
                  cycleList:['一天','一周','一月','季度','半年','一年'],
                  userIds:"",//选择人员id（多个逗号分隔，type=3时有效）
                  userList:[]
                }
              ]
            }
          ]
        },
        // 表单校验
        rules: {
          name: [
            { required: true, message: "请输入管控名称", trigger: "blur" },
            { required: true, message: "请输入管控名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          ruleName:[
            { required: true, message: "请输入规则名称", trigger: "blur" },
            { required: true, message: "请输入规则名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          deptId: [
            { required: true, message: "请选择学院", trigger: "blur" }
          ],
          subs: [
            { required: true, message: "请选择实验室", trigger: "blur" }
          ],
          remark: [
            { required: true, message: "请输入规则描述", trigger: "blur" },
            { required: true, message: "请输入规则描述", validator: this.spaceJudgment, trigger: "blur" }
          ],
          type: [
            { required: true, message: "请选择确认人员", trigger: "blur" }
          ],
          isAll: [
            { required: true, message: "请选择执行方式", trigger: "blur" }
          ],
          isUpload: [
            { required: true, message: "请选择是否需要上传材料", trigger: "blur" }
          ],
          cycle: [
            { required: true, message: "请选择确认周期", trigger: "blur" }
          ],
          userIds: [
            { required: true, message: "请选择人员", trigger: "blur" }
          ],
          fileFormat: [
            { required: true, message: "请选择文件格式", trigger: "blur" }
          ],
        },
        //时间限制
        cycleList:['一天','一周','一月','季度','半年','一年'],
        //用户选择index
        userBigIndex:"",
        userMinIndex:"",
        //学院数据
        deptList:[],
        //实验室类型
        labMoldList:[],
        //分类数据
        typeList:[],
        //分级数据
        levelList:[],
        //table人员列表数据
        tableUserIds:[],
        tableUserList:[],
        tableUserListMin:[],
        total:0,
        queryParams:{
          pageNum:1,
          pageSize:20,
        }
      }
    },
    created() {

    },
    mounted(){
      this.filterDept();
      this.getListClassifiedAll();
      this.getListClasstypeAll();
      this.queryOption();
      if(this.propsType){
        console.log("propsData",this.propsId)
        this.getGradeManage();
      }
    },
    methods: {
      delItem(item){
        let self = this;
        for(let i=0;i<self.tableUserList.length;i++){
          if(self.tableUserList[i].userId == item.userId){
            self.tableUserList.splice(i,1);
            self.pageLit();
            break
          }
        }
      },
      //翻页处理
      pageLit(){
        let self = this;
        let num = (this.queryParams.pageNum - 1) * this.queryParams.pageSize;
        let maxNum = num+10;
        let list = [];
        for(let i = num ;i<self.tableUserList.length;i++){
          if(i<maxNum){
            list.push(self.tableUserList[i]);
          }
        }
        this.$set(this,'tableUserListMin',list);
        this.$set(this,'total',this.tableUserList.length);
      },
      //获取学院
      filterDept(){
        filterDept().then(response => {
          this.deptList = response.data;
        });
      },
      //选中学院
      deptChange(e){
        let self = this;
        for(let i=0;i<self.deptList.length;i++){
          if(e == self.deptList[i].deptId){
            this.form.deptName = self.deptList[i].deptName;
            this.form.deptId = self.deptList[i].deptId;
          }
        }
      },
      //选中周期
      cycleChange(item,minIndex,e){
        this.$forceUpdate()
        let num = 0;
        for(let i=0;i<item.ruleUserList.length;i++){
          if(item.ruleUserList[i].cycle == e){
            num++
          }
        }
        if(num>1){
          item.ruleUserList[minIndex].cycle = '';
          this.msgError('同一个规则下确认周期不能相同')
        }
      },
      queryOption(){
        queryOption({}).then(response=>{
          if(response.code==200){
            this.labMoldList=response.data
          }
        })
      },
      //查询安全分级
      getListClassifiedAll(){
        listClassifiedAll().then(response=>{
          if(response.code==200){
            console.log(response)
            this.levelList=response.data
          }
        })
      },
      //查询安全分类
      getListClasstypeAll(){
        listClasstypeAll().then(response=>{
          if(response.code==200){
            this.typeList=response.data;
          }
        });
      },
      //获取数据详情
      getGradeManage(){
        let self = this;
        getGradeManage(this.propsId).then(response=>{
          let userIds = "";
          for(let i=0;i<response.data.ruleList.length;i++){
            for(let o=0;o<response.data.ruleList[i].ruleUserList.length;o++){
              userIds = userIds + response.data.ruleList[i].ruleUserList[o].userIds + ',';
              this.$set(response.data.ruleList[i].ruleUserList[o],'userList',[]);
              if (response.data.ruleList[i].ruleUserList[o].isUpload == 1 && response.data.ruleList[i].ruleUserList[o].fileFormat){
                this.$set(response.data.ruleList[i].ruleUserList[o],'fileFormat',response.data.ruleList[i].ruleUserList[o].fileFormat.split(','));
              }else{
                this.$set(response.data.ruleList[i].ruleUserList[o],'fileFormat',[]);
              }
              if(response.data.ruleList[i].ruleUserList[o].type == 2){
                response.data.ruleList[i].ruleUserList[o].cycleList = ['一天'];
              }else{
                response.data.ruleList[i].ruleUserList[o].cycleList = ['一天','一周','一月','季度','半年','一年'];
              }
            }
          }
          this.$set(this,'form',response.data);
          //获取选中实验室列表
          let subjectData = {
            pageNum:1,
            pageSize:20,
            subIds:response.data.subIds
          };
          listInfo(subjectData).then(response => {
            this.$set(this.form,'subsData',response.rows)
          });
          //获取选中人员列表
          let userData = {
            pageNum:1,
            pageSize: 1000,
            paramIds:userIds
          }
          listUser(userData).then(response => {
            for(let a=0;a<response.rows.length;a++){
              for(let i=0;i<self.form.ruleList.length;i++){
                for(let o=0;o<self.form.ruleList[i].ruleUserList.length;o++){
                  let text = response.rows[a].userId + '';
                  if (self.form.ruleList[i].ruleUserList[o].userIds.indexOf(text) != -1){
                    self.form.ruleList[i].ruleUserList[o].userList.push(response.rows[a]);
                    // console.log("zhaodaola",response.rows[a].userId)
                  }
                }
              }
            }
          });
        });
      },
      //接收实验室列表数据
      takeSubjectData(ids,data){
        console.log("实验室数据",ids);
        this.$set(this.form,'subs',ids);
        this.$set(this.form,'subsData',data);
        this.$refs.subjectOpen.show();
      },
      //接收人员列表数据
      takeUserData(ids,data){
        let self = this;
        for(let i=0;i<data.length;i++){
          self.tableUserList.push(data[i]);
        }
        // this.$set(this.form.ruleList[this.userBigIndex].ruleUserList[this.userMinIndex],'userIds',ids);
        // this.$set(this.form.ruleList[this.userBigIndex].ruleUserList[this.userMinIndex],'userList',data);
        this.$refs.userOpen.show();
        this.pageLit();
      },
      //选择实验室
      subjectTypeClick(){
        if(this.form.subs[0]){
          this.$refs.subjectOpen.show(this.form.subsData);
        }else{
          this.$refs.subjectOpen.show();
        }
      },
      outUserClick(){
        this.pageType = 1;
      },
      addUser(){
        let self = this;
        let list = [];
        for (let i=0;i<self.tableUserList.length;i++) {
          list.push(self.tableUserList[i].userId);
        }
        if(this.tableUserList[0]){
          // this.$refs.userOpen.show(this.tableUserList);
          this.$refs.userOpen.show(list);
        }else{
          this.$refs.userOpen.show();
        }
      },
      //选择人员
      userClick(index,minIndex){
        this.pageType = 2;
        this.$set(this,'userBigIndex',index);
        this.$set(this,'userMinIndex',minIndex);
        this.$set(this,'tableUserList',JSON.parse(JSON.stringify(this.form.ruleList[this.userBigIndex].ruleUserList[this.userMinIndex].userList)))
        this.pageLit();
        // this.$set(this,'userBigIndex',index);
        // this.$set(this,'userMinIndex',minIndex);
        // if(this.form.ruleList[this.userBigIndex].ruleUserList[this.userMinIndex].userIds[0]){
        //   this.$refs.userOpen.show(this.form.ruleList[this.userBigIndex].ruleUserList[this.userMinIndex].userList);
        // }else{
        //   this.$refs.userOpen.show();
        // }
      },
      //确定选择人员
      okUserClick(){
        let self = this;
        let ids = [];
        for(let i=0;i<self.tableUserList.length;i++){
          ids.push(self.tableUserList[i].userId);
        }
        this.$set(this.form.ruleList[this.userBigIndex].ruleUserList[this.userMinIndex],'userIds',JSON.parse(JSON.stringify(ids)));
        this.$set(this.form.ruleList[this.userBigIndex].ruleUserList[this.userMinIndex],'userList',JSON.parse(JSON.stringify(this.tableUserList)));
        this.pageType = 1;
      },
      //页面切换按钮
      pageTypeClick(type){
        if(this.pageType != type){
          if(type == 1){
            this.pageType = 1;
          }else if(type == 2){
            this.pageType = 2;
          }
        }
      },
      //提交按钮
      submitForm(type) {
        let self = this;
        console.log("self.form",self.form)
        this.$refs["form"].validate(valid => {
          if (valid) {
            //检测是否有多选人员
            for(let i=0;i<self.form.ruleList.length;i++){
              let type1 = 0;
              let type2 = 0;
              for(let o=0;o<self.form.ruleList[i].ruleUserList.length;o++){
                if(self.form.ruleList[i].ruleUserList[o].type == 1){
                  type1++
                }else if(self.form.ruleList[i].ruleUserList[o].type == 2){
                  type2++
                }
              }
              if(type1>1){
                this.msgError('名称为:'+self.form.ruleList[i].name+'的管控规则下,无法添加多条实验室负责人');
                return
              }
              if(type2>1){
                this.msgError('名称为:'+self.form.ruleList[i].name+'的管控规则下,无法添加多条当天进入实验室人员');
                return
              }
            }
            let form = JSON.parse(JSON.stringify(self.form));
            for(let i=0;i<form.ruleList.length;i++){
              for(let o=0;o<form.ruleList[i].ruleUserList.length;o++){
                form.ruleList[i].ruleUserList[o].userIds = form.ruleList[i].ruleUserList[o].userIds + '';
                if(form.ruleList[i].ruleUserList[o].isUpload == 1){
                  form.ruleList[i].ruleUserList[o].fileFormat = form.ruleList[i].ruleUserList[o].fileFormat + '';
                }else {
                  form.ruleList[i].ruleUserList[o].fileFormat = '';
                }
              }
            }
            if(form.id){
              this.updateGradeManage(form);
            }else{
              this.addGradeManage(form);
            }
          }
        });
      },
      //编辑接口
      updateGradeManage(obj){
        updateGradeManage(obj).then(response=>{
          this.msgSuccess("操作成功");
          this.$parent.clickPageType(1);
        });
      },
      //新增接口
      addGradeManage(obj){
        console.log("obj",obj);
        addGradeManage(obj).then(response=>{
          this.msgSuccess("操作成功");
          this.$parent.clickPageType(1);
        });
      },
      //返回
      backPage(){
        this.$parent.clickPageType(1);
      },
      //新增管控规则
      addFormBigList(){
        let obj = {
          name:"",
          remark:"",
          ruleUserList:[
            {
              type:"",//人员类型 1 实验室负责人，2 当天进入实验室人员，3 选择人员
              isAll:"",
              isUpload:"",//需要上传材料（0 否，1 是）
              fileFormat:[],
              cycle:"",//确认周期一天，一周，一月，一年
              cycleList:['一天','一周','一月','季度','半年','一年'],
              userIds:"",//选择人员id（多个逗号分隔，type=3时有效）
              userList:[]
            }
          ]
        }
        this.form.ruleList.push(obj);
        this.$forceUpdate();
      },
      //删除管控规则
      delFormBigList(index){
        this.form.ruleList.splice(index,1);
        this.$forceUpdate();
      },
      //添加人员选项
      addFormMinList(item){
        console.log("item",item)
        let obj = {
          type:"",//人员类型 1 实验室负责人，2 当天进入实验室人员，3 选择人员
          isAll:"",
          isUpload:"",//需要上传材料（0 否，1 是）
          fileFormat:[],
          cycle:"",//确认周期一天，一周，一月，一年
          cycleList:['一天','一周','一月','季度','半年','一年'],
          userIds:"",//选择人员id（多个逗号分隔，type=3时有效）
          userList:[]
        }
        item.ruleUserList.push(obj);
        this.$forceUpdate();
      },
      //删除人员选项
      delFormMinList(item,minIndex){
        console.log("item",item)
        item.ruleUserList.splice(minIndex,1);
        this.$forceUpdate();
      },
      //选择人员类型
      userTypeClick(e,minItem){
        if(e == 2){
          let list = ['一天'];
          this.$set(minItem,'cycleList',list);
          this.$set(minItem,'cycle','一天');
        }else{
          let list = ['一天','一周','一月','季度','半年','一年'];
          this.$set(minItem,'cycleList',list);
        }
        // this.$set(this.form.ruleList[index].ruleUserList[minIndex],'cycle','一天');
      },
    }
  }
</script>

<style lang="scss" scoped>
  .gradeManage-addPage{
    flex:1;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    /*padding:0 20px!important;*/
    *{
      margin:0
    }
    .gradeManage-addPage-min{
      .top-max-box{
        padding:0 20px;
        margin:5px 20px 20px 10px;
        box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
        border-radius:10px;
        .top-title-box{
          display: flex;
          border-bottom:1px solid #dedede;
          p:nth-child(1){
            flex:1;
            line-height:80px;
            font-size:18px;
          }
          p:nth-child(2){
            width:100px;
            margin:20px 0;
          }
          p:nth-child(3){
            width:100px;
            margin:20px 0 0 20px;
          }
        }
        .info-max-box{
          padding:30px 0;
          margin:0 20px;
          display: flex;
          flex-wrap: wrap;
          .subjectButton{
            cursor:pointer;
            display: inline-block;
            text-align: center;
            width: 220px;
            height: 38px;
            line-height:38px;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            color:#999;
            font-size: 14px;
            font-weight:500;
            background:#ffffff;
            margin:0;
          }
          .subjectButton:hover{
            color:#0183FA;
            background:rgba(1,131,250,0.1);
            border: 1px solid #0183FA;
          }
        }
      }
      .bottom-max-box{
        margin:0 20px 20px 10px;
        padding:0 20px 20px;
        box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
        border-radius:10px;
        .top-title-box{
          display: flex;
          border-bottom:1px solid #dedede;
          p:nth-child(1){
            flex:1;
            line-height:80px;
            font-size:18px;
          }
          p:nth-child(2){
            width:100px;
            margin:20px 0;
          }
          p:nth-child(3){
            width:100px;
            margin:20px 0 0 20px;
          }
        }
        .list-info-max-box{
          border-radius:10px;
          .list-info-top-box{
            padding: 30px 0;
            border-bottom:1px solid #dedede;
            .list-info-top-item{
              display: inline-block;
              margin-bottom: 20px;
            }
            .list-info-top-del{
              display: inline-block;
              margin-left:40px;
              cursor: pointer;
              color:#999;
            }
          }
          .list-info-bottom-box{
            padding:30px 0 0;
            .info-for-min-box{
              display: inline-block;
            }
            .info-for-min-del{
              display: inline-block;
              margin-left:20px;
              cursor: pointer;
              color:#999;
            }
            .subjectButton{
              cursor:pointer;
              display: inline-block;
              text-align: center;
              width: 220px;
              height: 38px;
              line-height:38px;
              border-radius: 4px;
              border: 1px solid #DCDFE6;
              color:#999;
              font-size: 14px;
              font-weight:500;
              background:#ffffff;
              margin:0;
            }
            .subjectButton:hover{
              color:#0183FA;
              background:rgba(1,131,250,0.1);
              border: 1px solid #0183FA;
            }
          }
          .add-user-button{
            margin:30px auto 0;
            width:200px;
            display: block;
            border:none;
            color:#0183FA;
          }
        }
      }
      .addBigButton{
        width: 400px;
        height: 40px;
        margin:30px auto 0;
        line-height:40px;
        border-radius: 6px;
        border:1px dashed #dedede;
        color:#333;
        font-size:14px;
        background:#fff;
        cursor: pointer;
        text-align: center;
      }
      .add-button-bottom-box{
        width:260px;
        margin:30px auto;
        display: flex;
        p:nth-child(1){
          display: block;
          width:120px;
          margin-right:20px;
        }
        p:nth-child(2){
          display: block;
          width:120px;
        }
      }
    }
    .user-list-page{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      /*padding:0 20px;*/
      margin:5px 20px 20px 10px;
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
      border-radius:10px;
      .title-top-box{
        display: flex;
        border-bottom:1px solid #dedede;
        p:nth-child(1){
          flex:1;
          line-height:80px;
          font-size:18px;
          color:#0045af;
          margin-left:30px;
        }
        p:nth-child(2){
          font-size:24px;
          width:40px;
          line-height:40px;
          color:#999;
          text-align: center;
          cursor: pointer;
          margin:20px 30px;
          border-radius:50%;
        }
        p:nth-child(2):hover{
          background: #999;
          color:#fff;
        }
      }
      .button-top-box{
        display: flex;
        p:nth-child(1){
          flex:1;
        }
        p:nth-child(2){
          width:140px;
          margin:20px 0;
        }
        p:nth-child(3){
          margin:20px;
        }
      }
      .table-user-list-box{
        margin:0 20px 20px;
        overflow: hidden;
        flex:1;
        display:flex;
        flex-direction: column
      }
    }
  }
</style>
