<template>
  <el-table-column v-if="type" :type="type" :selectable="selectable" :reserve-selection="reserveSelection" :label="label" :fixed="fixed" :sortable="sortable" :width="width" />
  <el-table-column v-else :label="label" :prop="prop" :class-name="className" :min-width="minWidth"
                   :show-overflow-tooltip="showoverflowtooltip" :fixed="fixed" :align="align" :sortable="sortable" :width="width">
    <template slot="header" slot-scope="scope">

      <div class="label-header">
        <!-- 调大了这里的行高，否则下面排序箭头可能导致不平-->
        <span class="label"> {{ label }}</span>
        <!-- caret-wrapper 是原本的排序箭头，为了使箭头样式在label同一行，并且排除原本位置错乱的 el-table 原生样式，在 card-Table 中将原生样式设为none，保留了这里的 caret-wrapper-->
        <span v-if="sortable" class="caret-wrapper"><i class="sort-caret ascending"></i><i class="sort-caret descending"></i></span>
      </div>

      <!--<div v-if=" !showSearch">-->
      <!--  <br>-->
      <!--</div>-->
      <div>
        <div>
          <div  @click.stop>
            <div v-if=" showSearch && searchType==='input'">
              <el-input
                v-model="searchParams[`${prop}`]"
                :clearable="clearable"
                :placeholder="$t('common.pleaseInput')"
                size="small"
                width="100%"
                @keyup.enter.native="handleSelect"
              />
            </div>

            <div v-if="showSearch && searchType==='select'">
              <el-select v-model="searchParams[`${prop}`]"
                         :clearable="clearable"
                         :multiple="selectMore"
                         :placeholder="$t('common.pleaseSelect')"
                         collapse-tags
                         filterable
                         width="100%"
                         size="small"
                         @change="selectChange">
                <el-option
                  v-for="item in searchDict"
                  :key="item[`${valueProp}`]"
                  :label="initDictLabel(item)"
                  :value="String(item[`${valueProp}`])"
                >
                </el-option>
              </el-select>
            </div>

            <div v-if="showSearch && searchType==='dateRange'">
              <el-date-picker
                v-model="searchParams[`${prop}`]"
                :clearable="clearable"
                :disabled="disabled"
                :placeholder="$t('common.pleaseSelect')"
                :end-placeholder="endPlaceholder"
                :picker-options="pickerBeginOption || datePickerOptions"
                :start-placeholder="startPlaceholder"
                :type="dateType"
                :value-format="format"
                range-separator="~"
                style="width: 100%"
                size="small"
                @change="arrayToStr"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div v-if="showSearch && searchType=== 'operate'">
          <el-button icon="el-icon-search" pageSize="small" size="small" type="primary" @click="handleSelect">
            {{ $t('common.search') }}
          </el-button>
          <el-button v-if="showReset" icon="el-icon-refresh" plain size="small"
                     style="  border: 1px solid #D31017;color: #D31017" @click="resetList">{{ $t('common.reset') }}
          </el-button>
        </div>
      </div>
    </template>
    <template slot-scope="scope">
      <slot  :row="scope.row" :index="scope.$index" >{{isBlank(defaultFormat(scope.row[prop])) ? '-' :  defaultFormat(scope.row[prop])}}</slot>
    </template>
  </el-table-column>
</template>
<script>

