<template>
  <div class="multiple-cell">
    <div class="multiple-cell-item" v-for="(item, index) in _multipleConfig" :key="item.title || index">
      <div class="label"
           :style="{ width: (item.width || 60) + 'px','margin-right': '8px', textAlign: (item.textAlign || 'right')}">
        {{ typeof item.formatterTitle == 'function' ? item.formatterTitle(multipleRow) : item.title }}:
      </div>
      <div
        class="value"
        @click="handleValueClick($event, item)"
        :style="{ textAlign: item.valueAlign || 'left', width: item.width + 'px' }">
        <!-- 标签类型 -->
        <el-tag v-if="item.type === 'tag'" :type="getTagType(item)" :size="mixSize" effect="dark">
          {{ getVaule(item) }}
        </el-tag>
        <!-- 超链接类型 -->
        <span
          v-else-if="item.type === 'link'"
          :class="getLinkClassName(item)"
          :title="getVaule(item).toString().length > getTextMaxLen(item.valueLength) ? getVaule(item) : ''">
            {{
            getVaule(item).toString().length > getTextMaxLen(item.valueLength) ? getVaule(item).toString().substr(0, getTextMaxLen(item.valueLength)) + '...' : getVaule(item)
          }}
        </span>
        <!-- 带审批流的状态类型 -->
        <span v-else-if="item.type === 'process'" :class="getProcessClassName(item)">
            <span :class="getVaulecClassName(item)">
            {{
                getVaule(item).toString().length > getTextMaxLen(item.valueLength) ? getVaule(item).toString().substr(0, getTextMaxLen(item.valueLength)) + '...' : getVaule(item)
              }}
            </span>
            <i class="el-icon-info"></i>
        </span>
        <!-- 其他类型 -->
        <span
          v-else
          :class="getVaulecClassName(item)"
          :title="getVaule(item).toString().length > getTextMaxLen(item.valueLength) ? getVaule(item) : ''">
          {{
            getVaule(item).toString().length > getTextMaxLen(item.valueLength) ? getVaule(item).toString().substr(0, getTextMaxLen(item.valueLength)) + '...' : getVaule(item)
          }}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import { VXETable, emptyText } from '@/utils/plugins/vxe-table/table-formatter';
import XEUtils from 'xe-utils';

export default {
  name: "CmsMultipleField",
  data() {
    return {
      textMaxLen: 50
    };
  },
  computed: {
    _multipleConfig() {
      return typeof this.multipleConfig === 'function' ? this.multipleConfig(this.multipleRow) : this.multipleConfig;
    },
  },
  props: {
    multipleConfig: {
      type: Array,
      default: () => {
        return []
      }
    },
    multipleRow: {
      type: Object,
      default: () => {
        return {}
      },
      valueLength: Number
    }
  },
  methods: {
    getTextMaxLen(length) {
      if (length) return length;
      return this.textMaxLen;
    },
    getVaule(item) {
      let cellValue = this.multipleRow[item.field];
      let cellLabel = cellValue;
      // 空数据处理
      let empty = emptyText(cellLabel, item.emptyText);
      if (empty.isEmpty) {
        // 如果cellValue为空, 直接返回emptyText
        return (cellLabel = empty.text);
      }
      let formatter = item.formatter;
      if (formatter) {
        if (XEUtils.isString(formatter)) {
          const globalFunc = VXETable.formats.store[formatter] || XEUtils[formatter];
          cellLabel = globalFunc ? globalFunc(cellValue) : cellValue;
        } else if (XEUtils.isArray(formatter)) {
          const globalFunc = VXETable.formats.store[formatter[0]] || XEUtils[formatter[0]];
          cellLabel = globalFunc ? globalFunc(...[ cellValue ].concat(formatter.slice(1))) : cellValue;
        } else {
          cellLabel = formatter(Object.assign({ cellValue }, this.multipleRow)) || cellValue;
        }
      }
      return cellLabel;
    },
    // link类型的className
    getLinkClassName(item) {
      let cellValue = this.multipleRow[item.value];
      // 空数据处理
      let empty = emptyText(cellValue, item.emptyText);
      return empty.isEmpty && !item.emptyClick ? 'link-url is-empty' : 'link-url';
    },
    // process类型的className
    getProcessClassName(item) {
      let cellValue = this.multipleRow[item.value];
      // 空数据处理
      let empty = emptyText(cellValue, item.emptyText);
      return empty.isEmpty && !item.emptyClick ? 'process-cell is-empty' : 'process-cell';
    },
    getVaulecClassName(item) {
      let className = '';
      if (typeof item.valueClassName == 'function') {
        className = item.valueClassName(this.multipleRow);
      } else {
        className = item.valueClassName;
      }
      return className;
    },
    getTagType(item) {
      let tagType = '';
      if (typeof item.tagType == 'function') {
        tagType = item.tagType(this.multipleRow);
      } else {
        tagType = item.tagType || 'info';
      }
      return tagType;
    },
    handleValueClick(e, item) {
      if (item.events && item.events.click && (item.emptyClick || !emptyText(this.multipleRow[item.field]).isEmpty)) {
        e.stopPropagation();
        item.events.click(this.multipleRow, e);
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.multiple-cell {
  vertical-align: top;
  margin-left: -10px;

  .multiple-cell-item {
    display: flex;
    font-size: 12px;
    line-height: 18px;

    .label {
      color: #808080;
      flex: none;
      white-space: nowrap;
    }

    .value {
      flex: 1;
      font-size: 12px;
      color: #000;
    }
  }

  .multiple-cell-item + .multiple-cell-item {
    margin-top: 6px;
  }

  .process-cell {
    display: block;

    &.is-empty i {
      display: none;
    }
  }
}
</style>