<template>
  <view class="modal" :animation="animationData1" @touchmove.stop.prevent>
    <view class=" content-wrap" :animation="animationData2">
      <view class="content-header dis-flex">
        <view class="cancel-btn" >实付金额:</view>
        <view class="input-contant t-c">
			<view class="input-contant-gs" v-if="(mone !== '¥' && mone )">
				<view  style="line-height: 48upx;color: #FFFFFF;padding-left: 20upx;padding-right: 20upx;" v-if="(mone !== '¥' && mone ) ">
					<text v-if="inputmodel !== '¥' && inputmodel">(</text>
					<text>{{mone.replace("¥","")}}</text>
					<text v-if="inputmodel !== '¥' && inputmodel">-</text>
					<text v-if="inputmodel !== '¥' && inputmodel">{{inputmodel.replace("¥","")}}</text>
					<text v-if="inputmodel !== '¥' && inputmodel">)</text>
					<text>x</text>
					<text>{{Math.round((lilv / 10) * 100) / 100 }}</text>
					<text v-if="inputmodel !== '¥' && inputmodel">+</text>
					<text v-if="inputmodel !== '¥' && inputmodel">{{inputmodel.replace("¥","")}}</text>
				</view>
				
			</view>
		</view>
        <view class="confirm-btn" >
			<view class="triangle" v-if="(mone !== '¥' && mone ) ">
				
			</view>
			<text style="padding-left: 30upx;" v-if="mone !== '¥' && mone ">¥{{Math.round((((Number(mone.replace("¥","")) - Number(inputmodel.replace("¥",""))) * (Math.round((lilv / 10) * 100) / 100)) + Number(inputmodel.replace("¥",""))) * 100) / 100}}</text>
			<text v-else>0.00</text>
			</view>
      </view>
	  	<view class="key-box" style="position: relative;">
	  	  <view
	  	    :class="{
	  	      'handel-btn': ['.', '', ''].includes(item),
	  	      'active-btn': activeKey === item,
	  	      'active-handel-btn':
	  	        activeKey === item && ['.', ''].includes(item),
	  	    }"
	  	    v-for="(item, index) in keyboardList"
	  	    :key="index"
	  	    @click.stop="setValue(item)"
	  	    >{{ item }}</view
	  	  >
	  	</view>
		<view  style="position: absolute;width: 20%;right: 14upx;top: 76upx;">
			<view class="t-c" style="height: 120upx;line-height: 100upx;" @click.stop="setValue('删除')">
				<image :src="imgfixUrls + 'scv.png'" style="width: 60upx;height: 60upx;padding-top: 46upx;" mode=""></image>
			</view>
			<view class="t-c" style="width: 166upx;height: 300upx;box-sizing: border-box;background-color: #19A119;padding-top: 100upx;color: #FFFFFF;margin-top: 2px;font-size: 30upx;" @click.stop="pay">
				<view >
					确认
					<br/>
					支付
				</view>
			</view>
		</view>
	  </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      animationData1: {},
      animationData2: {},
      activeKey: "",
      inputValue: [],
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    //是否为带小数的数字键盘
    decimals: {
      type: Boolean,
      default: true,
    },
    //小数点前整数的位数
    maxLength: {
      type: [Number, String],
      default: 9,
    },
    //小数点后的位数
    pointLength: {
      type: [Number, String],
      default: 2,
    },
    //最大的值
    max: {
      type: [Number, String],
      default: 999999999,
    },
    //最小的值
    min: {
      type: [Number, String],
      default: 0,
    },
	inputValues:{
		type:Array,
		default:[],
	},
	mone:{
		type:String,
		default:'0'
	},
	inputmodel:{
		type:String,
		default:'0'
	},
	lilv:{
		type:String,
		default:'0'
	}
  },
  computed: {
    keyboardList() {
      return this.decimals
        ? ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "."]
        : ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "."];
    },
  },
  mounted() {
  	this.enterAnimate();
  },
  watch: {
    visible(val) {
      this.inputValue = [];
      if (val) this.enterAnimate();
      else this.leaveAnimate();
    },
	'inputValues':{ //监听的对象
	     deep:true, //深度监听设置为 true
	     handler:function(val,oldV){
			 console.log(val,'进来进来');
			 if(val[0] == '11' || val[0] == '112'){
				  this.inputValue = [];
			 }else{
				  this.inputValue =val;
			 }
	      
	    }
	}
	// inputValues(val){
		// console.log(val[0],11111);
		
		// console.log(this.inputValue);
		
	// }
  },
  methods: {
	pay(){
		this.$emit("pay");  
	},
    setValue(data) {
		// if(data.length == 1){
		// 	this.inputValue[0] = data[0];
		// }

      this.activeKey = data;
      let timer = setTimeout(() => {
        this.activeKey = "-";
        clearTimeout(timer);
      }, 100);

      if (
        !data ||
        (data !== "删除" &&
          this.inputValue.includes(".") &&
          this.inputValue.join("").split(".")[1].length === this.pointLength)
      )
        return false;

      if (
        this.inputValue.length === 1 &&
        this.inputValue[0] === "0" &&
        !["删除", "."].includes(data)
      ) {
        return (this.inputValue = [data]);
      }

      if (data !== "删除") {
        if (this.inputValue.includes(".")) {
          if (
            this.inputValue.join("").split(".")[0].length === this.maxLength
          ) {
            return false;
          }
        } else if (this.inputValue.length === this.maxLength) {
          return false;
        }
      }

      if (data == "删除") {
        this.inputValue.length && this.inputValue.pop();
		console.log(this.inputValue,data);
		let num = this.inputValue.join("");
		this.$emit("confirm",num,this.inputValue);
		return
      }
      if (data === ".") {
        if (!this.inputValue.length || this.inputValue.includes("."))
          return false;
      }
      this.inputValue.push(data);
	  console.log(this.inputValue,data);
	  let num = this.inputValue.join("");
	  this.$emit("confirm",num,this.inputValue);
    },
    close() {
      this.$emit("update:visible", false);
      this.$emit("close");
    },
    confirm() {
      let result = Number(this.inputValue.join(""));
      if (result < this.min) {
        uni.showToast({
          title: `最小值为${this.min}`,
          duration: 1500,
          icon: "none",
        });
        return;
      } else if (result > this.max) {
        uni.showToast({
          title: `最大值为${this.max}`,
          duration: 1500,
          icon: "none",
        });
        return;
      }
      this.$emit("confirm", result);
      this.close();
    },
    enterAnimate() {
      this.animation1 = uni.createAnimation();
      this.animation2 = uni.createAnimation();
      this.animation1.backgroundColor("rgba(0,0,0,0.5)").step({
        duration: 500,
        timingFunction: "ease",
      });
      this.animation2.translateY(0).step({
        timingFunction: "ease-out",
        duration: 500,
      });
      this.animationData1 = this.animation1.export();
      this.animationData2 = this.animation2.export();
    },
    leaveAnimate() {
      this.animation1 = uni.createAnimation();
      this.animation2 = uni.createAnimation();
      this.animation1.backgroundColor("rgba(0,0,0,0)").step({
        duration: 500,
        timingFunction: "ease",
      });
      this.animation2.translateY(500).step({
        timingFunction: "ease-out",
        duration: 500,
      });
      this.animationData1 = this.animation1.export();
      this.animationData2 = this.animation2.export();
    },
  },
};
</script>

