<template>
  <div class="mybill-container">
    <div class="contenttitle">
      <span>我的工单</span>
      <div>
        <button>打电话</button>
        <button>推工作</button>
        <button>跟在职</button>
      </div>
    </div>
    <div class="contentbody">
      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="false"
        @change="onChange"
      >
        <a slot="name" slot-scope="text">{{ text }}</a>
      </a-table>
      <div class="pagecontainer">
        <a-pagination
          :current="+pagination.pageNum"
          :default-current="1"
          :defaultPageSize="2"
          :total="pagination.total"
          @change="onChange"
        />
        <div class="ant-pagination-options-quick-jumper">
          跳至<input
            ref="pageinput"
            type="text"
            @keyup.enter="inputpageChange"
            @blur="inputpageChange"
          />页
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      pagination: {
        pageNum: 1,
        pageSize: 2,
        total: 8, //分页配置
      },
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          scopedSlots: { customRender: "index" },
          width: 60,
        },
        {
          title: "老乡姓名",
          dataIndex: "name",
          key: "name",
          width: 90,
        },
        {
          title: "老乡手机号",
          dataIndex: "tel",
          key: "tel",
          width: 120,
          // ellipsis: true,
        },
        {
          title: "跟进记录",
          dataIndex: "record",
          key: "record",
          ellipsis: true,
        },
        {
          title: "更新时间",
          dataIndex: "time",
          key: "time",
          width: 160,
        },
      ],
      data: [
        {
          index: "1",
          name: "房竟慧",
          record: "协助报名@草莓/郭美美",
          tel: "13456677890",
          time: "2021-09-13 15:41",
        },
        {
          index: "2",
          name: "范明",
          record: "自主报名 朋友推荐",
          tel: "13456677890",
          time: "2021-09-13 15:41",
        },
        {
          index: "3",
          name: "陈伟运",
          record: "自主登录",
          tel: "13456677890",
          time: "2021-09-13 15:41",
        },
      ],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    onChange(e) {
      this.pagination.pageNum = e;
      console.log(e);
    },
    inputpageChange(e) {
      this.pagination.pageNum = e.target.value;
      // this.getJobList();
      console.log(e);
    },
  },
};
</script>

<style scoped lang="less">
.contenttitle {
  display: flex;
  padding-bottom: 16px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(77, 87, 94, 0.1);
  margin-top: 16px;
  margin-bottom: 16px;
  span {
    font-size: 20px;
    color: #ff6a00;
  }
  div {
    button {
      width: 100px;
      height: 28px;
      font-size: 14px;
      border: 1px solid #cccccc;
      background-color: #fff;
    }
    button:first-child {
      border-radius: 4px 0px 0px 4px;
    }
    button:last-child {
      border-radius: 0px 4px 4px 0px;
    }
  }
}
</style>
