<template>
  <div class="progressList">
    <div class="search">
      <div class="search-container">
        <i class="iconfont">&#xe715;</i>
        <input placeholder="请输入需要搜索的内容" placeholder-style="color:rgba(255,255,255,0.5)" v-model="param" @confirm="reset"
               :focus="focus" confirm-type="search">
      </div>
    </div>
    <div class="progressList-list">
      <div class="item" v-for="(item, index) in list" :key="index" hover-class="bg-hover"
           @click="$linkTo('./progressDetail?id=' + item.id)">
        <div class="top">
          <h2>{{ item.processDefName }}</h2>
          <!-- <AiIcon class="progressList-icon" :icon="iconList[item.approvalStatus]" size="56"></AiIcon> -->
          <div class="item-info">
            <span>申请类型</span>
            <div>{{ item.classificationName }}</div>
          </div>
          <div class="item-info">
            <span>申请日期</span>
            <div>{{ item.createTime }}</div>
          </div>
          <div class="item-info">
            <span>完成日期</span>
            <div>{{ item.overTime || '-' }}</div>
          </div>
        </div>
        <div class="bottom">
          <em :style="{background: mapColor(item.approvalStatus)}"></em>
          <span
              :style="{color: mapColor(item.approvalStatus)}">{{
              $dict.getLabel('approvalStatus', item.approvalStatus)
            }}</span>
        </div>
      </div>
      <AiEmpty v-if="!list.length"></AiEmpty>

      <!-- <u-loadmore :status="loadingStatus" :margin-top="30" :margin-bottom="30" color="#999" font-size="26"/> -->
    </div>
  </div>
</template>

<script>

export default {
  name: "AppProgress",
  appName: "办事进度",
  data() {
    return {
      id: '',
      title: '',
      subTitle: '',
      current: 0,
      focus: false,
      param: '',
      list: [],
      loadingStatus: 'loadmore',
      iconList: {
        '0': 'icon1',
        '1': 'icon2',
        '2': 'icon3'
      }
    }
  },

  onLoad(query) {
    if (query.focus === '1') {
      this.focus = true
    }
    this.id = query.id
    this.title = query.title
    this.subTitle = query.subTitle
    this.$dict.load(['approvalStatus']).then(() => {
      this.getList()
    })
  },

  methods: {
    reset() {
      this.current = 0
      this.loadingStatus = 'loading'

      this.$nextTick(() => {
        this.getList()
      })
    },

    mapColor(status) {
      return {
        '0': '#FF883C',
        '1': '#42D784',
        '2': '#FF4466'
      }[status]
    },

    getList() {
      if (this.loadingStatus === 'nomore') return

      this.loadingStatus = 'loading'
      this.$instance.post(`/app/approv-alapply-info/xcx-list`, null, {
        params: {
          current: this.current + 1,
          size: 10,
          param: this.param
        }
      }).then(res => {
        if (res.code === 0) {
          if (!res.data.records.length) {
            if (this.current === 0) this.list = []
            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'
          }
        }
      })
    }
  },

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

<style scoped lang="scss">
div, label, i, view {
  box-sizing: border-box;
}

.progressList {
  padding-bottom: 40px;
}

.search {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  height: 104px;
  padding: 20px 32px;
  box-sizing: border-box;
  background: #4181FF;

  .search-container {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 032px;
    border-radius: 32px;
    background: rgba(0, 0, 0, .2);

    i {
      padding-right: 12px;
      font-size: 32px;
      color: rgba(255, 255, 255, .5);
    }

    input {
      flex: 1;
      font-size: 26px;
      color: #ffffff;
    }
  }
}

.progressList-list {
  padding-top: 104px;

  .item {
    position: relative;
    width: 686px;
    margin: 24px auto 0;
    background: #FFFFFF;
    border-radius: 16px;

    .top {
      box-sizing: border-box;
      padding: 32px;
      border-bottom: 1px solid #DDDDDD;

      .progressList-icon {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 56px;
      }

      .item-info {
        display: flex;
        align-items: center;
        line-height: 42px;
        margin-bottom: 8px;

        span {
          color: #999999;
          font-size: 26px;
          line-height: 36px;
          margin-right: 32px;
        }

        div {
          color: #343D65;
          font-size: 30px;
        }
      }

      h2 {
        margin-bottom: 24px;
        padding-right: 56px;
        color: #333333;
        font-size: 32px;
        text-align: justify;
        font-weight: 600;
      }
    }

    .bottom {
      height: 104px;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      padding-left: 32px;

      & > em {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #FF883C;
        margin-right: 8px;
      }

      & > span {
        font-size: 28px;
        font-weight: 400;
        color: #FF883C;
      }
    }
  }
}
</style>
