<template>
  <div class="dataStatisticsContainer">
    <!-- <div class="pb16 bb1 mb16 f20" style="color:#ff4400">团队数据</div> -->
    <a-breadcrumb class="newBreadcrumb mt0 mb16">
      <a-breadcrumb-item href>
        <router-link :to="{name:'merchantBack'}">
          <a-icon type="home" />
        </router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>团队数据</a-breadcrumb-item>
    </a-breadcrumb>
    <div class="bodyContainer contentbody">
      <div class="leftContainer pb24">
        <div class="searchbox pb12 ml12 mr12">
          <div class="searchinput">
            <a-input-search placeholder="搜索成员" v-model.trim="contentListSearchForm.keys" allowClear @search="onDataSearch" @keyup.enter="onDataSearch" @input="resetsearch">
              <!-- <a-icon slot="prefix" type="search" class="cccc" />
              <a-button slot="enterButton" class="cblue">搜索</a-button>-->
            </a-input-search>
          </div>
          <!-- <i class="iconfont icon-fangda ml12 c6 curp" @click="[addGroupShow = true,isEdit = false]" style="line-height:32px"></i> -->
        </div>

        <a-radio-group v-model="menuType" class="pl12 pr12 tac" style="width:100%" :style="{ marginBottom: '8px' }">
          <a-radio-button value="role" class="changeGroup" style="width:50%">个人排序</a-radio-button>
          <a-radio-button value="group" class="changeGroup" style="width:50%">团队排序</a-radio-button>
        </a-radio-group>
        <div v-if="menuType == 'role'">
          <a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
            <a-menu-item key="all" class="fsa showdot bb_after fw500" @click="selectGroup('all')">
              全部成员
              <span>{{totalDataList.length}}</span>
            </a-menu-item>
          </a-menu>
          <!-- <div class="bb1 ml12 mr12 mt4 mb8" style="wdith:calc(100% - 24px)"></div> -->
          <!-- <div class="f12 c9 ml24 mb8">默认角色（11人）</div> -->
          <a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
            <template v-for="(item, index) in groupDataList">
              <a-menu-item :key="item.agencyTeamName" class="fsa showdot" @click="selectGroup(item)">
                <span>{{item.agencyTeamName}}</span>
                <i class="the_num" @click.stop>{{item.users.length}}</i>
              </a-menu-item>
            </template>
          </a-menu>
        </div>
        <div v-else>
          <a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
            <a-menu-item key="all" class="fsa showdot bb_after fw500" @click="selectGroup('all')">
              全部部门
              <span>{{totalDataList.length}}</span>
            </a-menu-item>
          </a-menu>
          <!-- <a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
            <a-menu-item key="all" class="fsa showdot bb_after" @click="selectGroup('all')">全部角色</a-menu-item>
          </a-menu>
          <div class="bb1 ml12 mr12 mt4 mb8" style="wdith:calc(100% - 24px)"></div>
          <a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
            <template v-for="(item, index) in groupList">
              <a-menu-item :key="item.teamName" class="fsa showdot" @click="selectGroup(item)">
                {{item.teamName}}
              </a-menu-item>
            </template>
          </a-menu>-->
        </div>
      </div>
      <div class="rightContainer mb24">
        <div class="navTitle">
          <div class="dateSelect fsa">
            <div class="fsa">
              <a-range-picker style="width:274px" @change="dateChange" class />
              <div class="ml16">
                <a-checkable-tag class="f14" v-model="checked6" @change="handleChange(6, checked6)">今日</a-checkable-tag>
                <a-checkable-tag class="f14" v-model="checked7" @change="handleChange(7, checked7)">昨日</a-checkable-tag>
                <a-checkable-tag class="f14" v-model="checked2" @change="handleChange(2, checked2)">本周</a-checkable-tag>
                <a-checkable-tag class="f14" v-model="checked3" @change="handleChange(3, checked3)">上周</a-checkable-tag>
                <a-checkable-tag class="f14" v-model="checked0" @change="handleChange(0, checked0)">近7日</a-checkable-tag>
                <a-checkable-tag class="f14" v-model="checked1" @change="handleChange(1, checked1)">近30日</a-checkable-tag>
                <a-checkable-tag class="f14" v-model="checked4" @change="handleChange(4, checked4)">本月</a-checkable-tag>
                <a-checkable-tag class="f14" v-model="checked5" @change="handleChange(5, checked5)">上月</a-checkable-tag>
              </div>
            </div>
            <a-select :disabled="true" style="width: 124px" @change="handleChange">
              <div slot="placeholder" class="c9">渠道运营</div>
              <a-select-option value="jack">Jack</a-select-option>
              <a-select-option value="lucy">Lucy</a-select-option>
              <a-select-option value="Yiminghe">yiminghe</a-select-option>
            </a-select>
            <!-- <div class="pagechange">
          <button @click="changepage(-1)">上一页</button>
          <button @click="changepage(1)">下一页</button>
            </div>-->
          </div>
          <div class="total">
            <!-- <div class="fsa">
          <div style="width:50px"></div>
          <div style="width:100px">总计</div>
            </div>-->
            <!-- <div class="fsa"> -->
            <div>
              <span class="fwb">{{totalObj.signUps}}</span>
              <div>报名</div>
            </div>
            <div>
              <span class="fwb">{{totalObj.arrived}}</span>
              <div>到面</div>
            </div>
            <div>
              <span class="fwb">{{totalObj.passed}}</span>
              <div>通过</div>
            </div>
            <div>
              <span class="fwb">{{totalObj.entry}}</span>
              <div>入职</div>
            </div>
            <div class="table_left">
              <span class="fwb">{{totalObj.obJob}}</span>
              <div>在职人数</div>
            </div>
            <div class="table_left">
              <span class="fwb">{{toFixed(totalObj.entryGPA)}}</span>
              <div>入职绩点</div>
            </div>
            <div>
              <span class="fwb">{{toFixed(totalObj.finshedGPA)}}</span>
              <div>交付绩点</div>
            </div>
            <!-- </div> -->
          </div>
        </div>
        <div class="content">
          <!-- :expanded-row-keys.sync="expandedRowKeys" childrenColumnName="users" -->
          <!-- :scroll="{ y: tableHeight }" -->
          <a-table :columns="columns" :scroll="{x:currWidth}" class="dataTable" :data-source="dataList" :pagination="false" @change="onChange" :loading="{ spinning: isspinning, tip: '加载中', wrapperClassName: 'spinstyle', }" :rowKey="(record) => record.index">
            <span slot="custom_objob">
              <span class="fw500">在职人数</span>
            </span>
            <span slot="title_index">
              <span class="pl8">序号</span>
            </span>
            <a @click="getBillInfo(text1,10)" style="color:#576B95;text-decoration:underline" slot="signUps" slot-scope="text, text1">{{text}}</a>
            <a @click="getBillInfo(text1,20)" style="color:#576B95;text-decoration:underline" slot="arrived" slot-scope="text, text1">{{text}}</a>
            <a @click="getBillInfo(text1,30)" style="color:#576B95;text-decoration:underline" slot="passed" slot-scope="text, text1">{{text}}</a>
            <a @click="getBillInfo(text1,40)" style="color:#576B95;text-decoration:underline" slot="entry" slot-scope="text, text1">{{text}}</a>
            <a @click="getBillInfo(text1,50)" style="color:#576B95;text-decoration:underline" slot="obJob" slot-scope="text, text1">{{text}}</a>
            <a @click="getBillInfo(text1,60)" style="color:#576B95;text-decoration:underline" slot="entryGPA" slot-scope="text, text1">{{toFixed(text)}}</a>
            <a @click="getBillInfo(text1,70)" style="color:#576B95;text-decoration:underline" slot="finshedGPA" slot-scope="text, text1">{{toFixed(text)}}</a>
          </a-table>
        </div>
        <!-- <div class="pagecontainer mt16" v-if="dataList.length > 0">
          <a-pagination :current="contentListSearchForm.pageNum" :page-size-options="pagination.pageSizeOptions" :default-current="1" :defaultPageSize="10" :total="contentListSearchForm.total" @change="onChange" size="small" show-size-changer show-quick-jumper />
          <div class="ant-pagination-options-quick-jumper ml12 f14">
            <span>共{{ contentListSearchForm.total }}条，</span>跳至
            <input ref="pageinput" type="text" style="height:28px" @keyup.enter="inputpageChange" @blur="inputpageChange" />页
          </div>
        </div>-->
      </div>
    </div>
    <a-modal class="townsmanDetailModal" centered v-model="townsmanDetailVisible" width="1200px" @cancel="townsmanDetailModalClose" :footer="null" destroyOnClose>
      <div slot="title" destoryOnClose>明细</div>
      <div class="searchinput mb16">
        <a-input-search placeholder="请输入老乡姓名" v-model.trim="billPagination.keys" allowClear @search="onSearch" @keyup.enter="onSearch" @input="resetsearch">
          <!-- <a-icon slot="prefix" type="search" class="cccc" />
          <a-button slot="enterButton" class="cblue">搜索</a-button>-->
        </a-input-search>
        <!-- <a-input placeholder="请输入老乡姓名/身份证号" @keyup.enter="onSearch" @input="resetsearch" v-model.trim="billPagination.keys">
          <i slot="prefix" class="iconfont icon-sousuo"></i>
          <button slot="suffix" @click="onSearch">搜索</button>
        </a-input>-->
      </div>
      <a-table :columns="billColumns" :data-source="billList" class="detailTable" :pagination="false" @change="onChange" :loading="{ spinning: isspinning, tip: '加载中', wrapperClassName: 'spinstyle', }" :rowKey="(record) => record.index">
        <span slot="storeJobName" slot-scope="text">{{text}}</span>
        <span slot="userName" slot-scope="text">{{text}}1</span>

        <span slot="billDate">{{dateType}}</span>
      </a-table>
      <div class="pagecontainer mt16" v-if="billList.length > 0">
        <!-- <a-pagination :current="billPagination.pageNum" :default-current="1" :defaultPageSize="10" :total="billPagination.total" @change="onChange" /> -->
        <a-pagination :current="billPagination.pageNum" :page-size-options="pagination.pageSizeOptions" :default-current="1" :defaultPageSize="20" :show-total="total => `共${total}条`" :total="billPagination.total" @change="onChange" size="small" show-size-changer show-quick-jumper />
        <!-- <div class="ant-pagination-options-quick-jumper ml12">
          <span>共{{ billPagination.total }}条，</span>跳至
          <input ref="pageinput" type="text" @keyup.enter="inputpageChange" @blur="inputpageChange" />页
        </div>-->
      </div>
    </a-modal>
  </div>
