<template>
	<view class="toolbar" :class="{'toolbar-black': theme === 'dark'}">
		<view class="tool-section">
			<view class="tool-item" v-for="(item, index) in toolArr" :key="index">
				<block v-if="item.url === 'share'">
					<button open-type="share" class="tool-btn">
						<image class="icon" :src="item.select?item.selectIcon:item.icon" mode="aspectFit"></image>
						<text class="title" :class="{'title-select': item.select}">{{item.title}}</text>
					</button>
				</block>
				<block v-else>
					<button @click="toolItemAction(index)" class="tool-btn">
						<image class="icon" :src="item.select?item.selectIcon:item.icon" mode="aspectFit"></image>
						<text class="title" :class="{'title-select': item.select}">{{item.title}}</text>
					</button>
				</block>
			</view>
		</view>
		<view>
			<!-- 颜色 -->
			<scroll-view style="box-sizing: border-box; white-space: nowrap; margin: 10upx 0;" scroll-x scroll-with-animation >
				<view style="text-align: center; display: inline-block;" class="t-alternative__item" v-for="(item,index) in colorList" :key="index">
					<view style="width: 67upx;height: 67upx; display: flex; align-items: center; justify-content: center;" 
					:style="{ backgroundColor: item.color}"
					 @click="selectColor(item,index)">
						<image v-if="index == selectColorIndex" src="../../static/mine/icon_confirm.png" mode="" 
						style="width: 31upx; height: 22upx;"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="pen-section">
			<view style="display: flex; align-items: center; justify-content: center;">
				<view style="font-size: 25upx; margin-right: 16upx; color: #FFFFFF;">画笔大小</view>
			</view>
			<slider min="1" max="20" :value="lineValue" block-size="25" activeColor="#FFFFFF" class="pen-slider" @change="penWidthChange"/>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			theme: {
				type: String,
				default () {
					return 'light';
				}
			},
			toolArr: {
				type: Array,
				default () {
					return [
						{
							title: '清空',
							icon: '../../static/png/tool_clear.png',
							selectIcon: '../../static/png/tool_clear_s.png',
							select: false,
							url: 'clear'
						}, {
							title: '橡皮',
							icon: '../../static/png/tool_eraser.png',
							selectIcon: '../../static/png/tool_eraser_s.png',
							select: false,
							url: 'eraser'
						}, {
							title: '画笔',
							icon: '../../static/png/tool_pen.png',
							selectIcon: '../../static/png/tool_pen_s.png',
							select: true,
							url: 'pen'
						}, {
							title: '颜色',
							icon: '../../static/png/tool_color.png',
							selectIcon: '../../static/png/tool_color_s.png',
							select: false,
							url: 'color'
						}, {
							title: '保存',
							icon: '../../static/png/tool_download.png',
							selectIcon: '../../static/png/tool_download_s.png',
							select: false,
							url: 'save'
						}, {
							title: '矩形',
							icon: '../../static/png/tool_rect.png',
							selectIcon: '../../static/png/tool_rect_s.png',
							select: false,
							url: 'hollowRect'
						}, {
							title: '圆形',
							icon: '../../static/png/tool_circle.png',
							selectIcon: '../../static/png/tool_circle_s.png',
							select: false,
							url: 'hollowCircle'
						}, {
							title: '矩形',
							icon: '../../static/png/tool_rect_solid.png',
							selectIcon: '../../static/png/tool_rect_solid_s.png',
							select: false,
							url: 'rect'
						}, {
							title: '圆形',
							icon: '../../static/png/tool_circle_solid.png',
							selectIcon: '../../static/png/tool_circle_solid_s.png',
							select: false,
							url: 'circle'
						}, {
							title: '分享',
							icon: '../../static/png/tool_share.png',
							selectIcon: '../../static/png/tool_share_s.png',
							select: false,
							url: 'share'
						}
					]
				}
			},
			penColor: {
				type: String,
				default () {
					return '#000';
				}
			}
		},
		data() {
			return {
				lineWidth: '6px',
				lineValue: 6,
				colorList:[
					{
						color: '#000',
						index: '01'
					},{
						color: '#7f2a3f',
						index: '01'
					}, {
						color: '#e24187',
						index: '03'
					}, {
						color: '#f5305d',
						index: '04'
					}, {
						color: '#de4156',
						index: '05'
					}, {
						color: '#fe42cd',
						index: '06'
					}, {
						color: '#f48b9a',
						index: '07'
					}, {
						color: '#ec8191',
						index: '08'
					}, {
						color: '#f9aeb5',
						index: '09'
					}, {
						color: '#f21d5f',
						index: '10'
					}, {
						color: '#cc3739',
						index: '11'
					}, {
						color: '#dd5047',
						index: '12'
					}, {
						color: '#e24187',
						index: '13'
					}, {
						color: '#fa6449',
						index: '14'
					}, {
						color: '#e8495b',
						index: '15'
					}, {
						color: '#fb7162',
						index: '16'
					}, {
						color: '#f6afd1',
						index: '17'
					}, {
						color: '#fbb6b9',
						index: '18'
					}, {
						color: '#db6f27',
						index: '21'
					}, {
						color: '#ed702e',
						index: '22'
					}, {
						color: '#f99627',
						index: '23'
					}, {
						color: '#eb8926',
						index: '24'
					}, {
						color: '#edc3aa',
						index: '25'
					}, {
						color: '#e1d8cf',
						index: '26'
					}, {
						color: '#deebc5',
						index: '27'
					}, {
						color: '#fccdc7',
						index: '28'
					}, {
						color: '#dbbdd2',
						index: '29'
					}, {
						color: '#e8a321',
						index: '31'
					}, {
						color: '#db6f27',
						index: '32'
					}, {
						color: '#edb74b',
						index: '33'
					}, {
						color: '#e8b741',
						index: '34'
					}, {
						color: '#fef052',
						index: '35'
					}, {
						color: '#ffd684',
						index: '36'
					}, {
						color: '#e2d958',
						index: '37'
					}, {
						color: '#e2e5d0',
						index: '38'
					}, {
						color: '#ba9431',
						index: '41'
					}, {
						color: '#797f5d',
						index: '42'
					}, {
						color: '#536d50',
						index: '43'
					}, {
						color: '#d8b53f',
						index: '44'
					}, {
						color: '#d4c172',
						index: '45'
					}, {
						color: '#32b75c',
						index: '46'
					}, {
						color: '#90D15B',
						index: '47'
					}, {
						color: '#c5d52a',
						index: '48'
					}, {
						color: '#e8e098',
						index: '49'
					}, {
						color: '#1b6661',
						index: '50'
					}, {
						color: '#3b4f4d',
						index: '51'
					}, {
						color: '#336559',
						index: '52'
					}, {
						color: '#01776e',
						index: '53'
					}, {
						color: '#2e7662',
						index: '54'
					}, {
						color: '#439877',
						index: '55'
					}, {
						color: '#0ba066',
						index: '56'
					}, {
						color: '#318488',
						index: '57'
					}, {
						color: '#6fd3c9',
						index: '58'
					}, {
						color: '#b9d3ac',
						index: '59'
					}, {
						color: '#0e898e',
						index: '61'
					}, {
						color: '#317194',
						index: '62'
					}, {
						color: '#029bc7',
						index: '63'
					}, {
						color: '#2a8ec9',
						index: '64'
					}, {
						color: '#57c9d3',
						index: '65'
					}, {
						color: '#65b3df',
						index: '67'
					}, {
						color: '#8bd0d7',
						index: '68'
					}, {
						color: '#4B4881',
						index: '69'
					}, {
						color: '#77A1CB',
						index: '70'
					}, {
						color: '#3051BB',
						index: '71'
					}, {
						color: '#2E41A7',
						index: '72'
					}, {
						color: '#704CAE',
						index: '73'
					}, {
						color: '#385BD1',
						index: '74'
					}, {
						color: '#E0DFED',
						index: '75'
					}, {
						color: '#A6BDE9',
						index: '76'
					}, {
						color: '#B3B9DD',
						index: '77'
					}, {
						color: '#7942A8',
						index: '81'
					}, {
						color: '#8F52BA',
						index: '82'
					}, {
						color: '#9680C0',
						index: '83'
					}, {
						color: '#CD82BB',
						index: '84'
					}, {
						color: '#8E2A80',
						index: '85'
					}, {
						color: '#E24CB0',
						index: '86'
					}, {
						color: '#CC2A75',
						index: '87'
					}, {
						color: '#ED89D2',
						index: '88'
					}, {
						color: '#F562B6',
						index: '89'
					}, {
						color: '#8B3B32',
						index: '91'
					}, {
						color: '#593A35',
						index: '92'
					}, {
						color: '#7A3C2D',
						index: '93'
					}, {
						color: '#7D2E21',
						index: '94'
					}, {
						color: '#935A47',
						index: '95'
					}, {
						color: '#A05047',
						index: '96'
					}, {
						color: '#E39476',
						index: '97'
					}, {
						color: '#4E3F3C',
						index: '98'
					}, {
						color: '#5A4939',
						index: '99'
					}, {
						color: '#EDE8EC',
						index: '100'
					}, {
						color: '#C0813A',
						index: '101'
					}, {
						color: '#77432E',
						index: '102'
					}, {
						color: '#C17748',
						index: '103'
					}, {
						color: '#C7AC39',
						index: '104'
					}, {
						color: '#DBA179',
						index: '107'
					}, {
						color: '#D8D3D0',
						index: '109'
					}, {
						color: '#091A22',
						index: '120'
					}, {
						color: '#CA3A32',
						index: '121'
					}, {
						color: '#FAAB60',
						index: '122'
					}, {
						color: '#CADEAD',
						index: '123'
					}, {
						color: '#C7D858',
						index: '124'
					}, {
						color: '#F264D0',
						index: '125'
					}, {
						color: '#F77ADC',
						index: '126'
					}, {
						color: '#FAE7D9',
						index: '131'
					}, {
						color: '#E6D9D1',
						index: '132'
					}, {
						color: '#EBCDB1',
						index: '133'
					}, {
						color: '#E2DCCC',
						index: '134'
					}, {
						color: '#FAD9D2',
						index: '135'
					}, {
						color: '#E1C2BD',
						index: '136'
					}, {
						color: '#E5BBCF',
						index: '137'
					}, {
						color: '#F7BACC',
						index: '138'
					}, {
						color: '#E9CBC1',
						index: '139'
					}, {
						color: '#EBB89F',
						index: '140'
					}, {
						color: '#E6D09E',
						index: '141'
					}, {
						color: '#E2B78D',
						index: '142'
					}, {
						color: '#D1E4EB',
						index: '143'
					}, {
						color: '#B9D9EE',
						index: '144'
					}, {
						color: '#CFD0E2',
						index: '145'
					}, {
						color: '#CECFF0',
						index: '146'
					}, {
						color: '#D6C3E3',
						index: '147'
					}, {
						color: '#E3F0C5',
						index: '163'
					}, {
						color: '#DAD792',
						index: '164'
					}, {
						color: '#D4D4BC',
						index: '166'
					}, {
						color: '#C0D0AB',
						index: '167'
					}, {
						color: '#D7C6A8',
						index: '169'
					}, {
						color: '#D9E9E8',
						index: '171'
					}, {
						color: '#B4E0C7',
						index: '172'
					}, {
						color: '#D6E2BA',
						index: '173'
					}, {
						color: '#E3E5D0',
						index: '174'
					}, {
						color: '#C1D39A',
						index: '175'
					}, {
						color: '#AFE4E6',
						index: '178'
					}, {
						color: '#92DDE2',
						index: '179'
					}, {
						color: '#DBE0E6',
						index: '182'
					}, {
						color: '#8FBFF0',
						index: '183'
					}, {
						color: '#9DCDE1',
						index: '185'
					}, {
						color: '#BBC4BF',
						index: '196'
					}, {
						color: '#E484A9',
						index: '198'
					}, {
						color: '#BBC4BF',
						index: 'GG3'
					}, {
						color: '#494A4C',
						index: 'CG9'
					}, {
						color: '#C2CEDA',
						index: 'BG1'
					}, {
						color: '#C1C3D3',
						index: 'BG3'
					}, {
						color: '#8696A3',
						index: 'BG5'
					}, {
						color: '#646A76',
						index: 'BG7'
					}, {
						color: '#415361',
						index: 'BG9'
					}, {
						color: '#DFDEE3',
						index: 'WG.5'
					}, {
						color: '#CBC6CC',
						index: 'WG1'
					}, {
						color: '#B6B0B2',
						index: 'WG2'
					}, {
						color: '#C5BBBA',
						index: 'WG3'
					}, {
						color: '#958A92',
						index: 'WG4'
					}, {
						color: '#837477',
						index: 'WG5'
					}, {
						color: '#8A7E7E',
						index: 'WG6'
					}, {
						color: '#4D4342',
						index: 'WG9'
					}
				],
				selectColorIndex:0
			}
		},
		methods: {
			// 常用颜色选择
			selectColor(color,index) {
				this.selectColorIndex = index
				this.$emit('colorPickTap', color);
			},
			toolItemAction (index) {
				this.$emit('toolItemTap', index);
			},
			penWidthChange (e) {
				// console.log('滑块滚动:' + JSON.stringify(e));
				this.lineWidth = e.detail.value + 'px';
				this.lineValue = e.detail.value;
				this.$emit('penWidthChange', this.lineValue);
			}
		}
	}
