<template>
  <div class="detail white clr page_main">
    <div class="table_tabs" style="justify-content:start;margin-bottom:-6px;"><span>{{isEditor?'编辑':'添加'}}子管理员</span>
    </div>
    <div class="box  clr" v-loading="loading">
      <el-form :model="editor" :rules="rules" ref="editor">
        <div class="from_box clr" style="margin-bottom:0;padding-bottom:0;">
          <el-form-item prop="RealName" class="from_item">
            <label>管理员</label> <img src="/static/img/common/main.png">
            <el-input v-model="editor.RealName" placeholder="请输入管理员姓名" class="input-btn"></el-input>
          </el-form-item>
          <el-form-item prop="Phone" class="from_item">
            <label>手机号</label> <img src="/static/img/common/main.png">
            <el-input type="number" placeholder="请输入手机号" v-model.number="editor.Phone" :maxlength='11'></el-input>
          </el-form-item>
          <el-form-item prop="LoginCode" class="from_item">
            <label>登录账号</label> <img src="/static/img/common/main.png">
            <el-input :disabled="!!ID" v-model="editor.LoginCode" placeholder="请输入登录账号[最多11个字符]" :maxlength="11"
              autocomplete="off">
            </el-input>
            <div class="tip">注:登录账号仅支持数字和字母</div>
          </el-form-item>
          <el-form-item class="from_item" v-if="isEditor">
            <label class="cursor" @click="passwordShow=!passwordShow" style="color:#4c82ff;">修改登录密码 <i
                :class="passwordShow?'el-icon-arrow-up':'el-icon-arrow-down'"></i></label>
          </el-form-item>
          <el-collapse-transition>
            <div class="flt" v-show="passwordShow||!isEditor">
              <!-- 防止浏览器记录填充 -->
              <el-input type="password" v-model="editor.Password0"
                style="position:absolute;z-index:-1;width:0;height:0;"></el-input>
              <el-form-item prop="Password" class="from_item">
                <label>登录密码</label> <img src="/static/img/common/main.png">
                <br />
                <el-input type="password" v-model="editor.Password" placeholder="请输入登录密码" autocomplete="off"></el-input>
                <div class="tip">注:密码为6~15位数字/字母/符号,区分大小写</div>
              </el-form-item>

              <el-form-item prop="checkPassword" class="from_item">
                <label>确认密码</label> <img src="/static/img/common/main.png">
                <br />
                <el-input type="password" v-model="checkPassword" placeholder="请确认登录密码"></el-input>
              </el-form-item>
            </div>
          </el-collapse-transition>
          <!-- <el-form-item class="from_item big">
            <label>管理员头像:</label>
            <div class="uploadimg_box clr">
              <img :src="editor.Photourl" class="uploadimg" @click="uploadLogo"
                v-if="editor.Photourl&&editor.Photourl.length>0">
              <span class="ubloadbtn" v-else>
                <img src="/static/img/common/imgadd.png" @click="uploadLogo">
              </span>
              <p class="imgTip" @click="uploadLogo">点击更换</p>
            </div>
            <p class="tip">注：支持jpg,jpeg,png,bmp格式文件，建议文件不超过5MB。</p>
          </el-form-item> -->
        </div>
      </el-form>
    </div>
    <div class="box clr" v-loading="managerTypeData.loading">
      <div class="managerTypes flex">
        <p>客户经理:</p>
        <div class="types">
          <el-radio-group v-model="editor.RoleCode">
              <el-radio  :label="100">是</el-radio>
              <el-radio  :label="-100">否</el-radio>
          </el-radio-group>        
        </div>
      </div>
      <div class="flex" style="margin-top:20px;">
        <p>权限设置</p>
        <el-checkbox v-model="allPermission" @change="changeAllPermission">所有权限</el-checkbox>
      </div>
      <section class="permissionList">
        <header class="clr">
          <div class="big">功能</div>
          <div>查看</div>
          <div>添加</div>
          <div>编辑</div>
          <div>删除</div>
          <div>全选</div>
        </header>
        <section class="permissionmain">
          <Permisson :permissionObj="item" v-for="(item,index) in permissionList" :key="index" :parentStr="parentStr"
            :grade="0"></Permisson>
        </section>
      </section>
    </div>
    <div class="handel_foot_box">
      <div class="handel_fixed_box">
        <button class="btn back" @click="$router.go(-1)">返回</button>
        <button class="btn save" @click="preSave">保存</button>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="selDialog" v-loading="dialogLoading" class="down" width="350px">
      <div style="text-align:center;padding:20px 0;line-height:30px;">
        <p>
          {{this.managerTypeData.managerTypesIdx?this.managerTypeData.managerTypesList[this.managerTypeData.managerTypesIdx].Tag:'管理员类型'}}权限有更改，
        </p>
        <p>为方便下次使用，是否添加新的管理员类型？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="toSave">仅保存账号</el-button>
        <el-button type="primary" @click="addManagerDialog = true">添加管理员类型</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增管理员类型" :visible.sync="addManagerDialog" v-loading="dialogLoading" class="down" width="350px">
      <div style="padding:20px 0;">
        <p style="margin-bottom:5px;">管理员类型名称: <img src="/static/img/common/main.png"></p>
        <el-input type="text" v-model="addTagData.Tag" maxlength="10" placeholder="请输入管理员类型名称(最多10个字符)"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addManagerDialog = false">取 消</el-button>
        <el-button type="primary" @click="addManagerType">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
