<template>
  <div class="bgBox">
    <div class="topBox">
      <div class="headerBox">
        <div class="top">
          <span class="oneColor"></span>
          <span class="titleOne">报警预警场景</span>
        </div>
        <el-button class="buts" @click="editSubmit">保存</el-button>
      </div>

      <div class="formBox">
        <div class="digName">
          <div class="aviName">
            <span class="aviP">名称</span>
            <el-input v-model="warnName" placeholder="请输入名称"></el-input>
          </div>
          <div class="aviName">
            <span class="aviP">航司</span>
            <el-select v-model="code2" placeholder="请选择">
              <el-option
                v-for="item in aircompeny"
                :key="item.value"
                :label="item.airCompanyName"
                :value="item.code2"
              >
              </el-option>
            </el-select>
          </div>
          <div class="aviName" style="margin-left: 20px">
            <span class="aviP">起飞机场</span>
            <el-select v-model="code3" placeholder="请选择起飞机场">
              <el-option
                v-for="item in arilist"
                :key="item.value1"
                :label="item.name"
                :value="item.code3"
              >
              </el-option>
            </el-select>
          </div>
          <div class="aviName" style="margin-left: 20px">
            <span class="aviP">降落机场</span>
            <el-select v-model="code4" placeholder="请选择降落机场">
              <el-option
                v-for="item in arilist"
                :key="item.value2"
                :label="item.name"
                :value="item.code3"
              >
              </el-option>
            </el-select>
          </div>
          <div class="digName4">
            <div class="aviP1">航班号</div>
            <el-input placeholder="请输入航班号" v-model="flightNO"></el-input>
          </div>
        </div>
        <div class="digName1">
          <div class="aviName1">
            <div class="aviP2">起止时间</div>
            <el-date-picker
              v-model="BeginTime1"
              type="datetimerange"
              value-format="yyyy-MM-dd hh:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>

          <div class="aviName2">
            <div class="aviP3">备注</div>
            <el-input type="textarea" v-model="desc" resize="none"></el-input>
          </div>
        </div>
      </div>
    </div>

    <div class="centerBox">
      <Search
        title="报警预警策略"
        :isSlot="false"
        :isChild="true"
        @clearSearchData="clearSearchData"
        @getSearchData="getSearchData"
        style="padding-left: 16px; padding-right: 32px"
      />

      <div class="LBox">
        <!-- <div @click="addDig" class="lbox-add r24">
          <div class="terminal-info-add-icons">
            <span class="icon el-icon-plus"></span>
          </div>
        </div> -->
        <el-row :gutter="24">
          <el-col :span="4">
            <div @click="addDig" class="lbox-add r24">
              <div class="terminal-info-add-icons">
                <span class="icon el-icon-plus"></span>
              </div>
            </div>
          </el-col>
          <el-col :span="4" v-for="(item, index) in infoArr" :key="index">
            <div class="headerBoxs">
              <div class="tltle-head">
                <!-- <div class="title flower">
                  {{ item.name }}
                </div> -->
                <el-tooltip
                  effect="dark"
                  :content="item.name"
                  placement="bottom"
                >
                  <div class="title flower">{{ item.name }}</div>
                </el-tooltip>
                <div
                  @click="delBox(item, index)"
                  class="el-icon-close icon"
                ></div>
              </div>
              <div class="text item" style="margin-top: 15px">
                <div class="adTime fwgh" style="margin-bottom: 15px">
                  预警时长:<span class="timeER">{{ item.beginTime }}</span>
                </div>
                <div class="adTime fwgh">
                  报警时长:<span class="timeER">{{ item.endTime }}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- <div
          v-for="(item, index) in infoArr"
          @click="infoIndex(item, index)"
          :key="index"
          class="forBox"
        >
          <div class="name">{{ item.name }}</div>
          <div class="edit right">
            <span @click.stop="editInfo(item)" class="round">
              <div class="edit_log" style="margin-left: 0"></div>
            </span>
          </div>
          <div @click.stop="delBox(item)" class="close">
            <i class="el-icon-close"></i>
          </div>
        </div> -->
      </div>
    </div>

    <!--删除弹框-->
    <Dialog :flag="flag">
      <div class="airportInfoDialog">
        <div class="del-title">删除报警预警策略</div>
        <div class="content er">
          <div class="log"></div>
          是否确认删除
          <p style="color: #eb2f3b; margin-top: 0px; margin-bottom: 0px">
            {{ this.delName }}?
          </p>
        </div>
        <div class="DelFoot right t30" style="background: #ffffff">
          <el-button
            size="medium"
            @click="remove"
            class="r25 buwitch"
            type="danger"
            >删除</el-button
          >
          <el-button size="medium" class="r26" @click="flag = false"
            >取消</el-button
          >
        </div>
      </div>
    </Dialog>
    <!-- 新增 -->
    <div class="EditDig">
      <el-dialog
        @close="closeForm"
        :visible.sync="editFalg"
        :title="posType === 1 ? '新增报警预警策略' : '编辑报警预警策略'"
      >
        <el-form ref="form" :model="form" label-width="80px">
          <div class="itemBox">
            <el-form-item label="名称">
              <el-input
                @input="changeValue"
                v-model="form.name"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="策略类型">
              <el-select v-model="region" placeholder="请选择航司">
                <el-option
                  v-for="(item, index) in regform"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="itemBox">
            <el-form-item label="预警时长">
              <el-input
                @input="changeValue1"
                v-model="form.WarningDur"
                placeholder="请输入预警时长(分)"
              ></el-input>
            </el-form-item>
            <el-form-item label="报警时长">
              <el-input
                @input="changeValue2"
                v-model="form.alamDur"
                placeholder="请输入报警时长(分)"
              ></el-input>
            </el-form-item>
          </div>
          <div class="itemBox">
            <el-form-item label="开始节点">
              <el-select v-model="form.StartNode" placeholder="请选择开始节点">
                <el-option
                  v-for="(item, index) in traceList"
                  :key="index"
                  :label="item.nodeName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-input
                placeholder="请选择开始位置"
                v-model="form.StartPosition"
              >
              </el-input> -->
            <el-form-item label="开始位置">
              <el-select
                v-model="form.StartPosition"
                placeholder="请选择开始位置"
              >
                <el-option
                  v-for="(item, index) in StartPositionList"
                  :key="index"
                  :label="item.remarkCn"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="itemBox">
            <el-form-item label="结束节点">
              <el-select v-model="form.EndNode" placeholder="请选择结束节点">
                <el-option
                  v-for="(item, index) in traceList"
                  :key="index"
                  :label="item.nodeName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-input placeholder="请选择结束位置" v-model="form.EndPosition">
              </el-input> -->
            <el-form-item label="结束位置">
              <el-select
                v-model="form.StartPosition"
                placeholder="请选择结束位置"
              >
                <el-option
                  v-for="(item, index) in endPositionList"
                  :key="index"
                  :label="item.remarkCn"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- <div class="itemBox">
            <el-form-item label="备注">
              <el-input
                @input="changeValue3"
                type="textarea"
                v-model="form.desc"
              ></el-input>
            </el-form-item>
          </div> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" class="r25 r26" @click="submit"
            >提 交</el-button
          >
          <el-button @click="close" class="r26" style="margin-left: 12px"
            >取 消</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Dialog from "@/layout/components/Dialog/index.vue";
