<template>
  <div class="service">
    <div class="header-tab">
      <span :class="[currIndex === 1 ? 'active' : '']" @click="changeTab(1)">办事指南</span>
      <span :class="[currIndex === 0 ? 'active' : '']" @click="changeTab(0)">网上办事</span>
    </div>
    <div class="service-list">
      <div class="service-item" hover-class="bg-hover" @click="toDetail('./serviceNotice?id=' + item.id)" v-for="(item, index) in list" :key="index">
        <div class="service-item__wrapper">
          <h2>{{ item.processName }}</h2>
          <i class="iconfont">&#xe6ae;</i>
        </div>
      </div>
    </div>
    <u-loadmore :status="loadingStatus" :margin-top="30" :margin-bottom="30" color="#999" font-size="26"/>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        id: '',
        currIndex: 1,
        title: '',
        subTitle: '',
        current: 0,
        list: [],
        loadingStatus: 'loadmore'
      }
    },

    onLoad (query) {
      this.id = query.id
      this.getList()
      uni.setNavigationBarTitle({
        title: query.title
      })
    },

    methods: {
      changeTab (index) {
        this.currIndex = index
        this.list = []

        this.getList()
      },

      getList() {
        this.loadingStatus = 'loading'
        this.$instance.post(`/app/approval-process-def/list-xcx?processType=${this.currIndex === 0 ? 0 : 2}`, null, {
          params: {
            size: 10000,
            classificationId: this.id
          },
          withoutToken: true
        }).then(res => {
          if (res.code === 0) {
            if (!res.data.records.length) {
              this.loadingStatus = 'nomore'
              return false
            }

            const data = res.data.records.map(item => {
              return item
            })
            if (this.current === 0) this.list = []

            this.list.push(...data)
            this.current = this.current + 1
            this.loadingStatus = 'loadmore'

            if (this.list.length < 10) {
              this.loadingStatus = 'nomore'
            }
          }
        })
      },

      toDetail (url) {
        // if (!this.info.phone) {
        //   this.$dialog.confirm({
        //     confirmText: '去绑定',
        //     content: '您还未绑定手机号'
        //   }).then(() => {
        //     console.log(456)
        //     this.$linkTo('/pages/phone/bingPhoneNumber?from=auth')
        //   })

        //   return false
        // }

        // if (this.info.status !== '2') {
        //   this.$dialog.confirm({
        //     confirmText: '去认证',
        //     content: '您还未进行实名认证'
        //   }).then(() => {
        //     this.$linkTo('/pages/auth/authenticationInfo')
        //   })

        //   return false
        // }

        this.$linkTo(url)
      },

      getCheckInfo() {
        this.$instance.post(`/app/appwechatuser/check`).then(res => {
          if (res.code === 0) {
            this.info = res.data
          }
        })
      }
    },

    onReachBottom() {
      this.getList()
    }
  }
</script>

<style scoped lang="scss">
  .service {
    padding-bottom: 40px;
  }

  .header-tab {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    align-items: center;
    height: 106px;
    line-height: 106px;
    background: #4181FF;

    span {
      position: relative;
      flex: 1;
      text-align: center;
      font-size: 28px;
      color: rgba(#ffffff, 0.75);

      &.active {
        color: #fff;

        &:after {
          position: absolute;
          bottom: 14px;
          left: 50%;
          width: 48px;
          height: 4px;
          background: #FFFFFF;
          transform: translateX(-50%);
          content: ' ';
        }
      }
    }
  }

  .service-list {
    padding-top: 106px;
    background-color: #fff;

    .service-item {
      height: 116px;
      padding: 0 32px;

      &:last-child {
        .service-item__wrapper {
          border-bottom: none;
        }
      }

      .service-item__wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 116px;
        border-bottom: 1px solid #D8DDE6;


        h2 {
          color: #333333;
          font-size: 32px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        i {
          position: relative;
          right: -4px;
          font-size: 36px;
          color: #C9C9CD;
        }
      }
    }
  }
</style>
