<template>
  <ai-detail class="family_detail">
    <template slot="title">
      <ai-title title="余额明细" :isShowBack="true" :isShowBottomBorder="true" @onBackClick="$emit('goBack')" ></ai-title>
    </template>
    <template slot="content">
      <div class="detail-info">
        <div class="detail-info__item">
          <h2>户主</h2>
          <span>{{ detailInfo.name }}</span>
        </div>
        <div class="detail-info__item">
          <h2>累计积分</h2>
          <span style="color: #2266FF;">{{ detailInfo.familyIntegral || 0 }}</span>
        </div>
        <div class="detail-info__item">
          <h2>剩余积分</h2>
          <span style="color: #2266FF;">{{ detailInfo.familySurplusIntegral || 0 }}</span>
        </div>
        <div class="detail-info__item">
          <h2>已消费</h2>
          <span>{{ detailInfo.familyUsedIntegral || 0 }}</span>
        </div>
      </div>
      <ai-card title="余额变动明细">
        <template slot="right">
          <ai-download
            :instance="instance"
            url="/app/appvillagerintegraldetail/export"
            :disabled="!Boolean(tableData.length)"
            :params="{familyName:detailInfo.name,doType:doType}"
            fileName="余额变动明细">
            <span class="iconfont iconExported">导出</span>
          </ai-download>
        </template>
        <template #content>
          <el-select v-model="doType" placeholder="请选择类型" size='small' clearable  @change="page.current=1,getList()">
            <el-option
              v-for="(item,i) in dict.getDict('integralDetailType')"
              :label="item.dictName"
              :key="i"
              :value="item.dictValue">
            </el-option>
          </el-select>
          <ai-table
            style="margin-top: 16px;"
            :tableData="tableData"
            :col-configs="colConfigs"
            :total="page.total"
            :border="true"
            :stripe="false"
            :current.sync="page.current"
            :size.sync="page.size"
            @getList="getList">
          </ai-table>
        </template>
      </ai-card>
    </template>
  </ai-detail>
</template>

<script>
  export default {
    name: 'balance',

    props: {
      detailInfo: {
        type: Object,
        require: true
      },
      instance: Function,
      dict: Object
    },

    data () {
      return {
        page: {
          current: 1,
          size: 10,
          total: 0
        },
        doType: '',
        tableData: []
      }
    },

    created () {
      this.dict.load('integralDetailType')
      this.getList()
    },

    computed: {
      colConfigs () {
        const _this = this
        return [
          {
            prop: 'doTime',
            align: 'center',
            label: '时间',
            align:'left'
          },
          {
            prop: 'bizType',
            align: 'center',
            label: '类型',
            render (h, {row}) {
              return h('span',{}, _this.dict.getLabel('integralDetailType', row.bizType))
            }
          },
          {
            prop: 'changeIntegral',
            align: 'center',
            label: '变动积分',
            formart: v => v > 0 ? `+${v}` : v
          },
          {
            prop: 'nowIntegral',
            align: 'center',
            label: '剩余积分'
          },
          {
            prop: 'description',
            align: 'center',
            label: '事件类型',
            align:'left'
          }
        ]
      }
    },

    methods: {
      getList () {
        this.instance.post('/app/appvillagerintegraldetail/list', null, {
          params: {                       
            ...this.page,
            familyId:this.detailInfo.id,
            bizType:this.doType
          }
        }).then(res => {
          if (res.code === 0) {
            this.tableData = res.data.records
            this.page.total = res.data.total
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .family_detail{
    height: 100%;
    background-color: #fff;

    ::v-deep .ai-card__body {
      padding: 12px 16px 20px!important;
    }


    .detail-info {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .detail-info__item {
        flex: 1;
        height: 96px;
        margin-right: 20px;
        padding: 16px 24px;
        background: #FFFFFF;
        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
        border-radius: 4px;

        &:last-child {
          margin-right: 0;
        }

        h2 {
          margin-bottom: 8px;
          color: #888888;
          font-size: 16px;
          font-weight: bold;
        }

        span {
          display: block;
          line-height: 32px;
          font-size: 24px;
          font-weight: bold;
          color: #222;
        }
      }
    }

    .iconExported{
      color:#5088FF;
      font-size: 12px;
      cursor: pointer;
    }
    .info{
      padding: 16px 0 16px 0;
    }
    .do_type{
      height: 56px;
    }
    .fs-14{
      ::v-deep .el-table--small{
        font-size: 14px!important;
      }
    }
  }
</style>