<template>
	<view class="box" v-if="ayList.length > 0">
		<view class="total_box" v-for="(item,index) in list" :key="index">
			<view class="total_name">
				<span>{{item.ay ? _getayName(item.ay) : item.name}}</span>
				<view v-if="item.text">{{item.text}}</view>
			</view>
			<view class="total_num">
				<view class="percent" :class="index > 1 ? 'orange' : 'red'" style="width: 100%;" v-if="index == 0">
				</view>
				<view class="percent" :class="index > 1 ? 'orange' : 'red'"
					:style="{width:item.sl / list[0].sl * 100  + '%'}" v-else></view>
				<span>{{item.sl}}</span>
			</view>
		</view>
	</view>
</template>

<script>
import { jqfxCorrelation } from "../../../../api/jqfxApi.js";
	export default {
		props: ["list"],
		watch: {
			list: {
				handler(val) {
					this._getAjlxData()
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				ayList: [],//案由数据
				totalList:[],//统计数据
				
			}
		},
		created() {
			
		},
		methods: {
			/**
			 * 获取案由
			 * @param {Object} code 字典代码
			 */
			_getAjlxData(code) {
				jqfxCorrelation('/xtzd/aylx',{}).then(res => {
					this.ayList = res
					this.totalList = this.list
				})
			},
			//获取案由名称
			_getayName(code) {
				let name = ''
				let info = this.ayList.find(item => {
					return code == item.code
				})
				if (info) {
					name = info.name
					return name
				}
				return code
			}
		}
	}
</script>

<style scoped>
	.box {
		width: 100%;
		height: 100%;
	}

	.total_box {
		display: flex;
		width: 100%;
		margin-bottom: 5vw;
	}

	.total_name {
		flex: 1;
	}

	.total_name>view {
		color: #999;
	}

	.total_num {
		border: 1px solid #264479;
		border: 1px solid #e0e0e0;
		flex: 4.5;
		display: flex;
		align-items: center;
		height: 8vw;
		padding: 1vw;
		justify-content: space-between;
	}

	.total_num .percent {
		width: 92%;
		height: 5vw;
	}

	.total_num .red {
		background-image: linear-gradient(to right, #b6359c, #ef0a6a);
	}

	.total_num .orange {
		background-image: linear-gradient(to right, #f28e26, #fd644f);
	}
</style>
