<template>
<!-- 选择用户 -->

  <div>
	  <Form
	    ref="formValidate"
	    inline
	    :model="formValidate"
	    :label-width="labelWidth"
	    :label-position="labelPosition"
	    @submit.native.prevent
	  >
	        <FormItem label="搜索：">
	          <Input
	            placeholder="请输入名称/账号"
	            v-model="formValidate.name"
	            class="input-add"
	            @on-search="userSearchs"
	          ></Input>
	          <Button type="primary" @click="userSearchs()">查询</Button>
	        </FormItem>
	        <!-- <Button type="primary" @click="userSearchs()">查询</Button> -->
	      <!-- </Col>
	    </Row> -->
	  </Form>
    <Table
      :loading="loading2"
      highlight-row
      no-userFrom-text="暂无数据"
      no-filtered-userFrom-text="暂无筛选结果"
      ref="selection"
      :columns="columns4"
      :data="tableList2"
      height="500"
    >
      <template slot-scope="{ row, index }" slot="headimgurl">
        <viewer>
          <div class="tabBox_img">
            <img v-lazy="row.headimgurl" />
          </div>
        </viewer>
      </template>
    </Table>
    <div class="acea-row row-right page">
      <Page
        :current="formValidate.page"
        :total="total2"
        show-elevator
        show-total
        @on-change="pageChange2"
        :page-size="formValidate.limit"
      />
    </div>
  </div>
</template>
<script>
import { kefucreateApi,kefuListApi } from "@/api/setting";
import { adminListApi} from "@/api/systemAdmin"
import template from "../../pages/setting/devise/template.vue";
import timeOptions from "@/utils/timeOptions";
import { mapState } from 'vuex';
export default {
  components: { template },
  name: "index",
  data() {
    return {
      formValidate: {
        page: 1,
        limit: 15,
		name: ""
      },
      tableList2: [],
      timeVal: [],
      options: timeOptions,
      fromList: {
        title: "选择时间",
        custom: true,
        fromTxt: [
          { text: "全部", val: "" },
          { text: "今天", val: "today" },
          { text: "昨天", val: "yesterday" },
          { text: "最近7天", val: "lately7" },
          { text: "最近30天", val: "lately30" },
          { text: "本月", val: "month" },
          { text: "本年", val: "year" },
        ],
      },
      currentid: 0,
      productRow: {},
      columns4: [
        {
          title: "选择",
          key: "chose",
          width: 60,
          align: "center",
          render: (h, params) => {
            let uid = params.row.id;
            let flag = false;
            if (this.currentid === uid) {
              flag = true;
            } else {
              flag = false;
            }
            let self = this;
            return h("div", [
              h("Radio", {
                props: {
                  value: flag,
                },
                on: {
                  "on-change": () => {
                    self.currentid = uid;
                    this.productRow = params.row;
                    if (this.productRow.id) {
                      this.$emit("imageObject", {
                        id: this.productRow.id,
                        name: this.productRow.real_name,
						level: this.productRow.level
                      });
                    } else {
                      // this.$Message.warning("请先选择商品");
                    }
                  },
                },
              }),
            ]);
          },
        },
        {
          title: "ID",
          key: "id",
          width: 80,
        },
        {
          title: "姓名",
          key: "real_name",
          minWidth: 180,
        },
        {
          title: "账号",
          key: "account",
          minWidth: 100,
        },
		{
		  title: "身份",
		  key: "roles",
		  minWidth: 60,
		},
      ],
      loading2: false,
      total2: 0,
    };
  },
  computed: {
    ...mapState('admin/layout', [
        'isMobile'
    ]),
    labelWidth () {
        return this.isMobile ? undefined : 96;
    },
    labelPosition () {
        return this.isMobile ? 'top' : 'right';
    }
  },
  created() {},
  mounted() {
    this.getListService();
  },
  methods: {
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e;
      this.formValidate.data = this.timeVal[0] ? this.timeVal.join("-") : "";
      this.getListService();
    },
    // 选择时间
    selectChange(tab) {
      this.formValidate.data = tab;
      this.timeVal = [];
      this.getListService();
    },
    // 客服列表
    getListService() {
      this.loading2 = true;
      adminListApi(this.formValidate)
        .then(async (res) => {
          let data = res.data;
          this.tableList2 = data.list;
          this.total2 = data.count;
          this.tableList2.map((item) => {
            item._isChecked = false;
          });
          this.loading2 = false;
        })
        .catch((res) => {
          this.loading2 = false;
          this.$Message.error(res.msg);
        });
    },
    pageChange2(pageIndex) {
      this.formValidate.page = pageIndex;
      this.getListService();
    },
    // 搜索
    userSearchs() {
      this.formValidate.page = 1;
      this.getListService();
    },
  },
};
</script>

<style scoped lang="stylus">
.input-add {
width: 250px;
margin-right:14px
}
.tabBox_img
    width 36px
    height 36px
    border-radius:4px;
    cursor pointer
    img
        width 100%
        height 100%
.modelBox
    >>>
    .ivu-table-header
        width 100% !important
.trees-coadd
    width: 100%;
    height: 385px;
    .scollhide
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
.scollhide::-webkit-scrollbar {
    display: none;
}
.footer{
    margin: 15px 0;
    padding-right: 20px;
}
</style>
