<template>
  <div class="select_desk">
    <el-dialog width="410px" title="挂账" v-model="show" @close="reset">
      <div class="guazhangren u-flex u-row-between" @click="guazhangShow">
        <template v-if="guazhangRen">
          <div>
            <div class="name">{{ guazhangRen.debtor }}/{{ guazhangRen.position }}</div>
            <div class="u-m-t-6">手机号：{{ guazhangRen.mobile }}</div>
          </div>
          <div>
            <div class="">可用额度</div>
            <div class="u-m-t-6">{{ guazhangRen.remainingAmount }}</div>
          </div>
        </template>
        <template v-else>
          <div class="color-999">选择挂账人/单位</div>
          <span class="el-icon-caret-bottom"></span>
        </template>
      </div>
      <div class="select_desk_dialog u-p-b-20">
        <div class="u-p-l-20 u-p-r-20 u-flex w-full u-relative box_status">
          <div class="font-bold u-font-32">¥</div>
          <el-input
            placeholder="请输入挂账金额"
            v-model="number"
            @input="inputNumber"
            @change="inputChange"
            @focus="inputFocus"
            @blur="inputBlur"
            :type="focus ? 'number' : 'text'"
          ></el-input>
          <div class="zhezhao"></div>
        </div>
      </div>
      <template #footer>
        <div class="confirm_btns">
          <el-button size="large" @click="close">取消</el-button>
          <el-button type="primary" size="large" @click="confirm">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <choose-guazhang ref="refChooseGuazhang" @confirm="chooseGuazhangConfirm"></choose-guazhang>
  </div>
</template>
    
    <script>
import { ElMessage } from "element-plus";
import keyBoard from "./keyboard.vue";
import chooseGuazhang from "./choose-guazhang.vue";
export default {
  components: { keyBoard, chooseGuazhang },
  props: {
    payMoney: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      guazhangRen: "",
      number: "",
      show: false,
      hasOpen: false,
      loading: false,
      tips: "",
      focus: false,
    };
  },
  watch: {
    number(newval) {
      console.log(newval);
      if (newval * 1 > this.payMoney * 1) {
        this.number = this.payMoney;
        this.number = newval;
      }
      if (newval * 1 > this.payMoney * 1) {
        this.tips = "已超出未结账金额";
      } else {
        const shengyu = this.payMoney - this.number;

        this.tips = shengyu > 0 ? "还需额外支付" + shengyu.toFixed(2) + "元" : "";
      }
    },
  },
  methods: {
    inputFocus() {
      this.focus = true;
    },
    inputBlur() {
      this.focus = false;
    },
    chooseGuazhangConfirm(e) {
      this.guazhangRen = e;
    },
    guazhangShow() {
      this.$refs.refChooseGuazhang.open();
    },

    inputNumber(e) {
      console.log("inputNumber");
      if (e * 1 > this.payMoney * 1) {
        this.tips = "已超出未结账金额";
      }
    },
    inputChange(e) {
      if (e * 1 > this.payMoney * 1) {
        this.tips = "已超出未结账金额";
      }
      console.log(e);
    },
    clear(e) {
      console.log(e);
      this.number = "";
    },
    confirm() {
      if (this.number * 1 > this.payMoney * 1) {
        return ElMessage("已超出未结账金额");
      }
      if (this.number * 1 <= 0) {
        return ElMessage("支付金额不正确");
      }
      if (!this.guazhangRen) {
        return ElMessage("请选择挂账人");
      }
      this.$emit("confirm", this.guazhangRen, this.number);
      this.close();
    },
    open() {
      console.log(this.payMoney);
      this.number = this.payMoney * 1;
      this.show = true;
      this.tips = "还需额外支付" + this.payMoney + "元";
    },
    reset() {
      this.number = "";
      this.guazhangRen = "";
    },
    close() {
      this.show = false;
      this.number = "";
    },
  },
  mounted() {},
};
</script>
    
    <style lang="scss" scoped>
:deep(.el-button) {
  padding: 12px 20px;
}
.box_status {
  margin-bottom: 0;
  margin-top: 30px;
  width: 370px;
  height: 58px;
  background: #fff;
  border: 1px solid #dcdfe6;
}
:deep(.el-input__wrapper) {
  box-shadow: none;
}
:deep(.select_desk_dialog .el-input__inner) {
  border: none;
  font-size: 32px;
}
:deep(.el-input__inner::-webkit-inner-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}
:deep(.el-input__inner::-webkit-outer-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}
:deep(.el-button--success) {
  border-color: #22bf64;
  background-color: #22bf64;
}
.select_desk .btn {
  height: 34px;
}
.tags {
  font-size: 16px;
  &.using {
    color: rgb(234, 64, 37);
  }
  &.wait {
    color: rgb(252, 236, 79);
  }
  &.idle {
    color: rgb(137, 234, 71);
  }
  &.closed {
    color: rgb(221, 221, 221);
    filter: grayscale(1);
  }
}
:deep(.inputs .el-input__inner) {
  border-color: transparent !important;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 1.25px;
  font-size: 20px;
}
.select_desk .select_desk_dialog {
  display: flex;

  flex-direction: column;

  align-items: center;
}

.select_desk .select_desk_dialog .nav {
  width: 286px;
  height: 38px;
  background: #dcf0e8;

  justify-content: space-around;
}

.select_desk .select_desk_dialog .nav .li,
.select_desk .select_desk_dialog .nav {
  border-radius: 4px;

  display: flex;

  align-items: center;
}

.select_desk .select_desk_dialog .nav .li {
  width: 140px;
  height: 34px;
  color: #0fc161;

  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}

.select_desk .select_desk_dialog .nav .lion {
  background: #0fc161;
  color: #fff;
}

.select_desk .select_desk_dialog .inputs {
  width: 370px;
  line-height: 54px;
  margin-top: 24px;
  height: 54px;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 1.25px;
  text-align: center;
  font-size: 20px;
  position: relative;
}
.zhezhao {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.select_desk .select_desk_dialog .inputs .close {
  color: #aaa;
  position: absolute;
  right: 10px;
  height: 30px;
  width: 30px;
  line-height: 30px;
  top: 50%;
  margin-top: -15px;
  cursor: pointer;
}
.guazhangren {
  padding: 12px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-top: 20px;
  min-height: 58px;
  color: #999;
  cursor: pointer;
  .name {
    color: #3f9eff;
  }
}

.select_desk .select_desk_dialog .keyboard {
  display: flex;

  flex-wrap: wrap;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}

.select_desk .select_desk_dialog .keyboard .li {
  height: 60px;
  width: 33.333%;

  display: flex;

  justify-content: center;

  align-items: center;
  font-size: 24px;
  color: #212121;
  cursor: pointer;

  user-select: none;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;

  transition: all 0.1s;
}

.select_desk .select_desk_dialog .keyboard .li:hover {
  background: #dcdfe6;
}

.select_desk .select_desk_dialog .keyboard .li .icon {
  font-size: 1.3em;
}

.select_desk .select_desk_dialog .keyboard .confirm {
  height: 140px;
  background: #ff9f2e;
  position: absolute;
  bottom: 0;
  right: 0;
  border-right: none;
}

.select_desk .select_desk_dialog .keyboard .confirm:hover {
  background: #f88502;
}

.confirm_btns {
  display: flex;

  justify-content: space-between;
  width: 100%;
}

.confirm_btns .el-button {
  width: 175px;
}
</style>