var that = null;
export default {
  watch: {
    "editor.RealName": function() {
      if (!this.$refs.tree) return;
      let members = this.$refs.tree.getCheckedNodes();
      if (members.length) {
        this.editor.Photourl = members[0].Photo;
      }
    },
    filterText: function(value) {
      this.$refs.tree.filter(value);
    }
  },
  data() {
    var validNOChinese = (rule, value, callback) => {
      if (!value) {
        if (this.isEditor) {
          return callback();
        } else {
          new Error("请输入登录密码");
        }
      }
      if (/^[^\u2E80-\u9FFF\s]{6,15}$/.test(value)) {
        return callback();
      } else {
        callback(new Error("不可包含中文或空格"));
      }
    };
    var validatePass2 = (rule, value, callback) => {
      value = this.checkPassword;
      if (!this.editor.Password) return callback();
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.editor.Password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      loading: false,
      ID: "",
      editor: {
        projectcodes: [],
        RealName: "",
        Phone: "",
        LoginCode: "",
        ProjectContact: "",
        Photourl: "",
        Permissions: [],
        Password: "",
        checkPassword: "",
        RoleCode:null,
      },
      IsRoot: false,
      isEditor: false,
      //当前登录人信息
      userdata: {},
      canclick: true,
      checkPassword: "", //确认密码
      estatelist: [],

      rules: {
        RealName: [this.$vaild.required("管理员角色")],
        Phone: [this.$vaild.tel("联系方式")],
        LoginCode: [
          this.$vaild.required("登录账号"),
          this.$vaild.letter("登录账号")
        ],
        Password: [
          {
            validator: validNOChinese,
            message: "需为不包含中文或空格的6-15位密码",
            trigger: "blur"
          }
        ],
        projectcodes: [this.$vaild.required("项目名称")],
        checkPassword: [
          {
            validator: validatePass2,
            trigger: "blur"
          }
        ]
      },
      passwordShow: false,
      managerTypeData: {
        loading: false,
        ID: "",
        managerTypesIdx: "",
        managerTypesList: []
      },

      allPermission: false,
      parentStr: "",
      permissionList: [],
      permissionObj: {},
      dialogLoading: false,
      selDialog: false,
      addManagerDialog: false,
      addManagerData: {},
      addTagData: {
        Tag: "",
        ManagerId: "",
        Permissions: [],
        ProjectCode: ""
      },

      departmentList: [],
      department: "",
      chooseManager: true,
      checkedManager: null,
      chooseVisble: false,
      filterText: "",
      defaultProps: {
        children: "Child",
        label: "Name"
      }
    };
  },

  created() {
    that = this;   
    that.userdata = JSON.parse(
      window.localStorage.getItem("etorcurrentuser")
    ).Manager;
    this.ID = this.$route.query.ID;
    if (this.ID) {
      this.isEditor = true;
      this.GetOneManager();
    }
    //this.GetManagerTagList();
    this.getpermissionlist(() => {
      this.editPer();
    });
  //  that.getDepartment();
  },
  mounted: function() {
    this.editor.Password = "";
  },
  components: {
    Permisson: resolve => require(["../common/permisson.vue"], resolve)
  },
  computed: {
    getFirstName() {
      if (this.checkedManager != null) {
        // if(this.checkedManager.Name){
        let res = this.checkedManager.Name.slice(0, 1);
        if (/^[\u2E80-\u9FFF]+$/.test(res)) return res;
        else return res.toUpperCase();
        // }
      }
    }
  },
  methods: {
    GetOneManager() {
      this.loading = true;
			this.$api.get('manage/v1/manager/GetOne',{Id:this.ID}).then(res=>{
			 if(res.Code === 10000) {
				  if (res.Data) {
				    let projectCodes = (res.Data.Domain || []).map(function(item) {
				      return item.ProjectCode + "";
				    });
				    this.editor.RealName = res.Data.RealName;
				    this.editor.Phone = Number(res.Data.Phone);
            this.editor.LoginCode = res.Data.LoginCode;			 
             this.editor.RoleCode = res.Data.RoleCode;          
				    res.Data.Permission &&
				      (this.editor.Permissions = res.Data.Permission);
				    this.editor.Photourl = res.Data.Photourl;				   
				    this.editPer();
				  } else {
				    this.$message.error("当前管理员信息不存在");
				  }
				} else {
				  this.$message.error(res.Message);
				}
				this.loading = false;
			},err=>{    
				this.loading = false;
          this.$message.error(err.message);
			});      
    },
    editPer() {
      if (this.editor.Permissions.length && this.permissionList.length) {
        let permissionObj = {};
        this.editor.Permissions.forEach(item => {
          permissionObj[item.PermissionCode] = item;
        });
        this.permissionObj = permissionObj;
        this.match(this.permissionList);
        this.editor.Permissions = this.trimData();
      }
    },
    uploadLogo() {
      this.$api.upload(this.$api.baseURL+'oss/v1/ImageCloud/upload',(p, q) => 
      {
        that.editor.Photourl = JSON.parse(q.responseText).Data;
      });
    },
    GetManagerTagList() {
      this.managerTypeData.loading = true;
      this.$newapi
        .GetManagerTagList({
          ManagerId: this.userdata.ID
        })
        .then(res => {
          if (res.Code === 10000) {
            this.managerTypeData.managerTypesList = res.Data;
          } else {
            this.$message.error(res.Message);
          }
          this.managerTypeData.loading = false;
        })
        .catch(err => {
          this.$message.error(err.message);
          this.managerTypeData.loading = false;
        });
    },
    changeType(idx) {
      this.managerTypeData.managerTypesIdx = idx;
      this.managerTypeData.loading = true;
      this.$newapi
        .GetTagToPerssionList({
          ManagerTagId: this.managerTypeData.managerTypesList[idx].Id
        })
        .then(res => {
          if (res.Code === 10000) {
            this.allPermission = false;
            let permissionObj = {};
            res.Data.forEach(item => {
              permissionObj[item.PermissionCode] = item;
            });
            this.permissionObj = permissionObj;
            this.match(this.permissionList);
            this.editor.Permissions = this.trimData();
            console.log(this.permissionList);
          } else {
            this.$message.error(res.Message);
          }
          this.managerTypeData.loading = false;
        })
        .catch(err => {
          this.$message.error(err.message);
          this.managerTypeData.loading = false;
        });
    },
    toDelType(item) {
      this.$confirm("确定删除该管理员类型?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.managerTypeData.loading = true;
          this.$newapi
            .DelManagerTag({
              ID: item.Id
            })
            .then(res => {
              if (res.Code === 10000) {
                this.$message.success("删除成功");
                this.GetManagerTagList();
              } else {
                this.$message.error(res.Message);
                this.managerTypeData.loading = false;
              }
            })
            .catch(err => {
              this.$message.error(err.message);
              this.managerTypeData.loading = false;
            });
        })
        .catch(() => {});
    },
    preSave() {
      let Permissions = this.trimData();
      // if (this.managerTypeData.managerTypesIdx === '' || JSON.stringify(Permissions) === JSON.stringify(this.editor
      //     .Permissions)) {
      //   this.toSave();
      // } else {
      //   this.selDialog = true;
      // }
      if (
        typeof this.managerTypeData.managerTypesIdx == "number" &&
        JSON.stringify(Permissions) !== JSON.stringify(this.editor.Permissions)
      )
        return (this.selDialog = true);
      this.toSave();
    },
    toSave() {
      this.$refs.editor.validate(valid => {
        if (valid) {
          this.dialogLoading = true;         
          this.editor.Permissions = this.trimData();
          if (this.isEditor) {
            //编辑
            this.editor.id = this.ID;
            this.editor.roleid=	this.editor.RoleCode;  
            console.log(this.editor);
            this.$api.post("manage/v1/manager/put",this.editor).then(res=>{
              if (res.Code === 10000) {
                  this.$message.success("编辑成功");
                  this.$router.back();
                } else {
                  this.$message.error(res.Message);
                  this.dialogLoading = false;
                }
            },err=>{
               this.dialogLoading = false;
                this.$message.error(err.message);
            })             
          } else {
            //添加
             this.editor.roleid=	this.editor.RoleCode;  
             this.$api.post("manage/v1/manager/post",this.editor).then(res=>{
              if (res.Code === 10000) {
                  this.$message.success("添加成功");
                  this.$router.back();
                } else {
                  this.$message.error(res.Message);
                  this.dialogLoading = false;
                }
            },err=>{
               this.dialogLoading = false;
                this.$message.error(err.message);
            }) 
          }
        } else {
          this.$message.error("请正确填写相关信息");
        }
      });
    },
    addManagerType() {
      // this.$refs.editor.validate(valid => {
      //   if (valid) {
      this.dialogLoading = true;
      this.addTagData.ManagerId = this.userdata.ID;
      this.addTagData.Permissions = this.trimData();
      this.$newapi
        .PostManagerTag(this.addTagData)
        .then(res => {
          if (res.Code === 10000) {
            if (res.Data.Id) {
              this.managerTypeData.ID = res.Data.Id;
              this.toSave();
            } else {
              this.dialogLoading = false;
              this.$message.error(res.Message);
            }
          } else {
            this.$message.error(res.Message);
            this.dialogLoading = false;
          }
        })
        .catch(err => {
          this.dialogLoading = false;
          this.$message.error(err.message);
        });
      //   }
      // });
    },
    resetPermission: function(data) {
      let that = this;
      data.forEach(function(item) {
        item.Allowadd = false;
        item.Allowdel = false;
        item.Allowedit = false;
        item.Allowview = false;
        if (item.Children) {
          that.resetPermission(item.Children);
        }
      });
    },
    getpermissionlist(callback) {
      this.managerTypeData.loading = true;
      this.$api.get("Manage/v1/ManagerToPermission/GetByOperator",{Id: this.userdata.ID }).then(res => {
           this.managerTypeData.loading = false;
          if (res.Code == 10000) {           
            function getlist(arr, parent) {
              var list = [];
              if (arr) {
                arr.forEach((el, index) => {
                  var obj = {
                    permission: []
                  };
                  var AllwoChooseAll = true;
                  for (var key in el) {
                    if (
                      key == "AllowView" ||
                      key == "AllowAdd" ||
                      key == "AllowEdit" ||
                      key == "AllowDel"
                    ) {
                      var a = null;
                      if (el[key] == true) {
                        a = {
                            label: key,
                            value: that.isEditor?true:false
                          };
                      } else {
                        a = {
                          label: key,
                          value:"disabled"
                        };
                        AllwoChooseAll = true;
                      }
                      obj.permission.push(a);
                    } else if (key == "Children") {
                      if (el.Children && el.Children.length) {
                        obj.Children = getlist(el.Children, obj);
                      } else {
                        obj.Children = [];
                      }
                    } else if (key == "Permissionlabel") {
                      obj.Permissionlabel = el.Permissionlabel;
                    } else if (key == "Permissioncode") {
                      obj.Permissioncode = el.Permissioncode;
                    }
                  }
                  var all = {
                    value: false,
                    label: "all"
                  };
                  obj.permission.push(all);
                  obj.show = false;
                  obj.chooseNum = 0;
                  obj.parent = parent;
                  list.push(obj);
                });
              }
              return list;
            }
            this.permissionList = getlist(res.Data, false);
            console.log("this.permissionList", that.permissionList);
            callback && callback();
          } else {
            this.$message({
              type: "error",
              message: res.Message
            });
          }
       
      })     
    },
    changeAllPermission() {
      this.match(this.permissionList, this.allPermission);
    },
    match(arr, flag) {
      arr.forEach(el => {
        var item = this.permissionObj[el.Permissioncode];
        el.permission[4].value = true;
        el.permission.forEach((ele, index) => {
          if (index < 4 && ele.value != "disabled") {
            if ((item && item[ele.label] && flag !== false) || flag) {
              ele.value = true;
            } else {
              el.permission[4].value = ele.value = false;
            }
          }
        });
        if (el.Children && el.Children.length > 0) {
          this.match(el.Children, flag);
        }
      });
    },
    trimData() {
      var list = [];
      function loop(arr) {
        if (arr&&arr.length > 0)
          arr.forEach(el => {
            var obj = {
              Allowview: 0,
              Allowadd: 0,
              Allowedit: 0,
              Allowdel: 0
            };
            el.permission.forEach(ele => {
              if (ele.label != "all" && ele.value != "disabled")
                obj[ele.label] = ele.value ? 1 : 0;
              //if (ele.label != "all" && obj[ele.label] != "disabled") obj[ele.label] = ele.value ? 1 : 0;
            });
            obj.Permissioncode = el.Permissioncode;
            //if (el.chooseNum > 0) list.push(obj);
            list.push(obj);
            loop(el.Children);
          });
      }
      loop(this.permissionList);
      return list;
    },

    // 获取部门列表
    getDepartment() {
      this.loading = true;
      this.$api
        .getdepartment({
          Isinternal: true
        })
        .then(res => {
          if (res.Code == 10000) {
            res.Data.forEach(p => {
              p.Name = p.Departmentname;
              p.disabled = true;
              p.Child.forEach(q => {
                q.Name = q.Departmentname;
              });
            });
            this.departmentList = res.Data;
            this.selectdepartment();
          } else {
            this.$message({
              type: "error",
              message: res.Message
            });
          }
        })
        .catch(res => {});
    },

    // 获取部门人员
    selectdepartment() {
      this.$api
        .getdepatrmentuser({
          PageIndex: 1,
          PageSize: 100000
        })
        .then(res => {
          if (res.Code == 10000) {
            this.departmentList.forEach(p => {
              p.Child.forEach(q => {
                q.Child.push(
                  ...res.Data.filter(item => q.ID == item.Departmentid)
                );
              });
              p.Child.push(
                ...res.Data.filter(item => p.ID == item.Departmentid)
              );
            });
            this.loading = false;
          } else {
          }
          console.log("this.departmentList", this.departmentList);
        })
        .catch(res => {});
    },
    //过滤筛选
    filterNode(value, data) {
      if (!value) return true;
      if (data.Jobnumber && data.Department) {
        // || !!~data.ID.toString().indexOf(value)
        if (
          !!~data.Name.indexOf(value) ||
          !!~data.Department.indexOf(value) ||
          !!~data.Jobnumber.indexOf(value)
        ) {
          return true;
        }
      } else {
        if (!!~data.Name.indexOf(value)) {
          return true;
        }
      }
    },
    // 实现单选
    checkChange(data, checked, indeterminate) {
      // 选中为部门
      if (data.Child == undefined) {
        if (checked)
          // 当前点击为选择状态而不是取消选择
          this.checkedManager = data;
        // 获取当前所有被选中节点的id所组成的数组
        let nodes = this.$refs.tree.getCheckedKeys();
        if (nodes.length == 0) this.checkedManager = null;
        if (nodes.length == 0 || nodes.length == 1) return;
        // 注意传入的参数是数组
        this.$refs.tree.setCheckedKeys([data.ID]);
        // this.$refs.tree.setCheckedKeys([data]) 直接使用data会导致选择展示异常
      } else {
        this.$message({
          type: "warning",
          message: "请选择员工"
        });
        this.$refs.tree.setCheckedKeys([]);
        this.checkedManager = null;
      }
    },

    // 确认选择的管理员
    chosenManager() {
      this.editor.RealName = this.checkedManager.Name;
      this.editor.Phone = this.checkedManager.Mobile;
      this.chooseVisble = false;
    }
  }
};
</script>
<style lang="less" scoped>
.from_box {
  background: #fff;

  .from_item {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

.el-form-item .tip {
  color: #fa5555;
  font-size: 12px;
  line-height: 32px;
  position: absolute;
  top: 0;
  left: 80px;
}

.managerTypes {
  margin-top: 20px;
  justify-content: start;
  flex-wrap: nowrap;

  p {
    margin-right: 10px;
    flex-shrink: 0;
    padding-top: 10px;
  }

  span {
    display: inline-block;
    height: 36px;
    line-height: 36px;
    border: 1px solid #dae1f2;
    padding: 0 15px;
    position: relative;
    margin-right: 15px;
    font-size: 14px;
    color: #45474c;
    cursor: pointer;
    margin-bottom: 10px;

    &.active {
      &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 22px;
        height: 22px;
        background: url("/static/img/check.png") 100% 100% no-repeat;
        background-size: 100% 100%;
      }
    }

    i {
      display: none;
      position: absolute;
      z-index: 10;
      top: -5px;
      right: -5px;
      width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      font-size: 12px;
      border-radius: 50%;
      background: #ff5b6a;
      color: #fff;
      cursor: pointer;
    }

    &:hover {
      i {
        display: block;
      }
    }
  }
}

.permissionList {
  width: 100%;
  margin-top: 15px;
  border: 1px solid #f0f0f0; // border-bottom: none;
  border-radius: 4px;
  overflow: hidden;

  /deep/ div {
    float: left;
    width: 10%;
    box-sizing: border-box;
    min-width: 55px;
    line-height: 54px;
    height: 54px;
    text-align: center;
    font-size: 14px;
    position: relative;
    color: #3d424c;

    &.big {
      cursor: pointer;
      text-align: left;
      text-indent: 60px;
      width: 50%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .grade {
    background: #fcfcfc;
    border-bottom: 1px solid #f0f0f0;
    overflow: hidden;
    box-sizing: border-box;

    &.grade0 {
      background: transparent;
      /*background: red;*/
    }

    &:last-child {
      border-bottom: none;
    }
  }

  .bn {
    border-bottom: none;
  }

  header {
    border-bottom: 1px solid #f0f0f0;
    text-align: center;

    div {
      cursor: auto;
      font-size: 16px !important;

      &.big {
        text-align: center;
      }
    }
  }

  /deep/ i,
  /deep/ span {
    width: 16px;
    height: 16px;
    border: 1px solid #bbb;
    display: inline-block;
    position: relative;
    cursor: pointer;
  }

  /deep/ i {
    background: #409eff;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    border-color: #409eff;

    &::before,
    &::after {
      transition: all ease 0.3s;
      content: "";
      display: block;
      position: absolute;
      left: 10%;
      top: 50%;
      width: 80%;
      height: 2px;
      background: #fff;
      border-radius: 2px;
      transform: translateY(-1px);
      transition: opacity 0.2s ease;
    }

    &::after {
      transform-origin: center center;
      transform: translateY(-1px) rotate(90deg);
    }
  }

  /deep/ .show > .big > i:after {
    opacity: 0;
  }

  /deep/ span {
    &.choose {
      // background: #409eff;
      // border-color: #409eff;
      &::before,
      &::after {
        background: #555;
      }
    }

    &.disabled {
      background: #edf2fc;
      cursor: not-allowed;

      &::before,
      &::after {
        display: none;
      }
    }

    &::before,
    &::after {
      transition: all ease 0.3s;
      content: "";
      display: block;
      position: absolute;
      left: 3px;
      top: 7px;
      width: 7px;
      height: 2px;
      transform: rotate(39deg);
      transform-origin: top left;
      background: transparent;
      border-radius: 2px;
    }

    &::after {
      left: 6px;
      top: 12px;
      width: 12px;
      height: 2px;
      transform: rotate(-55deg);
    }
  }
}

.chooseTitle {
  color: #737780;
  line-height: 42px;
  width: 260px;

  & + .chooseTitle {
    margin-left: 40px;
  }
}

.chooseContain {
  height: 310px;
  box-sizing: border-box;
  background: #fafcfc;
  border: 1px solid #f0f0f0;
}

.choosewaiting {
  .el-input {
    margin: 16px 13px 4px;
    width: 230px;
    height: 30px;
    line-height: 28px;

    /deep/ .el-input__inner {
      background: transparent;
      height: 30px;
    }
  }

  .el-scrollbar {
    height: 228px !important;
    background: #fff;
  }

  /deep/ .el-tree-node__content {
    height: 32px;
    line-height: 32px;
    border-bottom: 1px solid #f3f2f2;
  }
}

.chooseAddress {
  line-height: 30px;
  height: 30px;
  color: #4c82ff;
  font-size: 12px;
  padding-left: 13px;

  span {
    color: #737780;
  }
}

.choosechecked {
  margin-left: 40px;

  section {
    display: flex;
    padding: 7px 11px;
    line-height: 18px;
    color: #737780;
    font-size: 12px;
    background: #fff;

    div {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #4c82ff;
      color: #fff;
      text-align: center;
    }

    span {
      flex: 1;
      text-indent: 8px;
    }

    img {
      width: 16px;
      height: 16px;
      margin: 1px;
      cursor: pointer;
    }
  }
}
</style>
