<template>
  <div>
    <div class="vol-table" :class="[textInline ? 'text-inline' : '', isChrome ? 'chrome' : '']">
      <div class="mask" v-show="loading"></div>
      <div class="message" v-show="loading">加载中.....</div>
      <el-table :show-summary="summary" :summary-method="
          (columns, row) => {
            return this.summaryData;
          }
        " :row-key="rowKey" :key="randomTableKey" lazy :load="loadTreeChildren" @selection-change="selectionChange"
        @row-click="rowClick" @row-dblclick="rowDbClick" @header-click="headerClick" @cell-mouse-leave="
          (row, column, cell) => {
            !this.clickEdit && this.rowEndEdit(row, column, cell);
          }
        " ref="table" class="v-table" @sort-change="sortChange" tooltip-effect="dark" :height="realHeight"
        :max-height="realMaxHeight" :data="url ? rowData : tableData" border :row-class-name="initIndex"
        :cell-style="getCellStyle" style="width: 100%">

        <el-table-column v-if="columnIndex" type="index" :fixed="ck_index_fixed" width="55" align="center">
        </el-table-column>
        <el-table-column v-if="ck" type="selection" :fixed="ck_index_fixed" width="55" align="center"></el-table-column>
        <!-- 2020.10.10移除table第一行强制排序 -->
        <el-table-column v-for="(column, cindex) in filterColumns" :key="cindex" :prop="column.field"
          :label="column.title" :min-width="column.width" :formatter="formatter" :fixed="column.fixed"
          :align="column.align" :sortable="column.sort ? 'custom' : false">
          <template slot-scope="scope">
            <!-- 2020.06.18增加render渲染自定义内容 -->
            <table-render v-if="column.render && typeof column.render == 'function'" :row="scope.row"
              :index="scope.$index" :column="column" :render="column.render"></table-render>
            <!-- 启用双击编辑功能，带编辑功能的不会渲染下拉框文本背景颜色 -->
            <!-- @click="rowBeginEdit(scope.$index,cindex)" -->
            <!-- 2021.11.18增加table编辑时阻止无效事件触发 -->
            <div v-else-if="column.edit" class="edit-el">
              <div @click.stop v-if="column.edit.keep || edit.rowIndex == scope.$index" class="e-item">
                <div>
                  <!-- 2020.07.24增加日期onChange事件 -->
                  <DatePicker :transfer="true" v-if="
                      column.edit.type == 'date' ||
                      column.edit.type == 'datetime'
                    " :type="column.edit.type" :format="
                      column.edit.type == 'date'
                        ? 'yyyy-MM-dd'
                        : 'yyyy-MM-dd HH:mm:ss'
                    " :placeholder="column.title" :value="scope.row[column.field]" @on-change="
                      (time) => {
                        scope.row[column.field] = time;
                        column.onChange && column.onChange(time, column);
                        return time;
                      }
                    "></DatePicker>
                  <i-switch v-else-if="column.edit.type == 'switch'" :true-value="
                      typeof scope.row[column.field] == 'boolean' ? true : 1
                    " :false-value="
                      typeof scope.row[column.field] == 'boolean' ? false : 0
                    " v-model="scope.row[column.field]" @on-change="
                      (value) => {
                        column.onChange &&
                          column.onChange(
                            column,
                            scope.row,
                            url ? rowData : tableData,
                            value
                          );
                      }
                    ">
                    <span slot="open">是</span>
                    <span slot="close">否</span>
                  </i-switch>
                  <!--如果是1或0请加上属性 true-value="1" false-value="0"
               如果value是字符串数字则使用 :true-value="1" :false-value="0"
                  -->
                  <Select :transfer="true" v-else-if="column.edit.type == 'select'" v-model="scope.row[column.field]"
                    :filterable="
                      column.filter || getSelectedOptions(column).length > 10
                        ? true
                        : false
                    " :placeholder="'请选择' + column.title" @on-change="
                      column.onChange &&
                        column.onChange(
                          column,
                          scope.row,
                          url ? rowData : tableData
                        )
                    " clearable>
                    <Option v-for="(kv, kvIndex) in getSelectedOptions(column)" :key="kvIndex"
                      :value="kv.key === undefined ? '' : kv.key">{{ kv.value }}</Option>
                  </Select>
                  <!-- 2020.10.18增加iview input组件on-keypress事件 -->
                  <Input v-else clearable :ref="column.field + scope.$index" @on-change="
                      (event) => {
                        onChange(scope, scope.row[column.field], event, column);
                      }
                    " @on-keypress="
                      ($event) => {
                        column.onKeyPress &&
                          column.onKeyPress($event, scope, column);
                      }
                    " v-model="scope.row[column.field]" :placeholder="'请输入' + column.title"></Input>
                </div>
                <div class="extra" v-if="column.extra && edit.rowIndex == scope.$index">
                  <a :style="column.extra.style" @click="
                      () => {
                        column.extra.click &&
                          column.extra.click(
                            column,
                            scope.row,
                            url ? rowData : tableData
                          );
                      }
                    ">
                    <Icon v-if="column.extra.icon" :type="column.extra.icon" />
                    {{ column.extra.text }}
                  </a>
                </div>
              </div>
              <template v-else>
                <div v-if="column.formatter" v-html="column.formatter(scope.row, column)"></div>
                <div v-else>{{ formatter(scope.row, column, true) }}</div>
              </template>
            </div>
            <!--没有编辑功能的直接渲染标签-->
            <template v-else>
              <a href="javascript:void(0)" @click="link(scope.row, column, $event)" v-if="column.link"
                v-text="scope.row[column.field]"></a>
              <img v-else-if="column.type == 'img'" v-for="(file, vIndex) in getFilePath(
                  scope.row[column.field],
                  column
                )" :key="vIndex" :onerror="defaultImg" @click="viewImg(scope.row, column, file.path)" class="table-img"
                :src="file.path" />
              <a style="margin-right: 15px" v-else-if="column.type == 'file' || column.type == 'excel'" class="t-file"
                v-for="(file, vIndex) in getFilePath(
                  scope.row[column.field],
                  column
                )" :key="vIndex" @click="dowloadFile(file)">{{ file.name }}</a>
              <Tag v-else-if="column.type == 'date'">{{
                formatterDate(scope.row, column)
              }}</Tag>
              <div v-else-if="column.formatter" @click="formatterClick(scope.row, column)"
                v-html="column.formatter(scope.row, column)"></div>
              <!--2020.09.06增加table有数据源的列，可以移除或自定义显示背景颜色及点击事件-->
              <div v-else-if="column.bind && column.normal" @click="formatterClick(scope.row, column)"
                :style="column.getStyle && column.getStyle(scope.row, column)">
                {{ formatter(scope.row, column, true) }}
              </div>
              <div v-else-if="column.click" @click="formatterClick(scope.row, column)">
                {{ scope.row[column.field] }}
              </div>
              <Tag v-else-if="column.bind" :color="getColor(scope.row, column)">{{ formatter(scope.row, column, true) }}
              </Tag>
              <template v-else>{{
                formatter(scope.row, column, true)
              }}</template>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block pagination" v-if="!paginationHide">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="paginations.page" :page-sizes="paginations.sizes" :page-size="paginations.size" background
        layout="prev, pager, next" :total="paginations.total"></el-pagination>
    </div>
  </div>
