<template>
  <div class="wrapper">
    <div class="fixed">
      <div class="tab-list">
        <div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)" :style="tabIndex == index ? 'color:#fff;' : ''">{{ item }}
          <span class="active-line" v-if="tabIndex == index"></span>
        </div>
      </div>
      <div class="select-content">
        <div class="select" @click="showTypeSelect=true">{{integralRuleId ? '已选择' : '全部类型'}}<u-icon name="arrow-down" color="#333" size="24" style="margin-left: 4px" ></u-icon></div>
        <div class="search">
          <u-search placeholder="请输入搜索内容" v-model="partyName" :show-action="false" @search="getListInit" @clear="partyName='', getListInit()" bg-color="#ffffff"></u-search>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
        <div class="top">
          <p class="title">{{item.description}}</p>
          <div class="flex">
            <div class="rule-name">{{item.integralRuleName}}</div>
            <p>{{item.createTime.substring(0, 16)}}</p>
          </div>
        </div>
        <div class="bottom" :class="`status`+item.auditStatus">
          <span class="tips"></span>{{ $dict.getLabel('integralDeclareStatus', item.auditStatus) }}
          <span v-if="item.auditStatus == 1">+{{item.auditIntegral}}分</span>
        </div>
      </div>
      <AiEmpty v-if="!list.length"/>
    </div>
    <u-select v-model="showTypeSelect" :list="typeList"  @confirm="confirmType" value-name="id" label-name="eventName"></u-select>
  </div>
</template>
<script>
import {mapState} from 'vuex';

export default {
  name: "list",
  appName: "积分申请",
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      tabList: ['全部', '待审核', '已审核'],
      tabIndex: 0,
      partyName: '',
      integralRuleId: '',
      integralRuleName: '',
      typeList: [],
      showTypeSelect: false,
      current: 1,
      pages: 2,
      list: []
    };
  },
  onLoad() {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#E76056",
    })
    this.getTypeList()
    this.$dict.load("integralDeclareStatus").then(() => {
      this.getList()
    })
  },
  methods: {
    getListInit() {
      this.current = 1
      this.pages = 2
      this.list = []
      this.getList()
    },
    getList() {
      if (this.current > this.pages) return;
      this.$instance.post(`/app/apppartyintegraldeclare/list`, null, {
        params: {
          current: this.current,
          partyName: this.partyName,
          partyId: this.user.partyId,
          auditType: ['', 0, 1][this.tabIndex],
          integralRuleId: this.integralRuleId
        }
      }).then((res) => {
        if (res.code == 0) {
          const list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
          this.pages = Math.ceil(res.data.total / 10)
          this.list = list
        }
      });
    },
    tabClick(index) {
      this.tabIndex = index
      this.getListInit()
    },
    confirmType(e) {
      this.integralRuleId = e[0].value
      this.integralRuleName = e[0].label
      this.getListInit()
    },
    toDetail(row) {
      uni.navigateTo({ url: `./detail?id=${row.id}` })
    },
    getTypeList() {
      this.$instance.post(`/app/apppartyintegralrule/list?classify=0&size=1000`).then(res => {
        if (res.code == 0) {
          this.typeList = res.data.records
          this.typeList.unshift({
            eventName: '全部类型',
            id: ''
          })
        }
      })
    },
  },
  onReachBottom() {
    this.current ++
    this.getList()
  }
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";
.fixed{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  .tab-list{
    width: 100%;
    background-color: #E76056;
    .tab-item{
      padding: 36px 16px;
      display: inline-block;
      font-size: 40px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #F8D7D4;
      line-height: 56px;
      position: relative;
      .active-line{
        position: absolute;
        bottom: 16px;
        left: 50%;
        margin-left: -24px;
        width: 48px;
        height: 6px;
        background: #fff;
        border-radius: 4px;
      }
    }
  }
  .select-content{
    display: flex;
    padding: 48px 32px 32px;
    background-color: #f3f6f9;
    .select{
      width: calc(100% - 460px);
      font-size: 38px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333;
      line-height: 52px;
    }
    .search{
      width: 460px;
    }
  }
}
.list{
  padding-top: 268px;
  margin: 0 32px;
  .item{
    width: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
    margin-bottom: 24px;
    .top{
      padding: 32px;
      .title{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; // 控制多行的行数
        -webkit-box-orient: vertical;
        font-size: 36px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
        line-height: 50px;
        margin-bottom: 24px;
      }
      .flex{
        display: flex;
        justify-content: space-between;
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999;
        line-height: 40px;
        div{
          background: #EEE;
          border-radius: 24px;
          padding: 4px 16px;
          font-size: 28px;
          color: #999;
        }
        .rule-name{
          max-width: 300rpx;
        }
      }
    }
    .bottom{
      border-top: 1px solid #ddd;
      padding: 32px;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      line-height: 40px;
      .tips{
        display: inline-block;
        margin-right: 8px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
    .status0{
      color: #FF883C;
      .tips{
        background: #FF883C;
      }
    }
    .status1{
      color: #42D784;
      .tips{
        background: #42D784;
      }
    }
    .status2{
      color: #f46;
      .tips{
        background: #f46;
      }
    }
  }
}
</style>
