<!-- @desc:dk-table的列  @auth:周兴  @time:2022/11/15 9:47 -->
<template>

  <!--   序列   -->
  <vxe-column type="seq" :width="widthData<60?(treeFlag?90:60):widthData" v-if="typeData === 'seq'"
              :title="vm.$t('seq')" align="center" fixed="left" class-name="seq-column-class"
              header-class-name="seq-column-class" footer-class-name="seq-column-class">
    <!--标题-->
    <template #header="{ row,column,columnIndex }">
      <span>{{ vm.$t('seq') }}</span>
      <Poptip trigger="hover" transfer placement="top-start" :content="seqTipContent" v-if="showTip">
        <Icon type="iconfont iconfont icon-info" style="cursor: pointer;" ref="info-icon"/>
      </Poptip>
    </template>
    <template #default="{row, seq, rowIndex}" v-if="operateFlag">
      <!--      :class="(treeFlag && row.parentId) ?'seq-class-s':'seq-class-t'"-->
      <div v-if="!row._hover" :style="{'padding-left':(treeFlag?'10px':'0')}">{{ seq }}</div>
      <seq-button :addFlag="addFlag" v-if="row._hover" @del="del(rowIndex)"/>
    </template>
    <template #default="{row, seq, rowIndex}" v-else>
      <icon color="#19BE6B"
            v-if="row.parentId && checkExchangeIconVisible(row)"
            class="change-icon-class" @click="handleExchangeClick(row)"
            type="iconfont iconfont icon-exchange"></icon>
      <!--      :class="treeFlag && row.parentId ?'seq-class-s':'seq-class-t'"-->
      <div :style="{'padding-left':(treeFlag?'10px':'0'),'cursor':(chooseDataFlag?'pointer':'default')}"
           @dblclick.stop="chooseData(row,rowIndex)">{{ seq }}
      </div>
      <div class="lock-class">
        <Poptip trigger="hover" transfer placement="top-start" content="锁定" v-if="row.flgLocked"
                popper-class="refresh-class">
          <Icon type="iconfont iconfont icon-lock" style="font-size: 10px" ref="lock-icon"/>
        </Poptip>
      </div>
    </template>
  </vxe-column>

  <!--  链接  -->
  <vxe-column :sortable="sortableData" :id="id" type="text"
              v-else-if="typeData === 'link'"
              :visible="visible"
              :class-name="classNameData" show-header-overflow show-footer-overflow
              show-overflow="title" :min-width="minWidthData" :title="titleData"
              :params="{type:typeData,digits:digits,dataType:columnType,align:align,centerFlag:centerFlag}"
              :fixed="fixedData" :radioRight="radioRight" :width="widthData" :field="field"
              :tree-node="treeNode">
    <template #header="{column,columnIndex}">
      <div class="custom-vxe-header">
        <span>{{ titleData }}</span>
        <Poptip popper-class="popper-class" transfer @on-popper-show="onPopperShow" ref="popTip" :disabled="popDisabled"
                v-if="filterData && id!=='selAll'">
          <Icon ref="switch-icon" v-if="socialOld.length>0" :class="socialOld.length>0?'filtered-class':'filter-class'"
                type="iconfont iconfont icon-shaixuanguolv"/>
          <div slot="content" class="pop-content">
            <div class="filter-head" style="margin-bottom: 5px;">
              <Input size="small" v-model="searchText" @on-change="changeStr" v-if="filterStrData"
                     :placeholder="vm.$t('searchText')"></Input>
              <div v-if="filterNumData" style="display: flex;justify-content: space-between;">
                <InputNumber size="small" style="width: 47%" v-model="searchArray[0]" @on-change="changeNumber"
                             :placeholder="vm.$t('minValue')"></InputNumber>
                -
                <InputNumber size="small" style="width: 47%" v-model="searchArray[1]" @on-change="changeNumber"
                             :placeholder="vm.$t('maxValue')"></InputNumber>
              </div>
              <div v-if="filterDateData" style="display: flex;justify-content: space-between;">
                <DatePicker size="small" type="date" @on-change="changeDate" :options="dateOptions.disabledStart"
                            v-model="searchArray[0]" disabledDate="" :placeholder="vm.$t('minDate')"
                            style="width:47%"></DatePicker>
                -
                <DatePicker size="small" type="date" @on-change="changeDate" :options="dateOptions.disabledEnd"
                            v-model="searchArray[1]" :placeholder="vm.$t('maxDate')" style="width:47%"></DatePicker>
              </div>
            </div>
            <div class="filter-content">
              <div v-show="cfData.length>0">
                <Checkbox
                    :indeterminate="indeterminate"
                    v-model="checkAll"
                    @on-change="handleCheckAll">{{ vm.$t('allChoose') }}
                </Checkbox>
                <Checkbox-group ref="checkBoxGroup" v-model="social" @on-change="checkAllGroupChange">
                  <Checkbox v-for="(it,index) in cfData" :key="index" :label="it.toString()"
                            style="display: block;line-height: 1.8;">{{ handleFilterLabel(it) }}
                  </Checkbox>
                </Checkbox-group>
              </div>
              <div class="custom-empty" v-show="cfData.length<=0">{{ vm.$t('noMatchData') }}</div>
            </div>
            <div class="filter-footer">
              <Button size="small" @click="clearFilter">{{ vm.$t('clearFiterChoose') }}</Button>
              <Button size="small" @click="search">{{ vm.$t('fiterChoose') }}</Button>
            </div>
          </div>
        </Poptip>
        <!--冻结/解冻列-->
        <Icon ref="freeze" :class="freezeFlag?'freezed-class':'freeze-class' " v-if="freezeFlag"
              type="ios-lock"
              @click="handleFreeze(Object.assign($event,{column,columnIndex}))"/>
      </div>
    </template>
    <!--    v-if="!row.parentId ||  (dkTable.treeFlag && row.parentId && row.viewFlag)"-->
    <template #default="{ row,rowIndex}">
      <div class="normal-class" @dblclick.stop="copyValue(row,rowIndex)"><a v-if="!row.totalFlag"
                                                                            style="text-decoration: underline;color: #2d8cf0;"
                                                                            @click="handleLink(row,rowIndex)">{{
          row[field]
        }}</a>
        <div v-else>{{ row[field] }}</div>
        <!--        <span v-else>{{ row[field] }}</span></div>-->
      </div>
    </template>
  </vxe-column>

  <!--  图片  -->
  <vxe-column :sortable="false" :id="id" type="image" align="center"
              v-else-if="typeData === 'image'"
              :class-name="classNameData" show-header-overflow show-footer-overflow
              show-overflow="title" :min-width="minWidthData" :title="titleData"
              :params="{type:typeData,digits:digits,dataType:columnType,align:align,centerFlag:centerFlag}"
              :fixed="fixedData" :radioRight="radioRight" :width="widthData" :field="field">
    <template #default="{row}">
      <!--      <img :src="row[field]" style="width: 26px; height: 26px;"/>-->
      <!--      <Poptip trigger="click" transfer :disabled="!checkIsImage(row)">-->
      <!--        <img v-if="checkIsImage(row)"-->
      <!--             :src="row[field] && row[field].length > 0?(imageUrl?imageUrl:'') + row[field]:logo"-->
      <!--             style="width: 26px; height: 26px; cursor: pointer;margin-top:-3px"/>-->
      <!--        <div v-else>-->
      <!--          &lt;!&ndash;下载 pdf&ndash;&gt;-->
      <!--          <DkButton v-if="row.type == 'pdf'" @click="openFile(row)">-->
      <!--            <a href="#" download="filename.pdf">-->
      <!--              <Icon type="md-download"/>-->
      <!--            </a>-->
      <!--          </DkButton>-->
      <!--          <DkButton v-else>-->
      <!--            <a :href="(imageUrl?imageUrl:'') + row[field]" download="filename.pdf">-->
      <!--              <Icon type="md-download"/>-->
      <!--            </a>-->
      <!--          </DkButton>-->
      <!--        </div>-->
      <!--        <div slot="content">-->
      <!--          <img-->
      <!--              :src="row[field] && row[field].length > 0?(imageUrl?imageUrl:'') +row[field]:logo"-->
      <!--              style="width: 400px; height: 400px;"/>-->
      <!--          <div>-->
      <!--            <DkButton @click="openFile(row)">-->
      <!--              <Icon type="md-download"/>-->
      <!--            </DkButton>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </Poptip>-->
      <img v-if="checkIsImage(row)" @click="openFile(row)"
           :src="row[field] && row[field].length > 0?(imageUrl?imageUrl:'') + row[field]:logo"
           style="width: 26px; height: 26px; cursor: pointer;margin-top:-3px"/>
      <div v-else style="display: flex ;justify-content: center">
        <!--下载 pdf-->
        <DkButton v-if="row.type == 'pdf'" @click="openFile(row)">
          <a href="#" :download="row['name']?row['name']:'down'">
            <Icon type="md-download"/>
          </a>
        </DkButton>
        <DkButton v-else>
          <a :href="(imageUrl?imageUrl:'') + row[field]" :download="row['name']?row['name']:'down'">
            <Icon type="md-download"/>
          </a>
        </DkButton>
      </div>
    </template>
  </vxe-column>

  <!--  操作  -->
  <vxe-column :sortable="false" :id="id" type="operate" align="center"
              v-else-if="typeData === 'operate'"
              :class-name="classNameData" show-header-overflow show-footer-overflow
              show-overflow="title" :min-width="minWidthData" :title="titleData"
              :fixed="fixedData" :radioRight="radioRight" :width="widthData" :field="field"
              fixed="right">
    <slot></slot>
  </vxe-column>

  <!-- 按钮 -->
  <vxe-column v-else-if="typeData === 'button'"
              type="button"
              :width="widthData"
              :min-width="minWidthData"
              class-name="button-column-class"
              show-header-overflow show-footer-overflow
              show-overflow="title"
              :fixed="fixedData"
              :title="titleData"
              :field="field">
    <template #default="{ row,rowIndex }">
      <vxe-button :class-name="btnBlockFlag?'block-class':''" v-model="row[field]" v-if="!btnField || row[btnField]"
                  :content="row[field]" @click.native="buttonClick(field,rowIndex,row)">
        <slot name="default" :row="row"></slot>
      </vxe-button>
      <div style="display: flex; height: 28px; line-height: 28px;" v-else>
        <slot name="default" :row="row"></slot>
      </div>
    </template>
  </vxe-column>

  <!--  正常列  -->
  <vxe-column :sortable="sortableData" :id="id" :type="typeData"
              v-else-if="typeData !== 'switch'"
              :visible="visible"
              header-class-name="freeze-column-class"
              class-name="freeze-column-class" show-header-overflow show-footer-overflow
              show-overflow="title" :min-width="(typeData=='checkbox' || typeData=='radio')?'50': minWidthData"
              :title="titleData"
              :params="{type:typeData,digits:digits,dataType:columnType,align:align,centerFlag:centerFlag}"
              :fixed="fixedData" :radioRight="radioRight"
              :width="(typeData=='checkbox' || typeData=='radio')?'50': widthData" :field="field" align="left"
              :tree-node="treeNode">
    <template v-if="!type" #header="{column,columnIndex}">
      <div class="custom-vxe-header">
        <span>{{ titleData }}</span>
        <Poptip popper-class="popper-class" style="z-index: 300" transfer @on-popper-show="onPopperShow" ref="popTip"
                :disabled="popDisabled"
                v-if="filterData && id!=='selAll'">
          <Icon ref="switch-icon" v-if="socialOld.length>0" :class="socialOld.length>0?'filtered-class':'filter-class'"
                type="iconfont iconfont icon-shaixuanguolv"/>
          <div slot="content" class="pop-content">
            <div class="filter-head" style="margin-bottom: 5px;">
              <Input size="small" v-model="searchText" @on-change="changeStr" v-if="filterStrData"
                     :placeholder="vm.$t('searchText')"></Input>
              <div v-if="filterNumData" style="display: flex;justify-content: space-between;">
                <InputNumber size="small" style="width: 47%" v-model="searchArray[0]" @on-change="changeNumber"
                             :placeholder="vm.$t('minValue')"></InputNumber>
                -
                <InputNumber size="small" style="width: 47%" v-model="searchArray[1]" @on-change="changeNumber"
                             :placeholder="vm.$t('maxValue')"></InputNumber>
              </div>
              <div v-if="filterDateData" style="display: flex;justify-content: space-between;">
                <DatePicker size="small" type="date" @on-change="changeDate" :options="dateOptions.disabledStart"
                            v-model="searchArray[0]" disabledDate="" :placeholder="vm.$t('minDate')"
                            style="width:47%"></DatePicker>
                -
                <DatePicker size="small" type="date" @on-change="changeDate" :options="dateOptions.disabledEnd"
                            v-model="searchArray[1]" :placeholder="vm.$t('maxDate')" style="width:47%"></DatePicker>
              </div>
            </div>
            <div class="filter-content">
              <div v-show="cfData.length>0">
                <Checkbox
                    :indeterminate="indeterminate"
                    v-model="checkAll"
                    @on-change="handleCheckAll">{{ vm.$t('allChoose') }}
                </Checkbox>
                <Checkbox-group ref="checkBoxGroup" v-model="social" @on-change="checkAllGroupChange">
                  <Checkbox v-for="(it,index) in cfData" :key="index" :label="it.toString()"
                            style="display: block;line-height: 1.8;">{{ handleFilterLabel(it) }}
                  </Checkbox>
                </Checkbox-group>
              </div>
              <div class="custom-empty" v-show="cfData.length<=0">{{ vm.$t('noMatchData') }}</div>
            </div>
            <div class="filter-footer">
              <Button size="small" @click="clearFilter">{{ vm.$t('clearFiterChoose') }}</Button>
              <Button size="small" @click="search">{{ vm.$t('fiterChoose') }}</Button>
            </div>
          </div>
        </Poptip>
        <!--冻结/解冻列-->
        <Icon ref="freeze" :class="freezeFlag?'freezed-class':'freeze-class' " v-if="freezeFlag"
              type="ios-lock"
              @click="handleFreeze(Object.assign($event,{column,columnIndex}))"/>
      </div>
    </template>
    <template #default="{ row,rowIndex}">
      <div :class="getClass(row,field)"
           @dblclick.stop="copyValue(row,rowIndex)">{{ formatColumn({cellValue: row[field], row: row}) }}
      </div>
    </template>
  </vxe-column>

  <!--   开关   -->
  <vxe-column :sortable="sortableData" :id="id" :type="typeData" v-else
              class-name="tableColumnHeight" show-header-overflow show-footer-overflow
              show-overflow="title" :min-width="minWidthData" :title="titleData"
              :visible="visible"
              :params="{type:typeData,digits:digits,dataType:columnType,align:align,centerFlag:centerFlag}"
              :fixed="fixedData" :radioRight="radioRight" :width="widthData" :field="field" align="center">
    <template #default="{ row }" style="line-height: 0">
      <!--如果整列不是disabled，那么就可以按照行的disabled来处理-->
      <vxe-switch size="mini" v-model="row[field]" @change="handleSwitchChange(Object.assign(row,{checked:$event}))"
                  @click.stop="()=>{}" :disabled="switchDisabled?true:(row['disabled']?true:false)" :open-value="true"
                  :close-value="false"></vxe-switch>
    </template>
  </vxe-column>