import Search from "@/layout/components/Search/index.vue";
import {
  AddWarning,
  AirlinesInquiry,
  AirportsList,
  UserWarningList,
  AddUserWarning,
  DelUserWarning,
  traceNodeslist,
  Alarmlocation,
} from "@/api/SystemSettings.js";
export default {
  components: { Dialog, Search },
  data() {
    return {
      id: this.$route.query.id,
      airportCode2: this.$route.query.airportCode2,
      BeginTime1: this.$route.query.BeginTime1,
      flightNO: this.$route.query.flightNO,
      ladingAirport: this.$route.query.ladingAirport,
      desc: this.$route.query.desc,
      warnName: this.$route.query.warnName,
      code2: this.$route.query.airportCode2,
      code3: this.$route.query.departureAirport,
      code4: this.$route.query.ladingAirport,
      flag: false,
      aircompeny: [],
      infoArr: [
        {
          name: "名称",
        },
      ], //报警预警策略列表
      posType: 1,
      arilist: [],
      traceList: [],
      editFalg: false,
      posArrCopy: null,
      delName: "",
      DelId: "", //删除场景id
      region: "",
      StartNode: "",
      StartNodeer: "",
      EndNodeer: "",
      EndNode: "",
      pid: "",
      StartPositionList: [],
      endPositionList: [],
      form: {
        name: "",
        WarningDur: "",
        alamDur: "",
        desc: "",
        StartPosition: this.$route.query.StartPosition,
        EndPosition: this.$route.query.EndPosition,
      },
      regform: [
        {
          name: "节点或位置间超时",
          id: 1,
        },
        {
          name: "临近航班起飞",
          id: 2,
        },
        {
          name: "降落后超时",
          id: 3,
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    // this.getAirlines();
    // this.getAirlist();
    // this.UserWarning();
    // this.tracenode();
    // this.AlarmlocationList(this.code3, "1");
    // this.AlarmlocationList(this.code4, "2");
  },
  watch: {
    code3() {
      this.AlarmlocationList(this.code3, "1");
    },
    code4() {
      this.AlarmlocationList(this.code4, "2");
    },
  },
  methods: {
    //获取开始位置
    async AlarmlocationList(data, val) {
      if (val == "1") {
        const result = await Alarmlocation({ code: data });
        if (result.code == 0) {
          this.StartPositionList = result.returnData;
        }
      } else if (val == "2") {
        const result = await Alarmlocation({ code: data });
        if (result.code == 0) {
          this.endPositionList = result.returnData;
        }
      }
    },
    //清除搜索
    clearSearchData() {},
    //模糊查询
    findarrays(ar, feature, v) {
      var arr = [];
      for (var i = 0; i < ar.length; i++) {
        var atxt = ar[i][feature];
        var btxt = v;
        //		将字符串按某个字符切割成若干个字符串，并以数组形式返回
        var atxtarr = atxt.split("");
        var btxtarr = btxt.split("");
        var type = 0;
        for (var k = 0; k < atxtarr.length; k++) {
          for (var p = 0; p < btxtarr.length; p++) {
            if (atxtarr[k] == btxtarr[p]) {
              type = 1;
            }
          }
        }
        if (type == 1) {
          arr.push(ar[i]);
        }
      }
      return arr;
    },
    //搜索
    getSearchData(val) {
      if (val) {
        this.infoArr = this.findarrays(this.infoArr, "name", val);
      } else {
        this.UserWarning();
      }
    },
    closeForm() {
      this.$refs.form.resetFields();
    },
    changeValue(val) {
      this.form.name = val;

      this.$forceUpdate();
    },
    changeValue1(val) {
      this.form.WarningDur = val;
      this.$forceUpdate();
    },
    changeValue2(val) {
      this.form.alamDur = val;
      this.$forceUpdate();
    },
    changeValue3(val) {
      this.form.desc = val;
      this.$forceUpdate();
    },

    //获取航司信息列表
    async getAirlines() {
      const res = await AirlinesInquiry({});
      if (res.code === 0) {
        this.aircompeny = res.returnData;
      } else {
        this.$message.error.message;
      }
    },
    //机场列表
    async getAirlist() {
      const res = await AirportsList({});
      if (res.code === 0) {
        this.arilist = res.returnData;
      } else {
        this.$message.error.message;
      }
    },
    //节点信息列表
    async tracenode() {
      const res = await traceNodeslist({});
      if (res.code === 0) {
        this.traceList = res.returnData;
      } else {
        this.$message.error.message;
      }
    },
    //编辑数据
    async editSubmit() {
      let params = {
        id: this.id,
        warnName: this.warnName,
        desc: this.desc,
        flightNO: this.flightNO,
        airportCode2: this.code2,
        departureAirport: this.code3,
        ladingAirport: this.code4,
        beginTime: this.BeginTime1[0],
        endTime: this.BeginTime1[1],
      };
      const res = await AddWarning(params);
      if (res.code === 0) {
        this.$message.success("修改报警预警信息成功");
        this.$router.push("/systemSettings/warningSet");
      } else {
        this.$message.error.message;
      }
      this.EditDialogVisible = false;
    },

    //场景列表
    async UserWarning() {
      const res = await UserWarningList({
        sceneId: this.id,
      });
      if (res.code === 0) {
        this.infoArr = res.returnData;
      } else {
        this.$message.error.message;
      }
    },
    infoIndex() {},

    delBox(item) {
      this.flag = true;
      this.delName = item.name;
      this.DelId = item.id;
    },
    //删除
    async remove() {
      const res = await DelUserWarning({
        id: this.DelId,
      });
      if (res.code === 0) {
        this.$message.success("删除报警预警策略成功");
        this.UserWarning();
      } else {
        this.$message.error.message;
      }
      this.flag = false;
    },
    addDig() {
      this.editFalg = true;
      this.posType = "1";
      this.form.name = null;
      this.region = null;
      this.form.WarningDur = null;
      this.form.alamDur = null;
      this.StartNode = null;
      this.EndNode = null;
      this.form.desc = null;
    },
    editInfo(item) {
      this.posType = 2;
      this.editFalg = true;
      this.form.name = item.name;
      this.region = item.way;
      this.form.WarningDur = item.earlyWarningTime;
      this.form.alamDur = item.warningTime;
      this.StartNode = item.beginNodeId;
      this.EndNode = item.endNodeId;
      this.form.StartPosition = item.beginLocationID;
      this.form.EndPosition = item.endNodeLocationID;
      this.form.desc = item.remark;
      this.pid = item.id;
      this.posArrCopy = _.cloneDeep(item);
    },

    close() {
      this.editFalg = false;
    },
    async submit() {
      if (this.posType === 1) {
        const res = await AddUserWarning({
          id: null,
          sceneId: this.id,
          warnName: this.form.name,
          way: this.region,
          earlyWarningTime: this.form.WarningDur,
          warningTime: this.form.alamDur,
          beginNodeId: this.StartNode,
          endNodeId: this.EndNode,
          beginLocationID: this.form.StartPosition,
          endNodeLocationID: this.form.EndPosition,
          beginLocationId: this.form.StartPosition,
          endNodeLocationId: this.form.EndPosition,
          remark: this.form.desc,
        });
        if (res.code === 0) {
          this.editFalg = false;
          this.UserWarning();
          this.$message.success("新增报警预警策略成功");
        } else {
          this.$message.error.message;
        }
      } else {
        const res = await AddUserWarning({
          id: this.pid,
          sceneId: this.id,
          name: this.form.name,
          way: this.region,
          earlyWarningTime: this.form.WarningDur,
          warningTime: this.form.alamDur,
          beginNodeId: this.form.StartNode,
          endNodeId: this.form.EndNode,
          beginLocationId: this.form.StartPosition,
          endNodeLocationId: this.form.EndPosition,
          remark: this.form.desc,
        });
        if (res.code === 0) {
          this.editFalg = false;
          this.UserWarning();
          this.$message.success("编辑报警预警策略成功");
        } else {
          this.$message.error.message;
        }
      }
      this.closeForm();
    },
  },
};
</script>

<style lang="scss" scoped>
.bgBox {
  padding: 0;
  width: 100%;

  .log {
    width: 26px;
    height: 26px;
    background: #eb2f3b;
    border-radius: 50%;
    margin-right: 15px;
    background: url("../../../../assets/index/ic_close_hint.png") no-repeat;
    background-size: 100% 100%;
  }
  .er {
    display: flex;
    align-items: center;
  }
  ::v-deep .el-input__suffix {
    right: 0;
  }
  ::v-deep .el-dialog__body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    // padding-top: 20px !important;
    padding-bottom: 0px;
  }
  ::v-deep .el-dialog__headerbtn {
    top: 17px;
    color: #ffffff;
  }
  ::v-deep .el-dialog__close {
    color: #ffffff;
  }
  ::v-deep .el-range-separator {
    line-height: 27px;
  }
  ::v-deep .el-range__icon {
    line-height: 27px;
  }
  ::v-deep .el-dialog__header {
    width: 100%;
    height: 36px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #2d67e3;
    padding: 0 16px 0 16px;
    display: flex;
    align-items: center;
  }
  ::v-deep .el-dialog__title {
    color: #ffffff !important;
    font-size: 16px !important;
    margin-bottom: 15px;
  }
}
.timeER {
  font-size: 14px;
  font-family: Helvetica;
  font-weight: 400;
  color: #afb4bf;
}
.box-card {
  width: 268px;
  height: 144px;
  margin-left: 18px;
  margin-top: 24px;
  background: #fff;
  box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
  border-radius: 4px;
}
.headerBox {
  padding: 16px 32px 16px 16px;
  display: flex;
  justify-content: space-between;
  .tltle-head {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .el-button {
    width: 64px;
    height: 32px;
    background: #2d67e3;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 216px;
  height: 104px;
  margin-top: -13px;
  cursor: pointer;
  margin-left: 35px;
  background: #f5f7fa;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}
.topBox {
  // height: 280px;
  background: #ffffff;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  margin-bottom: 25px;
}
.headerBoxs {
  height: 144px;
  padding: 24px 24px 20px 18px;
  background: #ffffff;
  border-radius: 4px;
  .tltle-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-button {
    width: 64px;
    height: 32px;
    background: #2d67e3;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }
}

.top {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.oneColor {
  width: 4px;
  height: 20px;
  margin-right: 12px;
  background: #2d67e3;
}
.titleOne {
  width: 144px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #303133;
}

.formBox {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  ::v-deep .el-input__suffix {
    top: 4px;
  }
}
::v-deep .el-row {
  width: 100%;
}
::v-deep .formBox {
  .digName {
    width: 100%;
    display: flex;
    margin-left: 70px;
  }
  .digName .el-input__inner {
    margin-left: 15px;
    width: 160px;
    height: 32px;
    background: #fff;
    border: 1px solid #d7dae3;
    border-radius: 4px;
  }
  .digName1 {
    display: flex;
    width: 100%;
    margin-left: 54px;
    margin-bottom: 20px;
  }
  .aviP2 {
    margin-left: 14px;
    margin-right: 17px;
  }
  .digName4 {
    display: flex;
  }
  .digName4 .el-input__inner {
    width: 400px;
    height: 32px;
    margin-left: 16px;
    background: #fff;
    border: 1px solid #d7dae3;
    border-radius: 4px;
  }

  .digName {
    width: 100%;
    display: flex;
    justify-content: space-around;
    //   flex-direction: row;
  }
  .aviName {
    display: flex;
    flex-direction: row;
    margin-bottom: 24px;
    width: 240px;
    margin-right: 10px;
    text-align: right;
  }
  .aviName1 {
    width: 35%;
    display: flex;
    flex-direction: row;
    margin-bottom: 24px;
    margin-right: 10px;
    text-align: right;
    .el-input__inner {
      width: 410px;
      height: 32px;
      background: #fff;
    }
  }
  .aviName2 {
    display: flex;
    flex-direction: row;
    margin-bottom: 24px;
    margin-right: 10px;
    text-align: right;
    .el-textarea__inner {
      width: 972px;
      height: 32px;
    }
  }
  .aviP {
    width: 100px;
    height: 32px;
    line-height: 32px;
    color: #303133;
  }
  .aviP1 {
    width: 140px;
    text-align: right;
    height: 32px;
    line-height: 32px;
    color: #303133;
  }
  .aviP2 {
    width: 64px;
    text-align: right;
    height: 32px;
    line-height: 32px;
    color: #303133;
  }
  .aviP3 {
    width: 64px;
    height: 32px;
    line-height: 32px;
    text-align: right;
    margin-right: 40px;
  }
}
.centerBox {
  height: 495px;
  padding: 32px 0 44px 0;
  // background: #ffffff;
  // box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  // border-radius: 4px;
}
.centerTitle {
  width: 126px;
  height: 18px;
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}
.delIcon {
  cursor: pointer;
  width: 24px;
  height: 24px;
  background: #000000;
  opacity: 0.8;
  border-radius: 50%;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  line-height: 24px;
  margin-left: 232px;
}

.centerCard {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.boxFlex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.addIcon {
  color: #d7dae3;
  font-size: 60px;
}
.LBox {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  // margin-left: 30px;
  margin-top: 40px;
  margin-bottom: 20px;
}
.lbox-add {
  height: 144px;
  background: #f5f7fa;
  border: 1px dashed #9ebbf7;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  .icon {
    font-size: 31px;
    color: #9ebbf7;
  }
}
.forBox {
  width: 230px;
  height: 120px;
  margin-bottom: 24px;
  background: #f5f7fa;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  padding: 24px;
  position: relative;
  margin-right: 24px;
  cursor: pointer;
  .name {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #303133;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .edit {
    margin-top: 32px;
    position: relative;
    .round {
      display: inline-block;
      width: 28px;
      height: 28px;
      // background: #f5f7fa;
      border-radius: 50%;
      line-height: 28px;
      text-align: center;
      // box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 0px;
      i {
        color: #fff;
      }
    }
  }
  .close {
    width: 24px;
    height: 24px;
    background: #000000;
    opacity: 0.8;
    border-radius: 50%;
    position: absolute;
    right: -12px;
    line-height: 24px;
    text-align: center;
    top: -12px;
    i {
      color: #fff;
    }
  }
  &:last-child {
    margin-right: 0;
  }
}
.active {
  background: #6e82a7;
  .name {
    color: #fff;
  }
  .edit {
    .round {
      background: #fff;
      i {
        color: #6e82a7;
      }
    }
  }
}
::v-deep .DigClass {
  .el-dialog {
    // border-radius: 20px;
    width: 462px;
  }
  .el-dialog__header {
    padding: 35px 46px 10px;
  }
  .el-dialog__title {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
  }
}
::v-deep .EditDig {
  .itemBox {
    display: flex;
    justify-content: space-around;
  }
  .el-dialog {
    // border-radius: 20px;
    width: 600px;
    display: flex;
    display: -ms-flex; /* 兼容IE */
    flex-direction: column;
    -ms-flex-direction: column; /* 兼容IE */
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
    // height: 515px;
  }
  .el-input__inner {
    width: 160px;
    height: 32px;
    background: #ffffff;
    border: 1px solid #d7dae3;
    border-radius: 4px;
  }
  .el-textarea__inner {
    width: 462px;
    height: 96px;
    background: #ffffff;
    border: 1px solid #d7dae3;
    border-radius: 4px;
  }
  .el-dialog__header {
    padding: 35px 46px 10px;
  }
  .el-dialog__footer {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0;
  }
  .el-dialog__title {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
  }

  .dialog-footer {
    height: 56px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 34px;
    background: #f0f5ff;
    padding-bottom: 0;
  }
}
</style>