<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :okText="$locale('m.common.button.ok')"
    :cancelText="$locale('m.common.button.close')"
  >

    <a-row :gutter="10" style="background-color: #ececec; padding: 10px; margin: -10px">
      <a-col :span="12">
        <a-card :bordered="false" style="height: calc(100vh - 235px);overflow-y:auto;">
          <sys-org-tree v-model="rows" :multi="multi" :checkable="true" :currentOrgAsRoot="currentOrgAsRoot" :filterAuth="filterAuth" :checkableLinkage="checkableLinkage" :onlyCheckDept="onlyCheckDept" :orgTreeShowDeptAbbr="orgTreeShowDeptAbbr" :deptId="deptId" :checkBySelect="true" :customOrgOrderSql="customOrgOrderSql" :customOrgFilterSql="customOrgFilterSql"/>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card :bordered="false" style="height: calc(100vh - 235px);overflow-y:auto;">
          <ych-selected-depart-area v-model="rows" :orgTreeShowDeptAbbr="orgTreeShowDeptAbbr"/>
        </a-card>
      </a-col>
    </a-row>

  </ych-modal>
</template>

<script>

  import YchSelectedDepartArea from './YchSelectedDepartArea'
  import SysOrgTree from './SysOrgTree'
  import LocleUtil from "../../../utils/LocleUtil";

  export default {
    name: 'YchSelectDepartDialog',
    components: {
      YchSelectedDepartArea,
      SysOrgTree
    },
    props: {
      multi: {
        type: Boolean,
        default: false
      },
      currentOrgAsRoot:{
        type:Boolean,
        default:false
      },
      filterAuth:{
        type:Boolean,
        default:false
      },
      checkableLinkage:{
        type:Boolean,
        default:false
      },
      onlyCheckDept:{
        type:Boolean,
        default:false
      },
      orgTreeShowDeptAbbr:{
        type:Boolean,
        default:false
      },
      deptId: String, // 指定了根节点
      customOrgOrderSql: String, // 自定义组织树排序Sql
      customOrgFilterSql: String, // 自定义组织树过滤Sql
    },
    data() {
      return {
        title: LocleUtil.getLocale('m.components.title.ychSelectDepart'),
        visible: false,
        rows: []
      }
    },
    methods: {
      $locale(params) {
        return LocleUtil.getLocale(params)
      },
      show(rows) {
        this.rows = rows || []
        this.visible = true
      },
      handleOk() {
        this.$emit('ok', this.rows)
        this.handleCancel()
      },
      handleCancel() {
        this.visible = false
      }
    }
  }
</script>
