<template>
     <el-dialog
      top="10vh"
      title="MDT团队管理"
      :visible.sync="dialogVisible"
      custom-class="mdtTeamDialogName"
      :before-close="handleClose"
      :modal-append-to-body="false"
    >
      <section v-show="activeName === 1">
        <el-row style="height: 100%">
          <el-col :span="10" class="mdt-team-left">
            <div class="core-mem-team">
              <div class="title">核心小组</div>
              <div class="mem-team-con">
                <div v-for="item of coreList" :key="item.doctorId">
                  <div class="role">{{ item.role }}</div>
                  <div class="name">{{ item.doctorName }}</div>
                </div>
              </div>
            </div>
            <div class="other-mem-team">
              <div class="title">其他成员</div>
              <div class="mem-team-con">
                <el-table
                  :data="otherList"
                  max-height="370px"
                  height="370px"
                  :cell-style="rowDClass"
                  :header-cell-style="mdtTheadClass"
                  :row-class-name="tableRowClassName"
                  style="width: 100%"
                >
                <template slot="empty">
                  <img src="@/assets/images/empty.png" alt="">
                  <div style="margin-top:-50px">
                    <span>暂无数据</span>
                  </div>
                </template>
                  <el-table-column
                    prop="doctorName"
                    label="姓名"
                    min-width="120"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.doctorName }}</span>
                      <el-tag
                        v-if="scope.row.status === 9"
                        style="margin-left: 5px"
                        type="success"
                        size="mini"
                        >外院</el-tag
                      >
                    </template>
                  </el-table-column>
                  <el-table-column prop="specialty" label="专业" min-width="80">
                  </el-table-column>
                  <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button
                        @click="handleRemove(scope.row,true)"
                        type="text"
                        size="mini"
                        style="font-size:14px"
                        >移除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
          <el-col :span="14" class="mdt-team-right">
            <div class="dept-con">
              <el-tabs
                class="tab-pane-out"
                v-model="tabsName"
              >
                <el-tab-pane label="本院" :lazy="true" name="in">
                  <div class="t-item t-item-in">
                    <el-input
                    size="small"
                      placeholder="请输入名字"
                      v-model="searchKey"
                      @input="getListByName"
                      class="input-with-select"
                    >
                      <el-button
                      size="small"
                        slot="append"
                        @click="getListByName"
                        icon="el-icon-search"
                      ></el-button>
                    </el-input>
                    <el-row :gutter="10">
                      <el-col :span="6">
                        <div
                          style="
                            height: 500px;
                            overflow-x: hidden;
                            border-right: 1px solid #f0f0f0;
                          "
                        >
                          <el-scrollbar style="height: 100%">
                            <el-tooltip
                              :enterable="false"
                              :open-delay="200"
                              class="item"
                              effect="dark"
                              :content="item.deptName"
                              placement="top"
                              :disabled="item.deptName.trim().length < 7"
                              v-for="item in depeList"
                              :key="item.id"
                            >
                              <p
                                class="in-department-item"
                                @click="handleDeptClick(item)"
                                :class="{
                                  'in-department-item-ac': deptId === item.id,
                                }"
                              >
                                {{ item.deptName }}
                              </p>
                            </el-tooltip>
                          </el-scrollbar>
                        </div>
                      </el-col>
                      <el-col :span="18">
                        <el-table
                          :data="deptMemList"
                          max-height="485px"
                          height="485px"
                          v-loading="isLoading"
                          :cell-style="rowDClass"
                          :header-cell-style="mdtTheadClass"
                          :row-class-name="tableRowClassName"
                          style="width: 100%"
                        >
                        <template slot="empty">
                          <img src="@/assets/images/empty.png" alt="">
                          <div style="margin-top:-50px">
                            <span>暂无数据</span>
                          </div>
                        </template>
                          <el-table-column
                            prop="doctorName"
                            label="姓名"
                            min-width="120"
                          >
                          </el-table-column>
                          <el-table-column
                            prop="specialty"
                            label="专业"
                            min-width="80"
                          >
                          </el-table-column>
                          <el-table-column label="操作" width="80">
                            <template slot-scope="scope">
                              <el-button
                                @click="handleAdd(scope.row, scope.$index)"
                                type="text"
                                size="small"
                                style="font-size:14px"
                                >添加</el-button
                              >
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-col>
                    </el-row>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="外院" :lazy="true" name="out">
                  <div class="t-item  t-item-out">
                    <el-input
                      size="small"
                      placeholder="请输入名字"
                      v-model="outSearchKey"
                      @input="getOutDocList"
                      class="input-with-select"
                    >
                      <el-button
                        size="small"
                        slot="append"
                        @click="getOutDocList"
                        icon="el-icon-search"
                      ></el-button>
                    </el-input>
                    <div class="t-item-option">
                      <span style="color: #000;opacity:0.8;font-weight:600;line-height:26px;font-family: PingFangSC, PingFangSC-Semibold;">外院医生列表</span>
                      <el-button
                        size="mini"
                        @click="showAddTable"
                        type="primary"
                        style="padding: 6px 5px"
                        >新增医生</el-button
                      >
                    </div>
                    <el-table
                      :data="outDoctorList"
                      max-height="450px"
                      height="450px"
                      v-loading="isLoading"
                      :cell-style="rowOutDClass"
                      :header-cell-style="outHeadClass"
                      style="width: 100%"
                    >
                    <template slot="empty">
                      <img src="@/assets/images/empty.png" alt="">
                      <div style="margin-top:-50px">
                        <span>暂无数据</span>
                      </div>
                    </template>
                      <el-table-column
                        prop="outHospitalName"
                        label="医院名称"
                        width="160"
                        :show-overflow-tooltip="true"
                      >
                        <template slot-scope="scope">
                          <span v-show="!scope.row.show">{{
                            scope.row.outHospitalName
                          }}</span>
                          <el-form
                            :rules="rules.outHospitalName"
                            size="mini"
                            v-show="scope.row.show"
                          >
                            <el-form-item style="margin-bottom:0" :prop="scope.row.outHospitalName">
                              <el-input
                                style="margin-top: 5px"
                                v-model="scope.row.outHospitalName"
                              ></el-input>
                            </el-form-item>
                          </el-form>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="doctorName"
                        label="姓名"
                        width="100"
                      >
                        <template slot-scope="scope">
                          <span v-show="!scope.row.show">{{
                            scope.row.doctorName
                          }}</span>
                          <el-form size="mini" v-show="scope.row.show">
                            <el-form-item
                              style="margin-bottom:0"
                              :prop="scope.row.doctorName"
                              :rules="rules.doctorName"
                            >
                              <el-input
                                style="margin-top: 5px"
                                v-model="scope.row.doctorName"
                              ></el-input>
                            </el-form-item>
                          </el-form>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="specialty"
                        label="专业"
                        min-width="80"
                      >
                        <template slot-scope="scope">
                          <el-tooltip
                            :open-delay="200"
                            class="item"
                            effect="dark"
                            :content="scope.row.specialty"
                            placement="top"
                            :disabled="scope.row.specialty.length < 10"
                          >
                            <span v-show="!scope.row.show">{{
                              scope.row.specialty
                            }}</span>
                          </el-tooltip>
                          <el-form size="mini" v-show="scope.row.show">
                            <el-form-item
                             style="margin-bottom:0"
                              :prop="scope.row.specialty"
                              :rules="rules.specialty"
                            >
                              <el-input
                                style="margin-top: 5px"
                                v-model="scope.row.specialty"
                              ></el-input>
                            </el-form-item>
                          </el-form>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="90">
                        <template slot-scope="scope">
                          <el-button
                            @click="handleAdd(scope.row, scope.$index)"
                            type="text"
                            size="mini"
                            style="font-size:14px"
                            >{{scope.row.show? '确定' : '添加'}}</el-button
                          >
                          <el-button
                            v-if="
                              !(scope.row.show && addDoctor) && !scope.row.del
                            "
                            style="margin-left: 2px;font-size:14px"
                            @click="handleDelete(scope.row, scope.$index)"
                            type="text"
                            size="small"
                            >删除</el-button
                          >
                          <el-button
                            v-if="scope.row.show && addDoctor"
                            style="margin-left: 2px;font-size:14px"
                            @click="cancleAddDoc(scope.$index)"
                            type="text"
                            size="small"
                            >取消</el-button
                          >
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
        </el-row>
      </section>
      <section v-show="activeName === 2">
        <div class="section-title">最新的小组成员</div>

        <el-table
          class="dragtable"
          :row-key="getRowKey"
          :data="addMemList"
          height="546px"
          :cell-style="rowDClass"
          :header-cell-style="mdtTheadClass"
          :row-class-name="tableRowClassName"
          style="width: 100%"
        >
          <template slot="empty">
            <img src="@/assets/images/empty.png" alt="">
            <div style="margin-top:-50px">
              <span>暂无数据</span>
            </div>
          </template>
          <el-table-column width="60" class-name="drag-icon">
            <template>
              <div class="table-btn-box">
                <el-tooltip
                  :open-delay="300"
                  :enterable="false"
                  content="拖拽排序"
                  placement="top-start"
                >
                  <i
                    style="
                      font-size: 20px;
                      cursor: pointer;
                      padding:0 10px;
                      z-index: 10;

                    "
                    class="iconfont icontuozhuaipaixu dragicon"
                  ></i>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="doctorName" label="科室/医院" min-width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.status === 9">{{
                scope.row.outHospitalName
              }}</span>
              <span v-else>{{ scope.row.deptName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="doctorName" label="姓名" min-width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.doctorName }}</span>
              <el-tag
                v-if="scope.row.status === 9"
                style="margin-left: 5px"
                type="success"
                size="small"
                >外院</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="specialty" label="专业" min-width="80">
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <div class="table-btn-box">
                <el-button
                  v-if="!scope.row.fixed"
                  @click="handleNoAdd(scope.row)"
                  type="text"
                  size="small"
                  style="font-size:14px"
                  >移除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </section>
      <section v-show="activeName === 3">
        <div class="success-con">
          <img :src="require('@/assets/images/icon_gou.png')" alt="" srcset="" />
          <div class="remark">您已编辑成功，点击确定即可看到已添加成功人员</div>
        </div>
      </section>
      <div class="btn-con">
        <el-button size="mini" v-show="activeName === 1" @click="handleClose"
          >取消</el-button
        >
        <el-button
          size="mini"
          v-show="activeName === 2"
          @click="handleUp"
          >上一步</el-button
        >
        <el-button
          size="mini"
          style="margin-left:8px"
          v-show="activeName === 1 || activeName === 2"
          type="primary"
          :disabled="nextLoading"
          @click="hanndleNext"
          >下一步</el-button
        >
        <el-button
          size="mini"
          v-show="activeName === 3"
          type="primary"
          @click="handleClose"
          >确定</el-button
        >
      </div>
    </el-dialog>