</template>


<script>

import XEUtils from 'xe-utils'
import logo from '@/assets/images/no_img.png'
import SeqButton from '_c/sub/seq-button'

export default {
  name: 'DkTableColumn',
  components: {SeqButton},
  inject: ['changeTableData', 'tableData', 'tableSocial', 'filterContent', 'treeFlag', 'operateFlag', 'dkTable'
  ],
  props: {
    // 最小宽度
    minWidth: {
      type: [String, Number],
      default: '120'
    },
    // 宽度
    width: {
      type: [String, Number],
      default: '150'
    },
    //radio是否在右侧
    radioRight: {
      type: Boolean,
      default: false
    },
    //是否进行排序
    sortable: {
      type: Boolean,
      default: true
    },
    //是否冻结
    fixed: {
      type: String,
      default: ''
    },
    // 列的id
    id: {
      type: String,
      default: ''
    },
    //给单元格附加 className
    className: {
      type: String,
      default: ''
    },
    //列字段名
    field: {
      type: String,
      default: ''
    },
    //列标题（如果可以通过field在国际化文件找到对应的，不需要赋值）
    title: {
      type: String,
      default: ''
    },
    // 列类型 seq,radio,checkbox,expand,html,switch
    type: {
      type: String,
      default: null
    },
    // 是否开启过滤
    filter: {
      type: Boolean,
      default: true
    },
    // 是否开启冻结
    freeze: {
      type: Boolean,
      default: true,
    },
    // 是否开启合计
    sum: {
      type: Boolean,
      default: false
    },
    // 是否开启格式化千分位（默认开启）
    formatThousandth: {
      type: Boolean,
      default: true
    },
    // 小数位数
    digits: {
      type: Number,
      default: 0
    },
    // 最后一列不设置，会自动补满宽度，跟width="auto"效果一致
    resizeFlag: {
      type: Boolean,
      default: false
    },
    //switch是否禁用
    switchDisabled: {
      type: Boolean,
      default: true
    },
    // 是否是树形节点列
    treeNode: {
      type: Boolean,
      default: false
    },
    // 是否显示新增按钮
    addFlag: {
      type: Boolean,
      default: true
    },
    // 切换数据的列名
    exchangeField: {
      type: String,
      default: ''
    },
    // 列数据类型，如不设置就会当成string处理，其他类型参照config中的dataType枚举
    dataType: {
      type: String,
      default: 'string'
    },
    // 颜色卡片，用于类似出库状态等字段的显示(目前支持3种颜色，需要以后再加）
    colorCards: {
      type: Array,
      default: null
    },
    // 计算小计时需要按照那列进行去重
    sumUniqueField: {
      type: String,
      default: null
    },
    // 是否可视
    visible: {
      type: Boolean,
      default: true
    },
    // 下拉的数据源
    options: {
      type: Array,
      default: () => []
    },
    // 下拉数据源的隐藏列的名称
    valueKey: {
      type: String,
      default: null
    },
    // 下拉数据源的显示列的名称
    labelKey: {
      type: String,
      default: null
    },
    // 是否显示序号tip
    showTip: {
      type: Boolean,
      default: false
    },
    // 序号提示信息
    seqTipContent: {
      type: String,
      default: null
    },
    // 是否居中
    centerFlag: {
      type: Boolean,
      default: null
    },
    // 是否开启双击行号选择数据的标识
    chooseDataFlag: {
      type: Boolean,
      default: false
    },
    // 文字位置
    align: {
      type: String,
      default: null
    },
    // 按钮的控制名称
    btnField: {
      type: String,
      default: null
    },
    // 按钮是否是block样式
    btnBlockFlag: {
      type: Boolean,
      default: false
    },
    // 链接的传入参数
    linkObj: {
      type: Object,
    },
    // 前缀
    imageUrl: {
      type: String,
    }
  },
  data() {
    const vm = window.vm;
    let self = this;
    return {
      vm: vm,
      logo,
      colorCardsClass: ['colorCardsClass1', 'colorCardsClass2', 'colorCardsClass3'],
      freezeData: false,
      freezeFlag: false,
      filterData: false,
      sortableData: false,
      titleData: '',
      minWidthData: '',
      widthData: '',
      fixedData: '',
      classNameData: '',
      typeData: '',
      socialOld: [],
      popDisabled: true, //过滤面板是否可用
      indeterminate: false,
      checkAll: false,
      cfData: [],
      cfDataSocial: [],
      social: [],
      searchText: '',
      //过滤文本
      filterStrData: false,
      //过滤数值
      filterNumData: false,
      //过滤日期
      filterDateData: false,
      //列的类型
      columnType: self.dataType,
      searchArray: [null, null],
      dateOptions: {
        disabledStart: {
          disabledDate(date) {
            return new Date(date).getTime() > (self.searchArray[1] ? new Date(self.searchArray[1]) : Number.MAX_SAFE_INTEGER)
          }
        },
        disabledEnd: {
          disabledDate(date) {
            return new Date(date).getTime() < (self.searchArray[0] ? new Date(self.searchArray[0]) : Number.MIN_SAFE_INTEGER)
          }
        }
      },
      filedName: vm.$t(self.field)
    }
  },
  watch: {
    columnFilterData(n, o) {
      this.cfData = n
    },
    title(n, o) {
      this.titleData = n;
    },
    options(n, o) {
    },
    dataType(n, o) {
      this.columnType = n;
    }
  },
  methods: {
    /**
     * @desc   : 打开文件进行下载
     * @author : 周兴
     * @date   : 2024/4/2 14:53
     */
    openFile(row) {
      let url = (this.imageUrl ? this.imageUrl : '') + row.path
      window.open(url, '_blank')
    },
    /**
     * @desc   : 判断是否是图片
     * @author : 周兴
     * @date   : 2024/4/2 14:30
     */
    checkIsImage(row) {
      let flag = false;
      if (row.type) {
        if (row.type == 'img') {
          flag = true;
        }
      } else {
        let val = row[this.field];
        if (val.indexOf(".jpg") >= 0 || val.indexOf('.jpeg') >= 0 || val.indexOf('.png') >= 0 || val.indexOf('.bmp') >= 0) {
          flag = true;
        }
      }
      return flag;
    },
    /**
     * @desc   : 设置标题
     * @author : 周兴
     * @date   : 2023/10/19 16:07
     */
    handleFilterLabel(cellValue) {
      if (this.columnType === this.$config.columnType.date) {
        //日期
        if (cellValue != null) {
          return new Date(cellValue).format('yyyy-MM-dd');
        }
      } else if (this.columnType === this.$config.columnType.dateTime) {
        //日期
        if (cellValue != null) {
          return new Date(cellValue).format('yyyy-MM-dd hh:mm:ss');
        }
      }
      return cellValue;
    },
    /**
     * @desc   : 选择数据
     * @author : 周兴
     * @date   : 2023/2/19 18:43
     */
    chooseData(row, rowIndex) {
      if (this.chooseDataFlag && this.dkTable && this.dkTable.chooseData) {
        this.dkTable.chooseData(row, rowIndex);
      }
    },
    /**
     * @desc   : 复制单元格
     * @author : 周兴
     * @date   : 2022/6/9 9:31
     */
    copyValue(row) {
      if (row && row[this.field]) {
        let value = row[this.field];
        // 如果是对象，需要处理下
        if (typeof row[this.field] === 'object') {
          value = JSON.stringify(row[this.field])
        }
        this.$message.success(vm.$t('copySuccess') + '：' + value);
        //创建一个input框
        const input = document.createElement("input");
        //将指定的DOM节点添加到body的末尾
        document.body.appendChild(input);
        //设置input框的value值为直播地址
        input.setAttribute("value", value);
        //选取文本域中的内容
        input.select();
        //copy的意思是拷贝当前选中内容到剪贴板
        //返回值为一个Boolean，如果是 false 则表示操作不被支持或未被启用
        if (document.execCommand("copy")) {
          document.execCommand("copy");
        }
        //删除这个节点
        document.body.removeChild(input);
      }
    },
    /**
     * @desc   : 点击按钮
     * @author : 周兴
     * @date   : 2023/3/26 16:11
     */
    buttonClick(field, rowIndex, row) {
      this.$emit('button-click', row, rowIndex, field)
    },
    /**
     * @desc   : 获取冻结列的样式
     * @author : 周兴
     * @date   : 2022/12/1 11:01
     */
    getColumnClass(column) {
      if (this.freezeFlag) {
        return 'freeze-column-class'
      }
    },
    /**
     * @desc   : 获取class
     * @author : 周兴
     * @date   : 2022/8/11 10:39
     */
    getClass(row, field) {
      if (this.colorCards == null || this.colorCards.length == 0
          || !row || !row[field] || this.colorCards.length > this.colorCardsClass.length) {
        return 'normal-class';
      }
      for (let i in this.colorCards) {
        if (row[field] == this.colorCards[i]) {
          return this.colorCardsClass[i];
        }
      }
    },
    /**
     * @desc   : 点击链接跳转
     * @author : 周兴
     * @date   : 2022/8/9 9:58
     */
    handleLink(row, rowIndex) {
      // 切换当前行
      if (this.dkTable) {
        this.dkTable.setCurrentRow(row);
        //关闭表格全屏
        this.dkTable.fullModal = false
      }
      // console.log('t1')
      this.$emit('on-link', row, rowIndex, this.field)
    },
    /**
     * @desc   : 查询可替换的数据
     * @author : 周兴
     * @date   : 2022/3/7 14:28
     */
    handleExchangeClick(row) {
      // 记录当前行
      this.$emit('on-exchange', row)
    },
    /**
     * @desc   : 判断交换图标是否可见
     * @author : 周兴
     * @date   : 2022/5/28 7:54
     */
    checkExchangeIconVisible(row) {
      if (row && row[this.exchangeField] && row[this.exchangeField].length > 0) {
        return true;
      }
      return false;
    },
    /**
     * @desc   : 删除一条数据
     * @author : 周兴
     * @date   : 2022/5/31 14:11
     */
    del(rowIndex) {
      if (this.dkTable && this.dkTable.delRow) {
        this.dkTable.delRow(rowIndex);
      }
    },
    /**
     * @desc   : 设置显示值
     * @author : 周兴
     * @date   : 2022/5/30 17:49
     */
    setCheckbox(row) {
      if (this.treeFlag) {
        // 如果开启树形，那么判断是否是父级
        if (row['parentId']) {
          return true;
        }
      }
      return false;
    },
    /**
     * @desc   : 开关值改变事件
     * @author : 周兴
     * @date   : 2022/5/9 18:47
     */
    handleSwitchChange(e) {
      this.$emit('on-switch-change', e)
    },
    /**
     * @desc   : 格式化列
     * @author : 周兴
     * @date   : 2022/4/4 13:40
     */
    formatColumn({cellValue, row}) {
      // 数值列开启千分位过滤
      if (this.columnType === this.$config.columnType.number) {
        let digits = 0;
        if (this.digits) {
          digits = this.digits;
        } else {
          //如果没有设置小数位数，那么就读取商品中的计量单位
          if (row.decimalPlaces) {
            digits = row.decimalPlaces;
          }
        }
        if (this.formatThousandth == undefined || this.formatThousandth) {
          if (cellValue != null) {
            return XEUtils.commafy(Number(cellValue), {digits})
          }
        } else {
          if (cellValue != null) {
            //没有开启千分位
            return XEUtils.toFixed(XEUtils.round(cellValue, digits), digits);
          }
        }
      } else if (this.columnType === this.$config.columnType.date) {
        //日期
        if (cellValue != null) {
          return new Date(cellValue).format('yyyy-MM-dd');
        }
      } else if (this.columnType === this.$config.columnType.dateTime) {
        //日期
        if (cellValue != null) {
          return new Date(cellValue).format('yyyy-MM-dd hh:mm:ss');
        }
      } else if (this.columnType === this.$config.columnType.dateMonth) {
        //日期
        if (cellValue != null) {
          return new Date(cellValue).format('yyyy-MM');
        }
      }
      return cellValue;
    },
    /**
     * @desc   : 清除过滤
     * @author : 周兴
     * @date   : 2022/3/19 17:36
     */
    clearFilter() {
      // 如果没有过滤就不需要清除
      if (this.socialOld == null || this.socialOld.length == 0) return;
      this.social = [];
      this.socialOld = [];
      this.indeterminate = false;
      this.checkAll = false;
      this.searchText = '';
      this.searchArray = [null, null];
      // 修改列表中的数据
      this.changeTableData(this.field, this.titleData, this.socialOld);
      let columnFilter = []
      let value = ''

      this.tableData().forEach(forIt => {
        value = forIt[this.field]
        if (value == undefined) {
          value = ''
        }
        if (columnFilter.indexOf(value) == -1) {
          columnFilter.push(value)
        }
      })
      this.cfDataSocial = columnFilter
      this.cfData = [...this.cfDataSocial]

    },
    /**
     * @desc   : 筛选点击事件
     * @author : 沈博
     * @date   : 2022/3/15 9:22
     */
    search() {
      setTimeout(() => {
        this.socialOld = [...this.social];
        this.changeTableData(this.field, this.titleData, this.socialOld); //改变列表的数据
      }, 10)
    },
    /**
     * @desc   : 控制全选按钮
     * @author : 周兴
     * @date   : 2022/3/19 19:42
     */
    handleCheckAll(val) {
      this.indeterminate = false;
      if (val) {
        this.social = [...new Set([...this.social].concat([...this.cfData.map(it => it)]))];
      } else {
        this.social = [...this.social.filter(it => {
          return !this.cfData.map(mapIt => mapIt).includes(it)
        })];
      }
    },
    /**
     * @desc   : 设置全选按钮的状态
     * @author : 周兴
     * @date   : 2022/3/19 19:42
     */
    checkAllGroupChange(data) {
      // console.log('dds', data.length, this.cfData.length)
      if (data.length > 0 && data.length === this.cfData.length) {
        this.indeterminate = false;
        this.checkAll = true;
      } else if (data.length > 0) {
        this.indeterminate = true;
        this.checkAll = false;
      } else if (data.length === 0) {
        this.indeterminate = false;
        this.checkAll = false;
      } else {
        this.indeterminate = true;
        this.checkAll = false;
      }
    },
    /**
     * @desc   : 设置列的类型
     * @author : 周兴
     * @date   : 2022/3/30 21:16
     */
    setFilterType() {
      // 根据过滤条件进行处理数据
      if (this.filter) {
        if (this.columnType === 'date') {
          this.filterDateData = true;
          this.filterNumData = false;
          this.filterStrData = false;
          this.changeDate();
        } else if (this.columnType === 'number') {
          this.filterDateData = false;
          this.filterNumData = true;
          this.filterStrData = false;
          this.changeNumber();
        } else if (this.columnType === 'string') {
          this.filterDateData = false;
          this.filterNumData = false;
          this.filterStrData = true;
          this.changeStr();
        }
      }
    },
    /**
     * @desc   : pop展示
     * @author : 沈博
     * @date   : 2022/3/15 9:22
     */
    onPopperShow() {
      // 设置列的类型
      this.setFilterType();
      this.social = [...this.socialOld]
      this.checkAllGroupChange(this.social)
      let columnFilter = []
      let value = ''
      let tableData = this.tableData();

      let filterContent = this.filterContent();
      // 如果只有一条过滤，需要处理下的
      if (filterContent.length === 1 && filterContent[0] === this.titleData) {
        tableData = this.tableSocial()
      }
      tableData.forEach(forIt => {
        value = forIt[this.field]
        if (value == undefined) {
          value = ''
        }
        // 如果是数组就需要处理下
        if (Array.isArray(value) && value.length === 0) {
          value = ''
        }
        if (columnFilter.indexOf(value) == -1) {
          columnFilter.push(value)
        }
      })
      this.cfDataSocial = [...columnFilter]
      this.cfData = columnFilter
    },
    /**
     * @desc   : 文本过滤
     * @author : 周兴
     * @date   : 2022/3/19 21:14
     */
    changeStr() {
      this.cfData = []
      setTimeout(() => {
        this.cfData = [...this.cfDataSocial]
        this.cfData = this.cfData.filter(it => this.searchText ? it.includes(this.searchText) : true)
      }, 100)
    },
    /**
     * @desc   : 数值过滤
     * @author : 周兴
     * @date   : 2022/3/19 21:14
     */
    changeNumber() {
      this.cfData = []
      setTimeout(() => {
        this.cfData = [...this.cfDataSocial]
        this.cfData = this.cfData.filter(it => ((this.searchArray[0] || this.searchArray[0] === 0) ? this.searchArray[0] : Number.MIN_VALUE) <= parseFloat(it) && ((this.searchArray[1] || this.searchArray[1] === 0) ? this.searchArray[1] : Number.MAX_VALUE) >= parseFloat(it))
      }, 100)
    },
    /**
     * @desc   : 日期过滤
     * @author : 周兴
     * @date   : 2022/11/30 17:28
     */
    changeDate() {
      this.cfData = []
      setTimeout(() => {
        this.cfData = [...this.cfDataSocial]
        this.cfData = this.cfData.filter(it => (this.searchArray[0] ? new Date(this.searchArray[0]).getTime() :
            Number.MIN_VALUE) <= new Date(it).getTime() && (this.searchArray[1] ?
            new Date(this.searchArray[1]).getTime() : Number.MAX_VALUE) >= new Date(it).getTime())
      }, 100)
    },
    /**
     * @desc   : 冻结列
     * @author : 周兴
     * @date   : 2022/11/30 17:28
     */
    handleFreeze(e) {
      if (this.dkTable != null && e != null) {
        this.freezeFlag = true
        this.dkTable.freezeColumn(e.column);
      }
    },
  },
  mounted() {
  },
  created() {
    this.columnType = this.dataType
    // 通过prop给树形赋值，为了解决内部要给属性赋值的问题
    this.titleData = this.title ? this.title : vm.$t(this.field)
    this.typeData = this.type
    this.minWidthData = this.minWidth
    this.widthData = this.width
    this.fixedData = this.fixed
    this.classNameData = this.className
    // 最后一列的宽度不设置
    if (this.resizeFlag) {
      this.widthData = ''
    }
    // 如果是选择列，给出默认值
    if (this.id === "selAll") {
      this.widthData = 45
      this.fixedData = 'left'
      this.typeData = 'checkbox'
    }
    // 单选
    else if (this.type === 'radio' && !this.radioRight) {
      this.widthData = 45
      this.fixedData = 'left'
      this.classNameData = 'fixed-left'
    }
    // 如果是序号，给出宽度
    if (this.type == "seq") {
      this.widthData = 40
      this.titleData = vm.$t("seq")
    }
    // 判断是否开启冻结
    if (this.dkTable && this.dkTable.freeze) {
      this.freezeData = this.freeze
    }
    // 判断是否开启过滤
    if (this.dkTable && this.dkTable.filter) {
      this.filterData = this.filter
    }
    // 判断是否开启排序
    if (this.dkTable && this.dkTable.sortable) {
      this.sortableData = this.sortable
    }
    // 如果是显示顺序那么就是数字
    if (this.field === 'displayNo') {
      this.columnType = this.$config.columnType.number
    }
  }
}
</script>
<style lang="less" scoped>


