<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
    <div>
      <el-table
        v-loading="!formData.relatedCommissionLogsList || !formData.relatedCommissionLogsList.length"
        height="60vh" element-loading-text="暂无佣金记录数据" :data="formData.relatedCommissionLogsList"
        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
      >
        <el-table-column align="center" min-width="80" prop="recordId" label="ID" 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="formData.relatedBuyerUsers.find((item) => item.buyerUserId === row.buyerUserId)"
                style="margin-left: 14px;"
                type="warning" size="mini"
                @click="handleOpenUserDetails(row.buyerUserId)"
              >
                详情
              </el-button>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" width="100" label="来源用户头像" prop="imgOne">
          <template slot-scope="{ row }">
          <el-image
          v-if="row.imgOne" lazy :src="common.seamingImgUrl(row.imgOne)"
          style="width:40px;height:40px;" fit="cover"
          :preview-src-list="[ common.seamingImgUrl(row.imgOne) ]"
          />
          <span v-else>--</span>
          </template>
          </el-table-column>
          <el-table-column align="center" min-width="150" prop="userNameOne" label="来源用户名称" show-overflow-tooltip /> -->
        <el-table-column align="center" min-width="120" label="目标用户ID" prop="acquirerId">
          <template slot-scope="{ row }">
            <div>
              <span>{{ row.acquirerId }}</span>
              <el-button
                v-if="formData.relatedBuyerUsers.find((item) => item.buyerUserId === row.acquirerId)"
                style="margin-left: 14px;"
                type="warning" size="mini"
                @click="handleOpenUserDetails(row.acquirerId)"
              >
                详情
              </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-if="row.type === 6">退款</span>
            <span v-else-if="row.type === 7">提现</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="100" label="分配佣金" prop="amount">
          <template slot-scope="{ row }">
            <span>
              {{ [5, 7].includes(row.type) ? '-' : [1, 2, 3, 4, 6].includes(row.type) ? '+' : '' }}
              {{ row.amount }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="150" prop="orderSn" label="订单编号" show-overflow-tooltip />
        <el-table-column align="center" min-width="100" prop="totalAmount" 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="100" label="佣金比例" prop="proportion">
          <template slot-scope="{ row }">
            <span>
              {{ typeof row.proportion === 'number' ? `${row.proportion * 100}%` : '--' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="150" prop="transactionSn" 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: 'RelatedCommissionLogs',
  components: {
    UserDetails
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '920px',
        title: '佣金记录'
      },
      visible: false,
      formData: {
        relatedCommissionLogsList: [],
        relatedBuyerUsers: []
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = [], { userList = [] }) {
      this.formData.relatedCommissionLogsList = 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>
