<template>
  <div class="app-container">
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :inline="true"
      :model="queryParams"
      label-width="68px"
    >
      <el-form-item label="队列名称" prop="queueName">
        <el-input
          v-model="queryParams.queueName"
          clearable
          placeholder="请输入队列名称"
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          size="mini"
          type="cyan"
          @click="handleQuery"
        >搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          v-hasPermi="['resource:queue:add']"
          icon="el-icon-plus"
          size="mini"
          type="primary"
          @click="handleAdd"
        >新增
        </el-button>
        <el-button
          v-hasPermi="['resource:queue:edit']"
          :disabled="single"
          icon="el-icon-edit"
          size="mini"
          type="success"
          @click="handleUpdate"
        >修改
        </el-button>
        <el-button
          v-hasPermi="['resource:queue:export']"
          :disabled="single"
          icon="el-icon-thumb"
          size="mini"
          type="success"
          @click="handleOpen"
        >设置检查项目
        </el-button>
        <el-button
          :disabled="single"
          icon="el-icon-thumb"
          size="mini"
          type="success"
          @click="handleApply"
        >关联开单科室
        </el-button>
      </el-form-item>
    </el-form>
    <el-dialog v-dialog-drag
               :close-on-click-modal="false"
               :destroy-on-close="true"
               :visible.sync="queueApplyDialog.show"
               class="r-dialog"
               custom-class="dialog"
               title="科室关联设置"
               width="1200px"
    >
      <el-transfer v-model="queueApplyDialog.list"
                   v-loading="queueApplyDialog.loading"
                   :data="queueApplyDialog.dict"
                   :filter-method="filterMethod"
                   :titles="['未选择科室','已选择科室']"
                   filter-placeholder="输入项目名称搜索"
                   filterable
                   target-order="unshift"
      >
        <span slot-scope="{ option }" :title="option.label">{{ option.label }}</span>
      </el-transfer>
      <span slot="footer" class="dialog-footer">
            <el-button v-loading="queueApplyDialog.loading" type="primary" @click="saveRelationData">保 存</el-button>
          </span>
    </el-dialog>
    <div class="body">
      <div class="body-left pageSediment" style="padding: 0 !important;min-height: calc(100vh - 195px);">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="queueList"
          :header-cell-style="headerCellStyle"
          border stripe tooltip-effect="light" @selection-change="handleSelectionChange"
          @row-click="openDetails"
        >
          <el-table-column align="left" label="队列基本信息">
            <el-table-column align="center" type="selection" width="55"/>
            <el-table-column v-if="false" align="center" label="主键" prop="id"/>
            <el-table-column align="left" fixed="left" label="队列编码" min-width="120" prop="queueCode"
                             show-overflow-tooltip
            />
            <el-table-column align="left" fixed="left" label="队列名称" min-width="160" prop="queueName"
                             show-overflow-tooltip
            />
            <el-table-column v-if="false" align="left" label="科室名称" min-width="120" prop="deptName"
                             show-overflow-tooltip
            />
            <el-table-column
              :formatter="tableExamtypeFormat"
              align="center"
              label="检查类型"
              prop="examTypeId"
              width="100"
            />
            <el-table-column
              align="center"
              label="自动预约天数"
              prop="automaticTime"
              width="100"
            />
            <el-table-column
              align="center"
              label="状态"
              prop="isValid"
              width="100"
            >
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isValid" :active-value="1" :inactive-value="0" active-color="#13ce66"
                           @change="validChange(scope.row)"
                />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="标签"
              prop="span"
              width="100"
            />
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :limit.sync="queryParams.pageSize"
          :page.sync="queryParams.pageNum"
          :total="total"
          @pagination="getList"
        />
      </div>
      <div class="body-right">
        <queue-item :ref="'modls'"></queue-item>
      </div>
    </div>
    <template v-if="openItem">
      <el-dialog v-dialogDrag
                 :close-on-click-modal="false"
                 :destroy-on-close="true"
                 :title="'设置检查项目'"
                 :visible.sync="openItem"
                 custom-class="dialog"
      >
        <div style="margin-bottom: 10px">
          <el-button :disabled="rightCheckList.length===0" icon="el-icon-plus" size="small" @click="addBatch">批量添加
          </el-button>
          <el-button :disabled="leftCheckList.length===0" icon="el-icon-minus" size="small" @click="reduceBatch">批量减少
          </el-button>
          <el-button :loading="transferSubmitLoading" size="small" type="primary" @click="submitItem">保 存</el-button>
          <el-button size="small" type="danger" @click="cancel">取 消</el-button>
        </div>
        <div style="display: flex;margin-bottom: 10px">
          <span style="flex: 1;margin-right: 30px;">已设置项目</span>
          <span style="flex: 1;">未设置项目</span>
        </div>
        <div v-loading="transferLoading" class="transfer-body">
          <div class="body-left">
            <div class="operator">
              <el-checkbox v-model="leftCheckAll" :indeterminate="leftIndeterminate"
                           style="width: 66px" @change="handleLeftCheckAllChange"
              >全选
              </el-checkbox>
              <span style="width: 70px">{{ leftCheckList.length + ' / ' + leftList.length }}</span>
              <el-input v-model="leftSearchText" clearable placeholder="输入关键字进行过滤" size="small"
                        style="flex:1;"
              />
            </div>
            <el-tree ref="leftTree" :data="leftList" :filter-node-method="leftFilterNode"
                     class="tree" default-expand-all
                     node-key="id" show-checkbox @check="leftCheck"
            >
            <span slot-scope="{node,data}" @dblclick.stop="dblClick('l',data,node)">
              <span>{{ data.name }}</span>
            </span>
            </el-tree>
          </div>
          <div class="body-right">
            <div class="operator">
              <el-checkbox v-model="rightCheckAll" :indeterminate="rightIndeterminate"
                           style="width: 66px" @change="handleRightCheckAllChange"
              >全选
              </el-checkbox>
              <span style="width: 70px">{{ rightCheckList.length + ' / ' + rightList.length }}</span>
              <el-input v-model="rightSearchText" clearable placeholder="输入关键字进行过滤" size="small"
                        style="flex:1;"
              />
            </div>
            <el-tree ref="rightTree" :data="rightList" :filter-node-method="rightFilterNode"
                     class="tree" default-expand-all
                     node-key="id" show-checkbox @check="rightCheck"
            >
            <span slot-scope="{node,data}" @dblclick.stop="dblClick('r',data,node)">
              <span>{{ data.name }}</span>
            </span>
            </el-tree>
          </div>
        </div>
      </el-dialog>
    </template>

    <!-- 添加或修改检查队列对话框 -->
    <el-dialog v-dialogDrag :title="title" :visible.sync="open" append-to-body width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="组织机构" prop="orgId">
          <el-select v-model="form.orgId" clearable placeholder="请选择机构">
            <el-option
              v-for="item in orgList"
              :key="item.id"
              :label="item.orgName"
              :value="item.orgCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="院区" prop="yardId">
          <el-select v-model="form.yardId" clearable placeholder="请选择院区">
            <el-option
              v-for="item in yardList"
              :key="item.id"
              :label="item.yardName"
              :value="item.yardCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="队列名称" prop="queueName">
          <el-input v-model="form.queueName" placeholder="请输入队列名称"/>
        </el-form-item>
        <el-form-item v-if="false" label="科室" prop="deptId">
          <el-select v-model="form.deptId" clearable filterable placeholder="请选择科室">
            <el-option
              v-for="item in deptList"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="检查类型" prop="examTypeId">
          <el-select
            v-model="form.examTypeId"
            clearable
            placeholder="请选择类型"
          >
            <el-option
              v-for="item in examtypeList"
              :key="item.typeCode"
              :label="item.typeName"
              :value="parseInt(item.typeCode)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="span">
          <el-input v-model="form.span" placeholder="请输入标签名"/>
        </el-form-item>
        <el-form-item label="自动预约天数" prop="automaticTime">
          <el-input v-model="form.automaticTime" placeholder="请输入自动预约天数"/>
        </el-form-item>
        <el-form-item label="位置" prop="locationId">
          <el-select v-model="form.locationId" clearable placeholder="请选择位置" style="width: 300px">
            <el-option
              v-for="item in locationList"
              :key="item.value"
              :label="item.label"
              :value="item.value+''"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listQueue,
  getQueue,
  delQueue,
  addQueue,
  updateQueue,
  exportQueue,
  queryQueueItems,
  addQueueItem, queryApplyDept, addApplyDept
} from '@/api/resource/queue'
import { listOrg } from '@/api/system/org'
import { listYard } from '@/api/basis/yard'
import { listDept } from '@/api/basis/dept'
import { listExamtype } from '@/api/basis/examtype'
import { listInExamItem } from '@/api/basis/inExamItem'
import QueueItem from '@/components/QueueItem/index.vue'
import vPinyin from '@/utils/vue-py'
import { locationDict } from '@/api/basis/locationInfo'
//拼音码转换

