<template>
  <page-layer>
    <template #main>
      <div id="deptTransfer">
        <el-transfer
            filterable
            :titles="['选择科室', '当前科室']"
            :filter-method="filterMethod"
            filter-placeholder="请输入科室拼音"
            v-model="chosenDepts"
            :render-content="renderFunc"
            :props="{ key: 'code', label: 'name' }"
            :data="allDepts"
        >
          <template #right-footer>
            <el-button type="primary" plain @click="saveChanges">保存</el-button>
          </template>
        </el-transfer>
      </div>
    </template>
  </page-layer>
</template>

<script>
import { ref } from '@vue/reactivity'
import { onActivated } from 'vue'
import { getAllMzDept, getChosenDeptsForSetting, saveChosenDept } from '@/api/triage/triage'
import { ElMessage } from 'element-plus'
import PageLayer from "@/layout/PageLayer";
export default {
  components: {PageLayer},
  setup() {
    const allDepts = ref([])
    const chosenDepts = ref([])

    const fetchNeedDepts = () => {
      getAllMzDept().then((res) => {
        allDepts.value = res
        getChosenDeptsForSetting().then((res2) => {
          chosenDepts.value = res2
        })
      })
    }

    const renderFunc = (h, option) => {
      return h('span', null, option.code, ' - ', option.pyCode, ' - ', option.name)
    }
    const filterMethod = (query, item) => {
      return item.pyCode.indexOf(query.toUpperCase()) > -1
    }

    const saveChanges = () => {
      saveChosenDept(chosenDepts.value).then((res) => {
        ElMessage({
          message: res,
          type: 'success',
          duration: 2000,
          showClose: true,
        })
      })
    }

    onActivated(() => {
      fetchNeedDepts()
    })

    return {
      allDepts,
      chosenDepts,
      filterMethod,
      saveChanges,
      renderFunc,
    }
  },
}
</script>

<style>
#deptTransfer {
  padding: 15px 30px;
}

#deptTransfer .el-transfer-panel {
  width: 30vw;
  height: 85vh;
}

#deptTransfer .el-transfer-panel {
  width: 30vw;
  height: 85vh;
}

#deptTransfer .el-transfer-panel__body,
#deptTransfer .el-transfer-panel__list.is-filterable {
  height: 85%;
}

#deptTransfer .el-transfer-panel .el-transfer-panel__footer {
  padding: 0 15px;
}

#deptTransfer .el-transfer-panel__list label {
  display: block;
}
</style>
