<template>
    <view class="goods_nav">
        <!-- 公共组件-每个页面必须引入 -->

<view class="left">
    <view v-for="(v,i) in iconList" class="icon_item" v-if="iconList.length>0">
        <u-icon :name="v.icon" :color="v.infoColor"  size="22" v-if="v.iconType" style="margin:0 auto" @click="clickIcon(v)"
													></u-icon>
										
         <uni-icons :type="v.icon" size="22" :color="v.infoColor" style="margin:0 auto" v-else> </uni-icons>
         <view :style="`color:${v.infoColor};`">{{ v.text }}</view>
    </view>
   <slot name="leftSlot"></slot>

</view>
<view class="right">
    
<view class="button" v-for="(v,i) in customButton" :style="`background:${v.backgroundColor} !important;color:${v.color};width:${v.width}`" @click="submit(v)">
    {{ v.text }}
</view>

</view>
       

        <!-- <view>{{ detailInfo.content }}</view> -->
    </view>





</template>

<script>

import $http from '@/config/requestConfig.js';
import {
    mapState
} from 'vuex';
export default {
    props: ['iconList','customButton'],
    components: {

    },
    data() {
        return {



        }
    },
    onLoad(options) {


    },
    onHide() {

    },
    computed: {
        ...mapState(['userInfo']),
    },
    methods: {

submit(v){
this.$emit('submit',v)
},
clickIcon(v){
this.$emit('clickIcon',v)
},
        showPreview(e) {
            console.log('e at line 56:', e)
            let conimg = e.target.dataset.nodes;
            let imgs = conimg.match(/<img[^>]+>/g);//选择节点中的img
            console.log('imgs at line 59:', imgs)
            let imgList = [];
            //遍历img标签的src里面的内容放在定义的数组imgList中
            for (var j = 0; j < imgs.length; j++) {
                imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
                    imgList.push(capture)

                })
            }
            console.log('imgList.push at line 64:', imgList)


            //最后一步就是所有图片放在预览的方法previewImage中就可以了
            // uni.previewImage({
            //     current: imgList,
            //     urls: imgList,
            // })
            uni.previewImage({
                urls: imgList,
                longPressActions: {
                    itemList: ['很抱歉，暂不支持保存图片到本地'],
                    success: function (res) {
                        // console.log(res,'+++++')
                    }
                }
            });

        },

        // 放大图片
        previewImage(url) {
            console.log(url)
            uni.previewImage({
                urls: [url],
                longPressActions: {
                    itemList: ['很抱歉，暂不支持保存图片到本地'],
                    success: function (res) {
                        // console.log(res,'+++++')
                    }
                }
            });
        },
        // getSearch() {
        // 	$http.request({
        // 		url: "book/prescript/searchPrescript",
        // 		method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
        // 		data: {
        // 			loadAnimate: 'none', // 请求加载动画
        // 			'keywords': this.searchValue,
        // 			type: this.currentCateIndex + 1
        // 		},
        // 		header: { //默认 无 说明：请求头
        // 			'Content-Type': 'application/json'
        // 		},
        // 	}).then(res => {
        // 		console.log(res, '搜索结果')
        // 		if (res.code == 0 && res.list.length >= 0) {
        // 			this.showSearchList = true
        // 			this.searchList = res.list
        // 		} else {
        // 			this.searchList = []
        // 		}
        // 	}).catch(e => {
        // 		// this.dataList = []	
        // 		this.searchList = []
        // 		console.log(e)
        // 	})
        // },
        // search(res) {
        // 	console.log(res, 'res')
        // 	// uni.showToast({
        // 	// 	title: '搜索：' + res,
        // 	// 	icon: 'none'
        // 	// })
        // 	if (res == '') {
        // 		this.showSearchList = false
        // 		this.searchList = []
        // 	} else {
        // 		this.getSearch()
        // 	}

        // },
        // input(res) {
        // 	console.log('----input:', res)
        // 	if (res == '') {
        // 		this.searchList = []
        // 	} else {
        // 		this.getSearch()
        // 	}
        // },
        // clear(res) {
        // 	console.log('----clear:', res)
        // 	// uni.showToast({
        // 	// 	title: 'clear事件，清除值为：',
        // 	// 	icon: 'none'
        // 	// })
        // 	this.searchValue = ''
        // 	this.showSearchList = false
        // },
        // blur(res) {
        // 	// console.log('----blur:', res)
        // 	// if (res == '') {
        // 	// 	this.showSearchList = false
        // 	// 	this.searchList = []
        // 	// } else {
        // 	// 	this.getSearch()
        // 	// }
        // },
        // focus(e) {
        // 	console.log('----focus:')
        // 	// uni.showToast({
        // 	// 	title: 'focus事件，输出值为：' + e.value,
        // 	// 	icon: 'none'
        // 	// })
        // 	// 等于1 就是有权限
        // 	// this.showSearchList = true

        // },
        // cancel(res) {
        // 	uni.showToast({
        // 		title: '点击取消，输入值为：' + res.value,
        // 		icon: 'none'
        // 	})
        // }
    },
    onBackPress() {
        // #ifdef APP-PLUS
        plus.key.hideSoftKeybord();
        // #endif
    },

}
</script>

<style lang="scss" scoped>

.goods_nav {
    background-color: #fff;
    width: 100%;
padding: 20rpx 20rpx 20rpx 30rpx;
overflow: hidden;
display: flex;
    align-items: center;
    justify-content: space-between;
.left{
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
    
}

}

.richDetail {
    width: 100%;
    height: 100%;
}

.button{
    float: right;
    width: 240rpx;
    border-radius: 100rpx;
    line-height: 70rpx;
    text-align: center;
    margin-left: 20rpx;
    background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
    
    
    color: rgb(255, 255, 255);
}

.icon_item{
    display: flex;
	    justify-content:center;
        flex-direction: column;
}
</style>