</template>
<script>
  import request from '@/utils/request'
  import LxTableRender from "../LxTableRender/render.js"
  var $vue;
  export default {

    components: {
      "table-render": LxTableRender
    },
    props: {
      rowKey: {
        // 树形结构的主键字段，如果设置值默认会开启树形table；注意rowKey字段的值必须是唯一（2021.05.02）
        typeof: String,
        default: undefined,
      },
      loadTreeChildren: {
        // 树形结构加载子节点
        type: Function,
        default: (tree, treeNode, resolve) => {
          return resolve([]);
        },
      },
      textInline: {
        // 表格内容超出后是否换行显示（2020.01.16）
        type: Boolean,
        default: true,
      },
      tableData: {
        // 表数据源,配置了url就不用传这个参数了
        type: Array,
        default: () => {
          return [];
        },
      },
      columns: {
        type: Array,
        default: [],
        // [ {
        //   field: "columnType",
        //   title: "数据类型",
        //   width: 120,
        //   hidden:false,
        //   edit: { type: "text", status: false, data: [], key: "" }
        // }] //列的的数据格式edit格式： type类型(text,date,datetime,select,switch),status是否默认为编辑状态
        // data如果是select这里data应该有数据源，如果没有数据请设置key字典编号
      },
      height: {
        type: Number,
        default: 0,
      },
      maxHeight: {
        type: Number,
        default: 0,
      },
      linkView: {
        type: Function,
        default: function() {
          return 1;
        },
      },
      pagination: {
        type: Object,
        default: function() {
          return {
            total: 0,
            size: 0,
            sortName: ""
          };
        },
      },
      url: {
        type: String,
        default: "",
      },
      paginationHide: {
        type: Boolean,
        default: true,
      },
      color: {
        type: Boolean,
        default: true,
      },
      index: {
        // 是否创建索引号,如果需要表格编辑功能，这里需要设置为true
        type: Boolean,
        default: false,
      },
      allowEmpty: {
        // 表格数据为空时是否默认为--
        type: Boolean,
        default: true,
      },
      defaultLoadPage: {
        // 传入了url，是否默认加载表格数据
        type: Boolean,
        default: true,
      },
      loadKey: {
        // 是否自动从后台加载数据源,如【审核状态】字段是的值是数字，但要显示对应的文字，1=审核中，2=审核通过
        type: Boolean,
        default: false,
      },
      single: {
        type: Boolean, // 是否单选
        default: false,
      },
      doubleEdit: {
        type: Boolean, // 是否双击启用编辑功能
        default: true,
      },
      // clickEdit: {
      //   type: Boolean, // 是否点击行编辑，再次点击行时结束编辑(默认点击行编辑，鼠标离开结束编辑)
      //   default: false,2021.07.17设置为点击行结束编辑
      // },
      beginEdit: {
        // 编辑开始
        type: Function,
        default: function(row, column, index) {
          return true;
        },
      },
      endEditBefore: {
        // 结束编辑前
        type: Function,
        default: function(row, column, index) {
          return true;
        },
      },
      endEditAfter: {
        // 结束编辑前
        type: Function,
        default: function(row, column, index) {
          return true;
        },
      },
      ck: {
        // 是否显示checkbox
        type: Boolean,
        default: true,
      },
      columnIndex: {
        // 是否显示行号(2020..11.1)
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        clickEdit: true, //2021.07.17设置为点击行结束编辑
        randomTableKey: 1,
        visiblyColumns: [],
        key: "",
        realHeight: 0,
        realMaxHeight: 0,
        enableEdit: false, // 是否启表格用编辑功能
        empty: this.allowEmpty ? "" : "--",
        defaultImg: 'this.src="' + require("@/assets/imgs/error.png") + '"',
        loading: false,
        footer: {},
        total: 0,
        formatConfig: {},
        defaultColor: "default",
        // 2020.09.06调整table列数据源的背景颜色
        colors: [
          "cyan",
          "red",
          "blue",
          "green",
          "magenta",
          "geekblue",
          "gold",
          "orange",
          "default",
        ],
        rule: {
          phone: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
          decimal: /(^[\-0-9][0-9]*(.[0-9]+)?)$/,
          number: /(^[\-0-9][0-9]*([0-9]+)?)$/,
        },
        columnNames: [],
        rowData: [],
        paginations: {
          sort: "",
          order: "desc",
          Foots: "",
          total: 10,
          // 2020.08.29增加自定义分页条大小
          sizes: [30, 60, 100, 120],
          size: 30, // 默认分页大小
          Wheres: [],
          page: 1,
          rows: 30,
        },
        errorFiled: "",
        edit: {
          columnIndex: -1,
          rowIndex: -1
        }, // 当前双击编辑的行与列坐标
        editStatus: {},
        summary: false, // 是否显示合计
        // 目前只支持从后台返回的summaryData数据
        summaryData: [],
        summaryIndex: {},
        remoteColumns: [], // 需要每次刷新或分页后从后台加载字典数据源的列配置
        cellStyleColumns: {}, // 有背景颜色的配置
        isChrome: false, //2021.06.19判断谷歌内核浏览重新计算table高度
        ck_index_fixed: false, //左侧checkbox与行号是否固定
      };
    },
    created() {
      //2021.06.19判断谷歌内核浏览重新计算table高度
      if (
        navigator.userAgent.indexOf("Chrome") != -1 ||
        navigator.userAgent.indexOf("Edge") != -1
      ) {
        this.isChrome = true;
      }
      //2021.06.19调整左侧checkbox与行号是否固定规则
      let hasSummary = this.columns.find((x) => {
        return x.summary;
      });
      if (
        this.columns.some((x) => {
          return x.fixed;
        })
      ) {
        if (hasSummary) {
          this.isChrome = false;
        }
        this.ck_index_fixed = true;
      }

      // 升级element 2.15.1版本后，这个高度有问题，如果有统计求和的table，强制使用max-height属性
      if (
        this.columns.some((x) => {
          return x.summary;
        })
      ) {
        this.realHeight = null;
        this.realMaxHeight = this.maxHeight || this.height;
      } else {
        this.realHeight = this.getHeight();
        this.realMaxHeight = this.getMaxHeight();
      }

      // 从后台加下拉框的[是否启用的]数据源
      let keys = [];
      let columnBind = [];
      this.summaryData.push("合计");
      if (this.columnIndex) {
        this.summaryData.push(" ");
      }
      this.columns.forEach((x, _index) => {
        if (x.cellStyle) {
          this.cellStyleColumns[x.field] = x.cellStyle;
        }
        if (!x.hidden) {
          // this.summaryIndex[x.field] = _index;
          // 2020.10.11修复求和列错位的问题
          this.summaryData.push("");
          this.summaryIndex[x.field] = this.summaryData.length - 1;
        }
        // 求和
        if (x.summary && !this.summary) {
          this.summary = true;
        }
        if (x.bind && x.bind.key && (!x.bind.data || x.bind.data.length == 0)) {
          // 写入远程
          if (!x.bind.data) x.bind.data = [];
          if (x.bind.remote) {
            this.remoteColumns.push(x);
          } else if (this.loadKey) {
            keys.push(x.bind.key);
            x.bind.valueTyoe = x.type;
            columnBind.push(x.bind);
          }
        }
      });
      if (keys.length > 0) {

      }

      this.paginations.sort = this.pagination.sortName;
      // 2020.08.29增加自定义分页条大小
      Object.assign(this.paginations, this.pagination);
      if (this.pagination.size) {
        this.paginations.rows = this.pagination.size;
      }
      this.enableEdit = this.columns.some((x) => {
        return x.hasOwnProperty("edit");
      });
      let keyColumn = this.columns.find((x) => {
        return x.isKey;
      });
      if (keyColumn) {
        this.key = keyColumn.field;
      }
      // 如果下拉框，判断bind或edit.data是否有数据源，妱果没有则获取数据源bind
      $vue = this;
      // this.$emit
      this.defaultLoadPage && this.load();
    },
    computed: {
      filterColumns() {
        return this.columns.filter((x) => {
          return !x.hidden;
        });
      },
    },
    methods: {
      headerClick(column, event) {
        if (this.clickEdit && this.edit.rowIndex != -1) {
          if (
            this.rowEndEdit(
              this.url ?
              this.rowData[this.edit.rowIndex] :
              this.tableData[this.edit.rowIndex],
              column
            )
          ) {
            this.edit.rowIndex = -1;
          }
        }
        // this.edit.rowIndex = -1;
      },
      rowDbClick(row, column, event) {
        //2021.05.23增加双击行事件
        this.$emit("row-dbclick", {
          row,
          column,
          event
        });
      },
      rowClick(row, column, event) {
        //2021.09.16修复edge浏览器可能报错的问题
        if (!column) {
          return;
        }
        // 点击行事件(2020.11.07)
        this.$emit("rowClick", {
          row,
          column,
          event
        });
        if (!this.doubleEdit) {
          return;
        }
        // 点击其他行时，如果点击的行与正在编辑的行相同，保持编辑状态
        if (this.clickEdit && this.edit.rowIndex != -1) {
          if (row.elementIdex == this.edit.rowIndex) {
            // 点击的单元格如果不可以编辑，直接结束编辑
            // 2020.10.12修复结束编辑时，element table高版本属性获取不到的问题
            //2021.09.16修复edge浏览器可能报错的问题
            let _field;
            if (event && event.property) {
              _field = event.property;
            } else {
              _field = column.property;
            }
            if (!this.columns.some((x) => x.field == _field && x.edit)) {
              if (this.rowEndEdit(row, event)) {
                this.edit.rowIndex = -1;
              }
            }
            return;
          }
          if (this.rowEndEdit(row, event && event.property ? event : column)) {
            this.edit.rowIndex = -1;
          }
        }
        this.rowBeginEdit(row, column);
      },
      dowloadFile(file) {
        this.base.dowloadFile(
          file.path,
          file.name, {
            Authorization: this.$store.getters.getToken(),
          },
          //this.http.ipAddress
        );
      },
      getFilePath(pathSring, column) {
        // 获取表的图片与文件显示
        if (!pathSring) return [];
        // 增加图片自定义操作
        // 返回格式必须是[{name:"文件名",path:"图片全路径或base64格式"}]
        if (column.formatter) {
          return column.formatter(pathSring);
        }
        let filePath = pathSring.replace(/\\/g, "/").split(",");
        let fileInfo = [];
        for (let index = 0; index < filePath.length; index++) {
          let file = filePath[index];
          // 2020.12.19增加base64图片显示
          if (column.base64) {
            fileInfo.push({
              name: "",
              path: (file.indexOf("base64,") == -1 ? "data:image/png;base64," : "") +
                file,
            });
          } else if (file.indexOf(".") != -1) {
            let splitFile = file.split("/");
            if (splitFile.length > 0) {
              fileInfo.push({
                name: splitFile[splitFile.length - 1],
                path: this.base.isUrl(file) ? file : "" //this.http.ipAddress + file,
              });
            }
          }
        }
        return fileInfo;
      },
      // 重置table
      reset() {
        if (this.tableData && this.tableData.length > 0) {
          this.tableData.splice(0);
        }
        if (this.rowData && this.rowData.length > 0) {
          this.rowData.splice(0);
        }
        if (!this.paginationHide) {
          this.paginations.page = 1;
          // this.paginations.rows = 30;
          if (this.paginations.wheres && this.paginations.wheres.length > 0) {
            this.paginations.wheres.splice(0);
          }
        }
        this.errorFiled = "";
        this.edit.columnIndex = -1;
        this.edit.rowIndex = -1;
      },
      getHeight() {

        // 没有定义高度与最大高度，使用table默认值
        if (!this.height && !this.maxHeight) {
          return null;
        }
        // 定义了最大高度则不使用高度
        if (this.maxHeight) {
          return null;
        }
        // 使用当前定义的高度
        return this.height;
      },
      getMaxHeight() {
        // 没有定义高度与最大高度，使用table默认值
        if (!this.height && !this.maxHeight) {
          return null;
        }
        // 定义了最大高度使用最大高度
        if (this.maxHeight) {
          return null;
        }
        // 不使用最大高度
        return null;
      },
      getSelectedOptions(column) {
        if (column.bind && column.bind.data && column.bind.data.length > 0) {
          return column.bind.data;
        }
        return [];
      },
      formatterClick(row, column, event) {
        column.click && column.click(row, column, event);
      },
      initIndex(obj) {
        if (this.index) {
          obj.row.elementIdex = obj.rowIndex;
        }
        return "";
      },
      toggleEdit(event) {},
      setEditStatus(status) {
        this.columns.forEach((x) => {
          if (x.hasOwnProperty("edit")) {
            this.$set(x.edit, "status", status);
          }
        });
      },
      // 通过button按钮启用编辑
      beginWithButtonEdit(scope) {
        // url?rowData:tableData
        this.rowBeginEdit(scope.row, this.columns[scope.$index]);
      },
      // 通过button结束编辑
      endWithButtonEdit(scope) {
        if (this.edit.rowIndex == -1) return;

        if (
          !this.endEditBefore(scope.row, this.columns[scope.$index], scope.$index)
        ) {
          return;
        }

        for (let index = 0; index < this.columns.length; index++) {
          let column = this.columns[index];
          if (!column.hidden && (column.required || column.require)) {
            if (!this.validateColum(column, scope.row)) return;
          }
        }
        this.edit.rowIndex = -1;
        if (
          !this.endEditAfter(scope.row, this.columns[scope.$index], scope.$index)
        ) {}
      },
      rowBeginEdit(row, column) {
        if (this.edit.rowIndex != -1) {
          return;
        }
        if (!this.enableEdit) return;
        // 编辑前
        if (!this.beginEdit(row, column, row.elementIdex)) return;
        if (row.hasOwnProperty("elementIdex")) {
          if (this.edit.rowIndex == row.elementIdex) {
            return;
          }
          this.edit.rowIndex = row.elementIdex;
        }
      },
      validateColum(option, data) {
        if (option.hidden || option.bind) return true;
        let val = data[option.field];
        if (option.require || option.required) {
          if (val != "0" && (val == "" || val == undefined)) {
            if (!this.errorFiled) {
              //  event.focus();
              this.$Message.error(option.title + "不能为空");
            }
            return false;
          }
        }
        if (!option.edit) {
          return true;
        }
        let editType = option.edit.type;
        // 验证数字
        if (editType == "int" || editType == "decimal" || editType == "number") {
          if (val == "" || val == undefined) return true;
          if (editType == "decimal") {
            if (!this.rule.decimal.test(val)) {
              this.$Message.error(option.title + "只能是数字");
              return false;
            }
          } else if (!this.rule.decimal.test(val)) {
            this.$Message.error(option.title + "只能是整数");
            return false;
          }
          if (
            option.edit.min != undefined &&
            typeof option.edit.min === "number" &&
            val < option.edit.min
          ) {
            this.$Message.error(option.title + "不能小于" + option.edit.min);
            return false;
          }
          if (
            option.edit.max != undefined &&
            typeof option.edit.max === "number" &&
            val > option.edit.max
          ) {
            // 2020.09.26修复表格验证最大值取值错误的问题
            this.$Message.error(option.title + "不能大于" + option.edit.max);
            return false;
          }
          return true;
        }

        // 验证字符串
        if (val && (editType == "text" || editType == "string")) {
          if (
            option.edit.min != undefined &&
            typeof option.edit.min === "number" &&
            val.length < option.edit.min
          ) {
            this.$Message.error(
              option.title + "至少" + option.edit.min + "个字符"
            );
            return false;
          }
          if (
            option.edit.max != undefined &&
            typeof option.edit.max === "number" &&
            val.length > option.edit.max
          ) {
            this.$Message.error(
              option.title + "最多" + option.edit.max + "个字符"
            );
            return false;
          }
          return true;
        }
        return true;
      },
      rowEndEdit(row, column, event) {
        if (this.clickEdit && event) {
          return true;
        }
        if (!this.enableEdit) {
          if (!this.errorFiled) {
            if (
              this.edit.rowIndex != -1 &&
              !this.endEditAfter(row, column, this.edit.rowIndex)
            ) {
              return false;
            }
            this.edit.rowIndex = -1;
          }
          return true;
        }
        if (!this.doubleEdit && event) {
          return true;
        }
        // 结束编辑前
        if (!this.endEditBefore(row, column, this.edit.rowIndex)) return false;

        if (
          this.edit.rowIndex != -1 &&
          (!this.errorFiled || this.errorFiled == column.property)
        ) {
          let data = (this.url ? this.rowData : this.tableData)[
            this.edit.rowIndex
          ];
          let option = this.columns.find((x) => {
            return x.field == column.property;
          });
          if (!option || !option.edit) {
            return true;
          }
          if (
            option.edit.type == "datetime" ||
            option.edit.type == "date" ||
            option.edit.type == "select"
          ) {
            if (this.edit.rowIndex == row.elementIdex) {
              return true;
            }
          }
          if (!this.validateColum(option, data)) {
            this.errorFiled = option.field;
            return false;
          } else {
            this.errorFiled = "";
          }
        }
        if (this.errorFiled) {
          return false;
        }
        if (!this.endEditAfter(row, column, this.edit.rowIndex)) return false;
        //  this.errorFiled = "";
        this.edit.rowIndex = -1;
        return true;
        // this.edit.columnIndex=-1;
      },
      delRow() {
        let rows = this.getSelected();
        if (rows.length == 0) return this.$Message.error("请选择要删除的行!");

        let data = this.url ? this.rowData : this.tableData;
        let indexArr = this.getSelectedIndex();
        if (indexArr.length == 0) {
          return this.$Message.error(
            "删除操作必须设置VolTable的属性index='true'"
          );
        }
        // if (indexArr.length == 0 || !this.key) {
        //   return this.$message.error(
        //     "请设置index=true属性或指columns的字段为key"
        //   );
        // }
        if (indexArr.length == 0) {
          // let keyValues=[]
          // rows.forEach(x=>{
          //   if (x[this.key]) {
          //   }
          //   keyValues.push(x[this.key])
          // })
          // data.find(x=>)
        } else {
          for (let i = data.length - 1; i >= 0; i--) {
            if (indexArr.indexOf(i) != -1) {
              data.splice(i, 1);
            }
          }
        }
        this.edit.rowIndex = -1;
        return rows;
      },
      addRow(row) {
        if (!row) {
          row = {};
        }
        this.columns.forEach((x) => {
          if (!row.hasOwnProperty(x.field)) {
            if (x.edit && x.edit.type == "switch") {
              row[x.field] = x.type == "bool" ? false : 0;
            } else if (!row.hidden) {
              // 2020.09.06添加行时，设置默认字段
              row[x.field] = undefined;
            }
          }
        });
        if (!this.url) {
          this.tableData.push(row);
          return;
        }
        this.rowData.push(row);
      },
      viewImg(row, column, url) {
        this.base.previewImg(url);
        // window.open(row[column.field]);
      },
      link(row, column, $e) {
        $e.stopPropagation();
        this.$props.linkView(row, column);
      },
      getSelected() {
        return this.$refs.table.selection;
      },
      getSelectedIndex() {
        if (!this.index) {
          // 只有设置了属性index才有索引行
          return [];
        }
        let indexArr = this.$refs.table.selection.map((x) => {
          return x.elementIdex;
        });
        return indexArr || [];
      },
      GetTableDictionary(rows) {
        // 分页或刷新或重新绑定数据源
        if (this.remoteColumns.length == 0 || !rows || rows.length == 0) return;
        let remoteInfo = {};
        for (let index = 0; index < this.remoteColumns.length; index++) {
          const column = this.remoteColumns[index];
          //  column.bind.data.splice(0);
          let key = column.bind.key;
          let data = [];
          rows.forEach((row) => {
            if (data.indexOf(row[column.field]) == -1) {
              data.push(row[column.field]);
            }
          });
          if (data.length > 0) {
            remoteInfo[key] = data;
          }
        }
        if (remoteInfo.length == 0) return;
        // ha= Object.assign([], ha, hb)

      },
      load(query, isResetPage) {
        // isResetPage重置分页数据
        if (!this.url) return;
        if (isResetPage) {
          this.resetPage();
        }
        let param = {
          page: this.paginations.page,
          rows: this.paginations.rows,
          sort: this.paginations.sort,
          order: this.paginations.order,
          wheres: [], // 查询条件，格式为[{ name: "字段", value: "xx" }]
        };
        let status = true;
        // 合并查询信息(包查询分页、排序、查询条件等)
        if (query) {
          param = Object.assign(param, query);
        }
        /* 查询前处理(如果需要查询条件，实现组件方法loadBefore方法即可:
          loadBefore=(param, callBack)=>{
            param.wheres = [{ name: "PhoneNo", value: "13419098211" }];
            callBack(true);
          })
        */
        this.$emit("loadBefore", param, (result) => {
          status = result;
        });
        if (!status) return;

        if (param.wheres && param.wheres instanceof Array) {
          param.wheres = JSON.stringify(param.wheres);
        }
        this.loading = true;
        //this.http.post(this.url, param)
        request({
            url: this.url,
            method: 'get',
            params: param
          })
          .then(
            (data) => {
              //2021.06.04修复tree不刷新的问题
              if (this.rowKey) {
                this.randomTableKey++;
                this.rowData.splice(0);
              }
              this.loading = false;
              // 查询返回结果后处理
              // 2020.10.30增加查询后返回所有的查询信息
              this.$emit(
                "loadAfter",
                data.rows || [],
                (result) => {
                  status = result;
                },
                data
              );
              if (!status) return;
              //this.GetTableDictionary(data.rows);
              this.rowData = data.rows || [];
              this.paginations.total = data.total;
              // 合计
              this.getSummaries(data);
            },
          ).catch(error => {
            //reject(error)
          })
      }, // 获取统计
      getSummaries(data) {
        if (!this.summary || !data.summary) return;
        this.summaryData.splice(0);
        // 开启了行号的，+1
        if (this.columnIndex) {
          this.summaryData.push("");
        }
        // 如果有checkbox，应该算作是第一行
        if (this.ck) {
          this.summaryData.push("");
        }

        this.columns.forEach((col) => {
          if (!col.hidden) {
            if (data.summary.hasOwnProperty(col.field)) {
              this.summaryData.push(data.summary[col.field]);
            } else {
              this.summaryData.push("");
            }
          }
        });
        if (this.summaryData.length > 0 && this.summaryData[0] == "") {
          this.summaryData[0] = "合计";
        }
      },
      getInputChangeSummaries() {},
      handleSizeChange(val) {
        this.paginations.rows = val;
        this.load();
      },
      handleCurrentChange(val) {
        this.paginations.page = val;
        this.load();
      },
      sortChange(sort) {
        this.paginations.sort = sort.prop;
        this.paginations.order = sort.order == "ascending" ? "asc" : "desc";
        this.load();
      },
      resetPage() {
        // 重置查询分页
        // this.paginations.rows = 30;
        this.paginations.page = 1;
      },
      selectionChange(selection) {
        // console.log(selection);
        // 选择行事件,只有单选才触发
        if (this.single && selection.length == 1) {
          this.$emit("rowChange", selection[0]); //
        }
        if (this.single && selection.length > 1) {
          this.$refs.table.toggleRowSelection(selection[0]);
        }
        // this.rowChange(selection[0]);
      },
      getColor(row, column) {
        let val = row[column.field];

        // if (val == "" || val == null || val == undefined) {
        //  return "none";
        // }
        if (column.getColor && typeof column.getColor === "function") {
          let _color = column.getColor(row, column);
          if (_color) {
            return _color;
          }
        }
        if (!val && val != "0") {
          return this.defaultColor;
        }
        if (!this.formatConfig[column.field]) {
          this.formatConfig[column.field] = [val];
          return this.colors[0];
        }
        let index = this.formatConfig[column.field].indexOf(val);
        if (index != -1) {
          return this.colors[index];
        }
        if (this.formatConfig[column.field].length > 15) {
          return this.defaultColor;
        }

        if (index == -1) {
          this.formatConfig[column.field].push(val);
          index = this.formatConfig[column.field].length - 1;
        }
        return this.colors[index];
      },
      formatterDate(row, column) {
        return (row[column.field] || "").substr(0, 10);
      },
      formatter(row, column, template) {
        if (!template) return row[column.property];
        let val = row[column.field];
        // 是否值
        if (column.edit && column.edit.type == "switch") {
          return val ? "是" : "否";
        }
        if (!column.bind || !column.bind.data) {
          return row[column.field];
        }
        if (!val && val != 0) return val;
        // 编辑多选table显示
        if (
          (column.bind.type == "selectList" || column.bind.type == "checkbox") &&
          typeof val === "string" &&
          val.indexOf(",") != -1
        ) {
          return this.getSelectFormatter(column, val);
        }
        let source = column.bind.data.filter((x) => {
          // return x.key != "" && x.key == val;
          // 2020.06.06修复单独使用table组件时,key为数字0时转换成文本失败的问题
          return x.key !== "" && x.key !== undefined && x.key + "" === val + "";
        });
        if (source && source.length > 0) val = source[0].value;
        return val;
      },
      getSelectFormatter(column, val) {
        // 编辑多选table显示
        let valArr = val.split(",");
        for (let index = 0; index < valArr.length; index++) {
          column.bind.data.forEach((x) => {
            // 2020.06.06修复数据源为selectList时,key为数字0时不能转换文本的问题
            if (
              x.key !== "" &&
              x.key !== undefined &&
              x.key + "" == valArr[index] + ""
            ) {
              valArr[index] = x.value;
            }
          });
        }
        return valArr.join(",");
      },
      onChange(scope, val, event, column) {
        // 2020.09.03修复onChange不触发的问题
        let row = scope.row;
        if (column.onChange && !column.onChange(row, val, event)) {
          return;
        }
        // 输入框求和实时计算
        this.getInputSummaries(scope, val, event, column);
      },
      // input输入实时求和
      getInputSummaries(scope, val, event, column) {
        // column列设置了summary属性的才计算值
        if (!column.summary) return;
        let sum = 0;
        let _index = 0;
        (this.url ? this.rowData : this.tableData).forEach((x, index) => {
          if (x.hasOwnProperty(column.field) && !isNaN(x[column.field])) {
            _index = index;
            sum += x[column.field] * 1;
          }
        });
        this.$set(this.summaryData, this.summaryIndex[column.field], sum);
      },
      getCellStyle(row) {
        // 2020.12.13增加设置单元格颜色
        if (row.column.property) {
          return (
            this.cellStyleColumns[row.column.property] &&
            this.cellStyleColumns[row.column.property](
              row.row,
              row.rowIndex,
              row.columnIndex
            )
          );
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  .vol-table {
    position: relative;

    .mask {
      opacity: 0.2;
      position: absolute;
      width: 100%;
      height: 100%;
      background: #d0d0d0;
      z-index: 100;
    }

    .message {
      text-align: center;
      color: #635c5c;
      font-size: 15px;
      font-weight: 600;
      background: #eee;
      transform: translateY(-50%);
      top: 50%;
      position: absolute;
      z-index: 200;
      left: 0;
      right: 0;
      width: 150px;
      margin: 0 auto;
      line-height: 40px;
      border-radius: 4px;
      border: 1px solid #a09e9e;
    }
  }

  .e-item {
    display: flex;

    >div:first-child {
      flex: 1;
    }
  }
</style>

<style scoped>
  /*表头错行 .el-table th.gutter{
    display: table-cell!important;
} */
  .pagination {
    text-align: right;
    /* margin-top: 8px; */
    padding: 2px 28px;
    border: 1px solid #eee;
    border-top: 0px;
  }

  .v-table>>>.el-table__header th {
    padding: 0px !important;
    background-color: #f8f8f9 !important;
    font-size: 13px;
    height: 42px;
    color: #616161;
  }

  .v-table>>>.el-table__header th.is-sortable {
    padding: 3px !important;
  }

  .vol-table.text-inline>>>.el-table__body .cell {
    word-break: inherit !important;
    white-space: nowrap !important;
  }

  .v-table>>>.el-table__body td {
    padding: 9px 0 !important;
  }

  .v-table>>>.el-table__footer td {
    padding: 7px 0 !important;
  }

  /* 2021.01.30修复火狐checkbox错位问题 */
  .vol-table>>>.el-table-column--selection .cell {
    display: inline;
  }

  .vol-table.text-inline>>>.el-table th>.cell {
    white-space: nowrap !important;
  }

  .vol-table>>>.el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .vol-table>>>.el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #ddd;
  }

  .vol-table .table-img {
    height: 40px;
    border-radius: 5px;
    margin-right: 10px;
    width: 40px;
    object-fit: cover;
  }

  .vol-table .table-img:hover {
    cursor: pointer;
  }

  .v-table>>>.ivu-tag-default {
    border: none !important;
    background: none !important;
  }

  /* .v-table >>> .el-table__fixed-body-wrapper {
  top: 41px !important;
} */
  .v-table>>>.el-table__fixed:before {
    border-color: none !important;
  }

  /* 2021.06.19判断谷歌内核浏览重新计算table高度 */
  .chrome>>>.el-table__fixed {
    height: calc(100% - 11px) !important;
    background: white;
    /* box-shadow: 0px -11px 10px rgb(0 0 0 / 12%) !important; */
  }

  .chrome>>>.el-table__body-wrapper::-webkit-scrollbar {
    width: 11px;
    height: 11px;
  }

  .chrome>>>.el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #ddd;
  }

  .chrome>>>.el-table__fixed:before {
    background-color: unset;
  }

  .chrome>>>.el-table__fixed-footer-wrapper {
    bottom: -11.5px;
  }
</style>