</template>

<script>
import { dataStatisticsListApi, dataStatisticsTeamDetailApi, getMemberGroupApi } from '../../../../api/userinfo'
import moment from 'moment'
import { getDateYMD, formatDateYMD, formatDateYMDHM, getUserApplyOrderStatusById, toFixed, tableWidth, fullCopy } from '../../../../utils/commonUtil'
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  },
}
export default {
  // 组件名称
  name: 'dataStatistics',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      checked0: false,
      checked1: false,
      checked2: false,
      checked3: false,
      checked4: false,
      checked5: false,
      checked6: true,
      checked7: false,
      sortedInfo: null,
      dataList: [],
      expandedRowKeys: [],
      rowSelection,
      menuType: 'role',
      currentData: {},
      selectedKeys: ['all'],
      groupList: [],
      billPagination: {
        pageNum: 1,
        pageSize: 20,
        total: null, //分页配置
        status: 0,
        keys: null,
        // searchTag: 1,
      },
      billList: [],
      contentListSearchForm: { pageNum: 1, pageSize: 10, keys: '' },
      townsmanDetailVisible: false,
      isspinning: false,
      totalObj: {
        // 数据总计
        arrived: 0,
        entry: 0,
        obJob: 0,
        passed: 0,
        signUps: 0,
        entryGPA: 0,
        finshedGPA: 0,
      },
      pagination: {
        hideOnSinglePage: false,
        showQuickJumper: true,
        pageSize: 100,
        total: 0,
        size: 'small',
        showTotal: function (total, range) {
          return `共${total}条`
        },
        pageSizeOptions: ['25', '50', '100'],
        showSizeChanger: true,
        // showSizeChange:function(current, pageSize){
        //     this.pageSize = pageSize;
        // }
      },
      dateType: '',
      dateVal: '',
      tableHeight: 300,
      totalDataList: [],
      groupDataList: [],
      totalGroupNum: 0,
      currentGroup: {},
 
    }
  },
  // 计算属性
  computed: {
    columns() {
      const columns = [
        {
          // title: ' 序号',
          dataIndex: 'index',
          key: 'index',
          slots: { title: 'title_index' },

          customRender: (text, row, index) => {
            // if (row.users) {
            //   return ''
            // } else {
            return index + 1
            // }
          },
          width: 50,
        },
        {
          title: '姓名',
          dataIndex: 'aliasName',
          key: 'aliasName',
          customRender: (text, row, index) => {
            // if (row.users) {
            //   return row.agencyTeamName
            // } else {
            return row.aliasName
            // }
          },
          ellipsis: true,
          // width: 100,
        },
        {
          title: '报名',
          dataIndex: 'signUps',
          key: 'signUps',
          scopedSlots: { customRender: 'signUps' },
          sorter: (a, b) => a.signUps - b.signUps,
          ellipsis: true,
          width: 120,
        },
        {
          title: '到面',
          dataIndex: 'arrived',
          key: 'arrived',
          scopedSlots: { customRender: 'arrived' },
          sorter: (a, b) => a.arrived - b.arrived,

          width: 120,
          ellipsis: true,
        },
        {
          title: '通过',
          dataIndex: 'passed',
          key: 'passed',
          sorter: (a, b) => a.passed - b.passed,

          scopedSlots: { customRender: 'passed' },

          ellipsis: true,
          width: 120,
        },
        {
          title: '入职',
          dataIndex: 'entry',
          key: 'entry',
          sorter: (a, b) => a.entry - b.entry,
          scopedSlots: { customRender: 'entry' },

          ellipsis: true,
          width: 120,
        },
        {
          // title: '在职',
          dataIndex: 'obJob',
          key: 'obJob',
          slots: { title: 'custom_objob' },
          sorter: (a, b) => a.obJob - b.obJob,
          scopedSlots: { customRender: 'obJob' },
          ellipsis: true,
          width: 120,
        },
        {
          title: '入职绩点',
          dataIndex: 'entryGPA',
          key: 'entryGPA',
          sorter: (a, b) => a.entryGPA - b.entryGPA,
          scopedSlots: { customRender: 'entryGPA' },
          ellipsis: true,
          width: 120,
        },
        {
          title: '交付绩点',
          dataIndex: 'finshedGPA',
          key: 'finshedGPA',
          //  customRender: (text, row, index) => {
          //    return toFixed(text)
          //  },
          sorter: (a, b) => a.finshedGPA - b.finshedGPA,
          scopedSlots: { customRender: 'finshedGPA' },
          ellipsis: true,
          width: 120,
        },
      ]
      return columns
    },
    billColumns() {
      let { sortedInfo } = this
      console.log(sortedInfo)
      sortedInfo = sortedInfo || {}
      const columns = [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, row, index) => {
            return index + 1
          },
          width: 50,
        },
        {
          title: '姓名',
          dataIndex: 'userName',
          key: 'userName',
          ellipsis: true,
          width: 200,
          // scopedSlots: { customRender: 'userName' },
          customRender: (text, row, index) => {
            let sex
            if (row.sex == '1') {
              sex = '男'
            } else if (row.sex == '2') {
              sex = '女'
            } else {
              sex = '未知'
            }
            // switch (row.sex) {
            //   case '0':
            //     sex = '男女不限'
            //   case '1':
            //     sex = '男'
            //   case '2':
            //     sex = '女'

            //   default:
            //     break
            // }
            return text.trim() + (sex ? '/' + sex : '') + (row.age ? '/' + row.age : '') + (row.nation ? '/' + row.nation : '')
          },
        },
        // {
        //   title: '年龄',
        //   dataIndex: 'age',
        //   key: 'age',
        //   ellipsis: true,
        //   width: 60,
        // },
        // {
        //   title: '性别',
        //   dataIndex: 'sex',
        //   key: 'sex',
        //   ellipsis: true,
        //   customRender: (text, row, index) => {
        //     switch (text) {
        //       case 0:
        //         return '男女不限'
        //       case 1:
        //         return '男'
        //       case 2:
        //         return '女'

        //       default:
        //         break
        //     }
        //   },
        //   width: 60,
        // },
        // {
        //   title: '民族',
        //   dataIndex: 'nation',
        //   key: 'nation',
        //   ellipsis: true,
        //   width: 90,
        // },
        // {
        //   title: '电话',
        //   dataIndex: 'tel',
        //   key: 'tel',
        //   ellipsis: true,
        //   width: 120,
        // },
        // {
        //   title: '身份证',
        //   dataIndex: 'idCard',
        //   key: 'idCard',
        //   ellipsis: true,
        //   width: 180,
        // },
        {
          title: '报名岗位',
          dataIndex: 'storeJobName',
          key: 'storeJobName',
          ellipsis: true,
          // width: 180,
          // width: 60,
        },
        {
          // title: '报名时间',
          dataIndex: this.dateVal,
          key: this.dateVal,
          ellipsis: true,
          width: 160,
          slots: { title: 'billDate' },
          customRender: (text, row, index) => {
            return formatDateYMDHM(text)
          },
        },
        {
          title: '当前状态',
          dataIndex: 'status',
          key: 'status',
          ellipsis: true,
          width: 120,
          customRender: (text, row, index) => {
            switch (text) {
              case 10:
                return '报名审核中'
              case 20:
                return '审核通过'
              case 21:
                return '审核未通过'
              case 25:
                return '已接到'
              case 26:
                return '未接到'
              case 30:
                return '面试通过'
              case 35:
                return '面试未通过'
              case 40:
                return '已入职'
              case 45:
                return '通过未入职'
              case 50:
                return '已离职'
              default:
                break
            }
          },
        },
        {
          title: '报名人',
          dataIndex: 'applyUserName',
          key: 'applyUserName',
          ellipsis: true,
          width: 150,
          slots: { title: 'applyUserName' },
          customRender: (text, row, index) => {
            return row.applyUserName
          },
        },
        {
          title: '入职绩点',
          dataIndex: 'entryGPA',
          key: 'entryGPA',
          ellipsis: true,
          width: 80,
          slots: { title: 'entryGPA' },
          customRender: (text, row, index) => {
            return toFixed(text)
          },
        },
        {
          title: '交付绩点',
          dataIndex: 'finshedGPA',
          key: 'finshedGPA',
          ellipsis: true,
          width: 80,
          slots: { title: 'finshedGPA' },
          customRender: (text, row, index) => {
            return toFixed(text)
          },
        },
      ]
      return columns
    },
  },
  // 侦听器
  watch: {
    menuType: {
      handler(value) {
        let that = this
        console.log(value)
        if (value == 'group') {
          console.log(this.columns)
          that.selectedKeys = ['all']
          this.selectGroup('all')
          that
            .getDataStatisticsList()
            .then(() => {
              console.log(1313123131231232)
              // this.dataList = this.groupDataList
              that.columns.splice(1, 1, {
                title: '部门',
                dataIndex: 'agencyTeamName',
                key: 'agencyTeamName',
                ellipsis: true,
                // width: 120,
                slots: { title: 'agencyTeamName' },
              })
              tableWidth(that, that.columns, 120)
              this.$forceUpdate()
            })
            .catch((err) => {
              console.log(err)
            })
          //
        } else {
          console.log(that.columns.slice(1, 2)[0].title)
          if (that.columns.slice(1, 2)[0].title == '部门') {
            that.getDataStatisticsList().then(() => {
              console.log(1313123131231232)
              that.dataList = fullCopy(that.totalDataList)
              that.columns.splice(1, 1, {
                title: '姓名',
                dataIndex: 'aliasName',
                key: 'aliasName',
                customRender: (text, row, index) => {
                  return row.aliasName
                },
                ellipsis: true,
              })
            })
          }
        }
      },
      immediate: true,
      //  setTimeout(()=>{

      //  },200)
    },
  },
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.contentListSearchForm.start = moment().add(-0, 'd').format('YYYY-MM-DD')
    this.contentListSearchForm.end = moment().format('YYYY-MM-DD')
    this.billList = [...this.billList, ...this.billList, ...this.billList]
    tableWidth(this, this.columns, 120)
    console.log(this.currWidth)
    this.$emit('setTitle', '团队数据')
    this.getDataStatisticsList()
    this.getMemberGroup()
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    console.log(document.documentElement.clientHeight)
    console.log(document.getElementsByClassName('content')[0].offsetTop)

    this.tableHeight = document.documentElement.clientHeight - document.getElementsByClassName('content')[0].offsetTop - 160
  },
  // 组件方法
  methods: {
    /**
     * 请求日期切换
     *
     *
     */
    handleChange(tag, checked) {
      let that = this
      this.checked0 = false
      this.checked1 = false
      this.checked2 = false
      this.checked3 = false
      this.checked4 = false
      this.checked5 = false
      this.checked6 = false
      this.checked7 = false
      var start = getDateYMD()
      var end = getDateYMD()
      if (tag == 0) {
        that.checked0 = true
        start = moment().add(-6, 'd').format('YYYY-MM-DD')
        end = moment().format('YYYY-MM-DD')
      } else if (tag == 1) {
        that.checked1 = true

        start = moment().add(-29, 'd').format('YYYY-MM-DD')
        end = moment().format('YYYY-MM-DD')
      } else if (tag == 2) {
        that.checked2 = true
        start = moment().startOf('week').format('YYYY-MM-DD')
        end = moment().format('YYYY-MM-DD')
      } else if (tag == 3) {
        that.checked3 = true
        start = moment()
          .week(moment().week() - 1)
          .startOf('week')
          .format('YYYY-MM-DD')
        end = moment()
          .week(moment().week() - 1)
          .endOf('week')
          .format('YYYY-MM-DD')
      } else if (tag == 4) {
        that.checked4 = true

        start = moment().startOf('month').format('YYYY-MM-DD')
        end = moment().format('YYYY-MM-DD')
      } else if (tag == 5) {
        that.checked5 = true
        start = moment().subtract('month', 1).format('YYYY-MM') + '-01'
        end = moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD')
      } else if (tag == 6) {
        that.checked6 = true
        start = moment().add(-0, 'd').format('YYYY-MM-DD')
        end = moment().format('YYYY-MM-DD')
      } else if (tag == 7) {
        that.checked7 = true
        start = moment().add(-1, 'd').format('YYYY-MM-DD')
        end = moment().add(-1, 'd').format('YYYY-MM-DD')
      }

      that.contentListSearchForm.start = start
      that.contentListSearchForm.end = end
      // this.selDate = [moment(that.contentListSearchForm.start, 'YYYY-MM-DD'), moment(that.contentListSearchForm.end, 'YYYY-MM-DD')]

      that.contentListSearchForm.pageNum = 1
      this.pagination.current = 1

      this.getDataStatisticsList()
    },
    async getDataStatisticsList() {
      this.isspinning = true
      let { data } = await dataStatisticsListApi(this.contentListSearchForm)
      console.log(data)
      if (data.status == 200) {
        this.totalObj = {
          arrived: null,
          entry: null,
          obJob: null,
          passed: null,
          signUps: null,
          finshedGPA: null,
          entryGPA: null,
        }
        data.data.list.forEach((item, index) => {
          this.totalObj.arrived += item.arrived
          this.totalObj.entry += item.entry
          this.totalObj.obJob += item.obJob
          this.totalObj.passed += item.passed
          this.totalObj.signUps += item.signUps
          this.totalObj.finshedGPA += item.finshedGPA
          this.totalObj.entryGPA += item.entryGPA

          this.totalObj.index = index + 2
        })
        let newList = []
        data.data.list.forEach((item, index) => {
          newList = newList.concat(item.users)
          console.log(item)
          console.log(index)
        })
        console.log(newList)
        if (this.menuType == 'group') {
          console.log('isgroup')
          this.dataList = fullCopy(data.data.list)
        } else {
          console.log('isrole')
          this.dataList = fullCopy(newList)
        }
        this.groupDataList = fullCopy(data.data.list)
        this.totalDataList = fullCopy(newList)
        if (this.currentGroup) {
          this.selectGroup(this.currentGroup)
        }
        this.isspinning = false
      }
    },

    toFixed(value) {
      return toFixed(value)
    },
    inputpageChange(e) {
      const pagenumcount = this.billPagination.total / this.billPagination.pageSize
      console.log(pagenumcount)
      if (e.target.value) {
        if (e.target.value > pagenumcount) {
          this.billPagination.pageNum = Math.ceil(pagenumcount)
        } else {
          this.billPagination.pageNum = e.target.value
        }
      } else {
        this.billPagination.pageNum = 1
      }
      this.gitBillList()
      // this.getJobList();
      // this.getTownsman()
      console.log(e)
    },
    dateChange(data) {
      console.log(data)
      var that = this
      if (data.length == 2) {
        that.contentListSearchForm.start = data[0].format('YYYY-MM-DD')
        that.contentListSearchForm.end = data[1].format('YYYY-MM-DD')

        that.checked0 = false
        that.checked1 = false
        that.checked2 = false
        that.checked3 = false
        that.checked4 = false
        that.checked5 = false
      } else {
        that.checked0 = true
        that.checked1 = false
        that.checked2 = false
        that.checked3 = false
        that.checked4 = false
        that.checked5 = false
        that.contentListSearchForm.start = moment().add(-7, 'd').format('YYYY-MM-DD')
        that.contentListSearchForm.end = moment().format('YYYY-MM-DD')
      }

      that.getDataStatisticsList()
    },
    townsmanDetailModalClose() {
      this.townsmanDetailVisible = false
      this.billPagination = {
        pageNum: 1,
        pageSize: 20,
        total: null, //分页配置
        status: 0,
        keys: null,
        // searchTag: 1,
      }
    },
    onSearch() {
      if (this.billPagination.keys != null && this.billPagination.keys.length != 0) {
        this.gitBillList()
        // this.getTownsman()
        // this.gettownsManCount()
      }
    },
    resetsearch(e) {
      console.log(e)
      if (e.target.value.length === 0) {
        this.billPagination.keys = ''

        this.gitBillList()
        // this.gettownsManCount()
        // this.getTownsman()
      }
    },
    onChange(e, e1, e2) {
      console.log(e)
      console.log(e1)
      console.log(e2)
      if (typeof e == 'number') {
        this.billPagination.pageNum = e
        this.gitBillList()
      }
    },
    getMemberGroup() {
      getMemberGroupApi().then(({ data }) => {
        if (data.status == 200) {
          console.log(data)
          this.groupList = data.data.list
          this.groupList.forEach((item, index) => {
            console.log(item)
            if (index > 0) {
              item.checked = false
            } else {
              item.checked = true
            }
            console.log(item)
          })
        }
      })
    },
    /**
     * 点击获取数据统计详情
     *
     *
     */
    getBillInfo(e, type) {
      console.log(e)
      if (e.users) {
        if (e.agencyTeamId == '') {
        }
      }
      this.currentData = { ...e, type }
      switch (type) {
        case 10:
          this.dateType = '报名时间'
          this.dateVal = 'createTime'
          break
        case 20:
          this.dateType = '面试时间'
          this.dateVal = 'status25OperateTime'
          break
        case 30:
          this.dateType = '通过时间'
          this.dateVal = 'status30OperateTime'
          break
        case 40:
          this.dateType = '入职时间'
          this.dateVal = 'status40OperateTime'
          break
        case 50:
          this.dateType = '入职时间'
          this.dateVal = 'status40OperateTime'
          break
        case 60:
          this.dateType = '入职时间'
          this.dateVal = 'status40OperateTime'
          break
        case 70:
          this.dateType = '交付时间'
          this.dateVal = 'status40OperateTime'
          break
        default:
          break
      }
      this.gitBillList()
    },
    async gitBillList() {
      this.isspinning = true
      console.log(this.billPagination.keys)
      console.log(this.currentData)
      let data = {
        pageNum: this.billPagination.pageNum,
        pageSize: this.billPagination.pageSize,
        start: this.contentListSearchForm.start,
        end: this.contentListSearchForm.end,
        keys: this.billPagination.keys,
        userId: this.currentData.id ? this.currentData.id : '',
        agencyTeamId: this.currentData.agencyTeamId,
        type: this.currentData.type,
      }
      let res = await dataStatisticsTeamDetailApi(data)
      console.log(res)
      let pageBean = res.data.data.pageBean
      if (res.data.status == 200) {
        this.billList = pageBean.recordList
        this.billPagination = { ...this.billPagination, total: pageBean.recordCount, pageNum: pageBean.currentPage }
        this.townsmanDetailVisible = true
      }
      this.isspinning = false
    },
    selectGroup(val) {
      console.log(val)
      this.selectedKeys = [val.agencyTeamName || 'all']
      if (typeof val == 'object') {
        this.currentGroup = val
        this.groupDataList.forEach((item) => {
          console.log(item)
          console.log()
          if (item.agencyTeamId == val.agencyTeamId) {
            this.dataList = item.users
            this.totalObj.arrived = 0
            this.totalObj.entry = 0
            this.totalObj.obJob = 0
            this.totalObj.passed = 0
            this.totalObj.signUps = 0
            this.totalObj.finshedGPA = 0
            this.totalObj.entryGPA = 0
            this.dataList.forEach((item1) => {
              this.totalObj.arrived += item1.arrived
              this.totalObj.entry += item1.entry
              this.totalObj.obJob += item1.obJob
              this.totalObj.passed += item1.passed
              this.totalObj.signUps += item1.signUps
              this.totalObj.finshedGPA += item1.finshedGPA
              this.totalObj.entryGPA += item1.entryGPA
            })
          }
        })
        console.log(this.dataList)
      } else {
        this.currentGroup = {}

        this.getDataStatisticsList()
      }

      // this.getDataStatisticsList()
    },
    onDataSearch() {
        this.getDataStatisticsList()
    },
  },
}
</script>

