<template>
  <div class="settle-dialog">
    <el-dialog :visible.sync="showSettleDialog" title="佣金结算" @close="onCancel">
      <el-form :model="form">
        <el-form-item label="结算订单">
          <div>{{settleBaseInfo.settleCount}}（笔）</div>
        </el-form-item>
        <el-form-item label="结算金额">
          <div>￥ {{ settleBaseInfo.settleTotalPrice }}</div>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-radio-group v-model="form.payWay">
            <el-radio :label="1">线下结算</el-radio>
            <el-radio :label="2">企业钱包结算</el-radio>
            <el-radio :label="3">第三方支付结算</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onCancel">取 消</el-button>
        <el-button type="primary" @click="confirmSettle" :disabled="settleBaseInfo.settleCount === 0">确认结算</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSettleDocInfoApi, confirmSettleApi  } from '@/api/distribution';

export default {
  props: ['showSettleDialog', 'checkList'],

  data() {
    return {
      form: {
        payWay: null
      },
      settleBillAttachmentsUrl: '',
      checkIds: [],
      settleBaseInfo: {}
    };
  },

  watch: {
    showSettleDialog(newVal) {
      if (!newVal) {
        this.checkIds = [];
        return;
      };

      this.checkList.length ? this.checkList.forEach(el => {
        this.checkIds.push(el.id);
      }) : null;
      this.getSettleInfo();
    }
  },

  methods: {
    getSettleInfo() {
      let params = {
        settleIdList: this.checkIds
      };

      getSettleDocInfoApi(params).then(res => {
        this.settleBaseInfo = res;
      }).catch(() => {});
    },

    onCancel() {
      this.$emit('closeSettleDialog')
    },

    confirmSettle() {
      let params = {
        settleIdList: this.checkIds,
        payWay: this.form.payWay
      };

      if (!params.payWay) {
        this.$message({
          message: '请选择支付方式',
          type: 'error',
          showClose: true
        });
      }

      confirmSettleApi(params).then(res => {
        this.$message({
          message: '结算成功',
          type: 'success',
          showClose: true
        });
        this.$emit('closeSettleDialog', 'update');
      }).catch(() => {});
    }
  }
}
</script>

<style lang="scss" scoped>
.settle-dialog {
  .upload-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>