<template>
  <div class="QdmTable">
  	<el-table
  		v-if="tree"
      :height="height"
      class="righttable managementMaintable"
      style="width: 100%;"
      :data="tableData"
      v-loading="loading"
      border
      stripe
      @selection-change="handleSelectionChange"
      :empty-text="'暂无数据'"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      row-key="id"
      ref="tableRef"
      :highlight-current-row="radio"
      @current-change="radiohandleCurrentChange"
    >
      <el-table-column :fixed="fixedIndex" type="selection" width="40" header-align="center" align="center" v-if="selection"></el-table-column>
      <el-table-column :fixed="fixedIndex" label="序号" type="index" width="50" header-align="center" align="center" v-if="index"></el-table-column>
      <template v-for="(item, index) in columnList" :key="index">
        <el-table-column
        :label="item.label"
        :prop="item.code"
        :sortable="item.sortable"
        :show-overflow-tooltip="item.tooltip !== 'cancel'"
        :header-align="item.headerAlign ? item.headerAlign : 'center'"
        :align="item.align"
        :fixed="item.fixed"
        :class-name="item.class"
        :min-width="item.min"
        :width="item.width">
        	<template v-slot:header>
        		<div v-if="sortList.includes(item.code)">
	            <el-popover placement="bottom" popper-class="sortPopper">
	              <div class="sortDivClass">
	                <span @click="sortPopperChang(item.code, '')">重置</span>
	                <span @click="sortPopperChang(item.code, 'asc')">升序</span>
	                <span @click="sortPopperChang(item.code, 'desc')">倒序</span>
	              </div>
                <template v-slot:reference>
                  <div>
                    {{ item.label }}
                    <i class="el-icon-sort"></i>
                  </div>
                </template>
	            </el-popover>
	          </div>
            <span v-else>{{ item.label }}</span>
        	</template>
          <template v-slot="scope">
            <div v-if="item.template">
              <div v-html="item.templateHtml"></div>
            </div>
            <div v-else-if="item.type === 'switch'" :class="scope.row.switchText !== '' && scope.row.switchText ? 'textSwitch' : ''">
            	<el-switch
							  v-model="scope.row[item.code]"
							  active-color="#13ce66"
							  inactive-color="#ff4949"
							  :active-text="scope.row.switchText"
    						:inactive-text="scope.row.switchText"
							  @change="switchChange(scope.row)">
							</el-switch>
            </div>
            <div v-else-if="item.type === 'details'">
            	<span :style="'color: #4d73da;cursor: pointer;'" @click="goDetails(scope.row)">{{ scope.row[item.code] }}</span>
            </div>
            <div class="typeInput" v-else-if="item.type === 'input'">
            	<el-input :disabled="item.inputDisabled" @change="inputReturn(scope.row)" v-if="item.inputNumber" type="text" v-model="scope.row[item.code]" onkeyup="value=value.replace(/[^\d.]/g,'')"></el-input>
            	<el-input :disabled="item.inputDisabled" @change="inputReturn(scope.row)" v-else type="text" v-model="scope.row[item.code]"></el-input>
            </div>
            <span v-else>{{ scope.row[item.code] }}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column label="操作" v-if="operationList[0]" header-align="center" align="left" fixed="right" :width="operationWidth">
        <template v-slot="scope">
          <el-button
          :class="item.color"
          v-for="(item, index) in scope.row.operation ? scope.row.operation : operationList"
          :key="index"
          type="text"
          @click="operationReturn(item, scope.row)">{{ item.label }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table
    	v-else
      :height="height"
      class="righttable managementMaintable"
      :class="single ? 'singleTable' : ''"
      style="width: 100%;"
      :data="tableData"
      v-loading="loading"
      border
      stripe
      @selection-change="handleSelectionChange"
      :empty-text="'暂无数据'"
      ref="tableRef"
      @select="select"
      @select-all="selectAll"
      :highlight-current-row="radio"
      @current-change="radiohandleCurrentChange"
    >
      <el-table-column :fixed="fixedIndex" type="selection" width="40" header-align="center" align="center" v-if="selection"></el-table-column>
      <el-table-column :fixed="fixedIndex" label="序号" type="index" width="50" header-align="center" align="center" v-if="index"></el-table-column>
      <template v-for="(item, index) in columnList" :key="index">
        <el-table-column
        :label="item.label"
        :prop="item.code"
        :sortable="item.sortable"
        :show-overflow-tooltip="item.tooltip !== 'cancel'"
        :header-align="item.headerAlign ? item.headerAlign : 'center'"
        :align="item.align"
        :fixed="item.fixed"
        :class-name="item.class"
        :min-width="item.min"
        :width="item.width">
        	<template v-slot:header>
        		<div v-if="sortList.includes(item.code)">
	            <el-popover placement="bottom" popper-class="sortPopper">
	              <div class="sortDivClass">
	                <span @click="sortPopperChang(item.code, '')">重置</span>
	                <span @click="sortPopperChang(item.code, 'asc')">升序</span>
	                <span @click="sortPopperChang(item.code, 'desc')">倒序</span>
	              </div>
                <template v-slot:reference>
                  <div>
                    {{ item.label }}
                    <i class="el-icon-sort"></i>
                  </div>
                </template>
	            </el-popover>
	          </div>
            <span v-else>{{ item.label }}</span>
        	</template>
          <template v-slot="scope">
            <div v-if="item.template">
              <div v-html="item.templateHtml"></div>
            </div>
            <div v-else-if="item.type === 'switch'" :class="scope.row.switchText !== '' && scope.row.switchText ? 'textSwitch' : ''">
            	<el-switch
							  v-model="scope.row[item.code]"
							  active-color="#13ce66"
							  inactive-color="#ff4949"
							  :active-text="scope.row.switchText"
    						:inactive-text="scope.row.switchText"
							  @change="switchChange(scope.row)">
							</el-switch>
            </div>
            <div v-else-if="item.type === 'details'">
            	<span :style="'color: #4d73da;cursor: pointer;'" @click="goDetails(scope.row)">{{ scope.row[item.code] }}</span>
            </div>
            <div class="typeInput" v-else-if="item.type === 'input'">
            	<el-input :disabled="item.inputDisabled" @change="inputReturn(scope.row)" v-if="item.inputNumber" type="text" v-model="scope.row[item.code]" onkeyup="value=value.replace(/[^\d.]/g,'')"></el-input>
            	<el-input :disabled="item.inputDisabled" @change="inputReturn(scope.row)" v-else type="text" v-model="scope.row[item.code]"></el-input>
            </div>
            <span v-else>{{ scope.row[item.code] }}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column label="操作" v-if="operationList[0]" header-align="center" align="left" fixed="right" :width="operationWidth">
        <template v-slot="scope">
          <el-button
          :class="item.color"
          v-for="(item, index) in scope.row.operation ? scope.row.operation : operationList"
          :key="index"
          type="text"
          @click="operationReturn(item, scope.row)">{{ item.label }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "QdmTable",
  props: {
    selection: {
      type: Boolean,
      default: false
    },
    index: {
    	type: Boolean,
      default: false
    },
    columnList: {
      type: Array,
      default: () => {
        return []
      }
    },
    operationList: {
      type: Array,
      default: () => {
        return []
      }
    },
    operationWidth: {
    	type: Number,
      default: 80
    },
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    height: {
    	type: [ Number, String ],
    	default: 500
    },
    sortList: {
    	type: Array,
      default: () => {
        return []
      }
    },
    tree: {
    	type: Boolean,
      default: false
    },
    selectionData: {
    	type: Array,
      default: () => {
        return []
      }
    },
    single: {
    	type: Boolean,
      default: false
    },
    radio: {
    	type: Boolean,
      default: false
    }
  },
  data() {
  	return {
  		newSortList: [],
  		fixedIndex: null
  	}
  },
  created() {
  	this.columnList.forEach(item => {
  		if(item.fixed) {
  			if(item.fixed === 'left') {
  				this.fixedIndex = true
  			}
  		}
  	})
  },
  methods: {
  	select(selection, row) {
      if (selection.length > 1 && this.single) {
        let del_row = selection.shift()
        this.$refs.tableRef.toggleRowSelection(del_row, false)
      }
    },
		selectAll(selection){
      if (selection.length > 1 && this.single) {
        selection.length = 1
      }
  	},
    handleSelectionChange (val) {
      this.$emit('handleSelectionChange', val)
    },
    operationReturn (item, data) {
    	if(item.type === 'delete') {
    		this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit('operationReturn', item, data)
        }).catch(() => {})
    	} else {
    		this.$emit('operationReturn', item, data)
    	}
    },
    switchChange(val) {
    	this.$emit('switchReturn', val)
    },
    inputReturn(val) {
    	this.$emit('inputReturn', val)
    },
    goDetails(val) {
    	this.$emit('goDetailsReturn', val)
    },
    sortPopperChang(name, val) {
    	this.newSortList.forEach((item, index) => {
    		if(item.split(',')[0] === name) {
	    		this.newSortList.splice(index, 1)
	    	}
    	})
      this.sortList.forEach(item => {
        if (item === name) {
          if (val !== '') {
            this.newSortList.push(item + ',' + val)
          }
        }
      })
      this.$nextTick(() => {
      	this.$emit('sortChangReturn', this.newSortList)
      })
    },
    radiohandleCurrentChange(row) {
    	this.$emit('radioChangReturn', row)
    }
  },
  watch: {
  	selectionData(arr) {
  		if(arr) {
  			arr.forEach(item => {
	  			this.$refs.tableRef.toggleRowSelection(item, true)
	  		})
  		} else {
  			this.$refs.tableRef.clearSelection()
  		}
  	},
  	tableData(arr) {
  		this.$refs.tableRef.setCurrentRow(arr[0])
  	}
  }
}
</script>
<style lang="less">
.QdmTable {
	overflow: auto;
  .el-table td, .el-table th.is-leaf {
    border-bottom: 1px solid #E3E4E9;
    font-size: 12px;
    font-weight: 400;
    color: rgba(18, 32, 56, 1);
    padding: 0;
    height: 30px;
    line-height: 30px;
  }
  .el-table th.gutter {
	  display: table-cell!important;
	}
  .el-table__body {
    border-color: #fff;
    .el-table__row {
      .pointerSpan {
        color: #4D73DA;
        cursor: pointer;
      }
    }
  }
  .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
	}
	.el-switch__label--right {
    z-index: 1;
    right: 6px;
	}
	.el-switch__label--left {
    z-index: 1;
    left: 6px;
	}
	.el-switch__label.is-active {
	  display: block;
	  >span {
	  	font-size: 12px;
	  }
	}
	.textSwitch .el-switch .el-switch__core {
		width: 55px !important;
	}
	.textSwitch .el-switch .el-switch__label {
		width: 55px !important;
	}
  .typeInput {
  	input {
  		line-height: 23px;
	  	height: 23px;
	  	font-size: 12px;
  	}
  }
  .el-table {
    border-color: #fff;
    border-left: 1px solid #EBEEF5;
    border-right: 1px solid #EBEEF5;
    border-bottom: 1px solid #EBEEF5;
    border-top: 1px solid #EBEEF5;
    td {
      p {
        margin-block-start: 0em !important;
        margin-block-end: 0em !important;
      }
      button {
        height: 22px;
        line-height: 10px;
        background: #FFFFFF;
        border-radius: 3px;
        border: 1px solid #E6E7EC;
        color: #406CF4;
        font-size: 12px;
        padding: 6px 8px;
        margin-top: 2px;
        min-height: 0;
        &:hover {
          background: rgba(77,115,218,.5);
          border-color: rgba(77,115,218,.1);
          span {
            color: #FFFFFF;
          }
        }
        &.bule {
        	/*background: #4D73DA;
	        border: 1px solid #4D73DA;*/
	        color: #4D73DA;
        	&:hover {
        		color: #fff;
	          background: rgba(77,115,218,.5);
	          border-color: rgba(77,115,218,.1);
	        }
        }
        &.green {
        	/*background: #13ce66;
	        border: 1px solid #13ce66;*/
	        color: #4D73DA;
        	&:hover {
	          /*background: rgba(19,206,102,.5);
	          border-color: rgba(19,206,102,.1);*/
	         	color: #fff;
	         	background: rgba(77,115,218,.5);
	          border-color: rgba(77,115,218,.1);
	        }
        }
        &.red {
        	/*background: #ff4949;
	        border: 1px solid #ff4949;*/
	        color: #4D73DA;
        	&:hover {
	          /*background: rgba(255,73,73,.5);
	          border-color: rgba(255,73,73,.1);*/
	         	color: #fff;
	          background: rgba(77,115,218,.5);
	          border-color: rgba(77,115,218,.1);
	        }
        }
        &.grey {
        	/*background: #909399;
	        border: 1px solid #909399;*/
	        color: #4D73DA;
        	&:hover {
	          /*background: rgba(144,147,153,.5);
	          border-color: rgba(144,147,153,.1);*/
	          color: #fff;
	          background: rgba(77,115,218,.5);
	          border-color: rgba(77,115,218,.1);
	        }
        }
        &.orange {
        	/*background: #E6A23C;
	        border: 1px solid #E6A23C;*/
	        color: #4D73DA;
        	&:hover {
	          /*background: rgba(230,162,60,.5);
	          border-color: rgba(230,162,60,.1);*/
	          color: #fff;
	          background: rgba(77,115,218,.5);
	          border-color: rgba(77,115,218,.1);
	        }
        }
      }
    }
    tr {
      th {
        .cell {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
  .el-table tr {
    border-color: #fff;
  }
  .el-table th {
    padding: 0;
    height: 32px !important;
    line-height: 36px;
    font-weight: 600 !important;
    color: rgba(100, 108, 154, 1) !important;
    font-size: 12px !important;
  }
  .el-table::before {
    background-color: #fff;
  }
  .el-table__row--striped {
    td {
      background: #FAFBFCFF;
    }
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #FCFDFF;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td {
  	background-color: #ecf5ff !important;
  }
  .el-icon-sort {
  	cursor: pointer;
  }
  .singleTable {
  	.el-table__header {
  		.el-checkbox {
  			display: none;
  		}
  	}
  }
}
.sortPopper {
  min-width: 80px;
}
.sortDivClass {
  > span {
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    margin-left: 8px;
    &:first-child {
      margin-left: 0px;
    }
    &.active {
      color: #646c9a;
    }
  }
}
</style>