<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="70%"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    title="佣金明细"
    @update:visible="updateVisible"
  >
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      cache-key="userCmmssn"
    >
    </ele-pro-table>
  </ele-modal>
</template>

<script>
  import { pageCmmssn } from '@/api/user/cmmssn';
  export default {
    components: {},
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object
    },
    data() {
      const defaultForm = {
        id: null
      };
      return {
        defaultForm,
        // 表单数据
        form: { ...defaultForm },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        // 表格列配置
        columns: [
          {
            prop: 'fromCn',
            label: '佣金来源',
            showOverflowTooltip: true,
            slot: 'username',
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'typeCn',
            label: '类型',
            showOverflowTooltip: true,
            minWidth: 80,
            align: 'center'
          },
          {
            prop: 'money',
            label: '金额',
            showOverflowTooltip: true,
            minWidth: 80,
            align: 'center'
          },
          {
            prop: 'createTime',
            label: '时间',
            align: 'center',
            minWidth: 100,
            resizable: false,
            showOverflowTooltip: true
          }
        ]
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    methods: {
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        where.userId = this.form.id;
        return pageCmmssn({ ...where, ...order, page, limit });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      }
    },
    watch: {
      visible(visible) {
        if (visible) {
          if (this.data) {
            console.log(this.data);
            this.$util.assignObject(this.form, {
              ...this.data
            });
            this.isUpdate = true;
            this.reload();
          } else {
            this.isUpdate = false;
          }
        } else {
          this.form = { ...this.defaultForm };
        }
      }
    }
  };
</script>