</template>
<script>
import Sortable from "sortablejs";
import {
  getCoreList,
  mdtDept,
  getOtherList,
  getMdtDeptMemList,
  getOutDoctorList,
  addMdtMemList,
  saveOutDoctior,
  delOutDoctor
} from "@/request/mdt.js";
import { cloneDeep } from 'lodash'
export default {
    data() {
      let validHospitalName = (rule, value, callback) => {
      let data_ = this.outDoctorList[this.outDoctorList.length - 1];
      if (data_.outHospitalName.trim() === "") {
          callback(new Error("请输入医院名称"));
        } else {
          callback();
        }
      };
      let validDoctorName = (rule, value, callback) => {
        let data_ = this.outDoctorList[this.outDoctorList.length - 1];

        if (data_.doctorName.trim() === "") {
          callback(new Error("请输入医生姓名"));
        } else {
          callback();
        }
      };
      let validSpecialty = (rule, value, callback) => {
        let data_ = this.outDoctorList[this.outDoctorList.length - 1];

        if (data_.specialty.trim() === "") {
          callback(new Error("请输入专业"));
        } else {
          callback();
        }
      };
        return {
            nextLoading: false,
            //添加外院医生校验规则
            rules: {
              outHospitalName: {
                validator: validHospitalName,
                trigger: "blur",
              },
              doctorName: {
                validator: validDoctorName,
                trigger: "blur",
              },
              specialty: { validator: validSpecialty, trigger: "blur" },
              // phone: { validator: validPhone, trigger: "blur" },
            },
            isLoading: false,
            dialogVisible: false,
            activeName: 1,
            coreList: [],//核心医生
            otherList: [],//其他医生
            defaultOtherList: [],//其他医生初始数据
            tabsName: 'in',
            searchKey: '',
            depeList: [],//本院科室
            deptMemList: [],//本院医生列表
            defaultMList: [],//本院初始列表
            outSearchKey: '',//外院
            outDoctorList: [],//外院医生列表
            addMemList: [],//最新小组成员
            nextLoading: false,
            deptId: '',//科室id
            addDoctor: false,//控制新增外院医生的按钮
            currentItem: {},//外院医生新增的信息保存
            outAllDoctor: [],//外部传进来的原医生列表
            isAdd: true,//是组建还是编辑,
            mdtMeeting: {},//修改会议
            patientId: '',
            mdtId: ''
        }
    },
    created() {
      this.getMdtDeptList()
    },
    methods: {
      // 表头样式
      mdtTheadClass() {
          return "text-align: left;background:#F3F4F8; color:#000; padding-left:10px;line-height: 42px;height: 42px;padding: 0 0 0 15px";
      },
      rowDClass() {
        return "text-align: left; line-height: 55px;height: 55px;padding:0 0 0 15px";
      },
      rowOutDClass() {
            return "padding: 0; text-align: left; line-height: 55px;height: 55px;";
        },
        //外院医生表头样式
        outHeadClass() {
            return "text-align: left;background:#F3F4F8; color:#000; padding-left:0px;line-height: 42px;height: 42px;padding: 0 0 0 0px";
        },
        async getOutDocList() {
          const res = await getOutDoctorList(this.outSearchKey);
          if (res.code == 0) {
            this.defaultOutDocList = res.data;
            let List = cloneDeep(this.defaultOutDocList);
            let newList = List.filter(
              (item) => !this.otherList.some((ele) => ele.doctorId === item.id)
            );
            this.outDoctorList = newList;
          } else {
            this.$message.error(res.msg);
            this.defaultOutDocList = [];
            this.outDoctorList = [];
          }
        },
        // mdt核心成员
        async getCoreList() {
            const res = await getCoreList(this.patientId);
            if (res.code === 0) {
                this.coreList = res.data.map((item) => {
                item.fixed = true;
                return item;
                });
                await this.calcOtherList(this.coreList,this.outAllDoctor)
            } else {
                this.$message.error(res.msg);
                this.coreList = [];
            }
        },
        //传进来的医生列表剔除核心医生
        calcOtherList(core,data) {
          const coreId = core.map(item => item.doctorId);
          this.otherList = data.filter(i => !coreId.includes(i.doctorId));
          this.defaultOtherList = cloneDeep(this.otherList);
        },
        // other核心成员
        async getOtherList() {
          const res = await getOtherList(this.patientId);
          if (res.code === 0) {
            this.defaultOtherList = cloneDeep(res.data);
            this.otherList = cloneDeep(res.data);
          } else {
            this.$message.error(res.msg);
            this.otherList = [];
          }
        },
        // 科室列表
        async getMdtDeptList() {
          const res = await mdtDept();
          if (res.code === 0) {
            this.depeList = res.data;
          } else {
            this.$message.error(res.msg);
            this.depeList = [];
          }
        },
        //查询内院医生列表
        async getListByName() {
          const {code,msg,data} = await getMdtDeptMemList({
            deptId: this.deptId,
            doctorName: this.searchKey,
            deptName: this.deptId ? this.deptName : "",
          })
          if(code == 0) {
            this.defaultMList = data;
            const newList = this.defaultMList.filter(item => !this.otherList.some(ele => ele.doctorId === item.id))
            this.deptMemList = newList;
          } else {
            this.$message.error(msg);
          }
        },
        //科室点击
        handleDeptClick(row) {
          this.deptId = this.deptId == row.id ? "" : row.id;
          this.deptName = this.deptId ? row.deptName : '';
          this.getListByName()
        },
        //弹窗打开,所有数据从外面传进来
        async open(data) {
          this.outAllDoctor = data.list,
          this.mdtMeeting = !data.status ? (data.info || '') : null;
          this.isAdd = data.status;
          this.patientId = data.patientId
          this.mdtId = data.mdtId
          this.dialogVisible = true;
          await this.getCoreList()
          await this.getListByName()
          await this.getOutDocList()
          this.$nextTick(() => {
            this.rowDrop();
          });
        },
        //弹窗关闭，数据改变通过emit出去或者调用接口
        handleClose() {
            this.dialogVisible = false;
            this.searchKey = '';
            this.outSearchKey = '';
            this.tabsName = "in";
            this.deptId = "";
            this.deptName = '';
            this.activeName = 1;
            this.defaultMList = [];
            this.deptMemList = [];
        },
        //获得表格唯一key
        getRowKey(row) {
          return row.deptName + row.doctorId;
        },
        tableRowClassName({ row, rowIndex }) {
          row.index = rowIndex;
        },
        //添加
        handleAdd(row, index) {
          //新增外院到数据库
          if(this.addDoctor){
            let data = cloneDeep(row);
            delete data.show;
            let tips = '';
            if(!row.outHospitalName.trim()) {
              tips = '医院名称不能为空！'
            } else if(!row.doctorName.trim()) {
              tips = '医生名字不能为空！'
            } else if(!row.specialty.trim()) {
              tips = '专业不能为空！'
            }
            if(tips) {
              this.$message.error('请将信息填写完整');
                return;
            }
            this.addOutDoctor(data);
          } else { //添加到团队
            //先添加到other数组然后再从医生列表剔除
            let {
              del,
              avatar,
              deptName,
              doctorId,
              doctorName,
              goodAtFirld,
              id,
              role,
              specialty,
              outHospitalName,
              status,
            } = row;
            doctorId = row.id
            const d1 = this.coreList.filter(item => item.doctorId == doctorId)
            const d2 = this.otherList.filter(item => item.doctorId == doctorId)
            if(d1.length || d2.length){
              this.$message.error('该医生已经在团队中!')
              return
            }
            this.otherList.push({
              del,
              avatar,
              deptName,
              doctorId,
              doctorName,
              goodAtFirld,
              id,
              role,
              specialty,
              outHospitalName,
              status,
            });
            let list = this.tabsName == "in" ? cloneDeep(this.deptMemList) : cloneDeep(this.outDoctorList);
            list.splice(index, 1);
            this.tabsName == "in"  ? (this.deptMemList = cloneDeep(list)) : (this.outDoctorList = cloneDeep(list));

          }
        },
        //添加外院医生
        async addOutDoctor(params) {
          const res = await saveOutDoctior(params);
          if (res.code === 0) {
            this.addDoctor = false;
            this.getOutDocList();
          } else {
            this.$message.error(res.msg);
          }
        },
        //移除
        handleRemove(row) {
            this.otherList.splice(row.index, 1);
            //other移除之后，返回到医生列表的数据来源是初始的医生列表
            if (row.status === 9) {
              this.defaultOutDocList.forEach((item) => {
                if (item.id === row.doctorId) {
                  this.outDoctorList.push(item);
                }
              });
            } else {
              this.defaultMList.forEach((item) => {
                if (item.id === row.id) {
                  this.deptMemList.push(item);
                }
              });
            }
        },
        //删除外院医生
        async handleDelete(row) {
           //todo先去请求数据，然后再将已添加移除
          // let idx = this.otherList.findIndex(item => row.id == item.id)
          // if(idx !== -1) this.otherList.splice(idx, 1);
          // this.handleNoRemove(row);
          const {code, msg} = await delOutDoctor(row.id);
          if(code == 0) {
            this.$message.success('删除成功！')
            this.outDoctorList = this.outDoctorList.filter(item => item.id != row.id)
            this.defaultOutDocList = this.defaultOutDocList.filter(item => item.id != row.id)
          } else {
            this.$message.error(msg ? msg : '删除失败！')
          }
          this.delOutDoctor(row.id);
        },
        //最新成员列表移除
        handleNoAdd(row) {
          this.addMemList = this.addMemList.filter(item => item.doctorId != row.doctorId)
          this.otherList = this.otherList.filter((item) => {
            return item.doctorId != row.doctorId;
          });
          if (row.status === 9) {
            this.defaultOutDocList.forEach((item) => {
              if (item.id === row.doctorId) {
                this.outDoctorList.push(item);
              }
            });
          } else {
            this.defaultMList.forEach((item) => {
              if (item.id === row.doctorId) {
                this.deptMemList.push(item);
              }
            });
          }
        },
        //上一步
        handleUp() {
          this.addMemList = [];
          this.activeName -= 1;
        },
        //下一步
        async hanndleNext() {
          if(this.activeName === 1){
            this.addMemList = this.coreList.concat(this.otherList);
            // this.addMemList.sort(function (a, b) {
            //   return a.mdtPatientTeamId - b.mdtPatientTeamId;
            // });
          } else if(this.activeName === 2) {
            //组建
            if(this.isAdd) {
              let list = this.addMemList.map((item) => {
                return {
                  personId: Number(item.doctorId),
                  typeCode: item.typeCode ? item.typeCode : "other",
                  typeName: item.role ? item.role : "其他医生",
                };
              });
              let params = {
                meetingId: this.isEmpty ? "" : this.mdtId,
                mdtPatientTeamList: list,
                patientBaseId: this.patientId,
              };
              const res = await addMdtMemList(params);
              if(res.code === 0){
                this.$message.success("成功")
                this.$emit('change')
              } else {
                this.$message.error(res.msg)
              }
            } else {//修改参会人员
            this.$emit('change',this.addMemList)
            }
          }
          this.activeName += 1;
        },
        //显示外院医生添加
        showAddTable() {
          if(this.addDoctor) return;
          this.addDoctor = true;
          const data = {
            outHospitalName: "",
            doctorName: "",
            specialty: "",
            phone: "",
            show: true,
          };
          this.outDoctorList.unshift(data);
          this.currentItem = data;
        },
        //取消外院医生添加
        cancleAddDoc(d) {
          this.outDoctorList.splice(d, 1);
          this.addDoctor = false;
        },
        // 行拖拽
        rowDrop() {
          // 此时找到的元素是要拖拽元素的父容器
          const tbody = document.querySelector(
            ".dragtable .el-table__body-wrapper tbody"
          );
          const _this = this;
          Sortable.create(tbody, {
            //  指定父元素下可被拖拽的子元素
            handle: ".dragicon",
            draggable: ".el-table__row",
            onEnd({ newIndex, oldIndex }) {
              const currRow = _this.addMemList.splice(oldIndex, 1)[0];
              _this.addMemList.splice(newIndex, 0, currRow);
            },
          });
        },
    }
}
</script>
<style lang="less">
.drag-icon {
  padding: 0!important;
}
.dragicon:hover {
color: #409EFF;
}
.meeting-con {
  @media screen and (min-width: 2700px) {
    .el-dialog__wrapper,
    .el-drawer__wrapper {
      width: calc(66% + 40px) !important;
      right: calc(34% - 40px) !important;
      left: 0 !important;
    }
    .v-modal {
      width: calc(66% + 40px) !important;
      right: calc(34% - 40px) !important;
      left: 0 !important;
    }
  }
  @media all and (device-aspect-ratio: ~"344/144") {
    .el-dialog__wrapper,
    .el-drawer__wrapper {
      width: calc(66% + 40px) !important;
      right: calc(34% - 40px) !important;
      left: 0 !important;
    }
    .v-modal {
      width: calc(66% + 40px) !important;
      right: calc(34% - 40px) !important;
      left: 0 !important;
    }
  }
}
</style>
<style lang="less" scoped>
/deep/ .mdtTeamDialogName {
  width: 1100px;
  .el-dialog__body {
    padding: 20px 40px 32px;
  }
  .el-dialog__header {
     padding: 32px 40px 0;
  }
  .el-dialog__headerbtn {
    font-size: 20px;
    right: 40px;
    top: 30px;
  }
  .el-dialog__title {
    color: #000;
    opacity: 0.8;
    font-weight: 600;
    font-size: 16px;
  }
  .section-title {
    margin-bottom: 8px;
    font-size: 14px;
    color: #000;
    font-weight: 600;
  }
}
.btn-con {
    display: flex;
    justify-content: flex-end;
}
.t-item-option {
    display: flex;
    justify-content: space-between;
    padding: 0 0 10px;
}

