<template>
  <div class="container normal-panel normal-margin" style="line-height:32px">
    <div v-if="$slots.title">
      <slot name="title"></slot>
    </div>
    <p  v-else class="normal-title normal-margin">发布范围</p>
    <el-row :gutter="20">
      <el-col :span="12">
        <div>
          <div class="normal-margin" style="height:32px;line-height:32px">
          </div>
          <div class="panel">
            <div class="tab flex-align-center">
              <p :class="activeName === '组织架构'?'tab-act':''" @click="tabChange('组织架构')">组织架构</p>
              <p :class="activeName === '营销组织'?'tab-act':''" @click="tabChange('营销组织')">营销组织</p>
            </div>
            <div>
              <deplist ref="dep" v-show="activeName === '组织架构'" :checked="true" :dep_default="defaultData.departmentid" @onChecked="onChecked"></deplist>
              <arealist ref="area" v-show="activeName === '营销组织'" :checked="true" :area_default="defaultData.sa_saleareaid" @onAreaChecked="onAreaChecked" ></arealist>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12" v-show="activeName === '组织架构'">
        <div>
          <div class="flex-align-center flex-between normal-margin">
            <el-checkbox :disabled="isonlyread" v-model="allcheck_m" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全 选</el-checkbox>
            <el-checkbox :disabled="isonlyread" v-model="allcheck1" @change="handleCheckedChange">仅组织负责人可见</el-checkbox>
          </div>
          <div class="panel">
            <div class="tab flex-align-center">
              <p>人员信息</p>
            </div>
            <div class="container">
              <el-input size="small" v-model="searchValue" class="normal-margin" placeholder="搜索人员" clearable></el-input>
              <div :style="{ height: scrollHeight?scrollHeight:'400px'}"  style="overflow-y:scroll">
                <el-checkbox-group :disabled="isonlyread" v-model="checkedMenbers" @change="handleCheckedChange">
                  <div v-for="item in menberData" :key="item.index">
                    <el-checkbox v-if="searchValue" v-show="item.name === searchValue" :label="item.hrid">{{item.name}}</el-checkbox>
                    <el-checkbox v-else :label="item.hrid">{{item.name}}</el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12" v-show="activeName === '营销组织'">
        <div>
          <div class="flex-align-center flex-between normal-margin">
            <el-checkbox :disabled="isonlyread" v-model="allcheck_a" :indeterminate="isIndeterminate2" @change="handleCheckAllChange">全 选</el-checkbox>
            <el-checkbox :disabled="isonlyread" v-model="allcheck2" @change="handleCheckedChange">仅经销商主账号可见</el-checkbox>
          </div>
          <div class="panel">
            <div class="tab flex-align-center">
              <p>经销商信息</p>
            </div>
            <div class="container">
              <el-input size="small" v-model="searchValue" class="normal-margin" placeholder="搜索人员" clearable></el-input>
              <div :style="{ height: scrollHeight?scrollHeight:'400px'}"  style="overflow-y:scroll">
                <el-checkbox-group :disabled="isonlyread" v-model="checkedAgents" @change="handleCheckedChange">
                  <div v-for="item in agentData" :key="item.index">
                    <el-checkbox v-if="searchValue" v-show="item.agentname === searchValue" :label="item.sa_agentsid">{{item.agentname}}</el-checkbox>
                    <el-checkbox v-else :label="item.sa_agentsid">{{item.agentname}}</el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import deplist from '@/components/selectMenber/modules/dep_list.vue'
import arealist from '@/components/selectAgent/area/list.vue'

export default {
  props:['defaultData','onlyread','appidname','dataid','scrollHeight'],
  components:{
    deplist,
    arealist
  },
  data () {
    return {
      activeName:'组织架构',
      allcheck1:false,
      allcheck2:false,
      allcheck_m:false,
      allcheck_a:false,
      isIndeterminate:true,
      isIndeterminate2:true,
      isonlyread:false,
      menberData:[],
      checkedMenbers:[],
      checkedAgents:[],
      depChecked:[],
      areaChecked:[],
      agentData:[],
      searchValue:null,
    }
  },
  methods:{
    tabChange (val) {
      this.activeName = val
    },
    // 设置授权信息
    async query_auth () {
      this.checkedMenbers = this.defaultData.hrid
      this.checkedAgents = this.defaultData.sa_agentsid
      this.allcheck1 = this.defaultData.isonlymanager_dept
      this.allcheck2 = this.defaultData.isonlymanager_agent
      // 数据通知
      this.handleCheckedChange()
    },
    // 根据组织架构范围查询人员
    async menberList (val) {
      let param = {
        "classname": "webmanage.hr.hr",
        "method": "query_hrList",
        "content": {
            "nocahe":true,
            "pageNumber": 1,
            "pageSize": 10000,
            "departmentids":val,
            "containssub":0,
            "where": {
              "condition": ""
            }
        }
      }
      const res = await this.$api.requested(param)
      this.menberData = res.data
    },
    // 根据营销区域范围查询经销商
    async agentList (val) {
      let param = {
        "classname": "webmanage.sale.salearea.salearea",
        "method": "query_agent",
        "content": {
            "pageNumber": 1,
            "pageSize": 10000,
            "sa_saleareaids":val,
            "containssub":0,
            "where": {
              "condition": ""
            }
        }
      }
      const res = await this.$api.requested(param)
      this.agentData = res.data
    },
    // 选中的组织架构数据
    onChecked (val) {
      this.depChecked = val
      this.menberList(val)
      this.handleCheckedChange()
    },
    // 选中的营销区域数据
    onAreaChecked (val) {
      this.areaChecked = val
      this.agentList(val)
      this.handleCheckedChange()
    },
    handleCheckAllChange(val) {
      if (this.activeName === '组织架构') {
        let arr = this.menberData.map(e=>{
          return e.hrid
        })
        this.checkedMenbers = val ? arr : [];
        this.isIndeterminate = false;
        this.handleCheckedChange()
      } else {
        let arr = this.agentData.map(e=>{
          return e.sa_agentsid
        })
        this.checkedAgents = val ? arr : [];
        this.isIndeterminate2 = false;
        this.handleCheckedChange()
      }
    },
    handleCheckedChange (){
      let param = {
        "isonlymanager_dept":this.allcheck1,
        "isonlymanager_agent":this.allcheck2,
        "departmentid":this.depChecked,
        "hrid":this.checkedMenbers,
        "sa_saleareaid":this.areaChecked,
        "sa_agentsid":this.checkedAgents
      }
      param[this.appidname] = this.dataid
      this.$emit('onChecked',param)
    },
  },
  mounted () {
    this.isonlyread = JSON.parse(sessionStorage.getItem('pageOnlyRead'))
  },
  watch:{
    defaultData () {
      console.log('授权信息变化')
      this.query_auth()
    }
  }
}

</script>
<style>
.panel .el-checkbox__input.is-checked+.el-checkbox__label{
  color:#777 !important;
}
</style>
<style scoped>
.panel{
  border:1px solid #CCCCCC;
  border-radius: 4px;
}
.tab p{
  flex:1;
  height: 39px;
  line-height: 39px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  color:#999;
  border-bottom: 2px solid #eeeeee;
  cursor:pointer;
}
.tab-act{
  color:#3874F6 !important;
  border-bottom: 2px solid #3874F6 !important;
}
</style>