<style lang="scss" scoped>
.modal {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 998;

  .content-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    transform: translateY(100%);

    .content-header {
      width: 100%;
      height: 100upx;
      background: rgba(255, 255, 255, 1);
      float: right;

      .input-contant {
        text-align: right;
        line-height: 100upx;
        font-size: 20upx;
		// min-width: 390upx;
		flex: 1;
		// padding-right: 164upx;
		.input-contant-gs{
			// width: 200upx;
			height: 48upx;
			// position: absolute;
			min-width: 100upx;
			margin-top: 28upx;
			display: inline-block;
			background-color: #413634;
			border-radius: 10upx 0 0 10upx;
		}
      }

      .cancel-btn {
		  font-size: 30upx;
		  font-weight: 700;
        padding-left: 30upx;
        color: #000000;
        line-height: 100upx;
		min-width: 166upx;
        // position: absolute;
        // top: 0;
        // left: 0;
      }

      .confirm-btn {
		  font-size: 40upx;
		  font-weight: 700;
		  text-align: center;
        // padding-right: 64upx;
		// width: 164upx;
		position: relative;
		min-width: 164upx;
        color: #000000;
		border-bottom: 1upx solid #F1F1F1;
        line-height: 100upx;
		// position: relative;
		// top: -114upx;
		// left: 10upx;
        // position: absolute;
        // top: 0;
        // right: 0;
      }
    }

    .key-box {
      margin-top: 60upx;
      display: flex;
      flex-flow: wrap;
      width: 90%;

      view {
        width: 29%;
        height: 100upx;
        border: 1upx solid #f1f1f1;
        box-sizing: border-box;
        text-align: center;
        line-height: 100upx;
        font-size: 50upx;
        // font-weight: bold;
        margin: 0 -1upx -1upx 0;

        &:hover {
          z-index: 1;
          border: 1upx solid #F1F1F1;
        }
      }

      .handel-btn {
        background: rgb(235, 237, 240);
        font-size: 30upx;
      }
      .active-btn {
        background: rgb(235, 237, 240);
      }
      .active-handel-btn {
        background: rgb(252, 252, 252);
      }
    }
  }
}
.triangle{
	position: absolute;
	    width: 0;
	    height: 0;
		left: 0;
		
		top: 28upx;
		display: inline-block;
	    border-top: 25upx solid transparent;
	    border-left: 16upx solid #413634;
	    border-bottom: 25upx solid transparent;
}
</style>
