<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
    <div>
      <el-table
        v-loading="!formData.relatedPresenterVoucherLogsList || !formData.relatedPresenterVoucherLogsList.length"
        height="60vh" element-loading-text="暂无佣金记录数据" :data="formData.relatedPresenterVoucherLogsList"
        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
      >
        <el-table-column align="center" min-width="120" label="支出方用户ID" prop="holdId">
          <template slot-scope="{ row }">
            <div>
              <span>{{ row.holdId }}</span>
              <el-button
                v-if="formData.relatedBuyerUsers.find((item) => item.buyerUserId === row.holdId)"
                style="margin-left: 14px;"
                type="warning" size="mini"
                @click="handleOpenUserDetails(row.holdId)"
              >
                详情
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="120" label="收入方用户ID" prop="userId">
          <template slot-scope="{ row }">
            <div>
              <span>{{ row.userId }}</span>
              <el-button
                v-if="formData.relatedBuyerUsers.find((item) => item.buyerUserId === row.userId)"
                style="margin-left: 14px;"
                type="warning" size="mini"
                @click="handleOpenUserDetails(row.userId)"
              >
                详情
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="100" label="用户类型" prop="type">
          <template slot-scope="{ row }">
            <span v-if="row.type === 1">总部</span>
            <span v-else-if="row.type === 2">分公司</span>
            <span v-else-if="row.type === 3">策划师</span>
            <span v-else-if="row.type === 4">商家</span>
            <span v-else-if="row.type === 5">用户</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="150" label="代金券流水类型" prop="type">
          <template slot-scope="{ row }">
            <span v-if="row.type === 1">充值</span>
            <span v-else-if="row.type === 2">转赠</span>
            <span v-else-if="row.type === 3">签到</span>
            <span v-else-if="row.type === 4">抵扣</span>
            <span v-else-if="row.type === 5">核销</span>
            <span v-else-if="row.type === 6">抽奖</span>
            <span v-else-if="row.type === 7">退款</span>
            <span v-else-if="row.type === 8">充值赠送</span>
            <span v-else-if="row.type === 9">下单</span>
            <span v-else-if="row.type === 10">社区订单</span>
            <span v-else-if="row.type === 11">活动</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="120" prop="number" label="发送代金券数量" show-overflow-tooltip />
        <el-table-column align="center" min-width="150" prop="createTime" label="发放时间" show-overflow-tooltip />
        <el-table-column align="center" min-width="200" prop="orderSn" label="订单编号/转赠流水号" show-overflow-tooltip />
      </el-table>

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

<script>
import UserDetails from './UserDetails'

export default {
  name: 'RelatedVoucherLogs',
  components: {
    UserDetails
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '920px',
        title: '代金券记录'
      },
      visible: false,
      formData: {
        relatedPresenterVoucherLogsList: [],
        relatedBuyerUsers: []
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = [], { userList = [] }) {
      this.formData.relatedPresenterVoucherLogsList = params
      this.formData.relatedBuyerUsers = userList
      this.visible = true
      this.$forceUpdate()
      // this.$refs.formData && this.$refs.formData.resetFields()
    },
    handleOpenUserDetails(buyerUserId) {
      const userMsg = this.formData.relatedBuyerUsers.find((item) => item.buyerUserId === buyerUserId)
      if (userMsg) {
        this.$refs.UserDetails && this.$refs.UserDetails.handleOpen(userMsg)
      }
    },
    handleSubmit() {
    }
  }
}
</script>

<style lang="scss" scoped>
.small-padding {
	.cell {
		padding-left: 5px;
		padding-right: 5px;
	}
}

.fixed-width {
	.el-button--mini {
		padding: 7px 10px;
	}
}
</style>
