v3-lab-web/src/views/chemicalManage/basicManagement/chemicalsCabinetManage/addPage.vue

<!--新增/编辑化学品柜-->
<template>
  <div class="page-container chemicalsCabinetManage-addPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{newData.cabinetId?'编辑化学品柜':'新增化学品柜'}}</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p class="page-top-title-submit-p" @click="submitForm">提交</p>
    </div>
    <div class="content-box scrollbar-box">
      <el-form class="add-form-box" :model="newData" ref="form" :rules="rules" label-width="140px">
        <div class="form-max-box">
          <el-form-item label="名称：" prop="cabinetName">
            <el-input v-model="newData.cabinetName" placeholder="请输入化学品柜名称" maxLength="20" style="width:500px;"></el-input>
          </el-form-item>
          <el-form-item label="学院：" prop="deptId">
            <el-select v-model="newData.deptId" @change="deptChange" placeholder="请选择所属学院" style="width: 500px">
              <el-option
                v-for="item in deptOptions"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="form-max-box">
          <el-form-item label="实验室：" prop="subId">
            <el-select v-model="newData.subId" @change="subChange" placeholder="请选择实验室" style="width: 500px">
              <el-option
                v-for="item in subOptions"
                :key="item.subId"
                :label="item.subName"
                :value="item.subId"
              />
            </el-select>
          </el-form-item>
          <!--<el-form-item label="摄像头：" prop="cameraId">-->
            <!--<el-select v-model="newData.cameraId" placeholder="请选择摄像头" style="width: 500px">-->
              <!--<el-option-->
                <!--v-for="item in cameraOptions"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value"-->
              <!--/>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
        </div>
        <!--<div class="form-max-box">-->
          <!--<el-form-item label="采集器：" prop="collectorId">-->
            <!--<el-select v-model="newData.collectorId" placeholder="请选择采集器" style="width: 500px">-->
              <!--<el-option-->
                <!--v-for="item in harvesterOptions"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value"-->
              <!--/>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
        <!--</div>-->
        <div class="form-max-box">
          <el-form-item label="柜门设置：" prop="cabinetDoorModelList">
            <div class="form-add-box">
              <p class="add-time-button-p" @click="addItemButton">+ 新增柜门</p>
              <p>请按照从上到下的顺序进行添加</p>
            </div>
          </el-form-item>
        </div>
        <div class="form-big-box">
          <div class="form-for-max-box" v-for="(item,index) in newData.cabinetDoorModelList" :key="index">
            <p class="el-icon-circle-close del-position-p" @click="deleteItemButton(index,item)"></p>
            <div class="item-box">
              <el-form-item label="柜门名称：" label-width="100px"
                            :prop="'cabinetDoorModelList.'+ index +'.doorName'" :rules="rules.itemData1">
                <el-input v-model="item.doorName" placeholder="请输入柜门名称"
                          clearable maxLength="5" style="width:280px;"></el-input>
              </el-form-item>
            </div>
            <div class="item-text-box">
              <el-form-item label="层数：" label-width="100px"
                            :prop="'cabinetDoorModelList.'+ index +'.doorLayers'" :rules="rules.itemData2">
                <el-input-number v-model="item.doorLayers" style="width:200px;"
                                 :controls="false" :min="1" :max="10">
                </el-input-number>
              </el-form-item>
              <p class="tips-p">层</p>
            </div>
            <div class="item-box">
              <el-form-item label="管理员：" label-width="100px"
                            :prop="'cabinetDoorModelList.'+ index +'.cabinetAdminModelList'" :rules="rules.cabinetAdminModelList">
                <el-select
                  style="width:460px;"
                  v-model="item.cabinetAdminModelList"
                  multiple
                  filterable
                  remote
                  clearable
                  reserve-keyword
                  @change="(val)=>userSelectClick(val,index)"
                  @clear="userClearClick"
                  placeholder="请输入姓名进行搜索"
                  :remote-method="(val)=>userSelect(val,index)">
                  <el-option
                    v-for="itemOptions in item.userOptions"
                    :key="itemOptions.userId"
                    :label="itemOptions.userName"
                    :value="itemOptions.userId">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="item-box">
              <el-form-item label="开门方式：" label-width="100px"
                            :prop="'cabinetDoorModelList.'+ index +'.unlockingMethod'" :rules="rules.unlockingMethod">
                <el-select v-model="item.unlockingMethod" placeholder="请选择开门方式" @change="unlockingMethodChange(index)" style="width: 460px">
                  <el-option
                    v-for="item in openOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="item-box" v-if="item.unlockingMethod == 2">
              <el-form-item label="智能锁：" label-width="100px"
                            :prop="'cabinetDoorModelList.'+ index +'.cabinetLockList'" :rules="rules.cabinetLockList">
                <el-select v-model="item.cabinetLockList" multiple placeholder="请选择" @change="(val)=>lockChange(index,val)"  :multiple-limit='2' style="width: 460px">
                  <el-option
                    v-for="item in lockOptions"
                    :key="item.lockId"
                    :label="item.lockName"
                    :value="item.lockId"
                    :disabled="item.disabled"
                  >
                    {{item.lockName}}-{{item.lockNum}}
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="item-box" v-if="item.unlockingMethod == 3" style="display: flex;">
              <el-form-item label="钥匙柜：" label-width="100px"
                            :prop="'cabinetDoorModelList.'+ index +'.cabinetLockList'" :rules="rules.cabinetLockList">
                <el-select v-model="item.cabinetLockList" multiple placeholder="请选择"  @change="(val)=>cabinetLockChange(index,val)" :multiple-limit='1' style="width: 180px">
                  <el-option
                    v-for="item in keyCabinetOptions"
                    :key="item.lockId"
                    :label="item.lockName"
                    :value="item.lockId"
                    :disabled="item.disabled"
                  >
                    {{item.lockName}}-{{item.lockNum}}
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="柜格：" label-width="100px"
                            :prop="'cabinetDoorModelList.'+ index +'.cabinetLattice'" :rules="rules.cabinetLattice">
                <el-select v-model="item.cabinetLattice" multiple placeholder="请选择" :multiple-limit='9' collapse-tags style="width: 180px">
                  <el-option
                    v-for="item in gratingOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { getDeptDropList, systemUserSelect,iotDeviceFindByType } from '@/api/commonality/permission'
  import { laboratorySubRelInfoGetRelList } from '@/api/commonality/noPermission'
  import {
    chemicalCabinetAdd, chemicalCabinetGetLockList,
    chemicalCabinetUpdate,
    chemicalStockGetStockByDoorId
  } from '@/api/chemicalManage'
  export default {
    name: 'addPage',
    props:{
      propsData:{},
    },
    data(){
      return{
        deptOptions:[],
        subOptions:[],
        cameraOptions:[
          {label:'摄像头1',value:'1'},
          {label:'摄像头2',value:'2'},
          {label:'摄像头3',value:'3'},
        ],
        harvesterOptions:[
          {label:'采集器1',value:'1'},
          {label:'采集器2',value:'2'},
          {label:'采集器3',value:'3'},
        ],
        userOptions:[],
        userOptionsArr:[],//临时存储管理员数组
        openOptions:[
          {label:'无锁',value:'1'},
          {label:'智能锁',value:'2'},
          // {label:'钥匙柜',value:'3'},
        ],
        lockOptions:[],
        keyCabinetOptions:[
          {lockName:'钥匙柜名称1',lockId:'1',lockNum:'00001'},
          {lockName:'钥匙柜名称2',lockId:'2',lockNum:'00002'},
          {lockName:'钥匙柜名称3',lockId:'3',lockNum:'00003'},
        ],
        gratingOptions:[
          {label:'1号格',value:'1'},
          {label:'2号格',value:'2'},
          {label:'3号格',value:'3'},
          {label:'4号格',value:'4'},
          {label:'5号格',value:'5'},
          {label:'6号格',value:'6'},
          {label:'7号格',value:'7'},
          {label:'8号格',value:'8'},
          {label:'9号格',value:'9'},
        ],
        //当前实验室管理员和安全员id
        adminAndSafeId:[],
        //当前实验室管理员和安全员id和name
        adminAndSafeList:[],
        newData:{
          cabinetName:'',
          deptId:'',
          deptName:'',
          subId:'',
          subName:'',
          cameraId:'',
          collectorId:'',
          cabinetDoorModelList:[
            {
              doorName:'默认柜门1',
              doorLayers:'',
              cabinetAdminModelList:[],
              unlockingMethod:'1',
              cabinetLockList:[],
              cabinetLattice:[],
              userOptions:[],
              userNameOptions:[],
            }
          ],
        },
        rules:{
          cabinetName: [
            { required: true, message: "请输入化学品柜名称", trigger: "blur" },
            { required: true, message: "请输入化学品柜名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          deptId: [
            { required: true, message: "请选择学院", trigger: "blur" },
            { required: true, message: "请选择学院", validator: this.spaceJudgment, trigger: "blur" }
          ],
          subId: [
            { required: true, message: "请选择实验室", trigger: "blur" },
            { required: true, message: "请选择实验室", validator: this.spaceJudgment, trigger: "blur" }
          ],
          cameraId: [
            { required: true, message: "请选择摄像头", trigger: "blur" },
            { required: true, message: "请选择摄像头", validator: this.spaceJudgment, trigger: "blur" }
          ],
          collectorId: [
            { required: true, message: "请选择采集器", trigger: "blur" },
            { required: true, message: "请选择采集器", validator: this.spaceJudgment, trigger: "blur" }
          ],
          cabinetDoorModelList: [
            { required: true, message: "请添加柜门", trigger: "blur" },
            { required: true, message: "请添加柜门", validator: this.spaceJudgment, trigger: "blur" }
          ],
          doorName: [
            { required: true, message: "请输入柜门名称", trigger: "blur" },
            { required: true, message: "请输入柜门名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          doorLayers: [
            { required: true, message: "请输入层数", trigger: "blur" },
            { required: true, message: "请输入层数", validator: this.spaceJudgment, trigger: "blur" }
          ],
          cabinetAdminModelList: [
            { required: true, message: "请选择管理员", trigger: "blur" },
            { required: true, message: "请选择管理员", validator: this.spaceJudgment, trigger: "blur" }
          ],
          unlockingMethod: [
            { required: true, message: "请选择开门方式", trigger: "blur" },
            { required: true, message: "请选择开门方式", validator: this.spaceJudgment, trigger: "blur" }
          ],
          cabinetLockList: [
            { required: true, message: "请选择智能锁", trigger: "blur" },
            { required: true, message: "请选择智能锁", validator: this.spaceJudgment, trigger: "blur" }
          ],
          cabinetLattice: [
            { required: true, message: "请选择柜格", trigger: "blur" },
            { required: true, message: "请选择柜格", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        //实验室管理员数据
        safeList:[],
        safeIdList:[],
        //过滤柜锁
        filterCabinetLock:[],
        //存储编辑的时候返回的智能锁
        editLockList:[],
      }
    },
    created(){

    },
    mounted(){
      let self=this;
      this.initialize();
      this.getDeptDropList();


    },
    methods:{
      //初始化
      initialize(){
        let self=this;
        if(this.propsData.cabinetId){

          let obj = JSON.parse(JSON.stringify(this.propsData))
          let newData = {
            cabinetId:obj.cabinetId,
            cabinetName:obj.cabinetName,
            deptId:obj.deptId,
            deptName:obj.deptName,
            subId:obj.subId,
            subName:obj.subName,
            cameraId:obj.cameraId,
            collectorId:obj.collectorId,
            cabinetDoorModelList:[],
          }
          obj.cabinetDoorVoList.forEach((item)=>{
            let minObj = {
              doorLayers:item.doorLayers,
              doorName:item.doorName,
              doorUniqueId:item.doorUniqueId,
              unlockingMethod:item.unlockingMethod+'',
              cabinetLockList:[],
              cabinetAdminModelList:[],
              userOptions:[],
              userNameOptions:[],
            };
            if(item.cabinetLockVoList){
              item.cabinetLockVoList.forEach((bigItem)=>{
                minObj.cabinetLockList.push(bigItem.lockId)
                this.editLockList.push(bigItem.lockId)
              })
            }
            if(item.cabinetAdminVoList){
              item.cabinetAdminVoList.forEach((minItem)=>{
                minObj.cabinetAdminModelList.push(minItem.userId)
                minObj.userOptions.push({
                  userId:minItem.userId,
                  userName:minItem.userName,
                })
                minObj.userNameOptions.push({
                  userId:minItem.userId,
                  userName:minItem.userName,
                })
              })
            }
            newData.cabinetDoorModelList.push(minObj);
          })
          this.subOptions=[{subId:obj.subId,subName:obj.subName,}]
          this.$set(this,'newData',newData);
          this.chemicalCabinetGetLockList(this.newData.cabinetId);


        }else{
          this.chemicalCabinetGetLockList('');
        }
      },
      // 返回按钮
      backPage(){
        this.$parent.tableButton(5);
      },
      //人员数组去重
      unique(arr) {
        for(var i=0; i<arr.length; i++){
          for(var j=i+1; j<arr.length; j++){
            if(arr[i].userId==arr[j].userId){         //第一个等同于第二个，splice方法删除第二个
              arr.splice(j,1);
              j--;
            }
          }
        }
        return arr;
      },
      /** 提交按钮 */
      submitForm() {
        let self = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            let obj = JSON.parse(JSON.stringify(this.newData))
            let modelList = [];
            obj.cabinetDoorModelList.forEach((item)=>{
              let userList = [];
              item.cabinetAdminModelList.forEach((bigItem)=>{
                let num = 0;
                item.userNameOptions.forEach((minItem)=>{
                  if(bigItem == minItem.userId){
                    if(num < 1){
                      num++
                      userList.push({
                        userId:minItem.userId,
                        userName:minItem.userName,
                      })
                    }
                  }
                })
              })
              delete item.userOptions;
              delete item.userNameOptions;
              let lockList = [];
              item.cabinetLockList.forEach((item)=>{
                self.lockOptions.forEach((minItem)=>{
                  if(item == minItem.lockId){
                    lockList.push({
                      lockId: minItem.lockId,
                      lockName: minItem.lockName,
                      lockNum: minItem.lockNum,
                    })
                  }
                })
              })
              modelList.push({
                doorLayers:item.doorLayers,
                doorUniqueId:item.doorUniqueId,
                doorName:item.doorName,
                unlockingMethod:item.unlockingMethod,
                cabinetLockList:lockList,
                cabinetAdminModelList:userList,
              })
            })
            let upData = {
              cabinetName : obj.cabinetName,
              deptId : obj.deptId,
              deptName : obj.deptName,
              subId : obj.subId,
              subName : obj.subName,
              cameraId:1,
              collectorId:1,
              cabinetDoorModelList:modelList,
            }
            if (this.newData.cabinetId){//编辑
              upData.cabinetId = this.newData.cabinetId;
              chemicalCabinetUpdate(upData).then( response => {
                self.msgSuccess("提交成功")
                self.$parent.tableButton(5);
              });
            }else{//提交
              chemicalCabinetAdd(upData).then( response => {
                self.msgSuccess("提交成功")
                self.$parent.tableButton(5);
              });
            }
          }
        })
      },
      //化学品柜-过滤柜锁
      chemicalCabinetGetLockList(cabinetId){
        chemicalCabinetGetLockList({cabinetId:cabinetId}).then(response => {
          this.$set(this, 'filterCabinetLock', response.data)
          if (this.newData.cabinetId){
            this.iotDeviceFindByType(this.newData.subId);
          }
        });
      },
      //查询学院列表
      getDeptDropList(){
        getDeptDropList({deptName:"",level:2,deptType:1}).then(response => {
          this.$set(this, 'deptOptions', response.data)
        });
      },
      //学院选中
      deptChange(){
        this.$set(this.newData,'subId','');
        this.$set(this,'userOptions',[]);
        this.newData.cabinetDoorModelList.forEach((item,index)=>{
          item.doorName = '默认柜门'+(index+1);
          item.doorLayers = '';
          item.unlockingMethod = '1';
          item.cabinetLockList = [];
          item.cabinetAdminModelList = [];
          item.userOptions = [];
          item.userNameOptions = [];
        })
        for (let i=0;i<this.deptOptions.length;i++){
          if (this.newData.deptId==this.deptOptions[i].deptId){
            this.$set(this.newData, 'deptName', this.deptOptions[i].deptName)
          }
        }
        this.laboratorySubRelInfoGetRelList(this.newData.deptId,'');
      },
      //根据学院id查询实验室列表
      laboratorySubRelInfoGetRelList(deptId,subId){
        let obj = {
          deptId:deptId,
          subId:subId,
          subName:'',
        }
        laboratorySubRelInfoGetRelList(obj).then(response => {
          this.subOptions = response.data;
        });
      },
      //实验室选中
      subChange(val){
        let list = [];
        let idList = [];
        this.subOptions.forEach((item)=>{
          if(item.subId == val){
            this.$set(this.newData, 'subName', item.subName)
            if (item.adminId){
              idList.push(item.adminId)
              list.push({
                userId:item.adminId,
                userName:item.adminName,
              })
            }
            if (item.oneSafeId){
              if(item.adminId != item.oneSafeId){
                idList.push(item.oneSafeId)
                list.push({
                  userId:item.oneSafeId,
                  userName:item.oneSafeName,
                })
              }else{
                if(item.twoSafeId){
                  if(item.adminId != item.twoSafeId){
                    idList.push(item.twoSafeId)
                    list.push({
                      userId:item.twoSafeId,
                      userName:item.twoSafeName,
                    })
                  }
                }
              }
            }
          }
        })
        this.$set(this,'safeList',list);
        this.$set(this,'safeIdList',idList);
        //刷新现有数据
        this.newData.cabinetDoorModelList.forEach((item,index)=>{
          item.doorName = '默认柜门'+(index+1);
          item.doorLayers = '';
          item.unlockingMethod = '1';
          item.cabinetLockList = [];
          item.cabinetAdminModelList = idList;
          item.userOptions = JSON.parse(JSON.stringify(list));
          item.userNameOptions = JSON.parse(JSON.stringify(list));
        })
        this.iotDeviceFindByType(this.newData.subId);
      },
      //人员选中触发
      userSelectClick(val,index){
        let self = this;
        this.newData.cabinetDoorModelList[index].userOptions.forEach((item)=>{
          val.forEach((item2)=>{
            if(item.userId == item2){
              self.newData.cabinetDoorModelList[index].userNameOptions.push({
                userId:item.userId,
                userName:item.userName,
              })
            }
          })

        })
        this.$forceUpdate()
      },
      //人员清空触发
      userClearClick(){
      },
      //人员查询
      userSelect(query,index){
        if (query !== '') {
          let obj = {
            userType:'',
            userName:query,
          }
          systemUserSelect(obj).then(response => {
            this.$set(this.newData.cabinetDoorModelList[index],'userOptions',response.data);
            // this.userOptions = response.data;
            // self.userOptionsArr=[...self.userOptionsArr,...response.data]
          });
        } else {
          this.userOptions = [];
        }
      },
      //开门方式切换
      unlockingMethodChange(index){
        this.$set(this.newData.cabinetDoorModelList[index],'cabinetLockList',[]);
        this.$set(this.newData.cabinetDoorModelList[index],'cabinetLockListArr',[]);
      },
      //查询智能锁列表
      iotDeviceFindByType(subId){
        iotDeviceFindByType({subjectId:subId,typeKeyList:['cabinetLock'],ids:this.filterCabinetLock}).then(response => {
          let list=[];
          response.data.forEach(function(item) {
            list.push({lockName:item.deviceName,lockId:item.id,lockNum:item.deviceNo})
          })
          this.$set(this, 'lockOptions', list)

          if (this.newData.cabinetId){
            let editLockListArr = Array.from(new Set(this.editLockList));
            this.lockOptions.forEach(v => {
              v.disabled = false
              editLockListArr.forEach(item=>{
                if (item ==v.lockId){
                  v.disabled = true
                }
              })
            })
          }
        });
      },
      //智能锁选中触发
      lockChange(index,val){
        let self = this;
        this.lockOptions.forEach(v => {
          v.disabled = false
          console.log(self.newData.cabinetDoorModelList[index])
          val.forEach(item=>{
            if (item ==v.lockId){
              v.disabled = true
            }
          })
        })
      },
      //钥匙柜选中触发
      cabinetLockChange(index,val){
        let self = this;
        let list=[];
        val.forEach((item)=>{
          self.keyCabinetOptions.forEach((minItem)=>{
            if(item == minItem.lockId){
              list.push({
                lockName:minItem.lockName,
                lockId:minItem.lockId,
                lockNum:minItem.lockNum
              })
            }
          })
        })
        this.$set(this.newData.cabinetDoorModelList[index],'cabinetLockListArr',list);
      },

      //添加柜门
      addItemButton(){
        if(this.newData.cabinetDoorModelList[5]){
          this.msgError('最多添加6个柜门')
        }else{
          this.newData.cabinetDoorModelList.push({
            doorName:'默认柜门'+Number(this.newData.cabinetDoorModelList.length+1),
            doorLayers:'',
            cabinetAdminModelList:this.safeIdList,
            unlockingMethod:'1',
            cabinetLockList:[],
            cabinetLattice:'',
            userOptions:this.safeList,
            userNameOptions:this.safeList,
          })
          this.$forceUpdate()
        }
      },
      //删除柜门
      deleteItemButton(index,item){
        console.log(item)
        let self=this;
        if(this.newData.cabinetDoorModelList.length ==1){
          this.msgError('最少添加1个柜门')
        }else{
          if (this.newData.cabinetId){//编辑
            chemicalStockGetStockByDoorId({doorUniqueId:item.doorUniqueId}).then(response => {
              if (response.data){
                self.newData.cabinetDoorModelList.splice(index,1);
                self.$forceUpdate()
              }else{
                self.msgError("该柜门不能删除!");
              }
            });
          }else{//新增
            self.newData.cabinetDoorModelList.splice(index,1);
            self.$forceUpdate()
          }
        }

      },
    },
  }
</script>

<style scoped lang="scss">
  .chemicalsCabinetManage-addPage{
    .content-box{
      flex:1;
      display: flex;
      padding:30px;
      .form-max-box{
        display: flex;
        .form-add-box{
          display: flex;
          .add-time-button-p{
            width:100px;
            height:40px;
            line-height:40px;
            text-align: center;
            cursor: pointer;
            background-color: #0183FA;
            border-radius:4px;
            color:#fff;
            margin-right: 35px;
          }
          p:nth-child(2){
            font-size:14px;
            color:#999999;
          }
        }
      }
      .form-big-box{
        padding-bottom:20px;
        .form-for-max-box{
          width:600px;
          margin-left:140px;
          border:1px solid #E0E0E0;
          border-radius:4px;
          padding-top:20px;
          position: relative;
          margin-bottom:20px;
          .item-text-box{
            display: flex;
            ::v-deep input{
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
            }
            .del-item-p{
              width:80px;
              line-height:40px;
              height:40px;
              text-align: center;
              background-color: #0045AF;
              color:#fff;
              border-top-right-radius: 4px;
              border-bottom-right-radius: 4px;
            }
            .tips-p{
              width:80px;
              line-height:40px;
              height:40px;
              text-align: center;
              background-color: #E0E0E0;
              color:#333;
              border-top-right-radius: 4px;
              border-bottom-right-radius: 4px;
            }
          }
          .item-box{

          }
          .del-position-p{
            z-index:10;
            position: absolute;
            top:10px;
            right: 10px;
            font-size:24px;
            color:#FF6666;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>