<template>
  <el-dialog
    :visible.sync="visible"
    title="积分记录"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form :model="dataForm" ref="dataForm" :label-width="$i18n.locale === 'en-US' ? '100px' : '80px'">
      <el-form-item label="积分行为">
        <el-select v-model="dataForm.behaviorCode" placeholder="全部" clearable @change="queryByBehaviorCode">
            <el-option
              v-for="item in behaviorTypeList"
              :key="item.dictValue"
              :label="item.dictName"
              :value="item.dictValue">
            </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table  v-loading="dataListLoading" :data="dataList" border style="width: 100%;">
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="operationDesc" label="操作描述" header-align="center" align="center"></el-table-column>
      <el-table-column prop="behaviorCode" label="积分行为" header-align="center" align="center" :formatter="showBehaviorCodeFormatter"></el-table-column>
      <el-table-column prop="operationTime" label="操作时间" header-align="center" align="center"></el-table-column>
      <el-table-column prop="points" label="积分变化" header-align="center" align="center"></el-table-column>
      <el-table-column prop="operationType" label="操作类型" header-align="center" align="center" :formatter="showOperationTypeFormatter"></el-table-column>
      <el-table-column prop="lavePoints" label="剩余积分" header-align="center" align="center"></el-table-column>
    </el-table>
    <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      >
      </el-pagination>
  </el-dialog>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/points/pointslogs/page',
        getDataListIsPage: true
      },
      visible: false,
      dataForm: {
        volunteerId: '',
        behaviorCode: ''
      },
      behaviorTypeList: [],
      operationTypeList: []
    }
  },
  created () {
    this.getOperationTypeList()
    this.getBehaviorTypeList()
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.volunteerId) {
          this.getDataList()
        }
      })
      this.dataForm.behaviorCode = ''
    },
    // 获取下拉框值
    getOperationTypeList () {
      this.$http
        .get(`/sys/dict/listSimple/pointsrule_operation_type`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.operationTypeList = res.data
        })
        .catch(() => {})
    },
    showOperationTypeFormatter: function (row, column) {
      if (row.operationType) {
        let dict = this.operationTypeList.filter(item => item.dictValue === row.operationType)[0]
        if (dict) {
          return dict.dictName
        }
      }
      return ''
    },
    getBehaviorTypeList () {
      this.$http
        .get(`/sys/dict/listSimple/pointsrule_behavior`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.behaviorTypeList = res.data
        })
        .catch(() => {})
    },
    showBehaviorCodeFormatter: function (row, column) {
      if (row.behaviorCode) {
        let dict = this.behaviorTypeList.filter(item => item.dictValue === row.behaviorCode)[0]
        if (dict) {
          return dict.dictName
        }
      }
      return ''
    },
    queryByBehaviorCode () {
      this.getDataList()
    }
  }
}
</script>
