<template>
  <div class="flex">
    <!-- 营销区域列表 -->
    <areaTree ref="arealist" style="width:180px;flex:0 1 auto" @onClick="onClick">
      <template v-slot:operation="data">
        <!-- 新增区域 -->
      <addArea v-if="tool.checkAuth($route.name,'insert')" class="inline-16" :data="data.data" @onSuccess="onSuccess"></addArea>
      </template>
    </areaTree>
    <div class="hm-info-panel">
      <div class="container normal-panel normal-margin sticky">
        <!-- 编辑区域 -->
        <editArea v-if="tool.checkAuth($route.name,'update')" class="inline-16" :data="areaInfo" @editSuccess="editSuccess"></editArea>
         <!-- 删除区域 -->
        <delArea  v-if="tool.checkAuth($route.name,'delete')" class="inline-16" :data="areaInfo" @onSuccess="onSuccess"></delArea>
        <!-- 停用启用区域 -->
        <startArea v-if="tool.checkAuth($route.name,'update')" class="inline-16" :data="areaInfo" @onStartArea="onStartArea"></startArea>
      </div>
      <!-- 滚动区域 -->
      <div>
        <!-- 营销区域信息 -->
        <areaInfo :areaInfo="areaInfo" class="normal-margin"></areaInfo>
        <div class="my-tabs" >
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="业务员信息" name="first"></el-tab-pane>
            <el-tab-pane label="经销商信息" name="second"></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 业务员信息 -->
        <saler v-show="activeName === 'first'" ref="saler" :data="areaInfo">
          <!-- 新建业务员 -->
          <el-button v-if="tool.checkAuth($route.name,'saler_insert')" slot="add" size="small" type="primary" icon="el-icon-plus" @click="$router.push({path:'/add_saler',query:{id:areaInfo.sa_saleareaid,name:areaInfo.label}})">新 建</el-button>
          <template v-slot:detail="scope">
            <el-button style="margin-right:10px" type="text" size="small" @click="$router.push({path:'/saler_detail',query:{id:scope.data.sa_salearea_hrid}})">详 情</el-button>
          </template>
          <!-- 删除业务员 -->
          <template v-slot:del="scope">
            <delSaler v-if="tool.checkAuth($route.name,'saler_delete')" :data="scope.data" @onSuccess="onSalerSuccess"></delSaler>
          </template>
        </saler>
        <!-- 经销商信息 -->
        <agent v-show="activeName === 'second'" ref="agent">
          <!-- 新建经销商 -->
          <el-button v-if="tool.checkAuth($route.name,'agent_insert')" type="primary" size="small" slot="add" icon="el-icon-plus" @click="$router.push({path:'/add_agent',query:{area:areaInfo.label,id:areaInfo.sa_saleareaid}})">新 建</el-button>
          <!-- 经销商详情 -->
          <template v-slot:detail="scope">
            <el-button type="text" size="small" @click="$router.push({path:'/agent_detail',query:{id:scope.data.sa_agentsid}})">详 情</el-button>
          </template>
          <!-- 编辑经销商 -->
          <template v-slot:edit="scope">
            <el-button v-if="tool.checkAuth($route.name,'agent_update')" type="text" size="small" @click="$router.push({path:'/edit_agent',query:{id:scope.data.sa_agentsid}})">编 辑</el-button>
          </template>
          <!-- 启用停用经销商 -->
          <template v-slot:start="scope">
            <startAgent v-if="tool.checkAuth($route.name,'agent_update')" type="text" :data="scope.data" icon="none" @onSuccess="onAgentSuccess"></startAgent>
          </template>
          <!-- 删除经销商 -->
          <!-- <template v-slot:del="scope">
            <delAgent :data="scope.data" type="text" @onAgentSuccess="onAgentSuccess"></delAgent>
          </template> -->
        </agent>
      </div>
    </div>
  </div>
</template>

<script>
import areaTree from './area/list.vue'
import addArea from './area/modules/add_area.vue'
import editArea from './area/modules/edit_area.vue'
import startArea from './area/modules/start_area.vue'
import delArea from './area/modules/del_area.vue'
import areaInfo from './area/modules/area_info.vue'

import saler from './saler/list.vue'
import delSaler from './saler/modules/del_saler.vue'

import agent from './agent/list.vue'
import delAgent from './agent/modules/del_agent.vue'
import startAgent from './agent/modules/start_agent.vue'

export default {
  components:{
    areaTree,
    addArea,
    areaInfo,
    editArea,
    delArea,
    startArea,
    saler,
    delSaler,
    agent,
    delAgent,
    startAgent
  },
  data () {
    return {
      areaInfo:{},
      activeName:'first'
    }
  },
  methods:{
    onClick (data) {
      this.areaInfo = data
      this.$refs.saler.query_saler(this.areaInfo.sa_saleareaid)
      this.$refs.agent.query_agent(this.areaInfo.sa_saleareaid)
    },
    onSuccess () {
      this.$refs.arealist.query_arealist()
    },
    editSuccess (form) {
      this.$refs.arealist.query_arealist(()=>{
        this.areaInfo = form
        this.$emit('onClick',this.areaInfo)
        this.$refs['arealist'].setCurrentKey(this.areaInfo.sa_saleareaid)
      })
    },
    onStartArea (status) {
      status === 1?this.areaInfo.isused = 0:this.areaInfo.isused = 1
    },
    onSalerSuccess () {
      this.$refs.saler.query_saler(this.areaInfo.sa_saleareaid)
    },
    onAgentSuccess () {
      this.$refs.agent.query_agent(this.areaInfo.sa_saleareaid)
    },
  }
}

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