<style scoped lang="less">
table {
  font-size: 14px;
}

.dataStatisticsContainer {
  height: 100%;

  // min-height: 780px;
}
.contentbody {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  padding-bottom: 0px;
  // overflow: hidden;
  min-height: calc(100vh - 105px);
  // height: calc(100vh - 105px);
  .leftContainer {
    width: 260px;
    min-width: 220px;
    height: 100%;
    overflow: hidden;
    /deep/ .searchbox {
      display: flex;
      justify-content: space-between;
      .searchinput {
        width: 100%;
      }
      // padding-bottom: 14px;
    }
    .leftMenu {
      max-width: calc(100% - 1px);
      margin-right: 1px;
      border-right-color: transparent;
      &::-webkit-scrollbar {
        width: 0;
      }
    }
    .thedot {
      display: none;
    }
    .showdot:hover .thedot {
      display: block;
    }
  }
  .rightContainer {
    flex: 1;
    padding-left: 16px;
    overflow: hidden;
    position: relative;
    // min-width: 1020px;
    &::before {
      position: absolute;
      content: '';
      width: 1px;
      height: calc(100% - 16px);
      left: 0;
      top: 0;
      background: #eee;
    }
    .addmemeber {
      border: 0;
      padding: 0 12px;
      height: 32px;
      line-height: 32px;
      color: #fff;
      background: #1890ff;
      border-radius: 4px;
      i {
        font-size: 12px;
      }
    }
    .addRole {
      position: absolute;
      right: 0;
      top: 50%;

      transform: translateY(-50%);
      color: #1890ff;
      i {
        // transform: translateY(4px);
        margin-right: 4px;
        font-weight: 400;
        color: #1890ff;
      }
    }
    .addItem {
      width: 404px;
    }
  }

  /deep/ .ant-table-placeholder {
    min-height: 300px;
    > div {
      position: relative;
      height: 131px;
      top: 30px;
      // transform: translateY(-50%);
    }
  }
}
.pagechange {
  button {
    width: 66px;
    height: 24px;
    border: 1px solid rgba(77, 87, 94, 0.3);
    // border-radius: 4px;
    font-size: 14px;
    color: #4d575e;
    background-color: #fff;
    &:hover {
      border-color: #ff4400;
      color: #ff4400;
    }
    &:first-child {
      margin-right: 12px;
    }
  }
}
.townsmanDetailModal {
  /deep/ .ant-modal-header {
    // background-color: #f5f5f5;
    > div {
      height: 44px;
      line-height: 44px;
      font-weight: bold;
    }
    padding: 0 20px;
    border-bottom: 1px solid #ddd;
  }
  /deep/ .ant-modal-content {
    .ant-modal-body {
      min-height: 730px;
      max-height: 730px;
      padding-bottom: 50px;
      overflow: auto;
    }
  }
}