</script>

<style lang="scss">
	.toolbar {
		background-color: #282932;
		height: 264upx;
		padding-bottom: 70upx;
		
		.tool-section {
			display: flex;
			flex-wrap: wrap;
			height: 75upx;
			justify-content: space-between;
			
			.tool-item {
				width: 20%;
				height: 100%;
				
				.tool-btn {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					width: 100%;
					
					.icon {
						width: 26upx;
						height: 27upx;
					}
					
					.title {
						font-size: 25upx;
						margin-left: 8upx;
						color: #FFFFFF;
					}
					
					.title-select {
						color: #F56364;
					}
				}
			}
		}
		.pen-section {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 30upx;
			height: 75upx;
			width: calc(100% - 60upx);
			overflow-x: hidden;
			
			// .pen {
			// 	width: 80upx;
			// 	border-radius: 5upx 0 0 5upx;
			// }
			// .triangle-right {
			//     width: 0;
			//     height: 0;
			//     border-top: 50px solid transparent;
			//     border-left: 100px solid red;
			//     border-bottom: 50px solid transparent;
			// }
			.pen-slider {
				width: 75%;
				margin: auto;
			}
			// .pen-txt {
			// 	font-size: 28upx;
			// }
		}
	}
	
	.toolbar-black {
		background-color: #202d1c;
	}
	
	.t-alternative__item {
		// margin-left: 12upx;
		width: 67upx;
		height: 67upx;
		// border-radius: 50%;
		overflow: hidden;
	}
	
	.t-alternative__item-content {
		width: 67upx;
		height: 67upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.t-alternative__item:active {
		transition: all 0.3s;
		transform: scale(1.1);
	}
	wx-slider .wx-slider-handle-wrapper{
		height:20rpx;
	}
	button {
		padding: 0upx;
		margin: 0upx;
		border: none;
		border-radius: 0upx;
		box-sizing: border-box;
		background-color: transparent;
	}
	
	button.button-hover {
		transform: translate(3rpx, 3rpx);
		background-color: transparent;
	}
	
	button::after {
	  border: none
	}
</style>
