<template>
  <el-select
		:id="id"
		v-model="model"
		:style="{'border-bottom': isShowRed ? `1px solid ${isShowRed}` : ''}"
		v-bind="$attrs"
		filterable
		v-bind:disabled="isDisable"
		:clearable="clearable"
		v-on="$listeners"
    :placeholder="placeholderEnable || placeholder || $t('components.请选择')"
		@change="handleChange"
		@keyup.delete.native="deleteValue"
	>
		<i v-if="isShowCopy" slot="prefix" class="el-icon-document-copy copy-icon" @click.stop="handleCopy"></i>
    <slot>
      <el-option v-for="item in dbCodeList" :key="item.value" :label="formatShowLabel(item)" :value="item.value">
      </el-option>
    </slot>
  </el-select>
</template>

<script>
import commonDepend from "~/mixin/commonDepend.js";
import markSetShowRed from '~/components/business/componentMixins/markSetShowRed.js'
import { getSelectList } from "~/service/business/codeTable";
import {mapActions} from 'vuex'
export default {
	inject: {
		root: {
			default: () => null
		}
	},

	mixins: [commonDepend, markSetShowRed],
	props: {
		value: {
			type: [String, Array, Number],
			default: undefined
		},
		disabled: {
			type: Boolean,
			default: false
		},
		clearable: {
			type: Boolean,
			default: true
		},
		id: {
			type: String,
			default: undefined
		},
		// 静态显示codeTable中的字段
		code: {
			type: Array,
			default: function () {
				return [];
			}
		},
		// 动态获取下拉列表数据的关键字
		dbCode: {
			type: String,
			default: undefined
		},
		//是否从缓存中读取，false每次调接口
		isCache: {
			type: Boolean,
			default: true
		},
		// 下拉列表显示label和value，eg：value-label
		isShowKeyAndLabel: {
			type: Boolean,
			default: false
		},
		// 下拉列表显示value，eg：value
		isShowKey: {
			type: Boolean,
			default: false
		},
		// 此对象为markset或者modifySet所在的对象，如果传了此对象可以标记当前对象下的字段为红色下划线
		markSetData: {
			type: Object,
			default: () => null
		},
		customModifykey: {
			type: String,
			default: null
		},
		// 总下拉列表数据中过滤出以下数组key
		filterKey: {
			type: Array,
			default: () => []
		},
		// 总下拉列表数据中排除以下数组key
		expKey:{
			type: Array,
			default: () => []
		},
		// 码表语言类型-可选值：英文（en）-默认;中文（cn）；
		uil: {
			type: String,
			default: 'EN'
		},
		// 语言类型
		tempUil: {
			type: String,
			default: ''
		},
		placeholder:{
			type: String,
			default: null
		},
		// 排序方式--值有两种：COD和SRT
		sort: {
			type: String,
			default: 'COD'
		},
		//下拉框是否跟随页面滚动
		isFixed:{
			type: Boolean,
			default: false
		},
		isShowCopy: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			dbCodeList: [],
			timer: {}
		};
	},
	computed: {
		model: {
			get() {
				return this.value;
			},
			set(newVal) {
				this.$emit("input", newVal);
			}
		},
		mode() {
			return this.$store.state.Status.mode;
		},
		isDisable() {
			return this.mode === "display" || this.disabled;
		},
    placeholderEnable(){
      let label = this.$parent.label
      let curLabel = ''
      if (label) {
        curLabel = this.$i18n.locale === 'en' ? this.$t('components.请选择') + ' ' +  this.$t('components.' + label) : this.$t('components.请选择') + this.$t('components.' + label)
      }
      return curLabel
    },
		highlight() {
			return this.$store.state.Status.highlights.indexOf(this.id) !== -1;
		},
	},
	watch: {
		dbCode: {
			handler(newVal) {
				this.init()
			}
		},
		filterKey: {
			handler(newVal) {
				this.init()
			}
		},
		expKey: {
			handler(newVal) {
				this.init()
			}
		},
		disabled(newVal) {
			if (newVal) {
				this.resetValidate()
			}
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		...mapActions([
			'getDbCodeData'
		]),
		init() {
			if (this.dbCode) {
				let dbCode = this.dbCode.toUpperCase()
				let localCodes = localStorage.getItem("localCodes");
				let codesData = {};
				if (localCodes) {
					codesData = JSON.parse(localCodes);
				}
				let lang = this.tempUil ? this.tempUil : (this.root && this.root.lang ? this.root.lang : this.uil)
				// 判断缓存中是否存在此码表，存在去缓存，不存在重新拉取接口
				if (codesData[`${dbCode}_${lang}_${this.sort}`] && this.isCache) {
					let curList = codesData[`${dbCode}_${lang}_${this.sort}`];
					this.dbCodeList = this.filterList(curList)
				} else {
          if (!this.isCache) {
            this.getSingleDBCode()
          } else {
            this.getDBCode();
            this.timer[`${dbCode}_${lang}_${this.sort}`] = setInterval(() => {
              this.callback()
            }, 300)
          }
				}
			} else {
				this.dbCodeList = this.filterList(this.code)
			}
		},
		callback() {
			let localCodes = localStorage.getItem("localCodes");
			let codesData = {};
			if (localCodes) {
				codesData = JSON.parse(localCodes);
			}
			let lang = this.tempUil ? this.tempUil : (this.root && this.root.lang ? this.root.lang : this.uil)
			// 判断缓存中是否存在此码表，存在去缓存，不存在重新拉取接口
			let dbCode = this.dbCode.toUpperCase()
			if (codesData[`${dbCode}_${lang}_${this.sort}`] && this.isCache) {
				let curList = codesData[`${dbCode}_${lang}_${this.sort}`];
				this.dbCodeList = this.filterList(curList)
				if (this.timer[`${dbCode}_${lang}_${this.sort}`]) {
					clearInterval(this.timer[`${dbCode}_${lang}_${this.sort}`])
					this.timer[`${dbCode}_${lang}_${this.sort}`] = null
				}
			}
		},
		//键盘按delete键清空内容
		deleteValue(){
			this.model = ''
			this.handleChange()
			this.$emit("change","")
		},
		formatShowLabel(item) {
			if (this.isShowKey) {
				return item.value
			}
			if (this.isShowKeyAndLabel || this.dbCode == 'ctytxt') {
				return item.value + ' - ' + item.label
			}
			return item.label
		},
		// 筛查数据
		filterList(list) {
			if (this.filterKey.length) {
				return list.filter((item) => {
					return this.filterKey.includes(item.value)
				})
			}
			if(this.expKey.length){
				return list.filter((item) => {
					return !this.expKey.includes(item.value)
				})
			}
			return list
		},
		handleChange() {
			if (!this.customModifykey) {
				// 添加isModify属性
				this.changeModify()
			}
		},
		getDBCode() {
			let lang = this.tempUil ? this.tempUil : (this.root && this.root.lang ? this.root.lang : this.uil)
			let args = {
				codeType: this.dbCode.toUpperCase(),
				uil: lang,
				sort: this.sort,
			};
			this.getDbCodeData({
				args,
				isCache: this.isCache
			})
    },
    getSingleDBCode() {
      let lang = this.root && this.root.lang ? this.root.lang : this.uil;
      let args = {
        codeType: this.dbCode.toUpperCase(),
        uil: lang,
        sort: this.sort
      };
      getSelectList(args).then(rtnmsg => {
        if (rtnmsg.respCode == SUCCESS) {
          let curList = rtnmsg.data.map(item => ({
            value: item.codeValue,
            label: item.codeName
          }));
					this.dbCodeList = this.filterList(curList);
        }
      });
    },
		handleCopy() {
			let content = this.model
			this.dbCodeList.forEach((item) => {
				if (item.value == this.model) {
					content = this.formatShowLabel(item)
				}
			})
			let aux = document.createElement('input')
			aux.setAttribute('value', content)
			document.body.appendChild(aux);
			aux.select();
			document.execCommand('copy')
			this.$message({
				message: `复制成功`,
				type: 'success',
				duration: 2000
			})
		}
	}
};
</script>

<style scoped lang="less">
.copy-icon {
	cursor: pointer;
}
</style>