<template>
  <div class="announce-manage card">
    <CustomForm
      :formConfig="queryformConfig"
      v-model="queryFormData"
      :isFlex="false"
      :isCustomButton="false"
      :attrs="{ 'label-position': 'left' }">
      <template slot="btn">
        <el-button type="success" @click="search">查询</el-button>
      </template>
    </CustomForm>
    <div class="table_wrap" style="padding: 0" v-loading="loading">
      <table-vue
        :sourceData="sourceData"
        ref="multipleTable"
        :tableColumns="usersTableColumns"
        @currentChange="currentTabFn"
        @selectionChange="selectionChange"></table-vue>
    </div>
    <div class="pagination">
      <el-pagination
        layout="sizes, total, prev, pager, next, jumper"
        background
        :total="paginationOptions.total"
        :page-size="paginationOptions.pageSize"
        :current-page="paginationOptions.currentPage"
        @size-change="sizeChange"
        @current-change="onCurrentChange"></el-pagination>
    </div>
  </div>
</template>
<script>
import axios from '../../common/api/axios'
import CustomForm from '@/common/components/base/CustomForm.vue'

import tableVue from '@/common/components/base/tableView.vue'
export default {
  name: 'system_users',
  components: {
    tableVue,
    CustomForm
  },
  data() {
    return {
      is_title: 1,
      ishowForm: false,
      select: '',
      sourceData: [],
      serviceNameList: [],
      formData: {},
      queryFormData: { timeRange: [] },
      queryformConfig: [
        {
          prop: 'batchId',
          type: 'input',
          name: '批次id'
        },
        {
          prop: 'timeRange',
          type: 'dateRange',
          name: '时间范围'
        },
        {
          prop: 'namespace',
          type: 'input',
          name: 'namespace'
        }
      ],

      dialogVisible: false,
      formId: null,

      paginationOptions: {
        pageSize: 100,
        currentPage: 1,
        total: 0
      },
      details: [],
      loading: false
    }
  },
  created() {
    this.getList()
  },
  computed: {
    usersTableColumns() {
      return [
        {
          label: '批次id',
          key: 'batchId'
        },
        {
          label: '订单数量',
          key: 'orderNum'
        },
        {
          label: '扣费金额',
          key: 'fee'
        },
        {
          label: 'namespace',
          key: 'namespace'
        },

        {
          label: '扣费时间',
          key: 'createTime'
        }
      ]
    },

    funcRoleList() {
      if (this.roleList.length > 0) {
        return this.roleList.filter((item) => item.type === 'FUNCTION_ROLE')
      }
      return []
    },
    dataRoleList() {
      if (this.roleList.length > 0) {
        return this.roleList.filter((item) => item.type === 'DATA_ROLE')
      }
      return []
    }
  },
  watch: {
    formData: {
      handler(newValue) {
        // console.log(368, newValue)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    sizeChange(value) {
      this.paginationOptions.pageSize = value
      this.getList()
    },
    onCurrentChange(value) {
      this.paginationOptions.currentPage = value
      this.getList()
    },
    selectionChange(selection) {
      if (selection.length > 0) {
        this.select = selection
      }
    },

    setempNo(id) {
      for (const iterator of this.employee) {
        if (iterator.id === id) {
          this.addcurrencyform.empNumber = iterator.empNumber
          break
        }
      }
    },
    search() {
      this.getList()
    },
    currentTabFn(val) {
      if (val.row) {
        this.formId = val.row.id
      }
    },

    // 查询
    getList() {
      this.loading = true
      const { pageSize, currentPage } = this.paginationOptions
      const timeRange = this.queryFormData.timeRange
      if (timeRange && timeRange.length) {
        this.queryFormData.startTime = timeRange[0]
        this.queryFormData.endTime = timeRange[1]
      } else {
        this.queryFormData.startTime = ''
        this.queryFormData.endTime = ''
      }
      axios
        .post('operationFeeDetails/list_page', {
          pageSize,
          currentPage,
          ...this.queryFormData
        })
        .then((res) => {
          this.loading = false
          if (res.code === 200) {
            this.sourceData = res.data.records
            this.paginationOptions.total = res.data.total
          } else {
            this.$alert(res.message, '错误提示', {
              dangerouslyUseHTMLString: true
            })
          }
        })
    }
  }
}
</script>
<style scoped>
.wraper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.table_wrap {
  flex: 1;
}

.circle {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  margin-right: 5px;
}

.announce-manage {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 20px 0;
  overflow: hidden;
}
</style>
