<template>

  <div v-loading="loading">
    <div class="mBottom20 search-top">
      <div class="left-search-wrap">
        <el-select class="width160" v-model="processStatus" placeholder="处理状态" @change="handleSearch">
          <el-option v-for="item in statusList" :key="item.code" :label="item.name" :value="item.code"></el-option>
        </el-select>
        <el-date-picker style="width: 256px;" v-model="dateDefault" type="daterange" range-separator="~"
          start-placeholder="创建开始日期" end-placeholder="创建结束日期" :default-time="['00:00:00', '23:59:59']"
          :picker-options="pickerOptions()" value-format="yyyy-MM-dd" @change="handleSearch" :clearable="false"> </el-date-picker>
      </div>
    </div>
    <div class="table-content">
      <el-table :data="memberData" tooltip-effect="dark" ref="multipleTable" :max-height="height">
        <el-table-column prop="createTime" label="时间" min-width="130px">
          <template slot-scope="scope">
            <div class="line-20">{{ scope.row.createTime | formatYMD }}</div>
            <div class="line-20">{{ scope.row.createTime | formatHMS }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="processStatus" label="处理状态" min-width="110px">
          <template slot-scope="scope">
            <span :class="statusList[scope.row.processStatus].icon"></span>
            {{ statusList[scope.row.processStatus].name }}
          </template>
        </el-table-column>
        <el-table-column prop="integralVal" label="预扣除积分值" min-width="128px"></el-table-column>
        <el-table-column prop="integralCode" label="事由" min-width="100px"></el-table-column>
        <el-table-column prop="sourceType" label="预扣截止时间" min-width="138px">
          <template slot="header">
            预扣截止时间
            <el-tooltip effect="dark" placement="top">
              <div slot="content">
                <p>预扣积分到达“截止日期”，若还未确认扣除，系统将自动将这笔积分转为“可用”状态（无截止日期的预扣积分，系统不会主动变更积分状态）</p>
              </div>
              <i class="iconfont icon-QuestionCircleOutlined icon" style="font-size: 14px;"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <div v-if="scope.row.limitTime">
              <div class="line-20">{{ scope.row.limitTime | formatYMD }}</div>
              <div class="line-20">{{ scope.row.limitTime | formatHMS }}</div>
            </div>
            <div v-else>无截止时间</div>
          </template>
        </el-table-column>
        <el-table-column prop="relationId" label="关联id" min-width="160px" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="openStoreName" label="积分成本主体" min-width="170px" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="intervalEffect" label="备注信息" min-width="140px" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div class="page mTop20">
        <dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next" :total="page.totalCount">
        </dm-pagination>
      </div>
    </div>
  </div>

</template>
<script>
import mixin from './integralMixin';
import { doFetch } from "../../components/axios/api";
import url from "../../components/axios/url";
import {
  checkFalse,
  checkStatus
} from "../../../static/js/checkStatus";
export default {
  name: 'enterpriseIntegralDataPage',
  components: { },
  mixins: [mixin],
  props: {
    memberId:{
      type: String,
      default() {
        return '';
      }
    },
    isEnterprise: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
        height: document.body.clientHeight - 262,
        memberData: [],
        page: {
          currentPage: 1,
          pageSize: 20,
          totalCount: 0
        },
        statusList:[
        {code: -1 ,name:'全部处理状态'},
         {code: 1 ,name:'待处理',icon:'dm-status--warning'},
          {code: 2 ,name:'扣除成功',icon:'dm-status--success'},
           {code: 3 ,name:'到时失效',icon:'dm-status--error'},
            {code: 4 ,name:'取消操作',icon:'dm-status--info'},
        ],
        processStatus: -1,
        loading: false
    };
  },
  methods: {
    handleSearch() {
      this.page.currentPage = 1;
      this.getIntegralDataPage();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getIntegralDataPage();
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getIntegralDataPage();
    },
    getIntegralDataPage() {
      this.loading = true;
      if(!this.dateDefault) this.dateDefault = ['', ''];
      doFetch(url.enterpriseIntegralWithholdData, {
        memberId: this.memberId,
        pageSize: this.page.pageSize,
        currentPage: this.page.currentPage,
        processStatus: this.processStatus,
        beginTime: this.dateDefault[0],
        endTime: this.dateDefault[1],
      })
        .then(res => {
          this.loading = false;
          if (res.data.errorCode === 0) {
            this.memberData = res.data.result.page.result || [];
            this.page.currentPage = res.data.result.page.currentPage;
            this.page.totalCount = res.data.result.page.totalCount;
          } else {
            checkFalse(res.data.message);
          }
        })
        .catch(err => {
          this.loading = false;
          checkStatus(err);
        });
    },
  },
  mounted() {
    this.setDefalutTime()
    if(this.memberId){
        this.getIntegralDataPage()
    }
  },
  destroyed() {
  }
};
</script>
<style lang="scss" scoped>
.table-content{
  /deep/ .el-table {
    th > .cell:first-child,
  td > .cell:first-child {
    padding-left: 10px;
  }
}
}

.width160{
    width: 160px;
}
.search-top{  .left-search-wrap{
    display: flex;
    align-items:center;
    gap:10px;
    
  }
}
.line-20{
    line-height: 20px;
}
.integral-box{
    display: flex;
    align-items: center;
    // justify-content: flex-start;
    // height: 40px;
    // position: relative;
}
.text-ellipsis-2 {
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
</style>
