<template>
  <h-view id="toDoList" class="public-style" title="待办审批">
    <h-header :proportion="[5, 1, 1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
        <span>待办审批</span>
      </div>
    </h-header>
    <div class="wrap has-header">
      <div class="tab">
        <p>
          <span
            :class="{ selected: selected === 'todo' }"
            @click="isSelected('todo')"
          ><img
            v-if="selected === 'todo'"
            src="@/assets/functionCenter/todo-check.png"
          ><img
            v-if="selected === 'done'"
            src="@/assets/functionCenter/todo.png"
          >待办</span
          >
        </p>
        <p>
          <span
            :class="{ selected: selected === 'done' }"
            @click="isSelected('done')"
          ><img
            v-if="selected === 'done'"
            src="@/assets/functionCenter/done-check.png"
          ><img
            v-if="selected === 'todo'"
            src="@/assets/functionCenter/done.png"
          >已办</span
          >
        </p>
      </div>
      <div class="search">
        <input
          v-model="searchInput"
          type="text"
          placeholder="请输入用户名称"
          @input="searchList()"
        >
      </div>
    </div>
    <div
      v-if="
        (todoList.length === 0 && selected === 'todo') ||
          (doneList.length === 0 && selected === 'done')
      "
    >
      <div class="display">
        <img src="@/assets/messageCenter/noMsg.png" alt="" >
      </div>
    </div>
    <scroll
      v-if="selected === 'todo' && todoList.length > 0"
      ref="scroll"
      :updateData="todoList"
      :pullUp="true"
      :autoUpdate="true"
      :listenScroll="true"
      class="scroll-content"
      @pullingUp="loadMore()"
    >
      <div class="pay-content">
        <div
          v-for="(item, index) in todoList"
          :key="index"
          class="contract-item"
        >
          <div class="header">
            <img src="@/assets/contractRepayment/contract.png" alt="" >
            <h2>客户准入审批</h2>
            <p>
              <img
                src="@/assets/functionCenter/in@2x.png"
                alt=""
                @click="
                  approvalInfo(
                    item.document_id,
                    item.document_name,
                    item.record_id,
                    'todo',
                    item.bp_class
                  )
                "
              >
            </p>
          </div>
          <div class="center">
            <h2>客户名称</h2>
            <p>{{ item.document_name }}</p>
          </div>
        </div>
      </div>
    </scroll>

    <scroll
      v-if="selected === 'done' && doneList.length > 0"
      ref="scroll"
      :updateData="doneList"
      :pullUp="true"
      :autoUpdate="true"
      :listenScroll="true"
      @pullingUp="loadMore()"
    >
      <div class="pay-content">
        <div
          v-for="(item, index) in doneList"
          :key="index"
          class="contract-item"
        >
          <div class="header">
            <img src="@/assets/contractRepayment/contract.png" alt="" >
            <h2>客户准入审批</h2>
            <p>
              <img
                src="@/assets/functionCenter/in@2x.png"
                alt=""
                @click="
                  approvalInfo(
                    item.document_id,
                    item.document_name,
                    item.record_id,
                    'done',
                    item.bp_class
                  )
                "
              >
            </p>
          </div>
          <div class="center">
            <h2>客户名称</h2>
            <p>{{ item.document_name }}</p>
          </div>
        </div>
      </div>
    </scroll>
  </h-view>
</template>
<script>
import noImg from '../../assets/productQuery/none.png'

