</<template>
    <div  style="font-size:12px;">
        <headerNav title="申请售后"/>
        <van-radio-group v-model="servicetype">
            <van-cell-group>
                <van-cell title="服务类型"  />
                <van-cell title="退款" clickable @click="servicetype = '1'">
                <van-radio name="1" />
                </van-cell>
                <van-cell title="退货" clickable @click="servicetype = '2'">
                <van-radio name="2" />
                </van-cell>
            </van-cell-group>
        </van-radio-group>
        <div style="margin-top: 10px;" >
            <product-card v-for="(product,i) in products" :key="i" :product='product' iscard ></product-card>
        </div>

        <van-cell-group style="margin-top: 10px;">
            <van-cell title="申请原因" :label="remark" is-link @click="onClickShowPicker" />
            
            <van-field label="退款金额" placeholder="请输入金额" v-model="amount" :error-message="'可退金额:'+maxamount" type='number' />

            <van-field
                label="问题描述"
                type="textarea"
                placeholder="请您在此描述问题"
                rows="3"
                autosize
            />
            <van-cell class="uploader" style="font-size: 16px;">
                <van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
                    <van-icon name="photograph" />
                </van-uploader>
                <div v-for="(image,i) in images" :key="image" class="uploader-image" >
                    <img :src="image" />
                    <van-icon name="close" @click="removeImage(i,image)" />
                </div>
            </van-cell>
            
        </van-cell-group>

        
        <van-cell-group style="margin-top: 10px;">
            <van-field label="联系人"  />
            <van-field label="联系电话"  />
        </van-cell-group>

        <van-button size="large" type="primary" style="margin-top: 10px;" >提交</van-button>
        <van-actionsheet v-model="showPicker" >
            <van-picker show-toolbar
  title="申请原因" :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
        </van-actionsheet>
    </div>
</template>

<script>
export default {
    data(){
        return{
            servicetype:'1',
            showPicker:false,
            remark:'我不想要了',
            amount:'50.50',
            maxamount:'50.50',
            images:[],
            columns: ['我不想要了','退运费','少件/漏发','未按约定时间发货','发错货', '质量问题', '商品与页面描述不符', '商品损坏', '缺少件'],
            products: [
                {
                    id:1,
                    imageURL:
                        "https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
                    title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
                    desc: "0.670kg/件，肉肉聚汇520g",
                    quantity: 2,
                    price:'50.5',
                    max:2,
                    min:0,
                },
                {
                    id:1,
                    imageURL:
                        "https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
                    title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
                    desc: "1.320kg/件",
                    quantity: 1,
                    price:'225.5',
                    max:1,
                    min:0,
                },
            ]
        }
    },
    methods:{
        onClickShowPicker(){
                this.showPicker=true;
        },
        onCancel() {
            this.showPicker=false;
        },
        onConfirm(value, index) {
            this.remark=value;
            this.showPicker=false;
        },
        onRead(file) {
            console.log(file.length);
            if(file.length==undefined){
                this.images.push(file.content);
            }else{
                file.forEach(item => {
                    this.images.push(item.content);
                });
            }
            console.log(file)
        },
        removeImage(index,image){
            this.images.splice(index,1);
        }
    }

}
</script>

<style lang="less">
.uploader{
    font-size: 16px;
    .van-uploader{
        float: left;
    }
    &-image{
        margin-left: 10px;position: relative;height: 50px;width: 50px;border: 1px solid #e5e7ea;float: left;margin-top: 5px;
        img{
           width: 50px; 
        }
        i{
            position: absolute;
            top: -6px;
            right: -6px;
            font-size: 8px;
        }
    }
}
</style>