<template>
    <div class="layout-center">
        <ul class="nodot">
            <li  v-for="(item,index) in todo" :key="item.id">面额 {{item.value}}: 
                <input  @input="inputClick()" 
                v-model= AmountList[index] class="input_box"/>张数 小计金额CNY:{{handleAmount(index)}}</li>
        </ul>
        <button  @click="inputClick">获取张数</button>
         <!-- watch计算 -->
        <p>通过 watch 总计金额：{{total}}</p>
        <!-- computed计算 -->
        <p>通过 computed 总计金额：{{amountTotal}}</p>
        <!-- @input -->
        <p>通过 @input 总计金额：{{valueTotal}}</p>
        <p>message: <input type="text" v-model="message"></p>
        <p>测试set get <input type="text" v-model="msg" class="input_box"></p>
    </div>
</template>
<script>
export default {
    data () {
        return {
            todo: [{id:"1",value:10}, {id:"2", value:20}, {id:"3", value:50}, {id:"4", value:100}],
            AmountList: [0,0,0,0],
            total: 0,
            valueTotal: 0,
            message:""
            
        }
    },
    //通过 watch 
    watch:{
        AmountList () {
            let sum =0;
            for( let i =0; i < this.AmountList.length; i++ ) {
                sum += this.AmountList[i] * this.todo[i].value;
            }
            this.total = sum;
        }
    },
    computed:{
        //通过computed get 属 
        amountTotal: {
            //getter
            get: function(){
                let sum = 0;
                for( let i = 0; i < this.AmountList.length; i++ ) {
                    sum += this.AmountList[i] * this.todo[i].value;
                }
                return sum;
            }
        },
        msg: {
            get:function(){
                console.log("get")
                return  "Get:" + this.message;
            },
            set: function(newVal){
                console.log("set" +newVal)
            }
        }
    },
    methods:{
        handleClick(){
            console.log(this.AmountList)
        },
        inputClick () {
            //通过@input计算总计 
            let sum =0;
            for( let i =0; i < this.AmountList.length; i++ ) {
                sum += this.AmountList[i] * this.todo[i].value
            }
            this.valueTotal = sum;
        },
        handleAmount(index){
            return this.AmountList[index] * this.todo[index].value;
        }
    }
}
</script>
<style lang="stylus" scoped>
  .layout-center
    display:flex
    flex-direction:column
    text-align:center
    justify-content:center
    align-items:center
    padding:.4rem .5rem
    font-size: .64rem
    .nodot
      list-style:none
    .input_box
        flex: 1
        line-height: .64rem
        height: .64rem
        margin-top: .12rem
        margin-left: .2rem
        padding-left: .2rem
        background: #fff
        border-radius: .1rem
        border: 2px #00bcd4 solid 
        color: #ccc
</style>