import {isBlank} from "../../../utils";
import mixin from "../form/items/mixin";
import {compareDateWithAccuracy, isDate} from "../../../utils";
export default {
  name: 'Column',
  props: {
    type: {
      type: String,
      default: '',
    },
    selectable: {
      type: Function,
    },
    label: {
      type: String,
      default: '',
    },
    prop: {
      type: String,
    },
    width: {
      type: String,
    },
    minWidth: {
      type: Number,
      default: 150,
    },
    fixed: {
      type: String,
    },
    align: {
      type : String,
      default: 'center'
    },
    sortable:{
      default:false,
    },
    showoverflowtooltip:{
      type:Boolean,
      default:true
    },
    className:{
      type: String
    },
    reserveSelection:{
      type:Boolean,
      default: false
    },
    searchParams: {
      type: Object,
      default: () => {
      }
    },
    showSearch:{
      type:Boolean,
      default: false
    },
    searchType: {
      type : String,
      default: 'input'
    },
    searchDict: {
      type: Array,
      default: () => []
    },
    dateType: {
      type: String,
      default: 'daterange',
    },
    propStart:{
      type: String,
      default: 'beginTime',
    },
    propEnd:{
      type: String,
      default: 'endTime',
    },
    miniTime:{
      default: false
    },
    maxTime:{
      default: false
    },
    defaultValue:{
      type: Array,
      default:() => []
    },
    miniAble:{
      type: Boolean,
      default: true
    },
    maxAble:{
      type: Boolean,
      default: true
    },
    pickerBeginOption: {
      type: Object,
      default: null
    },
    valueProp: {
      type: String,
      default: "value",
    },
    labelProp: {
      type: String,
      default: "label",
    },
    disabled:{
      type:Boolean,
      default: false
    },
    clearable:{
      type:Boolean,
      default: true
    },
    selectMore:{
      type:Boolean,
      default: false
    },
    selectProp:{
      type: String,
      default: "",
    },
    showReset:{
      type:Boolean,
      default: true
    },

  },
  computed:{
    initDictLabel(item){
      return function (item) {
        const currentLocale = window.VueI18n.locale;
        if(currentLocale === 'chinese'){
          return item['label']||item[this.labelProp];
        }
        if(currentLocale === 'english'){
          return item['dictLabelUS'] || item[this.labelProp];
        }
        if(currentLocale === 'russia'){
          return item['dictLabelRU'] || item[this.labelProp];
        }
        if(currentLocale === 'spanish'){
          return item['dictLabelES'] || item[this.labelProp];
        }
      }


    },

    format() {
      switch (this.dateType) {
        case 'daterange':
          return 'yyyy-MM-dd'
        case 'monthrange':
          return 'yyyy-MM'
        case 'secondrange':
          return 'yyyy-MM-dd HH:mm:ss'
      }
    },
    startPlaceholder(){
      switch (this.dateType) {
        case 'daterange':
          return this.$t('common.dateRangeStart')
        case 'monthrange':
          return this.$t('common.monthRangeStart')
      }
    },
    endPlaceholder(){
      switch (this.dateType) {
        case 'daterange':
          return this.$t('common.dateRangeEnd')
        case 'monthrange':
          return this.$t('common.monthRangeEnd')
      }
    },
  },
  created(){
    if(!this.searchParams){
      this.searchParams = this.$parent.$parent.searchParams
    }
  },
  methods:{
    defaultFormat(val){
      let res = val
      if(this.searchType==='select'){
        this.searchDict.some(item=>{
          if(item[this.valueProp] == val){
            res = item[this.labelProp]
          }
        })
      }
      return res;
    },
    isBlank,
    handleSelect(){
      // console.log(this.$parent)
      this.$parent.$parent.columnSearch();
    },
    //日期控件相关

    arrayToStr(e){
      if (!!e) {
        this.searchParams[this.propStart] = ""
        this.searchParams[this.propEnd] = ""
        if(this.dateType == 'daterange'){
          this.searchParams[this.propStart] =  e[0] + " 00:00:00"
          this.searchParams[this.propEnd] = e[1] + " 23:59:59"
        }else{
          this.searchParams[this.propStart] =  e[0]
          this.searchParams[this.propEnd] = e[1]
        }
      }else{
        this.searchParams[this.propStart] = undefined
        this.searchParams[this.propEnd] = undefined
      }
      this.$emit('dataChange')
    },
    selectChange(){
      if(this.selectMore&&this.selectProp){
        //多选
        let propStr =  this.searchParams[this.prop].join(",");
        this.$set(this.searchParams,this.selectProp,propStr)
      }
      this.$emit('selectChange')
    },
    resetList() {
      //重置
      this.$parent.$parent.resetList();
    },
  },
  mounted() {
  },
  data(){
    return {
      value: null,
      datePickerOptions: {
        disabledDate: time => {
          //只有最小时间限制
          if(this.miniTime && !this.maxTime){
            if(this.maxAble){
              return  compareDateWithAccuracy(time,this.isDate(this.miniTime)? this.miniTime :new Date(this.miniTime),this.compareType)  < 0
            }else{
              return  compareDateWithAccuracy(time,this.isDate(this.miniTime)? this.miniTime :new Date(this.miniTime),this.compareType)  <= 0
            }
          }
          //只有最大时间限制
          if (this.maxTime && !this.miniTime){
            if(this.miniAble){
              return  compareDateWithAccuracy(time,this.isDate(this.maxTime) ? this.maxTime :new Date(this.maxTime),this.compareType)  > 0
            }else{
              return  compareDateWithAccuracy(time,this.isDate(this.maxTime) ? this.maxTime :new Date(this.maxTime),this.compareType)  >= 0
            }
          }
          if (this.maxTime && this.miniTime){
            //填入时间都可使用
            if(this.miniAble && this.maxAble){
              return  compareDateWithAccuracy(time,this.isDate(this.maxTime) ? this.maxTime : new Date(this.maxTime),this.compareType)  > 0
                || compareDateWithAccuracy(time,this.isDate(this.miniTime)? this.miniTime :new Date(this.miniTime),this.compareType)  < 0
            }else if(this.miniAble && !this.maxAble){
              return  compareDateWithAccuracy(time,this.isDate(this.maxTime) ? this.maxTime : new Date(this.maxTime),this.compareType)  >= 0
                || compareDateWithAccuracy(time,this.isDate(this.miniTime)? this.miniTime :new Date(this.miniTime),this.compareType)  < 0
            }else if(!this.miniAble && this.maxAble){
              return  compareDateWithAccuracy(time,this.isDate(this.maxTime) ? this.maxTime : new Date(this.maxTime),this.compareType)  >  0
                || compareDateWithAccuracy(time,this.isDate(this.miniTime)? this.miniTime :new Date(this.miniTime),this.compareType)  <= 0
            }else if(!this.miniAble && !this.maxAble){
              return  compareDateWithAccuracy(time,this.isDate(this.maxTime) ? this.maxTime : new Date(this.maxTime),this.compareType)  >= 0
                || compareDateWithAccuracy(time,this.isDate(this.miniTime)? this.miniTime :new Date(this.miniTime),this.compareType)  <= 0
            }
          }
          return false
        }
      },
      //searchParams:{}
    }
  }
}
</script>
<style lang='scss' scoped>
  /*::v-deep .el-input{*/
  /*  width: 240px!important;*/
  /*}*/
  ::v-deep .el-select .el-select__tags {
    display: flex;
    flex-wrap: nowrap;
    & > span {
      display: flex;
    }
  }

  .caret-wrapper {
    padding-left: 5px;
  }

  .label-header {
    display: flex;
    align-items: center;
    justify-content: center;

    .label {
      line-height: 40px;
    }
  }
</style>
