<!--
 * @Author: your name
 * @Date: 2021-11-18 10:36:25
 * @LastEditTime: 2021-12-20 17:31:53
 * @LastEditors: Please set LastEditors
 * @Description: 机场基本信息
 * @FilePath: \CABaggageData\src\views\dashboard\views\airportInfoDetails.vue
-->
<template>
  <div class="airportInfoDetails">
    <!--机场基本信息-->
    <div class="airportInfoDetails-head">
      <Search title="机场基本信息" :isSearch="false">
        <!-- <button class="btnAn" @click="EditAirportInfo">保存</button> -->
      </Search>
      <div class="airportInfoDetails-head-content dialog-public-background">
        <!-- <el-row :gutter="24">
          <el-col> </el-col>
        </el-row> -->
        <el-form
          :inline="true"
          :rules="infoRules"
          :model="ruleForm"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item label="所属公司">
            <!-- <el-select
              v-model="ruleForm.name"
              placeholder="暂无数据"
              :disabled="true"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> -->
            <el-input
              size="medium"
              placeholder="暂无数据"
              v-model="ruleForm.fullName"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="机场中文名称">
            <el-input
              size="medium"
              placeholder="暂无数据"
              v-model="ruleForm.fullName"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="机场英文简称">
            <el-input
              size="medium"
              placeholder="暂无数据"
              v-model="ruleForm.code"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="机场三字码">
            <el-input
              style="min-width: 172px"
              size="medium"
              placeholder="暂无数据"
              v-model="ruleForm.code"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="机场四字码" style="margin-right: 0">
            <el-input
              style="min-width: 172px"
              size="medium"
              placeholder="暂无数据"
              v-model="ruleForm.code"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="机场全称" style="margin-right: 0">
            <el-input
              style="min-width: 627px"
              size="medium"
              placeholder="暂无数据"
              v-model="ruleForm.code"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="机场简称" prop="name">
            <el-input
              size="medium"
              placeholder="请输入机场简称（必填）"
              v-model="ruleForm.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="机场全称" prop="fullName">
            <el-input
              size="medium"
              placeholder="请输入机场全称（必填）"
              v-model="ruleForm.fullName"
            ></el-input>
          </el-form-item>
          <el-form-item label="机场三字码" prop="code">
            <el-input
              size="medium"
              placeholder="请输入机场三字码（必填）"
              v-model="ruleForm.code"
            ></el-input>
          </el-form-item> -->
        </el-form>
      </div>
    </div>
    <!--机场主体信息-->
    <div class="airportInfoDetails-content">
      <!-- <div class="locationBox">
        <Search title="机场航站楼信息" :isOnly="false" />
        <div class="LBox">
          <div @click="addInfo" class="lbox-add r24">
            <div class="terminal-info-add-icons">
              <span class="icon el-icon-plus"></span>
            </div>
          </div>

          <div
            v-for="(item, index) in infoArr"
            @click="infoIndex(item, index)"
            :class="index == index1 ? 'active' : ''"
            :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="removeInfo(item)" class="close">
              <i class="el-icon-close"></i>
            </div>
          </div>
        </div>
      </div> -->
      <!-- <div class="locationBox">
        <Search title="节点信息" :isOnly="false" />
        <div class="LBox">
          <div
            v-for="(item, index) in teroArr"
            @click="infoIndexer(item, index)"
            :class="index == index2 ? 'active' : ''"
            :key="index"
            class="forBox"
          >
            <div class="name">{{ item.nodeName }}</div>
            <div class="edit right"></div>
          </div>
        </div>
      </div> -->
      <div class="locationBox">
        <Search
          :isSlot="false"
          :isChild="true"
          :isSou="true"
          title="行李追踪位置信息"
          @clearSearchData="clearSearchData"
          @getSearchData="getSearchData"
          style="padding-left: 32px; padding-right: 32px"
        />
        <div class="airportInfo-content">
          <el-row :gutter="24">
            <el-col :span="4">
              <div @click="addpog" class="lbox-add r24">
                <div class="terminal-info-add-icons">
                  <span class="icon el-icon-plus"></span>
                </div>
              </div>
            </el-col>
            <el-col
              v-for="(item, index) in posArr"
              class="airportInfo-content-list"
              :key="index"
              :span="4"
            >
              <div class="grid-content box-public-shadow">
                <div class="flex list">
                  <div class="ult flex-wrap er">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.remarkCn"
                      placement="bottom"
                    >
                      <div class="title fz16">{{ item.remarkCn }}</div>
                    </el-tooltip>
                    <!-- <div class="title fz16" style="font-weight: bold">
                      {{ item.remarkCn }}
                    </div> -->
                    <div
                      v-is="['ss_aim_cardEdit']"
                      class="edit_log"
                      @click.stop="posEdit(item, index)"
                    ></div>
                  </div>
                  <div class="close" @click.stop="removePos(item)">
                    <span
                      v-is="['ss_aim_cardDelete']"
                      class="el-icon-close icon"
                    ></span>
                  </div>
                </div>
                <div class="list desc">{{ item.locationMark }}</div>
              </div>
            </el-col>
          </el-row>
          <!-- <img v-if="!arr.length" src="../../../assets/logo/nodata.png" /> -->
        </div>
        <!-- <div class="LBox">
          <div @click="addpog" class="lbox-add r24">
            <div class="terminal-info-add-icons">
              <span class="icon el-icon-plus"></span>
            </div>
          </div>
          <div v-for="(item, index) in posArr" :key="index" class="forBox">
            <div class="name">{{ item.remarkCn }}</div>
            <div class="edit flex">
              <span>{{ item.locationMark }}</span>
              <span @click.stop="posEdit(item, index)" class="round editTs">
                <i class="el-icon-edit-outline"></i>
              </span>
            </div>
            <div @click.stop="removePos(item, index)" class="close">
              <i class="el-icon-close"></i>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <!--新增/编辑航站楼-弹框-->
    <Dialog :flag="flag" @close="closeForm">
      <div class="airportInfoDialog dialog-public-background">
        <div class="flx">{{ infoType === 1 ? "新增" : "编辑" }}航站楼</div>
        <div class="content">
          <el-form
            :model="form"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="航站楼名称" prop="name">
              <el-input
                size="medium"
                placeholder="请输入航站楼名称"
                v-model="form.name"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="foot center t30">
          <el-button
            size="medium"
            type="primary"
            maxlength="50"
            @click="addSubmit()"
            class="r25 r26"
            >提交</el-button
          >
          <el-button class="r26" size="medium" @click="resetForm()"
            >取消</el-button
          >
        </div>
      </div>
    </Dialog>
    <!--删除航站楼-弹框-->
    <Dialog :flag="removeFlag">
      <div class="airportInfoDialog">
        <div class="flxdes">{{ title }}</div>
        <div class="content er">
          <div class="log"></div>
          是否确认删除
          <p style="color: #eb2f3b; margin-top: 0px; margin-bottom: 0px">
            {{ infoObj.name }}
          </p>
          ？
        </div>
        <div class="foot right t30" style="background: #ffffff">
          <el-button
            size="medium"
            @click="remove"
            class="r25 buwitch"
            type="danger"
            >删除</el-button
          >
          <el-button class="r26" size="medium" @click="removeFlag = false"
            >取消</el-button
          >
        </div>
      </div>
    </Dialog>
    <!--新增/编辑位置信息-弹框-->
    <Dialog :flag="posFlag" @close="closeForm">
      <div class="airportInfoDialog dialog-public-background">
        <div class="flx">{{ posType === 1 ? "新增" : "编辑" }}位置信息</div>
        <div class="content">
          <el-form
            :model="posForm"
            :rules="rules"
            ref="posForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="位置名称" prop="name">
              <el-input
                size="medium"
                placeholder="请输入位置名称"
                v-model="posForm.name"
                @input="changeValue"
              ></el-input>
            </el-form-item>
            <el-form-item label="跟踪所属节点" prop="fullName">
              <el-input
                size="medium"
                @input="changeValue1"
                placeholder="请输入跟踪所属节点"
                v-model="posForm.fullName"
              ></el-input>
            </el-form-item>
            <el-form-item label="位置标识">
              <el-input
                size="medium"
                @input="changeValue2"
                placeholder="请输入位置标识"
                v-model="posForm.enName"
              ></el-input>
            </el-form-item>
            <el-form-item label="位置编码" prop="code">
              <el-input
                size="medium"
                placeholder="请输入位置编码"
                @input="changeValue3"
                v-model="posForm.code"
              ></el-input>
            </el-form-item>
            <el-form-item label="位置描述" prop="fullName">
              <el-input
                size="medium"
                type="textarea"
                maxlength="200"
                rows="3"
                resize="none"
                :autosize="{ minRows: 3, maxRows: 3 }"
                placeholder="请输入位置描述"
                v-model="ruleForm.fullName"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="所属节点" prop="tag">
              <el-select
                size="medium"
                style="width: 100%"
                placeholder="请选择所属节点"
                v-model="posForm.tag"
              >
                <el-option
                  v-for="(item, index) in nodeList"
                  :key="index"
                  :label="item.nodeName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="前置位置">
              <el-select
                size="medium"
                style="width: 100%"
                v-model="location"
                placeholder="请选择前置位置"
              >
                <el-option
                  :disabled="item.disabled"
                  v-for="(item, index) in posArr"
                  :key="index"
                  :label="item.remarkCn"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item> -->
          </el-form>
        </div>
        <div class="foot center t30">
          <el-button
            size="medium"
            type="primary"
            @click="posSubmit()"
            class="r25 r26"
            >提交</el-button
          >
          <el-button class="r26" size="medium" @click="posResetForm()"
            >取消</el-button
          >
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Search from "@/layout/components/Search/index.vue";
import Dialog from "@/layout/components/Dialog/index.vue";
import {
  AddAriports,
  buildLists,
  AddBuild,
  DelBuild,
  LocatioList,
  AddLocation,
  DelLocation,
  traceNodeslist,
  Terminalnodeer,
} from "@/api/SystemSettings";
import { findarrays } from "@/utils/validate";
export default {
  name: "AirportInfoDetails",
  components: { Search, Dialog },
  data() {
    return {
      id: this.$route.query.id,
      ruleForm: {
        //机场信息表单
        // name: this.$route.query.name,
        // fullName: this.$route.query.fullName,
        // code: this.$route.query.code3,
        name: "",
        fullName: "",
        code: "",
      },
      index1: null,
      index2: null,
      rmType: null, //删除-弹框-类型 1=航站楼 2=位置信息
      title: "", // 删除信息标题-弹框
      infoArr: [], //机场航站楼信息
      flag: false, //新增/编辑航站楼弹框
      infoType: 1, //新增/编辑航站楼类型
      airPortId: null,
      Lid: null, //位置删除id
      Aid: null, //位置信息id
      pid: null,
      node: null, //已选择的节点信息
      location: null, //已选择的前置位置
      poid: null, //航站楼id
      cid: null, //节点id
      poLid: null,
      form: {
        //航站楼信息表单
        name: "",
      },
      options: [
        //所属公司
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      tkIndex: null,
      infoObj: {}, //编辑-航站楼信息
      removeFlag: false, //删除-航站楼弹框
      posArr: [
        {
          remarkCn: "名称",
          locationMark: "测试",
        },
        {
          remarkCn: "名称",
          locationMark: "测试",
        },
        {
          remarkCn: "名称",
          locationMark: "测试",
        },
        {
          remarkCn: "名称",
          locationMark: "测试",
        },
        {
          remarkCn: "名称",
          locationMark: "测试",
        },
        {
          remarkCn: "名称",
          locationMark: "测试",
        },
        {
          remarkCn: "名称",
          locationMark: "测试",
        },
      ], //位置信息
      posFlag: false, //新增/编辑位置信息弹框
      posForm: {
        //位置信息表单
        name: "",
        fullName: "",
        enName: "",
        code: "",
        tag: "",
      },
      nodeList: [],
      teroArr: [], //节点列表
      posArrCopy: [],
      posType: 1, //新增/编辑位置信息类型
      rules: {
        name: [{ required: true, message: "请输入机场简称", trigger: "blur" }],
        fullName: [
          { required: true, message: "请输入机场全称", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入机场三字码", trigger: "blur" },
        ],
        tag: [{ required: true, message: "请选择节点", trigger: "change" }],
      },
      infoRules: {
        //新增机场信息表单验证
        name: [{ required: true, message: "请输入机场简称", trigger: "blur" }],
        fullName: [
          { required: true, message: "请输入机场全称", trigger: "blur" },
        ],
        code: [{ required: true, message: "请选择", trigger: "blur" }],
      },
    };
  },
  created() {
    // this.buildlist();
    // this.traceNode();
  },
  methods: {
    changeValue(val) {
      this.posForm.name = val;

      this.$forceUpdate();
    },
    changeValue1(val) {
      this.posForm.fullName = val;
      this.$forceUpdate();
    },
    changeValue2(val) {
      this.posForm.enName = val;
      this.$forceUpdate();
    },
    changeValue3(val) {
      this.posForm.code = val;
      this.$forceUpdate();
    },

    // //模糊查询
    // 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.posArr = findarrays(this.posArr, "remarkCn", val);
      } else {
        this.locationlists();
      }
    },
    closeForm() {
      this.$refs.posForm.resetFields();
    },
    //节点信息列表
    async traceNode() {
      const res = await traceNodeslist({});
      if (res.code === 0) {
        this.nodeList = res.returnData;
      } else {
        this.$message.error.message;
      }
    },
    infoIndex(item, index) {
      this.Aid = item.id;
      this.index1 = index;
      this.TerminalnodeList();
      this.locationlists();
    },
    infoIndexer(item, index) {
      this.index2 = index;
      this.posArr = findarrays(this.posArr, "parentNodeId", item.id);
    },
    async TerminalnodeList() {
      const res = await Terminalnodeer({
        id: this.Aid,
      });
      if (res.code == 0) {
        this.teroArr = res.returnData;
      }
    },
    //行李追踪位置信息列表
    async locationlists() {
      const res = await LocatioList({
        buildId: this.Aid,
      });
      if (res.code === 0) {
        this.posArr = res.returnData;
        this.posArrCopy = _.cloneDeep(this.posArr);
      } else {
        this.$message.error.message;
      }
    },
    //航站信息列表
    async buildlist() {
      const result = await buildLists({
        airportId: this.id,
      });
      if (result.code === 0) {
        this.infoArr = result.returnData;
      } else {
        this.$message.error.message;
      }
    },
    //基本信息保存接口
    async EditAirportInfo() {
      if (this.ruleForm.name != "" && this.ruleForm.fullName != "") {
        const result = await AddAriports({
          id: this.id,
          code3: this.ruleForm.code,
          fullName: this.ruleForm.fullName,
          name: this.ruleForm.fullName,
        });
        if (result.code === 0) {
          this.$message.success("修改成功");
          this.$router.push("/dashboard/airportInfo");
        } else {
          this.$message.error.message;
        }
      } else {
        this.$message.warning("请输入必填信息");
      }
    },
    //清空搜索
    clearSearchData() {
      this.posArr = this.posArrCopy;
    },

    //删除航站楼信息
    removeInfo(item) {
      this.title = "删除航站楼信息";
      this.rmType = 1;
      this.infoObj = item;
      this.infoObj.id = item.id;
      this.removeFlag = true;
    },
    //新增航站楼信息
    addInfo() {
      this.infoType = 1;
      this.form.name = null;
      this.flag = true;
    },
    //删除信息-确认
    async remove() {
      if (this.rmType == 1) {
        const res = await DelBuild({
          id: this.infoObj.id,
        });
        if (res.code === 0) {
          this.$message.success("删除航站楼信息成功");
          this.buildlist();
        } else {
          this.$message.error.message;
        }
      } else if (this.rmType == 2) {
        const res = await DelLocation({
          id: this.Lid,
        });
        if (res.code === 0) {
          this.$message.success("删除行李追踪信息成功");
          this.$router.go(0);
        } else {
          this.$message.error.message;
        }
      }

      this.removeFlag = false;
    },
    //修改航站楼信息
    editInfo(item) {
      this.flag = true;
      this.infoType = 2;
      this.infoObj = item;
      this.poid = item.id;
      this.form.name = item.name;
      this.airPortId = item.airPortId;
    },
    //航站楼信息-弹框-提交
    async addSubmit() {
      if (this.infoType != 1) {
        const res = await AddBuild({
          id: this.poid,
          name: this.form.name,
          airPortId: this.airPortId,
        });
        if (res.code === 0) {
          this.$message.success("修改成功");
          this.buildlist();
        } else {
          this.$message.error.message;
        }
      } else {
        const res = await AddBuild({
          id: null,
          name: this.form.name,
          airPortId: this.id,
        });
        if (res.code === 0) {
          this.$message.success("新增成功");
          this.buildlist();
        } else {
          this.$message.error.message;
        }
      }

      this.flag = false;
    },
    //航站楼信息-弹框-取消
    resetForm() {
      this.flag = false;
      this.form.name = null;
    },

    //新增追踪位置信息
    addpog() {
      this.posFlag = true;
      this.posType = 1;
      this.posForm.name = null;
      this.posForm.fullName = null;
      this.posForm.enName = null;
      this.posForm.code = null;
      this.posForm.tag = null;
    },

    //位置信息-编辑
    posEdit(item, index) {
      this.posType = 2;
      this.posFlag = true;
      this.posForm = item;
      this.pid = item.id;
      this.poLid = item.buildNo;
      this.posForm.name = item.shortName || "";
      this.posForm.fullName = item.remarkCn || "";
      this.posForm.enName = item.remarkEn || "";
      this.posForm.code = item.locationMark || "";
      this.posForm.tag = item.parentNodeId || "";
      this.nodeList.forEach((item) => {
        this.cid = item.id;
        if (this.posForm.tag == item.id) {
          this.posForm.tag = item.id;
        }
        return this.nodeList;
      });
      this.posArr = this.posArr.map((item) => {
        if (item.id == this.pid) {
          item.disabled = true;
        }
        return item;
      });
    },
    //位置信息-弹框-提交
    async posSubmit() {
      let arr = 0;
      this.$refs["posForm"].validate((valid) => {
        if (valid) {
          arr = 1;
        } else {
          arr = 0;
          return false;
        }
      });
      if (arr == 1) {
        if (this.posType === 1) {
          const res = await AddLocation({
            id: null,
            buildNo: this.Aid,
            locationMark: this.posForm.code,
            shortName: this.posForm.name,
            remarkCn: this.posForm.fullName,
            remarkEn: this.posForm.enName,
            parentNodeId: this.posForm.tag,
            preLocationId: this.location,
          });
          if (res.code === 0) {
            this.$message.success("新增行李追踪位置信息成功");
            this.$router.go(0);
          } else {
            this.$message.error.message;
          }
        } else {
          const res = await AddLocation({
            id: this.pid,
            locationMark: this.posForm.code,
            shortName: this.posForm.name,
            remarkCn: this.posForm.fullName,
            remarkEn: this.posForm.enName,
            parentNodeId: this.cid,
            preLocationId: this.pid,
            buildNo: this.Aid,
          });
          if (res.code === 0) {
            this.$message.success("修改行李追踪位置信息成功");
            this.$router.go(0);
          } else {
            this.$message.error.message;
          }
        }
        this.posFlag = false;
      }
    },
    //删除行李追踪位置信息
    removePos(item, index) {
      // this.rmType = 2;
      this.title = "删除位置信息";
      // this.infoObj = item;
      // this.Lid = item.id;
      this.infoObj.name = item.remarkCn;
      this.removeFlag = true;
    },
    //位置信息-弹框-取消
    posResetForm() {
      this.posFlag = false;
      this.$refs["posForm"].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.airportInfoDetails {
  .airportInfoDetails-head {
    padding: 32px 40px 0px 32px;
    background: #ffffff;
    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    .airportInfoDetails-head-content {
      margin-top: 30px;
      .el-input {
        min-width: 240px;
      }
      .el-form--inline .el-form-item {
        margin-bottom: 24px;
        margin-right: 50px;
      }
    }
  }
  .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%;
  }
  .airportInfoDialog {
    ::v-deep .el-form-item__content {
      margin-left: 120px !important;
    }
    ::v-deep .el-form-item__label {
      width: 120px !important;
    }
    ::v-deep .el-form-item {
      margin-bottom: 20px;
    }
  }
  .airportInfo-content {
    margin-top: 30px;
    img {
      margin: 0 auto;
      margin-top: 10%;
      display: -webkit-box;
      -webkit-box-pack: center;
      -webkit-box-align: center;
      -webkit-box-orient: vertical;
      text-align: center;
    }
    .grid-content {
      padding: 24px;
      margin-bottom: 24px;
      height: 144px;
      .edit_log {
        position: relative;
        // top: -2px;
      }
      .icon {
        cursor: pointer;
      }
      .desc {
        margin-top: 60px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #afb4bf;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  ::v-deep .el-input__suffix {
    right: 30px;
  }
  ::v-deep .el-input__inner {
    height: 32px;
    border-radius: 2px;
  }
  .flxdes {
    padding: 10px 0px 10px 20px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    height: 36px;
    background: #eb2f3b;
    color: #ffffff;
    margin-bottom: 46px;
    width: 100%;
  }
  .airportInfoDetails-content {
    height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 32px 0x 0 0;
    // background: #ffffff;
    // box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    // margin-top: 24px;
    .terminal-info {
      margin-top: 20px;
      margin-bottom: 20px;
      .terminal-info-add {
        width: 216px;
        height: 120px;
        background: #f5f7fa;
        border: 1px dashed #d7dae3;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .icon {
          font-size: 31px;
          color: #d7dae3;
        }
      }
      .terminal-info-team {
        .terminal-info-list {
          width: 216px;
          height: 120px;
          margin-bottom: 24px;
          background: #f5f7fa;
          box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
          border-radius: 8px;
          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;
            .round {
              display: inline-block;
              width: 28px;
              height: 28px;
              background: #6e82a7;
              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: 0;
              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 {
          border: 2px solid #9ebbf7;
          .name {
            color: #fff;
          }
          .edit {
            .round {
              background: #fff;
              i {
                color: #6e82a7;
              }
            }
          }
        }
      }
    }

    .locationBox {
      // padding: 0 0 0 32px;
      // background: #ffffff;

      margin-top: 30px;
    }
    .LBox {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin-top: 40px;
      margin-bottom: 20px;
    }
    .lbox-add {
      width: 100%;
      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: 8px;
      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;
        .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: 20px;
          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;
      border: 2px solid #9ebbf7;
      .name {
        // color: #fff;
      }
      .edit {
        .round {
          background: #fff;
          i {
            color: #6e82a7;
          }
        }
      }
    }
  }
}
</style>