td:empty:before {
  content: '-';
}

/deep/ .ant-table.ant-table-fixed-header .ant-table-scroll .ant-table-header {
  overflow: auto !important;
  margin-bottom: -20px !important;
  padding-bottom: 20px !important;
}

/deep/ .ant-table {
  table {
    font-size: 14px;
  }
  .ant-table-pagination.ant-pagination {
    float: unset;
    text-align: center;
  }
  .ant-table-header {
    th {
      div {
        font-weight: bold;
      }
    }
    .ant-table-row-cell-break-word {
      // text-align: right;
      font-weight: bold;
      // padding-right: 0;
    }
  }
  // .ant-table-body::-webkit-scrollbar {
  //   width: 0 !important;
  // }
  .ant-table-hide-scrollbar {
    // padding-right: 0 !important;
  }
}
.navTitle {
  // margin: 16px 0;
  min-width: 856px;
}
.content {
  position: relative;
  // overflow: auto;
  // max-height: 700px;
}
.total {
  // background-color: #fafafa;
  // width: 100%;
  // width: 460px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  margin-top: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid #eee;
  // padding-right: 10px;
  > div {
    text-align: center;
    // font-weight: bold;
    width: 210px;
    &:last-child {
      // margin-left: 420px;
      > div {
        // padding-right: 26px;
        text-align: center;
      }
    }
    > div {
      // padding: 16px;
      font-size: 14px;
      text-align: center;
      color: #999;
    }
  }
}
/deep/.searchinput {
  width: 320px;
  // margin-bottom: 16px;
  position: relative;
}

