<template>
  <div class="flex">
    <!-- 营销区域列表 -->
    <areaTree ref="arealist" style="width:250px;flex:0 1 auto" @onClick="onClick">
      <template v-slot:operation="data">
        <!-- 新增区域 -->
        <addArea v-if="tool.checkAuth($route.name,'addDep')" class="inline-16" :data="data.data" @onSuccess="onSuccess"></addArea>
        <el-dropdown>
          <span class="el-dropdown-link"><i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <editArea v-if="tool.checkAuth($route.name,'editDep')" class="inline-16" :data="data.data" @onSuccess="onSuccess"></editArea>
            </el-dropdown-item>
            <el-dropdown-item>
              <delArea  v-if="tool.checkAuth($route.name,'delDep')" class="inline-16" :data="data.data" @onSuccess="onSuccess"></delArea>
            </el-dropdown-item>
            <el-dropdown-item >
              <startArea v-if="tool.checkAuth($route.name,'editDep')" class="inline-16" :data="data.data" @onSuccess="onSuccess"></startArea>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </areaTree>
    <div class="hm-info-panel">
      <basicLayout 
        ref="basicLayout" 
        :oldFormPath="{
          add:'HManagement/department/staff/list/modules'
        }"
        tableName="staffTable" 
        idName="hrid"
        :detailPath="{path:'/depManage/staffDetail',param:{depid:areaInfo.departmentid}}"
        :apiId="{query:20221102090303,del:20221102090403}"
        :autoQuery="false"
        :options="options">
        <div slot="custom"></div>
        <template v-slot:tbList="scope">
          <div>
            <div v-if="scope.data.column.columnname === 'phonenumber'">
              <span>{{scope.data.column.data.accountno !== '' ? scope.data.column.data.userphonenumber : scope.data.column.data.phonenumber}}</span>
            </div>
            <p v-else-if="scope.data.column.columnname === 'province'">
              {{`${scope.data.column.data.province}-${scope.data.column.data.city}-${scope.data.column.data.county}`}}
            </p>
            <p v-else>{{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]]:'--'}}</p>
          </div>
        </template>
      </basicLayout>
    </div>
  </div>
</template>

<script>
import areaTree from './modules/dep_list'
import addArea from './modules/add_dep'
import editArea from './modules/edit_dep'
import startArea from './modules/start_dep'
import delArea from './modules/del_dep'

export default {
  components:{
    areaTree,
    addArea,
    editArea,
    delArea,
    startArea,
  },
  data () {
    return {
      options:[],
      areaInfo:{}
    }
  },
  methods:{
    onClick (data) {
      this.areaInfo = data
      this.$refs['basicLayout'].param.content.departmentids = [data.departmentid]
      this.$refs['basicLayout'].param.content.containssub = 1
      this.$refs['basicLayout'].listData()
      this.$store.dispatch('sendDataToForm',data)
    },
    onSuccess () {
      this.$refs.arealist.department(()=>{
        this.$refs.arealist.setCurrentKey(this.areaInfo.departmentid)
      })
    }
  }
}

</script>
<style>
</style>
<style scoped>
.flex{
  display: flex;
}
.hm-info-panel{
  flex:1;
  width:500px;
  height:calc(100vh - 100px);
  overflow-y:scroll
}
</style>