
<template>
    <div>
      <basicLayout 
        ref="basicLayout" 
        tableName="saleForecastCountTable" 
        idName="userid" 
        :apiId="{query:20221209163203}"
        :options="options"
        @listData="list">
        <div slot="custom">
          <div class="inline-24">
            <label class="search__label ">时间:</label>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="dateChange"
              size="small">
            </el-date-picker>
          </div>
          <div class="inline-24">
            <label class="search__label ">部门:</label>
            <el-cascader
              size="small"
              :options="depOptions"
              :props="{ checkStrictly: true,children:'subdep',label:'depname',value:'departmentid' }"
              @change="onCascaderChange"
              :show-all-levels="false"
              clearable>
            </el-cascader>
          </div>
          <div class="inline-24">
            <label class="search__label ">人员:</label>
            <el-select v-model="userid" placeholder="请选择" @change="onSelectChange" size="small" clearable>
              <el-option
                v-for="item in hrList"
                :key="item.userid"
                :label="item.name"
                :value="item.userid">
              </el-option>
            </el-select>
          </div>
        </div>
        <div slot="footerLeft" style="font-size:14px">
          总金额:<span style="color:red">{{allCount}}</span>
        </div>
        <template v-slot:tbList="scope">
          <div>
            {{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]]:'--'}}
          </div>
        </template>
        <template v-slot:tbOpreation="scope">
        </template>
      </basicLayout>
    </div>
  </template>
  
  <script>
import { log } from '@antv/g2plot/lib/utils'
  /**
   * @basicLayout 提供this.$ref['basicLayout'].listData()方法查询列表信息
   * @param {string} formPath 新建,编辑组件所在文件夹名称,以后所有列表新增修改文件统一放入Form文件夹下面,并创建与开发应用相同的名称的子文件夹
   * @param {string} tableName 开发端配置的表格名称
   * @param {String} idName 数据主id名称
   * @param {object} apiId:{query:查询的接口id,del:删除的接口id} 
   * @param {Array} options:{label:描述,value:值} 
   */
  export default {
    data () {
      return {
        options:[],
        value1:[],
        depOptions:[],
        actDep:null,
        hrList:[],
        userid:'',
        allCount:''
      }
    },
    methods:{
      list(Data) {
        this.allCount = Data[0].sumoutamount
      },
      dateChange (val) {
        if (val) {
          this.$refs.basicLayout.param.content.where.begdate = val[0]
          this.$refs.basicLayout.param.content.where.enddate = val[1]
        } else {
          this.$refs.basicLayout.param.content.where.begdate = ''
          this.$refs.basicLayout.param.content.where.enddate = ''
        }
       
        this.$refs.basicLayout.listData()
      },
      async querydepartment () {
        const res = await this.$api.requested({
          "classname": "webmanage.department.department",
          "method": "querydepartment",
          "content": {
            "pageSize":100
          }
        })
        this.depOptions = res.data
      },
      async query_hrList () {
        const res = await this.$api.requested({
          "id":20221102090303,
          "content": {
            "pageNumber": 1,
            "pageSize": 100,
            "departmentids":this.actDep?[this.actDep]:[],
            "containssub":1,
            "where": {
              "condition": ""
            }
          }
        })
        this.hrList = res.data
      },
      onCascaderChange (val) {
        this.actDep = val[val.length - 1]
        this.$refs.basicLayout.param.content.where.departmentid = this.actDep
        this.$refs.basicLayout.listData()
        this.query_hrList(this.userid = '')
      },
      onSelectChange (val) {
        this.$refs.basicLayout.param.content.where.userid = val
        this.$refs.basicLayout.listData()
      }
    },
    mounted () {
      this.querydepartment()
      this.query_hrList()
    }
  }
  
  </script>
  <style>
  </style>
  <style scoped>
  .inline-24{
    display: inline;
    margin-right: 24;
  }
  </style>