<template>

  <Mask :width="400" :height="400"  :is-show="show">
    <CloseBtn @click="show = false"></CloseBtn>
    <el-card style="width: 360px;height: 360px">
      <template #header>
        整单议价
      </template>
      <div class="negotiation-panel">
        <el-input v-model="finalPrice" readonly class="price-input" size="large">
          <template #prefix>
            ￥
          </template>
          <template #suffix>
            <span :class="[finalPrice == originalPrice?'disable':'link-btn']" @click="restore">恢复</span>
          </template>
        </el-input>
        <div class="negotiation-type">
          <div :class="['btn',type==3?'active':'']">折比例</div>
        </div>
        <div class="bottom-input">
          <div class="reduce-ratio" v-if="type==3">
            <el-input placeholder="9折，输入90" size="large" v-model.number="reduceRation" @change="reduceRationChangeHandler" >
              <template #suffix>
                %
              </template>
            </el-input>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button type="primary" @click="saveNegotiation">确定</el-button>
        <el-button @click="show = false" plain>关闭</el-button>
      </template>
    </el-card>


  </Mask>
</template>
<script setup lang="ts">
import Mask from "@/components/Mask.vue";
import {computed, ref} from "vue";
import CloseBtn from "@/components/CloseBtn.vue";

const finalPrice = ref(0.0);
const originalPrice = ref(0.0);
const show = ref(false);
const init = (orgPrice: number,newFinalPrice: number,ration: number) => {
  finalPrice.value = newFinalPrice;
  originalPrice.value = orgPrice;
  reduceRation.value = ration;
  show.value = true;
}
defineExpose({init})


const restore = () => {
  finalPrice.value = originalPrice.value;
  reduceRation.value = 100;
}
const type = ref(3);
const emit = defineEmits(['saveNegotiation'])
const saveNegotiation = () => {
  show.value = false;
  emit('saveNegotiation', reduceRation.value)
}
const reduceRation =ref(0);

const reduceRationChangeHandler = (value: number) => {
  if (!value){
    reduceRation.value = 0;
    finalPrice.value = originalPrice.value;
    return
  }
  rationChangeHandler(reduceRation.value,false)
}
const rationChangeHandler = (ration:number,type:boolean) => {
  let proportion = parseInt(ration.toString());
 if (type){
   proportion =100+proportion;
 }
  finalPrice.value = originalPrice.value * 100 * proportion/10000;
}
</script>
<style scoped lang="scss">
.negotiation-panel {
  font-size: 16px;
  height: 200px;

  .price-input{
    font-weight: bold;
  }
  .link-btn {
    color: #409EFF;
    margin-left: 10px;
    cursor: pointer;
  }

  .disable {
    color: #999;
    margin-left: 10px;
    cursor: not-allowed;
  }

  .negotiation-type {
    display: flex;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    .btn {
      font-size: 14px;
      padding: 10px;
      margin-left: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;

      &:hover {
        border: 1px solid #409EFF;
      }
    }
    .active{
      border: 1px solid #409EFF;
      color: #409EFF;
    }


  }
  .bottom-input {
    margin-top: 20px;
    .add-price{
      display: flex;
      justify-content: center;
      align-items: center;
      .btn{
        font-size: 14px;
        width: 100px;
        padding: 10px;
        text-align: center;
        margin-left: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        &:hover {
          border: 1px solid #409EFF;
        }
      }

    }
    .reduce-price{
      display: flex;
      justify-content: center;
      align-items: center;
      .btn{
        font-size: 14px;
        padding: 10px;
        width: 100px;
        margin-left: 10px;
        text-align: center;
        border: 1px solid #ddd;
        border-radius: 5px;
        &:hover {
          border: 1px solid #409EFF;
        }
      }

    }
  }
}
</style>