.other-mem-team,
.core-mem-team {
    .title {
        font-family: PingFangSC-Semibold,PingFang SC;
        font-size: 14px;
        line-height: 22px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #000;
        opacity: 0.8;
    }
}
.core-mem-team {
  .mem-team-con {
      display: flex;
      justify-content: space-between;
      text-align: center;
      padding: 16px 26px;
      background: #f6f9ff;
      border: 1px solid #eee;
      margin-bottom: 20px;
      .role {
        font-size: 12px;
        line-height: 1.5715;
      }
      .name {
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        margin-bottom: 0;
        color: #000;
        opacity: 0.8;
      }
  }
}
.mdt-team-left {
    padding-right: 16px;
}
.mdt-team-right {
    // padding-left: 16px;
    // border-left: 1px solid #f0f0f0;
    position: relative;
    &::after {
      content: '';
      top: 30px;
      width: 0;
      height: 100%;
      position: absolute;
      border-left: 1px solid #f0f0f0;
      opacity: 0.9;
    }
    .input-with-select {
        padding-bottom: 8px;
    }
    .t-item {
      padding-left: 16px;
      height: 540px;
    }
    
    .in-department-item {
      height: 38px;
      line-height: 38px;
      padding: 0 16px 0 12px;
      color: rgba(0, 0, 0, 0.8);
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 0;
    }
     .in-department-item-ac,
    .dept-item-active {
      background-color: #eff5ff;
      border-right: 2px solid #407df3;
    }
}
.dragicon {
    color: rgba(0, 0, 0, 0.5);
    padding-left: 10px;
  }
  .dragicon:hover {
    color: #409eff!important;
  }
/deep/ .tab-pane-out {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .el-tabs__header {
        display: flex;
        justify-content: center;
        margin-left: 16px;
        margin-bottom: 4px;
        border-color: #f0f0f0;
        height: 30px;
        .el-tabs__active-bar {
            display: none;
        }
        .el-tabs__nav-wrap::after {
            height: 0;
        }
        .el-tabs__item {
          height: 30px;
            padding: 0 20px;
            font-family: PingFangSC-Semibold,PingFang SC;
            font-size: 14px;
            line-height: 28px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #000;
            opacity: 0.8;
            &.is-active {
              color: #000;
              &::after {
                z-index: 10;
                content: "";
                position: absolute;
                top: 27px;
                left: 49%;
                margin-left: -9px;
                width: 19px;
                height: 3px;
                background: #407df3;
                border-radius: 2px;
              }
            }
        }
    }
}
.success-con {
  height: 574px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>