.pagecontainer {
  // position: absolute;
  // bottom: 0;
  // left: 50%;
  width: 100%;
  // transform: translateX(-50%);
  display: flex;
  // justify-content: center;
}
/deep/.ant-btn-primary:hover {
  border-color: #40a9ff;
  background-color: #40a9ff;
  color: #fff;
}
/deep/.detailTable {
  .ant-table-thead {
    & > tr > th {
      padding: 12px 8px !important;
    }
    .ant-table-row-cell-break-word {
      padding: 12px 8px;
      // text-align: center;
    }
  }
  .ant-table-body {
    .ant-table-tbody {
      > tr > td {
        font-size: 14px;
        padding: 12px 8px;
        // height: 20px;
        // display: inline-block;
        // padding: 0px 16px;
      }
      .ant-table-row-indent {
        display: none;
      }
      .ant-table-column-title {
        overflow: unset !important;
      }
      .ant-table-row-cell-break-word {
      }
    }
  }
}

.dataTable {
  /deep/ .ant-table-content {
    .ant-table-body {
      .ant-table-thead {
        th {
          padding: 12px 0;
          div {
            // padding: 0px 8px;
          }
          &:not(:first-child) {
            > span {
              //  line-height: 22px;
              > div {
                //  line-height: 1;
                border-left: 1px solid #ddd;
                padding-left: 12px;
              }
            }
          }
        }
        .ant-table-row-cell-break-word {
          font-weight: bold;
        }
        .ant-table-row-cell-ellipsis {
          font-weight: bold;
        }
      }
      .ant-table-tbody {
        .ant-table-row-cell-ellipsis {
          padding: 12px 12px;
        }
        .ant-table-row-expand-icon {
          // color: #000;
          padding: 0;
        }
        .ant-table-row-indent {
          display: none !important;
        }
      }
    }
  }
  /deep/.ant-table-tbody {
    > tr > td {
      font-size: 14px;
      // height: 20px;
      // display: inline-block;
      padding: 0px 16px;
    }
    .ant-table-row-indent {
      display: none;
    }
    .ant-table-column-title {
      overflow: unset !important;
    }
    .ant-table-row-cell-break-word {
      // height: 54px;
      // text-align: right;
      // padding-right: 26px !important;
      overflow: hidden;
      .ant-table-row-spaced {
        display: none !important;
      }
    }
  }
}