export default {
  name: 'ToDoList',
  data () {
    return {
      selected: 'todo',
      searchInput: '',
      todoList: [],
      doneList: [],
      pageNum: 1,
      pageNum_1: 1,
      mysetTimeout: null,
    }
  },
  // watch: {},
  // created () {
  //   this.getTodoList()
  //   this.getDoneList()
  // },
  activated () {
    this.getTodoList()
    this.getDoneList()
  },
  methods: {
    // tab切换
    isSelected (name) {
      this.selected = name
    },
    searchList () {
      if (this.mysetTimeout !== null) {
        clearTimeout(this.mysetTimeout)
        this.mysetTimeout = setTimeout(() => {
          this.loadMore()
        }, 1000)
      } else {
        this.mysetTimeout = setTimeout(() => {
          this.loadMore()
        }, 1000)
      }
    },
    getTodoList () {
      this.pageNum = 1
      this.todoList = []
      let param = {
        document_name: '',
        // phone: window.localStorage.getItem('user_phone'),
        bp_id: JSON.parse(window.localStorage.now_user_bp_bind_id).bp_id,
        pagenum: this.pageNum,
        pagesize: 10,
      }
      let url = $config.basePath + 'to_do_list'
      this.hlsPopup.showLoading('请稍候')
      this.hlsHttp.post(url, param).then((res) => {
        this.hlsPopup.hideLoading()
        let returnData = []
        if (res.result === 'S') {
          returnData = res.lists 
          returnData.forEach((data, index, array) => {
            this.todoList.push(data)
          })
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    getDoneList () {
      this.pageNum_1 = 1
      this.doneList = []
      let param = {
        document_name: '',
        // phone: window.localStorage.getItem('user_phone'),
        bp_id: JSON.parse(window.localStorage.now_user_bp_bind_id).bp_id,
        pagenum: this.pageNum_1,
        pagesize: 10,
      }
      let url = $config.basePath + 'done_list'
      this.hlsPopup.showLoading('请稍候')
      this.hlsHttp.post(url, param).then((res) => {
        this.hlsPopup.hideLoading()
        let returnData = []
        if (res.result === 'S') {
          returnData = res.lists
          returnData.forEach((data, index, array) => {
            this.doneList.push(data)
          })
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    loadMore () {
      let url
      let param
      if (this.selected === 'todo') {
        this.pageNum++
        url = $config.basePath + 'to_do_list'
        param = {
          document_name: this.searchInput,
          pagenum: this.pageNum,
          // phone: window.localStorage.getItem('user_phone'),
          bp_id: JSON.parse(window.localStorage.now_user_bp_bind_id).bp_id,
          pagesize: 10,
        }
      } else if (this.selected === 'done') {
        this.pageNum_1++
        url = $config.basePath + 'done_list'
        param = {
          document_name: this.searchInput,
          pagenum: this.pageNum_1,
          // phone: window.localStorage.getItem('user_phone'),
          bp_id: JSON.parse(window.localStorage.now_user_bp_bind_id).bp_id,
          pagesize: 10,
        }
      }
      this.hlsPopup.showLoading('请稍候')
      this.hlsHttp.post(url, param).then((res) => {
        this.hlsPopup.hideLoading()
        let returnData = []
        if (res.result === 'S') {
          returnData = res.lists
          if (returnData.length === 0) {
            this.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            this.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            this.$refs.scroll.update(true)
          }
          this.showLists = returnData
          if (this.selected === 'todo') {
            returnData.forEach((data, index, array) => {
              this.todoList.push(data)
            })
          } else if (this.selected === 'done') {
            returnData.forEach((data, index, array) => {
              this.doneList.push(data)
            })
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    approvalInfo (document_id, document_name, record_id, type, bpclass) {
      this.$router.push({
        name: 'approvalInfo',
        params: {
          document_id: document_id,
          document_name: document_name,
          record_id: record_id,
          type: type,
          bpclass: bpclass,
        },
      })
    },
  },
}
</script>
<style lang='less' scoped>
@import "../../styles/vue-1px";
.display {
  position: fixed;
  top: 0;
  img {
    width: 100%;
    height: 100%;
  }
}
#toDoList {
  .scroll-content {
    top: 100px;
  }
  .wrap {
    width: 100%;
    position: absolute;
    z-index: 100;
  }
  .tab {
    display: flex;
    background-color: #fff;
    padding: 6px 8px 4px 6px;
    img {
      vertical-align: middle;
      width: 15px;
      height: 15px;
      margin-right: 10px;
      position: relative;
      top: -2px;
    }
    p {
      text-align: center;
      flex: auto;

      span {
        display: block;
        padding: 6px 0;
        background-color: #fff;
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: #656464;
      }

      span.selected {
        background: rgba(29, 63, 255, 0.2);
        border-radius: 20px;
        color: #1d3fff;
        font-family: PingFangSC-Semibold;
        font-weight: 700;
      }
    }
  }
  .search {
    background-color: #fff;
    padding: 8px 12px;
    position: relative;
    input {
      background: url("../../assets/contractStart/search1.png") 320px no-repeat;
      background-size: 16px 16px;
      background-color: rgba(239, 239, 239, 0.55);
      padding-left: 12px;
      border-radius: 4px;
      height: 36px;
      line-height: 36px;
      width: 100%;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #888c8f;
    }

    input::placeholder {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #888c8f;
      letter-spacing: 0;
    }

    input:focus {
      background: url("../../assets/contractStart/search2.png") 320px no-repeat;
      background-size: 16px 16px;
      background-color: rgba(239, 239, 239, 0.55);
      border: 2px solid #bcc6ff;
    }
  }
  .pay-content {
    padding: 8px 8px;
    .contract-item {
      background-color: #fff;
      margin-bottom: 8px;

      .header {
        position: relative;
        height: 44px;
          p img{
            width: 22px;
            height: 22px;
        }
        img {
          position: absolute;
          width: 30px;
          height: 30px;
          left: 10px;
          top: 8px;
        }
        h2 {
          position: absolute;
          top: 14px;
          left: 50px;
          font-family: PingFangSC-Semibold;
          font-size: 14px;
          color: #4b4a4b;
          letter-spacing: 0;
          margin: 0px;
        }
        p {
          img {
            position: relative;
            top: 0;
            left: 0;
          }
          position: absolute;
          right: 10px;
          top: 8px;
          // width: 57px;
          padding: 2px 4px;
          // height: 21px;
          // line-height: 19px;
          text-align: center;
          border-radius: 2px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
        }
      }

      .center {
        position: relative;
        height: 44px;
        background: rgba(239, 239, 239, 0.55);
        h2 {
          position: absolute;
          top: 13px;
          left: 15px;
          font-size: 14px;
          color: #4b4a4b;
          letter-spacing: 0;
          margin: 0px;
        }

        p {
          position: absolute;
          right: 20px;
          top: 13px;
          // width: 57px;
          padding: 2px 4px;
          // height: 21px;
          // line-height: 19px;
          text-align: center;
          border-radius: 2px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
        }
      }
    }
  }
  .content {
    background-color: #efefef;
  }
  .top-wrap {
    width: 100%;
    height: 100px;
    background-color: @headerColor;
    border-bottom-right-radius: 30%;
    border-bottom-left-radius: 30%;
    position: absolute;
    top: 0;
  }

  .top-wrap-white {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 100px;
  }

  .home-city {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .h-header .h-header-left .h-header-btn:first-of-type {
    padding-left: 0.2rem;
  }

  .functions {
    height: 108px;
    width: 96%;
    margin: -6px auto 10px;
    border-radius: 10px;
    background: #fff;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;

    &:before {
      content: "";
    }

    &:after {
      content: "";
    }

    .function-item {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      img {
        margin: 0;
      }
      div {
        margin-bottom: 14px;
        ont-family: PingFangSC-Regular;
        font-size: 13px;
        color: #3c3d48;
        letter-spacing: 0;
      }
    }
  }

  .h-header .h-header-center div {
    text-align: left !important;
  }

  .locations {
    height: 24px;
    width: 24px;
  }

  .hls-swipe {
    width: 100vw;
    img {
      width: 100vw;
      // height: 100%;
    }
    .hls-swipe-indicators {
      left: 54%;
      bottom: 20px;
      .hls-swipe-indicators-item {
        width: 10px;
        height: 2px;
        border-radius: 0;
      }
      .hls-swipe-indicators-item--active {
        background-color: #fff;
      }
    }
  }

  .center-pic {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0 1% 0 1%;
    .left-pic {
      width: 41.6%;
      margin-left: 4px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .right-pic {
      width: 55.2%;
      display: flex;
      flex-direction: column;
      margin-left: 4px;

      img {
        max-width: 100%;
        height: auto;
      }

      img:nth-of-type(2) {
        margin-top: 4px;
      }
    }
  }

  .guessing {
    display: flex;
    align-items: center;
    height: 22px;
    font-family: PingFangSC-Semibold;
    font-size: 16px;
    color: #00469c;
    font-weight: 600;
    letter-spacing: 0.57px;
    height: 40px;
    padding-left: 2%;
    span {
      padding-top: 2px;
      margin-left: 4px;
    }
    img {
      width: 14px;
      height: 14px;
    }
  }
  .guessing-wrap {
    position: relative;
    width: 96%;
    margin: 0 auto;
    .hls-list-item {
      border-radius: 10px;
      .contents {
        padding: 8px 6px 8px 0;
        .add-content {
          justify-content: flex-start;
        }
      }
    }
  }
  .item-pic {
    width: 110px;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      // height: 100%;
    }
  }

  .item-content {
    .top {
      font-family: PingFangSC-Semibold;
      font-size: 16px;
      color: #3b3b3b;
      letter-spacing: 0.54px;
      margin-top: 10px;
      font-weight: 600;
    }
    .hot {
      position: absolute;
      top: 0;
      right: 0;
      width: 45px;
    }
    .center {
      margin-top: 6px;
      display: flex;
      .firsts {
        width: 76px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(56, 63, 69, 0.6);
        letter-spacing: 0.5px;
      }

      .seconds {
        flex: 1;
        text-align: left;
        font-weight: 600;
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #4b4a4b;
        letter-spacing: 0.5px;
      }
    }
  }
}
</style>