<template>
  <div>
    <el-input v-model="value.agentname" readonly placeholder="选择经销商" suffix-icon="el-icon-arrow-down" autocomplete="off" @focus="dialogTableVisible = true"></el-input>
    <el-dialog title="选择人员" append-to-body :visible.sync="dialogTableVisible" width="80%">
      <div class="flex">
        <!-- 营销区域列表 -->
        <areaTree ref="arealist" style="width:200px" @onClick="onClick">
        </areaTree>
        <div class="main" style="flex:1 0 auto;">
          <agent ref="agent">
            <template v-slot:detail="scope">
              <div class="inline-16">
                <el-button  type="text" size="mini" @click="selectAgent(scope.data)">选 择</el-button>
              </div>
            </template>
          </agent>
        </div>
      </div>
    </el-dialog>
  </div>
  
</template>

<script>
import areaTree from './area/list.vue'

import agent from './agent/list.vue'
export default {
  components:{
    areaTree,
    agent
  },
  data () {
    return {
      dialogTableVisible:false,
      areaInfo:{},
      value:{
        agentname:'',
        parentid:''
      }
    }
  },
  methods:{
    onClick (data) {
      this.areaInfo = data
      this.$refs.agent.query_agent(this.areaInfo.sa_saleareaid)
    },
    onSuccess () {
      this.$refs.arealist.query_arealist()
    },
    selectAgent (data) {
      this.value = data
      this.$emit('selectAgent',data)
      this.dialogTableVisible = false
    },
    onSalerSuccess () {
      this.$refs.saler.query_saler(this.areaInfo.sa_saleareaid)
    }
  }
}

</script>
<style>
</style>
<style scoped>
.flex{
  display: flex;
}
</style>