<template>
  <div class="app-container">
    <el-card header="任务基础信息" :style="{ fontWeight: 800 }">
      <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" label-width="110px" :rules="rules">
        <el-form-item label="任务主题名称" prop="studyTaskName">
          <el-input
            v-model="queryParams.studyTaskName"
            placeholder="请输入任务主题名称"
            clearable v-no-whitespace
            @keyup.enter.native="handleQuery"
            style="width: 200px"
          />
        </el-form-item>
        <!-- 上传封面 -->
        <el-form-item label="封面" prop="coverUrl" required>
          <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :on-remove="handlePictureCardRemove"
            :on-change="changeUpload"
            :on-exceed="handleExceed"
            list-type="picture-card"
            :limit="1"
            :class="{ disabled: fileList.length > 0 }"
            accept="image/*"
            :file-list="fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <span class="tip-text">尺寸建议550*310，限制1M以内</span>
        </el-form-item>
        <!-- 学习对象-下拉 -->
        <el-form-item label="学习对象" prop="taskFor">
          <el-select
            v-model="queryParams.taskFor"
            placeholder="请选择学习对象"
            style="width: 200px"
            clearable
            filterable
            @change="changeTaskFor"
          >
            <el-option v-for="item in studyObjectOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- 培训级别-下拉 -->
        <el-form-item label="培训级别" prop="trainLevel">
          <el-select
            v-model="queryParams.trainLevel"
            placeholder="请选择培训级别"
            style="width: 200px"
            clearable
            filterable
          >
            <el-option
              v-for="dict in dict.type.sys_train_level"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <!-- 教育类型-下拉 -->
        <el-form-item label="教育类型" prop="eduType">
          <el-select
            v-model="queryParams.eduType"
            placeholder="请选择教育类型"
            style="width: 200px"
            clearable
            filterable
          >
            <el-option
              v-for="dict in dict.type.sys_edu_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <!-- 工程选择-下拉 -->
        <el-form-item label="工程选择" prop="proId" v-if="queryParams.taskFor == '2'">
          <el-select
            v-model="queryParams.proId"
            placeholder="请选择工程"
            style="width: 200px"
            clearable
            filterable
            @change="changeProSelect"
          >
            <el-option v-for="item in projectSelectOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <span class="tip-text">学习对象为外委单位时，可选择工程</span>
        </el-form-item>
        <!-- 培训人数 -->
        <el-form-item label="培训人数" prop="trainNum">
          <el-input
            v-model="queryParams.trainNum"
            placeholder="请输入培训人数"
            clearable v-no-whitespace
            disabled
            style="width: 200px"
          />
          <!-- <span class="tip-text">
            选择工程后，自动带入该工程已入场外委人数，可对培训人数进行编辑；内部人员自行添加学习人数，添加后自动统计人数；
          </span> -->
        </el-form-item>
        <!-- 外委: 按钮 -->
        <el-form-item
          label="外委"
          prop="external"
          class="red-label"
          v-if="queryParams.eduType && queryParams.taskFor == '2'"
        >
          <el-button type="primary" size="mini" @click="handleSelectPerson(1)">选择人员</el-button>
          <!-- <span class="mr-lf">已选择{{ externalPerson.length }}</span> -->
          <span class="tip-text">点击选择人员，可添加人员，可对现有学习人员进行编辑；</span>
        </el-form-item>
        <!-- 内部: 按钮 -->
        <el-form-item
          label="内部"
          prop="internal"
          class="red-label"
          v-if="queryParams.eduType && queryParams.taskFor == '1'"
        >
          <el-button type="primary" size="mini" @click="handleSelectPerson(2)">选择人员</el-button>
          <!-- <span class="mr-lf">已选择{{ internalPerson.length }}</span> -->
          <span class="tip-text">点击选择人员，可添加人员，可对现有学习人员进行编辑；</span>
        </el-form-item>
        <!-- 有效期 -->
        <el-form-item label="有效期" prop="validityPeriod">
          <el-date-picker
            v-model="queryParams.validityPeriod"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            style="width: 300px"
          />
        </el-form-item>
      </el-form>
    </el-card>

    <el-card :style="{ marginTop: '20px' }">
      <div slot="header" style="font-weight: 800">
        <span>任务学习内容</span>
      </div>

      <div>
        <el-button type="primary" size="mini" @click="handleAddCourseware">添加课件</el-button>
        <el-button type="primary" size="mini" @click="handleAddExam" :disabled="examTableData.length > 0">
          添加考试
        </el-button>
        <el-button type="primary" size="mini" @click="handleAddExercise" :disabled="exerciseTableData.length > 0">
          添加练习
        </el-button>
      </div>

      <!-- 课件信息 -->
      <div>
        <div class="mr-tb">课件信息：</div>
        <el-table :data="coursewareTableData" highlight-current-row style="width: 100%">
          <el-table-column type="index" width="55" label="序号" align="center" />
          <el-table-column prop="coursewareName" label="课件名称" align="center" show-overflow-tooltip />
          <el-table-column prop="coursewareSize" label="大小" align="center">
            <template slot-scope="scope">{{ scope.row.coursewareSize }}MB</template>
          </el-table-column>
          <el-table-column prop="studyTime" label="时长" align="center">
            <template slot-scope="scope">{{ (scope.row.studyTime / 60).toFixed(2) }}分钟</template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-delete"
                style="color: #e47470"
                @click="handleDelete(scope.row, 1)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 考试信息 -->
      <div>
        <div class="mr-tb">考试信息：</div>
        <el-table :data="examTableData" highlight-current-row style="width: 100%">
          <el-table-column type="index" width="55" label="序号" align="center" />
          <el-table-column prop="examPaperName" label="考试名称" align="center" />
          <el-table-column prop="examTemplateName" label="试卷名称" align="center" />
          <el-table-column prop="questionNum" label="试题数" align="center" />
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-delete"
                style="color: #e47470"
                @click="handleDelete(scope.row, 2)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 练习信息 -->
      <div>
        <div class="mr-tb">练习信息：</div>
        <el-table :data="exerciseTableData" highlight-current-row style="width: 100%">
          <el-table-column type="index" width="55" label="序号" align="center" />
          <el-table-column prop="examTemplateName" label="练习名称" align="center" />
          <el-table-column prop="questionNum" label="试题数" align="center" />
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-delete"
                style="color: #e47470"
                @click="handleDelete(scope.row, 3)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="bottom-btn">
        <el-button type="primary" size="mini" @click="onSubmit" :loading="isLoading" v-preventReClick="5000">确 定</el-button>
        <el-button size="mini" @click="handleClose">取 消</el-button>
      </div>
    </el-card>

    <!-- 弹框展示穿梭框: 穿梭框列表为多层级, 工程名称 -> 承包商 -> 承包商姓名 -->
    <el-dialog title="选择人员" :visible.sync="dialogTransfer" width="45%">
      <treeTransfer
        :title="['所有人员', '已选人员']"
        :from_data="transferData"
        :to_data="toData"
        :defaultProps="{ label: 'label' }"
        height="60vh"
        filter
        openAll
      ></treeTransfer>
      <!-- style="overflow: auto" -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleTransfer" v-preventReClick="5000">确 定</el-button>
        <el-button @click="dialogTransfer = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 通用弹框 -->
    <GeneralDialog
      ref="GeneralDialog"
      :title="generalDialogTitle"
      :labelName="labelName"
      :columns="generalDialogColumns"
      :selectionRows="selectionRows"
      @getDialogData="getDialogData"
    />

    <!-- 添加考试 -->
    <ExamDialog ref="ExamDialog" title="添加考试" @getDialogData="getDialogData" />
  </div>
