<template>
  <div class="settle-dialog">
    <el-dialog :visible.sync="showSettleDialog" title="生成结算单" @close="onCancel">
      <el-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>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onCancel">取 消</el-button>
        <el-button type="primary" @click="confirmSettle">确认生成</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSettleDataApi, generateSettleApi  } from '@/api/distribution';

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

  data() {
    return {
      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 = {
        settleBillIdList: this.checkIds
      };

      getSettleDataApi(params).then(res => {
        this.settleBaseInfo = res;
        console.info('res dialog', res);
      }).catch(() => {});
    },

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

    confirmSettle() {
      let params = {};
      this.checkList.length ? params.settleBillIdList = [...this.checkIds] : null;

      generateSettleApi(params).then(res => {
        this.$message({
          message: '已生成结算单，请前往“结算单”页面进行支付。',
          type: 'success',
          showClose: true,
          duration: 2000
        });
        this.$emit("updateList");
        this.onCancel();
      }).catch(() => {});
    }
  }
}
</script>

<style lang="scss" scoped>
.settle-dialog {

}
</style>