<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
    <!-- 查询结果 -->
    <div style="position: relative;padding: 0 0 10px;">
      <el-table
        v-loading="listLoading" max-height="600" element-loading-text="正在查询中。。。" :data="list"
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark"
        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
      >
        <el-table-column align="center" width="100" label="ID" prop="id" fixed="left" />
        <el-table-column align="center" width="150" label="用户名称" prop="name" fixed="left" show-overflow-tooltip />
        <el-table-column align="center" min-width="120" label="入账用户ID" prop="buyerUserId">
          <template slot-scope="{ row }">
            <div>
              <span>{{ row.buyerUserId }}</span>
              <el-button
                v-if="row.buyerUserId"
                style="margin-left: 14px;" type="warning" size="mini"
                @click="$refs.DetailModal1 && $refs.DetailModal1.handleOpen(row)"
              >
                详情
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="来源类型" prop="sourceType">
          <template slot-scope="{ row }">
            <el-tag v-if="row.sourceType === 1" effect="plain">平台</el-tag>
            <el-tag v-else-if="row.sourceType === 2" effect="plain">商圈</el-tag>
            <el-tag v-else-if="row.sourceType === 3" effect="plain">用户</el-tag>
            <el-tag v-else-if="row.sourceType === 4" effect="plain">社区</el-tag>
            <el-tag v-else-if="row.sourceType === 5" effect="plain">商城</el-tag>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="120" label="来源ID" prop="sourceId" />
        <el-table-column align="center" width="150" label="来源订单编号" prop="orderFormid" />
        <el-table-column align="center" width="120" label="入账数量" prop="commissionNumber" />
        <el-table-column align="center" label="来源类型" prop="waterType">
          <template slot-scope="{ row }">
            <el-tag v-if="row.waterType === 1" effect="plain">订单退款</el-tag>
            <el-tag v-else-if="row.waterType === 2" effect="plain">升级活动</el-tag>
            <el-tag v-else-if="row.waterType === 3" effect="plain">社区活动</el-tag>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="150" label="有效时间" prop="effectiveTime" />
        <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
      </el-table>
      <div style="position: sticky;bottom: -5px;z-index: 1;padding: 10px;background-color: #eeeeee;">
        <el-pagination
          :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]"
          :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="(val) => ((listQuery.pageSize = val) && getList())"
          @current-change="(val) => ((listQuery.page = val) && getList())"
        />
      </div>

      <!-- 用户详情 -->
      <DetailModal1 ref="DetailModal1" @success="getList" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" @click="handleClose">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import DetailModal1 from '../../../member/memberList/components/UserDetails'
import { getWithdrawalCommissionList } from '@/api/withdrawal'

export default {
  name: 'OrderCommission',
  components: {
    DetailModal1
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '1000px',
        title: '查看订单分佣列表'
      },
      visible: false,
      formData: {
        orderFormid: ''
      },
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 20,
        orderFormid: ''
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      this.listQuery.orderFormid = params.orderFormid
      if (params.orderFormid) {
        // this.getInfo(params.orderFormid)
        this.getList()
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await xxx({ id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          xxx: res.data.xxx || ''
        })
      } finally {
        loading.close()
      }
    },
    async getList() {
      this.listLoading = true
      try {
        const res = await getWithdrawalCommissionList(this.listQuery)
        this.list = res.data.list
        this.total = res.data.total
      } finally {
        this.listLoading = false
      }
    }
  }
}
</script>
