<template>
  <div class="modify-order-price">
    <el-dialog title="修改价格" :visible.sync="showModifyOrderPriceDialog" width="700px" @close="onCancel">
      <el-form>
        <el-form-item label="提交订单价格">
          <div>
            <span>¥ {{ orderInfo.payPrice }}</span>
          </div>
        </el-form-item>
        <el-form-item label="实际支付价格">
          <div>
            <el-input placeholder="请输入用户实际支付的价格" class="input-block" v-model="newPrice" />
          </div>
        </el-form-item>
      </el-form>
      <div>注意：价格修改后，用户将按照修改后的价格进行支付，请谨慎操纵！</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onCancel">取 消</el-button>
        <el-button type="primary" @click="confirmModifyPrice">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { modifyOrderAmountApi } from '@/api/order';

export default {
  props: ['showModifyOrderPriceDialog', 'orderInfo'],

  data() {
    return {
      newPrice: '',
    };
  },

  methods: {
    onCancel() {
      this.$emit('closeModifyOrderPriceDialog');
    },

    confirmModifyPrice() {
      let params = {
        newPrice: parseFloat(this.newPrice).toFixed(2),
        orderNo: this.orderInfo.orderNo,
      };

      modifyOrderAmountApi(params).then((res) => {
        this.$message({
          message: '成功修改价格',
          type: 'success',
          showClose: true
        })

        this.onCancel();
        this.$emit('updateList');
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.modify-order-price {
  .input-block {
    width: 450px;
  }
}
</style>