/deep/ .ant-select-dropdown-menu-item-active,
.ant-select-dropdown-menu-item-selected {
  color: #1890ff !important;
  font-weight: normal;
  background-color: #e6f7ff !important;
}
.table_left {
  position: relative;
}
.table_left:before {
  content: '';
  width: 1px;
  height: 20px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #ccc;
  position: absolute;
  left: 0px;
}
/deep/.spinstyle {
  .ant-spin-dot-item {
    background-color: #1890ff !important;
  }
  .ant-spin-text {
    color: #1890ff !important;
  }
}
/deep/.ant-calendar-panel {
  .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month {
    background: #1890ff !important;
  }
  .ant-calendar-date:hover {
    border-color: #1890ff !important;
    background-color: #fff;
    color: #1890ff !important;
  }
  .ant-calendar-today .ant-calendar-date {
    background-color: #1890ff !important;
    border-color: #1890ff !important;
    color: #fff;
  }
  .ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date,
  .ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date {
    background-color: #1890ff !important;
    border-color: #1890ff !important;
    color: #fff;
  }
  .ant-calendar-range .ant-calendar-in-range-cell::before {
    background: #e6f7ff !important;
  }
  .ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date:hover,
  .ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date:hover {
    background: #1890ff !important;
  }
  .ant-calendar-header a:hover {
    color: #1890ff !important;
  }
  .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month:hover,
  .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year,
  .ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade,
  .ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade:hover,
  .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year:hover {
    background: #1890ff !important;
  }
  .ant-calendar-month-panel-month:hover,
  .ant-calendar-year-panel-year:hover,
  .ant-calendar-decade-panel-decade:hover {
    background: #e6f7ff !important;
  }
}
// /deep/.ant-popover .ant-popover-content .ant-popover-inner-content {
//   width: 200px !important;
// }
</style>
<style>
.ant-modal-close-x {
  width: 44px;
  height: 44px;
  line-height: 44px;
}
.ant-empty-description {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.25);
}
.ant-table-placeholder {
  margin-bottom: 16px;
}
</style>