.icon-header > .vxe-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}


.ivu-poptip-content {
  background: royalblue !important;
}

.ivu-poptip-popper:after {
  border-bottom-color: red !important;
}

.freeze-class {
  margin-top: 4px;
  margin-left: 5px;
  cursor: pointer;
  font-size: 14px;
  color: #c0c4cc;
}

.freezed-class {
  margin-top: 4px;
  margin-left: 5px;
  cursor: pointer;
  font-size: 14px;
}

.filter-class {
  margin-left: 5px;
  cursor: pointer;
  font-size: 14px;
  color: #c0c4cc;
}

.filtered-class {
  margin-left: 5px;
  cursor: pointer;
  font-size: 14px;
  color: #2d8cf0;
}


//***************

.custom-vxe-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pop-content {
  width: 300px;
  background: #e9edf1;
  padding: 10px;
  border: 1px solid #a5acb5;
}

.filter-content {
  height: 220px;
  overflow-y: auto;
  border: 1px solid #a5acb5;
  padding: 10px;
  background: #fff;
}

.filter-footer {
  border-top: 1px dashed #a5acb5;
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a5acb5;
}

.vxe-cell--checkbox {
  height: 16px !important;
}

.seq-class-s {
  margin-left: 10px !important;
}

.seq-class-t {
  margin-left: 0 !important;
}

.change-icon-class {
  position: absolute;
  left: -20px;
  top: 8px;
  cursor: pointer;
}

.colorCardsClass1 {
  margin: 4px 12px;
  background: #4A5E98;
  font-size: 11px !important;
  color: #fff;
  border-radius: 3px;
  height: 20px;
  width: 60px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.colorCardsClass2 {
  margin: 4px 12px;
  background: #2D8CF0;
  font-size: 11px !important;
  color: #fff;
  border-radius: 3px;
  height: 20px;
  width: 60px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.colorCardsClass3 {
  margin: 4px 12px;
  background: #19C06B;
  font-size: 11px !important;
  color: #fff;
  border-radius: 3px;
  height: 20px;
  width: 60px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.normal-class {
  width: 100%;
  display: block;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

//.freeze-column-class {
//  background-color: blue !important;
//  font-size: 19px !important;
//}
//

.lock-class {
  position: absolute;
  right: 2px;
  top: -10px;
}


</style>
