<template>
  <div>
    <!-- <Row>
      <AutoComplete class="searchItem" placeholder="姓名/员工编号" style="width:200px;" v-model="nameCode"></AutoComplete>
      <AutoComplete class="searchItem" placeholder="所属中心" style="width:200px;" v-model="siteName"></AutoComplete>
      <AutoComplete class="searchItem" placeholder="所属业务小组" style="width:200px;" v-model="teamName"></AutoComplete>
      <Button :loading="loading" @click="doSearch" style="margin-left: 6px;" type="primary">查询</Button>
    </Row>-->
    <Table :columns="columnsDaily" :data="dataLibrary" :loading="loading" border ref="selection"></Table>
    <Page
      :page-size="searchForm.pageSize"
      :total="total"
      @on-change="pageChange"
      class="mt-set16"
      show-total
    />
  </div>
</template>

<script>
import commonList from '@/mixin/commonList'
import WfmOrgAPI from '@api/common/wfmOrg'

export default {
  name: '',
  props: ['userInfo'],
  mixins: [commonList],
  data () {
    return {
      loading: false,
      nameCode: '',
      teamName: '',
      siteName: '',
      columnsDaily: [
        {
          type: 'index',
          title: '序号',
          width: 80,
          align: 'center'
        },
        {
          title: '姓名',
          render (h, params) {
            return h('div', params.row.map.agentName)
          }
        },
        {
          title: '工号',
          render (h, params) {
            return h('div', params.row.map.userCode)
          }
        },
        {
          title: '中心',
          key: 'wmSiteName'
        },
        {
          title: '业务小组',
          key: 'wmTeamName',
          minWidth: 120
        }
        // {
        //   title: '业务小组',
        //   key: 'teamName'
        // },
        // {
        //   title: '中心',
        //   key: 'siteName'
        // }
        // {
        //   title: '操作',
        //   key: 'action',
        //   width: 200,
        //   align: 'center',
        //   render: (h, params) => {
        //     return h('div', [
        //       h(
        //         'Button',
        //         {
        //           props: {
        //             type: 'success',
        //             size: 'small'
        //           },
        //           style: {
        //             marginRight: '5px'
        //           },
        //           on: {
        //             click: () => {
        //               this.confirmSelect(params.row)
        //             }
        //           }
        //         },
        //         '选择'
        //       )
        //     ])
        //   }
        // }
      ],
      dataLibrary: []
    }
  },
  computed: {
    getUserInfo () {
      return this.userInfo
    }
  },
  watch: {
    getUserInfo (newVal) {
      if (newVal !== null) {
        this.dataLibrary = []
        this.doSearch()
      }
    }
  },
  methods: {
    // 查询
    doSearch () {
      this.loading = true
      this.dataLibrary = []
      // this.searchForm.nameCode = this.nameCode.trim()
      // this.searchForm.teamName = this.teamName.trim()
      // this.searchForm.siteName = this.siteName.trim()
      if (this.userInfo === null) {
        return
      }
      if (
        this.userInfo.uuid === undefined ||
        this.userInfo.uuid === null ||
        this.userInfo.uuid === ''
      ) {
        return
      }
      this.searchForm.orgId = this.userInfo.uuid
      this.$nextTick(() => {
        WfmOrgAPI.orgRangeList({ ...this.searchForm })
          .then(({ data }) => {
            this.loading = false
            if (data.status === 'success') {
              this.total = data.data.total
              this.dataLibrary = data.data.list
            } else {
              this.$Notice.error(data.message)
            }
          })
          .catch(err => {
            console.error('err: ', err)
            this.loading = false
          })
      })
    }
    // confirmSelect (row) {
    //   this.$emit('confirmSelect', row)
    // }
  }
}
</script>

<style lang="less">
.dynamic_panle {
  .ivu-form-item-label {
    width: 60px !important;
  }
  .ivu-form-item-content {
    margin-left: 60px !important;
  }
  .add-item {
    margin-top: 4px;
  }
  .close-item {
    margin-top: 4px;
  }
}
.mg-set {
  margin: 0 12px 0 8px;
}
.long-label {
  .ivu-form-item-label {
    width: 96px !important;
  }
}
.ivu-table-wrapper {
  .ivu-icon {
    left: 25px;
  }
}
</style>
