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

<script>
import commonList from '@/mixin/commonList'
import UcmUserAPI from '@api/common/ucmUser'

export default {
  name: '',

  mixins: [commonList],
  data () {
    return {
      loading: false,
      nameCode: '',
      teamName: '',
      siteName: '',
      columnsDaily: [
        {
          type: 'index',
          title: '序号',
          width: 65,
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '工号',
          key: 'userCode'
        },
        // {
        //   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: []
    }
  },
  watch: {
    nameCode (newval) {
      if (!newval) {
        this.doInitSearch()
      }
    }
  },
  methods: {
    // 查询
    doSearch () {
      this.loading = true
      this.searchForm.nameCode = this.nameCode.trim()
      this.searchForm.teamName = this.teamName.trim()
      this.searchForm.siteName = this.siteName.trim()
      this.dataLibrary = []
      this.$nextTick(() => {
        UcmUserAPI.queryList({ ...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.searchForm.nameCode = ''
      this.searchForm.teamName = ''
      this.searchForm.siteName = ''
      this.nameCode = ''
      this.teamName = ''
      this.siteName = ''
      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>
