<template>
  <div class="mybill-container">
    <div class="contenttitle">
      <span>我的工单</span>
      <div @click="resetpag">
        <button
          @click="pagination.searchTag = 0"
          :class="{ townsmanactive: pagination.searchTag === 0 }"
        >
          打电话
        </button>
        <button
          @click="pagination.searchTag = 1"
          :class="{ townsmanactive: pagination.searchTag === 1 }"
        >
          推工作
        </button>
        <button
          @click="pagination.searchTag = 2"
          :class="{ townsmanactive: pagination.searchTag === 2 }"
        >
          跟在职
        </button>
      </div>
    </div>
    <div class="contentbody">
      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="false"
        @change="onChange"
        :loading="{
          spinning: isspinning,
          tip: '加载中',
          wrapperClassName: 'spinstyle',
        }"
        :locale="tablenodata"
        :rowKey="(record) => record.index"
      >
        <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"
            :style="{ 'background-Color': '#f6f6f6' }"
          />页
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userBillApi } from "../../../../api/userinfo";
import { formatDateYMD } from "../../../../utils/commonUtil";
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      tablenodata: {
        // 空状态文本内容
        emptyText: () => (
          <div>
            <div>
              <img
                src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png"
                style="width:105px;height:90px;marginTop:20px"
              />
            </div>
            <div style="marginBottom:20px">暂无数据</div>
          </div>
        ),
      },
      isspinning: false,
      pagination: {
        pageNum: 1,
        pageSize: 2,
        total: null, //分页配置
        searchTag: 0,
      },
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          scopedSlots: { customRender: "index" },
          ellipsis: true,
          width: 60,
        },
        {
          title: "老乡姓名",
          dataIndex: "nickName",
          key: "nickName",
          ellipsis: true,
          width: 90,
        },
        {
          title: "老乡手机号",
          dataIndex: "tel",
          key: "tel",
          width: 120,
          ellipsis: true,
        },
        {
          title: "跟进记录",
          dataIndex: "userServeRecordDespLatest",
          key: "userServeRecordDespLatest",
          ellipsis: true,
        },
        {
          title: "更新时间",
          dataIndex: "updateTime",
          key: "updateTime",
          ellipsis: true,
          width: 160,
        },
      ],
      data: [],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getBill();
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    onChange(e) {
      this.pagination.pageNum = e;
      console.log(e);
      this.getBill();
    },
    inputpageChange(e) {
      const pagenumcount = this.pagination.total / this.pagination.pageSize;
      console.log(pagenumcount);
      if (e.target.value) {
        if (e.target.value > pagenumcount) {
          this.pagination.pageNum = Math.ceil(pagenumcount);
        } else {
          this.pagination.pageNum = e.target.value;
        }
      } else {
        this.pagination.pageNum = 1;
      }
      // this.getJobList();
      this.getBill();
      console.log(e);
    },
    async getBill() {
      console.log("click");
      console.log(this.pagination.searchTag);
      try {
        this.isspinning = true;
        const { data } = await userBillApi(this.pagination);
        console.log(data);
        if (data.status === 200) {
          // console.log();
          this.data = data.data.recordList;
          this.data.forEach((item, index) => {
            console.log(item);
            item.updateTime = formatDateYMD(item.updateTime);
            item.index = index + 1;
          });

          console.log(true);
          this.pagination.total = data.data.recordCount;
        }
      } catch (error) {
        console.log(error);
      }
      this.isspinning = false;
    },
    resetpag() {
      this.pagination = {
        pageNum: 1,
        pageSize: 2,
        total: 8, //分页配置
        searchTag: this.pagination.searchTag,
      };
      this.getBill();
    },
  },
};
</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 {
    .townsmanactive {
      border-color: #ff6a00;
      color: #ff6a00;
      z-index: 999;
    }
    button {
      width: 100px;
      height: 28px;
      position: relative;
      font-size: 14px;
      border: 1px solid #cccccc;
      background-color: #fff;
      margin-right: -1px;
      cursor: pointer;
      &:hover {
        color: #ff6a00;
      }
    }
    button:first-child {
      border-radius: 4px 0px 0px 4px;
    }
    button:last-child {
      border-radius: 0px 4px 4px 0px;
    }
  }
}
</style>