</template>

<script>
import GeneralDialog from './GeneralDialog'
import ExamDialog from './ExamDialog'
import treeTransfer from 'el-tree-transfer'
import { indexContinuous, lookFile } from '@/utils/bonus'
import {
  getProsSelectByStudyTask,
  getPersonTreeByType,
  addStudyTask,
  getStudyTaskById,
  editStudyTask,
} from '@/api/educationalTraining/resourceAdministration'

export default {
  components: { GeneralDialog, ExamDialog, treeTransfer },
  name: 'Task',
  dicts: ['sys_train_level', 'sys_edu_type'],
  data() {
    return {
      isLoading: false,
      showSearch: true,
      studyTaskId: '', // 任务id-编辑时传入
      lookFaceFile: lookFile(),
      queryParams: {
        // 任务主题名称
        studyTaskName: '',
        // 封面
        coverUrl: '',
        delFileUrl: '',
        // 学习对象
        taskFor: '',
        // 培训级别
        trainLevel: '',
        // 教育类型
        eduType: '',
        // 工程选择
        proId: '',
        // 培训人数
        trainNum: '',
        validityPeriod: null, // 有效期
        startTime: '', // 开始时间
        endTime: '', // 结束时间
      },
      // 上传封面
      dialogVisible: false,
      fileList: [],
      // 学习对象-下拉
      studyObjectOptions: [
        { label: '内部单位', value: '1' },
        { label: '外部单位', value: '2' },
      ],
      // 工程选择-下拉
      projectSelectOptions: [],
      rules: {
        studyTaskName: [{ required: true, message: '请输入任务主题名称', trigger: 'blur' }],
        taskFor: [{ required: true, message: '请选择学习对象', trigger: 'change' }],
        trainLevel: [{ required: true, message: '请选择培训级别', trigger: 'change' }],
        eduType: [{ required: true, message: '请选择教育类型', trigger: 'change' }],
        proId: [{ required: true, message: '请选择工程', trigger: 'change' }],
        validityPeriod: [{ required: true, message: '请选择有效期', trigger: 'change' }],
        coverUrl: [{ required: true, message: '请上传封面', trigger: 'change' }],
      },
      // 课件表格数据
      coursewareTableData: [],
      // 考试表格数据
      examTableData: [],
      // 练习表格数据
      exerciseTableData: [],
      delExamPaperIds: [], // 删除的考试/练习ids
      // 弹框展示穿梭框
      dialogTransfer: false,
      transferValue: [],
      transferData: [], // 左侧数据
      currentTreeData: [], // 当前树数据
      currentUserList: [], // 当前用户列表
      toData: [], // 右侧数据
      // 穿梭框全部数据
      dataList: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      // 外委人员
      externalPerson: [],
      // 内部人员
      internalPerson: [],
      // 已选人员 ids[]
      userIdList: [],
      selectionRows: [], // 选中的行
      // 外委or内部
      personType: 1,
      // 通用弹框-title
      generalDialogTitle: '',
      labelName: '',
      // 通用弹框-columns
      generalDialogColumns: [],
      pickerOptions: {
        disabledDate: this.disabledDate,
      },
    }
  },
  created() {
    this.studyTaskId = this.$route.query.studyTaskId || ''
    console.log('🚀 ~ created ~ this.studyTaskId:', this.fileList)
    if (this.studyTaskId) {
      this.getDetail()
    }
    this.getProsSelectByStudyTask()
  },
  methods: {
    indexContinuous,
    disabledDate(time) {
      const today = new Date()
      today.setHours(0, 0, 0, 0) // 将时间归零，只比较日期
      return time.getTime() < today.getTime()
    },
    // 获取详情
    async getDetail() {
      try {
        const { data } = await getStudyTaskById({ studyTaskId: this.studyTaskId, taskType: '1' })
        this.queryParams = { ...this.queryParams, ...data }
        this.queryParams.validityPeriod = [data.startTime, data.endTime]
        this.queryParams.coverUrl = this.lookFaceFile + data.coverUrl
        this.fileList = [{ url: this.queryParams.coverUrl }]
        // this.queryParams.delFileUrl = data.coverUrl
        console.log('🚀 ~ getDetail ~ this.queryParams:', this.queryParams)
        this.coursewareTableData = data.coursewareVos
        this.examTableData = data.examPaperList
        this.exerciseTableData = data.practiceExamPaperList
        this.userIdList = data.userIdList
        this.currentUserList = data.userIdList
        await this.getPersonTreeByType()
      } catch (error) {}
    },
    // 查询
    handleQuery() {
      this.$emit('query', this.queryParams)
    },
    // 上传图片
    changeUpload(file, fileList) {
      console.log('上传图片', fileList)
      this.queryParams.coverUrl = fileList[0].url
      this.fileList = fileList
    },
    // 上传图片超出限制
    handleExceed(files, fileList) {
      // 提示先删除再上传
      this.$message.error('请先删除已上传的封面，再上传新的封面')
    },
    handlePictureCardRemove(file, fileList) {
      console.log('删除图片', file, fileList)
      this.queryParams.delFileUrl = file.url.split(this.lookFaceFile)[1]
      this.queryParams.coverUrl = ''
      this.fileList = fileList
    },
    // 获取工程选择下拉
    async getProsSelectByStudyTask() {
      try {
        const res = await getProsSelectByStudyTask()
        this.projectSelectOptions = res.data
      } catch (error) {}
    },
    // 学习对象
    changeTaskFor(val) {
      // 清空工程选择
      this.queryParams.proId = ''
      // 清除工程选择校验
      this.$refs.queryForm.clearValidate('proId')
      // 清除培训人数
      this.queryParams.trainNum = ''
      // 清除外委人员
      this.externalPerson = []
      // 清除内部人员
      this.internalPerson = []
      this.transferData = []
      this.toData = []
      if (val == '1') {
        this.getPersonTreeByType()
      }
    },
    // 选择工程
    changeProSelect(val) {
      if (val) {
        this.getPersonTreeByType()
      } else {
      }
    },
    // 获取人员树
    async getPersonTreeByType() {
      try {
        const params = {
          type: this.queryParams.taskFor == '1' ? '2' : '1',
          proId: this.queryParams.proId || '',
        }
        const res = await getPersonTreeByType(params)
        this.transferData = res.data
        this.currentTreeData = res.data
        // this.handleEditToData(this.transferData)
        this.handlePersonTree(this.transferData)
      } catch (error) {}
    },
    filterTree(data) {
      return data.reduce((acc, node) => {
        console.log('🚀 ~ filterTree ~ node:', node)
        const { id, parentId, children = [] } = node
        const pid = parentId == '0' ? 0 : parentId
        if (this.currentUserList.includes(id)) {
          acc.push({ ...node, pid, children: [] })
        } else {
          const filteredChildren = this.filterTree(children, this.currentUserList)
          //  console.log('🚀 ~ filterTree ~ filteredChildren=============:', JSON.stringify(filteredChildren))
          if (filteredChildren.length > 0) {
            acc.push({ ...node, pid, children: filteredChildren })
          }
        }
        return acc
      }, [])
    },
    // 编辑时 studyTaskId有值时, 为编辑状态, 根据 userIdList 过滤出已选人员
    handleEditToData(data, parent = null) {
      data.forEach(item => {
        // 如果 item.id 在已选人员ids[]中 则 selected = true
        if (this.userIdList && this.userIdList.includes(item.id)) {
          item.selected = true
          this.toData.push(item)
          if (parent && !this.toData.includes(parent)) {
            this.toData.push(parent)
          }
        }
        if (item.children && item.children.length > 0) {
          this.handleEditToData(item.children, item)
        }
      })
      console.log('🚀 ~ 编辑to ~ this.toData:', this.toData)
    },
    // 递归循环-人员树- pid = parentId
    handlePersonTree(data) {
      data.forEach(item => {
        if (item.parentId == '0') {
          item.pid = Number(item.parentId)
        } else {
          item.pid = item.parentId
        }
        item.label = item.name
        // 如果 item.id 在已选人员ids[]中 则 selected = true
        if (this.userIdList && this.userIdList.includes(item.id)) {
          this.userIdList.find(id => {
            if (id === item.id) {
              item.selected = true
            }
          })
          item.selected = true
        } else {
          item.selected = false
        }
        if (item.children && item.children.length > 0) {
          this.handlePersonTree(item.children)
        }
      })
      console.log('🚀 ~ handlePersonTree ~ data:', data)
    },
    // 选择人员
    handleSelectPerson(val) {
      if (this.queryParams.taskFor === '2' && !this.queryParams.proId) {
        this.$message.error('请选择工程')
        return
      } else {
        this.dialogTransfer = true // 打开穿梭框
        console.log('🚀 ~ handleSelectPerson ~ val:', this.transferData)
        this.$nextTick(() => {
          // this.getTreeList(this.transferData, [])
          this.getTreeList(this.currentTreeData, [])
          this.toData = this.filterTree(this.currentTreeData)
          // this.getToDataList(this.toData, [])
        })
      }
    },
    // 穿梭框确定
    handleTransfer() {
      console.log('🚀 ~ 左侧数据 ~ this.toData:', this.toData)
      this.dataList = this.transferData
      this.userIdList = []
      this.handleTransferData(this.toData)
      this.addUserIds(this.toData)
      this.queryParams.trainNum = this.userIdList.length
      this.currentUserList = this.userIdList
      this.dialogTransfer = false
      this.handlePersonTree(this.currentTreeData)
    },
    addUserIds(items) {
      items.forEach(item => {
        console.log('🚀 ~ addUserIds ~ item:', item)
        if (item.userType) {
          this.userIdList.push(item.id)
          console.log('🚀 ~ addUserIds ~ this.userIdList:', this.userIdList)
        }
        if (item.children && item.children.length > 0) {
          this.addUserIds(item.children)
        }
      })
    },
    // 递归循环-toData 给每一项添加 selected = true 然后与 transferData 合并
    handleTransferData(data) {
      data.forEach(item => {
        item.selected = true
        if (item.children && item.children.length > 0) {
          this.handleTransferData(item.children)
        }
      })
    },
    // 添加课件
    handleAddCourseware() {
      this.generalDialogTitle = '添加课件'
      this.labelName = '课件名称'
      this.selectionRows = this.coursewareTableData
      this.generalDialogColumns = [
        { prop: 'coursewareName', label: '课件名称' },
        { prop: 'coursewareSize', label: '大小' },
        { prop: 'studyTime', label: '时长' },
      ]
      this.$refs.GeneralDialog.openDialog(0)
    },
    // 添加考试
    handleAddExam() {
      this.$refs.ExamDialog.openDialog(this.examTableData)
    },
    // 添加练习
    handleAddExercise() {
      this.generalDialogTitle = '添加练习'
      this.selectionRows = this.exerciseTableData
      this.labelName = '练习名称'
      this.generalDialogColumns = [
        { prop: 'examTemplateName', label: '练习名称' },
        { prop: 'questionNum', label: '试题数' },
      ]
      this.$refs.GeneralDialog.openDialog(2)
    },
    // 从子组件获取添加的课件, 考试, 练习数据
    getDialogData(type, data) {
      if (type === 0) {
        // this.coursewareTableData = data
        this.coursewareTableData.push(...data)
        // 过滤重复数据 coursewareId 相同的只保留一个
        this.coursewareTableData = this.coursewareTableData.reduce((acc, cur) => {
          const ids = acc.map(item => item.coursewareId)
          if (!ids.includes(cur.coursewareId)) {
            acc.push(cur)
          }
          return acc
        }, [])
        console.log('🚀 ~ getDialogData ~ this.coursewareTableData:', this.coursewareTableData)
      } else if (type === 1) {
        this.examTableData = data
      } else {
        this.exerciseTableData = data
        this.exerciseTableData.forEach(item => {
          item.examPaperName = item.examTemplateName
          item.examTemplateType = 2
          item.papeType = 1
        })
      }
    },
    // 删除
    handleDelete(row, type) {
      // 弹框确认删除
      this.$confirm('是否删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          if (type === 1) {
            this.coursewareTableData = this.coursewareTableData.filter(item => item.coursewareId !== row.coursewareId)
          } else if (type === 2) {
            this.examTableData = []
            if (row.examPaperId) {
              this.delExamPaperIds.push(row.examPaperId)
            }
          } else {
            this.exerciseTableData = []
            if (row.examPaperId) {
              this.delExamPaperIds.push(row.examPaperId)
            }
          }
        })
        .catch(() => {
          console.log('取消')
        })
    },
    /**
     * 格式化左侧数据
     * @param {array} treeList
     * @param {array} leftFromData
     */
    getTreeList(treeList, leftFromData) {
      treeList.map(item => {
        if (!item.selected) {
          const tempData = {
            ...item,
          }

          // 如果有子项
          if (item.children && item.children.length > 0) {
            tempData.children = []
            this.getTreeList(item.children, tempData.children)
          }
          leftFromData.push(tempData)
        }
      })
      this.transferData = leftFromData
    },
    /**
     * 格式化右侧todata
     * @param {array} treeList
     * @param {array} rightToData
     */
    getToDataList(treeList, rightToData) {
      let childrenArr = []

      treeList.forEach(element => {
        // 二级
        element.children.forEach(item => {
          if (element.id === item.pid && item.selected) {
            childrenArr.push(item)
            const tmp = {
              ...element,
              children: childrenArr,
            }
            rightToData.push(tmp)
          }
          // 三级
          if (item.children && item.children.length > 0) {
            // 递归
            this.getToDataList(item.children, rightToData)
          }
        })
        childrenArr = []
      })
      // 引用类型数组去重
      this.toData = _.uniqWith(rightToData, _.isEqual)
    },
    handleClose() {
      this.$tab.closePage()
    },
    // 提交
    onSubmit() {
      console.log('提交', this.queryParams)
      this.$refs.queryForm.validate(async valid => {
        if (valid) {
          try {
            this.isLoading = true
            let formData = new FormData()
            if (this.fileList.length > 0) {
              formData.append('file', this.fileList[0].raw)
            }
            const params = {
              ...this.queryParams,
              coverUrl: this.queryParams.coverUrl.split(this.lookFaceFile)[1],
              startTime: this.queryParams.validityPeriod[0],
              endTime: this.queryParams.validityPeriod[1],
              userIdList: this.userIdList, // 人员ids
              coursewareIdList: this.coursewareTableData.map(item => item.coursewareId), // 课件ids
              examPaperList: this.examTableData, // 考试数组
              practiceExamPaperList: this.exerciseTableData, // 练习数组
              studyTaskId: this.studyTaskId || '',
              delFileUrl: this.queryParams.delFileUrl,
            }
            console.log('🚀 ~ onSubmit ~ params:', params)
            formData.append('params', JSON.stringify(params))
            if (this.studyTaskId) {
              const res = await editStudyTask(formData)
              console.log('🚀 ~ onSubmit ~ res:', res)
            } else {
              const res = await addStudyTask(formData)
              console.log('🚀 ~ onSubmit ~ res:', res)
            }
            this.isLoading = false
            // 关闭当前页
            this.$tab.closePage()
          } catch (error) {
            this.isLoading = false
          }
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.tip-text {
  color: #aaa;
  font-size: 12px;
  margin-left: 20px;
}

::v-deep .red-label .el-form-item__label {
  color: red !important;
}
.mr-lf {
  margin-left: 10px;
}
.mr-tb {
  margin: 20px 0;
  font-weight: 800;
}
.bottom-btn {
  margin: 30px 0 20px;
  display: flex;
  justify-content: flex-end;
}
::v-deep .el-transfer-panel__body {
  height: 360px;
}
::v-deep .wl-transfer .transfer-main {
  height: calc(100% - 81px) !important;
}
</style>