export default {
  name: 'Queue',
  components: {
    'queue-item': QueueItem
  },
  data() {
    return {
      queueApplyDialog: {
        show: false,
        loading: false,
        list: [],
        dict: []
      },
      filterText: '',
      openItem: false,
      orgList: [],
      yardList: [],
      deptList: [],
      examtypeList: [],
      examItemList: [],
      itemsData: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 检查队列表格数据
      queueList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 状态字典
      isValidOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        yardId: null,
        queueName: null,
        deptId: null,
        examTypeId: null,
        isValid: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      defaultProps: {
        label: 'inExamItemName'
      },
      defaultCheck: [],
      transferLoading: false,
      transferSubmitLoading: false,
      transferId: null,
      notCheck: [],
      // 自定义穿梭框组件
      leftList: [], // 左侧list
      leftCheckList: [], // 左侧勾选list
      leftSearchText: '',// 左侧搜索框
      leftIndeterminate: false, // 半选状态
      leftCheckAll: false, // 全选状态
      // 右侧状态
      rightList: [], // 左侧list
      rightCheckList: [], // 左侧勾选list
      rightSearchText: '',// 左侧搜索框
      rightIndeterminate: false, // 半选状态
      rightCheckAll: false, // 全选状态
      locationList: []
    }
  },
  watch: {
    leftSearchText(val) {
      this.$refs.leftTree.filter(val)
    },
    rightSearchText(val) {
      this.$refs.rightTree.filter(val)
    }
  },
  created() {
    this.getList()
    this.getDicts('state_type').then((response) => {
      this.isValidOptions = response.data
    })
    locationDict().then(res => {
      this.locationList = res.data.map(item => {
        return {
          value: item.id,
          label: `${item.buildingName}${item.floorNum}楼${item.locationName}`,
          pyCode: `${item.locationPyCode}${item.infoPyCode}`
        }
      })
    })
    this.queryOrgList()
    this.queryYardList()
    this.queryDeptList()
    this.queryExamtypeList()
  },
  methods: {
    saveRelationData() {
      this.queueApplyDialog.loading = true
      addApplyDept({
        id: this.ids[0],
        deptId: this.queueApplyDialog.list.join(',')
      }).then(res => {
        this.queueApplyDialog.loading = false
        this.queueApplyDialog.show = false
      })
    },
    handleApply() {
      const queueId = this.ids[0]
      queryApplyDept(queueId).then(res => {
        this.queueApplyDialog.list = res.data || []
        this.queueApplyDialog.show = true
      })
    },
    // 左边复选框点击事件
    leftCheck(node, tree) {
      this.leftCheckList = tree.checkedNodes
      this.leftIndeterminate = this.leftCheckList.length > 0 && this.leftCheckList.length < this.leftList.length
    },
    handleLeftCheckAllChange(value) {
      if (value) {
        this.leftCheckList = [...this.leftList]
        this.$refs.leftTree.setCheckedNodes(this.leftList)
      } else {
        this.leftCheckList = []
        this.$refs.leftTree.setCheckedNodes([])
      }
      this.leftIndeterminate = false
    },
    // 右边复选框点击事件
    rightCheck(node, tree) {
      this.rightCheckList = tree.checkedNodes
      this.rightIndeterminate = this.rightCheckList.length > 0 && this.rightCheckList.length < this.rightList.length
    },
    handleRightCheckAllChange(value) {
      if (value) {
        this.rightCheckList = [...this.rightList]
        this.$refs.rightTree.setCheckedNodes(this.rightList)
      } else {
        this.rightCheckList = []
        this.$refs.rightTree.setCheckedNodes([])
      }
      this.rightIndeterminate = false
    },
    // 穿梭表格批量减少
    reduceBatch() {
      this.leftCheckAll = false
      this.leftIndeterminate = false
      // 提取变更
      const mergeList = []
      this.leftList.forEach(item => {
        if (this.leftCheckList.findIndex(i => i.id === item.id) === -1) {
          mergeList.push(item)
        }
      })
      this.rightList.unshift(...this.leftCheckList)
      if (this.rightCheckList.length > 0) {
        this.rightIndeterminate = true
      }
      this.leftList = mergeList
      this.leftCheckList = []
    },
    addBatch() {
      this.rightCheckAll = false
      this.rightIndeterminate = false
      // 提取变更
      const mergeList = []
      this.rightList.forEach(item => {
        if (this.rightCheckList.findIndex(i => i.id === item.id) === -1) {
          mergeList.push(item)
        }
      })
      this.leftList.unshift(...this.rightCheckList)
      if (this.leftCheckList.length > 0) {
        this.leftIndeterminate = true
      }
      this.rightList = mergeList
      this.rightCheckList = []
    },
    // 项目双击方法
    dblClick(type, data, node) {
      if (type === 'l') {
        this.rightList.unshift(data)
        let index = this.leftList.findIndex(item => item.id === data.id)
        this.leftList.splice(index, 1)
        if (node.checked) {
          let index = this.leftCheckList.findIndex(item => item.id === data.id)
          this.leftCheckList.splice(index, 1)
        }
        if (this.leftCheckList.length === this.leftList.length && this.leftCheckList.length !== 0) {
          this.leftCheckAll = true
          this.leftIndeterminate = false
        } else if (this.leftCheckList.length === 0) {
          this.leftCheckAll = false
          this.leftIndeterminate = false
        }
        if (this.rightCheckAll) {
          this.rightCheckAll = false
          if (this.rightCheckList.length > 0) {
            this.rightIndeterminate = true
          }
        }
      } else {
        this.leftList.unshift(data)
        let index = this.rightList.findIndex(item => item.id === data.id)
        this.rightList.splice(index, 1)
        if (node.checked) {
          let index = this.rightCheckList.findIndex(item => item.id === data.id)
          this.rightCheckList.splice(index, 1)
        }
        if (this.rightCheckList.length === this.rightList.length && this.rightCheckList.length !== 0) {
          this.rightCheckAll = true
          this.rightIndeterminate = false
        } else if (this.rightCheckList.length === 0) {
          this.rightCheckAll = false
          this.rightIndeterminate = false
        }
        if (this.leftCheckAll) {
          this.leftCheckAll = false
          if (this.leftCheckList.length > 0) {
            this.leftIndeterminate = true
          }
        }
      }
    },
    // 表头行样式
    headerCellStyle(obj) {
      if (obj.rowIndex === 0 && obj.columnIndex === 0) {
        return {
          fontSize: '18px'
        }
      }
    },
    queryOrgList() {
      listOrg({ isValid: 1 }).then((response) => {
        this.orgList = response.rows
      })
    },
    queryYardList() {
      listYard({ isValid: 1 }).then((response) => {
        this.yardList = response.rows
      })
    },
    queryDeptList() {
      /*listDept({ deptType: 3 }).then((response) => {
        this.deptList = response.rows
      })*/
      listDept().then((response) => {
        this.queueApplyDialog.dict = response.rows.map(item => {
          return {
            key: item.deptId,
            label: `【${item.deptId}】${item.deptName}`
          }
        })
      })
    },
    filterMethod(query, item) {
      return item.label.indexOf(query) > -1
    },
    queryExamtypeList() {
      listExamtype().then((response) => {
        this.examtypeList = response.rows
      })
    },
    // 筛选节点
    leftFilterNode(query, item) {
      if (!query) return true
      let arr
      if (query.includes(',')) {
        arr = query.split(',').filter(i => i)
        return arr.some(s => item.name.includes(s))
      } else if (query.includes('，')) {
        arr = query.split('，').filter(i => i)
        return arr.some(s => item.name.includes(s))
      }
      return item.name.includes(query)
    },
    rightFilterNode(query, item) {
      if (!query) return true
      let arr
      if (query.includes(',')) {
        arr = query.split(',').filter(i => i)
        return arr.some(s => item.name.includes(s))
      } else if (query.includes('，')) {
        arr = query.split('，').filter(i => i)
        return arr.some(s => item.name.includes(s))
      }
      return item.name.includes(query)
    },
    /**
     * 打开dialog,合并出已经选择的与未选择的
     * @param row
     * @returns {Promise<void>}
     */
    async handleOpen() {
      const id = this.ids[0]
      const examTypeId = this.queueList.find(item => item.id === id).examTypeId
      this.openItem = true
      this.transferLoading = true

      this.leftList = [], // 左侧list
        this.leftCheckList = [], // 左侧勾选list
        this.leftSearchText = '',// 左侧搜索框
        this.leftIndeterminate = false, // 半选状态
        this.leftCheckAll = false, // 全选状态
        // 右侧状态
        this.rightList = [], // 左侧list
        this.rightCheckList = [], // 左侧勾选list
        this.rightSearchText = '',// 左侧搜索框
        this.rightIndeterminate = false, // 半选状态
        this.rightCheckAll = false, // 全选状态

        setTimeout(() => {
          this.transferLoading = false
        }, 3000)
      const response1 = await listInExamItem({ examTypeId, flag: id + '' })
      const response2 = await queryQueueItems({ queueId: id })
      this.leftList = response2.data.map(item => ({
        id: item.inExamItemId,
        name: `【${item.inExamItemId}】 ${item.inExamItemName}`
      }))
      // 计算未选中的
      response1.rows.forEach(item => {
        if (this.leftList.findIndex(i => i.id === item.id) === -1) {
          this.rightList.push({ id: item.itemCode, name: `【${item.itemCode}】 ${item.inExamItemName}` })
        }
      })
      this.transferLoading = false
    },
    //行点击事件
    openDetails(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
      this.$refs.modls.refshData(row.id)
    },
    submitItem() {
      const id = this.ids[0]
      this.transferSubmitLoading = true
      setTimeout(() => {
        this.transferSubmitLoading = false
      }, 3000)
      let ids = this.leftList.map(item => item.id)
      if (ids.length <= 0) {
        ids[0] = 0
      }
      addQueueItem({ queueId: id, ids }).then((res) => {
        if (res.code === 200) {
          this.openItem = false
          this.defaultCheck = []
          this.examItemList = []
          this.$message.success('保存成功')
        } else {
          this.$message.error(`保存失败:${res.msg}`)
        }
      }).finally(_ => {
        this.transferSubmitLoading = false
      })
    },
    tableExamtypeFormat(row) {
      let name = ''
      this.examtypeList.forEach((item) => {
        if (row.examTypeId == item.typeCode) {
          name = item.typeName
          return false
        }
      })
      return name
    },
    /** 查询检查队列列表 */
    getList() {
      this.loading = true
      listQueue(this.queryParams).then((response) => {
        this.queueList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 状态字典翻译
    isValidFormat(row, column) {
      return this.selectDictLabel(this.isValidOptions, row.isValid)
    },
    // 取消按钮
    cancel() {
      //console.log(this.defaultCheck)
      this.openItem = false
      this.defaultCheck = []
      this.examItemList = []
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        orgId: null,
        yardId: null,
        queueCode: null,
        queueName: null,
        pyCode: null,
        deptId: null,
        examTypeId: null,
        isValid: null,
        createdAt: null,
        span: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加检查队列'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getQueue(id).then((response) => {
        this.form = response.data
        this.form.examTypeId = Number.parseInt(this.form.examTypeId)
        this.open = true
        this.title = '修改检查队列'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          //拼音码自动转换
          if (this.form.queueName != null && this.form.queueName != '') {
            this.form.pyCode = vPinyin.chineseToPinYin(this.form.queueName)
          }
          if (this.form.id != null) {
            updateQueue(this.form).then((response) => {
              this.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addQueue(this.form).then((response) => {
              this.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$confirm(
        '是否确认删除检查队列编号为"' + ids + '"的数据项?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(function() {
          return delQueue(ids)
        })
        .then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        })
    },
    validChange(row) {
      //console.log(row)
      updateQueue(row).then((response) => {
        this.msgSuccess('修改成功')
        this.open = false
        this.getList()
      })
    },
    // 停诊
    handleStop(row) {
      this.$confirm(
        '是否确认停诊队列 ' + row.queueName + ' ?',
        '队列停诊',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(_ => {
        updateQueue({
          id: row.id,
          isValid: 2
        }).then(({ code }) => {
          if (code === 200) {
            this.getList()
            this.msgSuccess('停诊成功')
          } else {
            this.msgSuccess('停诊失败')
          }
        })
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有检查队列数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function() {
          return exportQueue(queryParams)
        })
        .then((response) => {
          this.download(response.msg)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  display: flex;

  .body-left {
    flex: 1;
  }

  .body-right {
    margin-left: 10px;
    width: 450px;
  }
}

.app-container {

  ::v-deep .el-dialog__body {
    padding: 10px 20px;
  }
}

.transfer-body {
  display: flex;

  .body-left {
    flex: 1;
    height: 500px;
    margin-right: 30px;
    border: 1px #dfe6ec solid;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;

    .tree {
      flex: 1;
      overflow-y: scroll;
      overflow-x: scroll;
    }

    .operator {
      display: flex;
      align-items: center;
      padding: 0 16px;
      height: 50px;
    }
  }

  .body-right {
    flex: 1;
    height: 500px;
    border: 1px #dfe6ec solid;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;

    .tree {
      flex: 1;
      overflow-y: scroll;
      overflow-x: scroll;
    }

    .operator {
      display: flex;
      align-items: center;
      padding: 0 16px;
      height: 50px;
    }
  }
}

.scroool {
  height: 500px;
  //overflow: auto;
  //display: flex;
  //flex-direction: row;
  //justify-content: space-between;
  ::v-deep .el-tree {
    height: 480px;
    overflow: auto;
  }
}

.doublebox_right {
  height: 500px;
}

.title_box_right {
  height: 45px;
  background: #dbdee5;
  margin-bottom: 15px;
  color: #310f1b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  font-size: 17px;
  font-weight: normal;
}

.title_box_left {
  height: 45px;
  background: #dbdee5;
  margin-bottom: 15px;
  color: #310f1b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  font-size: 17px;
  font-weight: normal;
}

.title_box_left {
  line-height: 45px;
  padding-left: 15px;
}

.title_box_right {
  line-height: 45px;
  padding-left: 15px;
}

#fatherBox_left {
  height: 450px;
  border: 1px solid #c0c0c0;
  margin-right: 10px;
}

.right_liner {
  border: 0.3px solid #c0c0c0;
  background: #f7f7f8;
  display: flex;
  flex-direction: row;
  line-height: 45px;
}

.text_box_left {
  width: 30px;
  height: 45px;
  line-height: 45px;
  border-right: 1px solid #c0c0c0;
}

.text_box_right {
  width: 10px;
  height: 45px;
  line-height: 45px;
  margin-left: 310px;
  border-left: 1px solid #c0c0c0;
}

.spanbox {
  margin-left: 20px;
}

.box_right_childen {
  height: 400px;
  overflow: auto;
}

#fatherBox_left {
  border: 1px solid #c0c0c0;
}

#fatherBox_right {
  position: absolute;
  width: 399px;
  height: 440px;
}

.pub_dialog {
  top: -10%;
  height: 100%;

}

.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 100%;
  left: 100%;
  transform: translate(-50%, -50%);
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

.tree-item {

}

.pub_dialog {
  ::v-deep .el-dialog__body {
    padding-top: 5px;
    padding-left: 15px;
  }

  ::v-deep .el-dialog__header {
    padding-left: 40px;
  }
}

.transfer {
  ::v-deep .el-transfer-panel {
    width: 390px;
  }

  ::v-deep .el-transfer-panel__list {
    display: flex;
    flex-direction: column;
    height: 400px;
  }

  ::v-deep .el-transfer-panel__body {
    height: 447px;
  }
}

.r-dialog {
  ::v-deep .el-transfer-panel {
    width: 510px;
  }

  ::v-deep .el-transfer-panel__list {
    height: 350px;
  }

  ::v-deep .el-transfer-panel__body {
    height: 400px;
  }
}
</style>
