<template>
	<table width="auto" border="0">
		<template v-if="tableType === 'header'">
			<tr
				v-for="(item, index) in headerArr"
				:key="index"
				align="center"
				class="header"
			>
				<th>{{ labelArr.get(item) }}</th>
				<td v-for="(data, sub_index) in tableOption" :key="sub_index">
          <template v-if="source!=='baiinfo'">
            {{ (item === 'Frequency' && source === 'lz') ? frequencyType.get(data[item]) : data[item] }}
          </template>
					<!-- 百川盈孚数据源 频度和单位需要可编辑 -->
					<template v-else>
            <span>
              {{data[item]}}
              <span v-if="data['IndexCode']&&(item==='Frequency'||item==='Unit')">
                <img
                  v-permission="permissionBtn.dataSourcePermission.bcyfData_edit"
                  src="~@/assets/img/set_m/edit.png"
                  alt="edit"
                  style="width: 14px; height: 14px; margin-left: 5px;cursor:pointer;"
                  @click.stop="editTarget(data)"
                />
              </span>
            </span>
          </template>
				</td>
			</tr>
		</template>
		<template v-else>
			<tr
				v-for="(date,index) in dateArr"
				:key="index"
				align="center"
			>
				<th>{{date}}</th>
				<td v-for="(data, sub_index) in tableOption" :key="sub_index">
					{{data.DataList.find(item => date === item.DataTime) ? 
					data.DataList.find(item => date === item.DataTime)[dynamic_key]
					: ''}}
				</td>
			</tr>
		</template>
	</table>
</template>

<script>
export default {
	name: '',
	props: {
		tableOption: {
			type: Array,
		},
		tableType: {
			type: String
		},
		dateArr: {
			type: Array,
		},
		source: {
			type: String,
			defalut:'lz'
		}
	},
	data() {
		return {
			dynamic_key: (this.source === 'smm'||this.source ==='baiinfo')? 'Value' 
			:this.source==='coal'?'Value': 'InputValue',
			headerArr: this.source === 'gl' 
			? ['IndexName','IndexCode','FrequencyName','UnitName','UpdateTime']
			: this.source === 'smm' 
			? ['IndexName','IndexCode','Frequency','Unit','ModifyTime']
			: this.source==='coal'
			? ['IndexName','IndexCode','Frequency','Unit','ModifyTime']
      : this.source==='baiinfo'
      ? ['IndexName','IndexCode','Frequency','Unit','ModifyTime']
			:['QuotaName','LzCode','Frequency','UnitName','ModifyTime'],
			frequencyType:new Map([
				[1,'日度'],
				[2,'周度'],
				[3,'月度'],
				[4,'季度'],
				[5,'年度'],
				[99,'无固定频率'],
			]),
			labelArr: this.source === 'gl' ? new Map([
				['IndexName', '指标名称'],
				['IndexCode', '指标ID'],
				['FrequencyName', '频度'],
				['UnitName', '单位'],
				['UpdateTime', '更新时间'],
			]): this.source === 'smm' ? new Map([
				['IndexName', '指标名称'],
				['IndexCode', '指标ID'],
				['Frequency', '频度'],
				['Unit', '单位'],
				['ModifyTime', '更新时间'],
			]) :this.source === 'coal' ? new Map([
				['IndexName', '指标名称'],
				['IndexCode', '指标ID'],
				['Frequency', '频度'],
				['Unit', '单位'],
				['ModifyTime', '更新时间'],
			]) :this.source==='baiinfo'?new Map([
        ['IndexName', '指标名称'],
				['IndexCode', '指标ID'],
				['Frequency', '频度'],
				['Unit', '单位'],
				['ModifyTime', '更新时间'],
      ]):new Map([
				['QuotaName', '指标名称'],
				['LzCode', '指标ID'],
				['Frequency', '频度'],
				['UnitName', '单位'],
				['ModifyTime', '更新时间'],
			]),
		};
	},
	methods: {
		initCss() {
			if( this.source !== 'lz') {
				$('table').find('td').css({
						minWidth: '299px',
						maxWidth: '300px'
				})
			}
		},
    editTarget(data){
      this.$emit('editTarget',data)
    }
	},
	created() {},
	updated() {
		this.initCss()
	},
	mounted() {
	},
};
</script>
<style lang="scss" scoped>
table {
	font-size: 14px;
	color: #666;
	td,
	th {
		min-width: 179px;
		max-width: 180px;
		word-break: break-all;
		border: 1px solid #dcdfe6;
		height: 40px;
		background-color: #fff;
	}
	td  {
		&:first-child {
			border-left: none;
		}
	}
	th {
		position: sticky;
		border-right: none;
		left: 0;
		&:before {
			content: " ";
			width: 1px;
			height: 100%;
			position: absolute;
			right: 0;
			top: 0;
			border-right: 1px solid #dcdfe6;
		}
	}
	.header {
		th,td {
			background-color: #F0F2F5;
		}
		&:last-child {
			th,td {
				border-bottom: none;
			}
		}
	}
}
</style>
