<template>
  <div class="op-table">
    <div class="table-wrap">
      <el-table
        v-loading="options.loading"
        :data="list"
        :stripe="options.stripe"
        ref="mutipleTable"
        @selection-change="handleSelectionChange"
        header-cell-class-name="table-header"
        :border="options.border"
        :header-cell-style="{ background: '#f4f4f4' }"
      >
        <!--selection选择框-->
        <el-table-column v-if="options.mutiSelect" type="selection" style="width: 50px"></el-table-column>

        <!--序号-->
        <el-table-column v-if="options.index" label="序号" type="index" width="50" align="center">
          <template slot-scope="scope">
            <span>
              {{
              scope.$index +
              (pagination.pageIndex - 1) * pagination.pageSize +
              1
              }}
            </span>
          </template>
        </el-table-column>
        <!--数据列-->
        <template v-for="(column, index) in columns">
          <el-table-column
            :key="index"
            :prop="column.prop"
            :label="column.label"
            :align="column.align || 'left'"
            :width="column.width"
            :fixed="column.fixed"
            :render-header="column.renderHeader"
            :show-overflow-tooltip="showToolTip(column.tooltip)"
          >
            <template slot-scope="scope">
              <template v-if="!column.hasPic">
                <template v-if="!column.render">
                  <template v-if="column.formatter">
                    <span v-html="column.formatter(scope.row, column, scope.$index)"></span>
                  </template>
                  <template v-else>
                    <span>
                      {{
                      scope.row[column.prop] || options.default || ""
                      }}
                    </span>
                  </template>
                </template>

                <!--render-->
                <template v-else>
                  <expand-dom
                    :render="column.render"
                    :column="column"
                    :row="scope.row"
                    :index="index"
                  ></expand-dom>
                </template>
              </template>
              <!-- 有图片 -->
              <template v-else>
                <el-image
                  v-if="scope.row[column.prop] !== ''"
                  :src="imgrl + scope.row[column.prop].split(',')[0]"
                  :preview-src-list="stringToArr(scope.row[column.prop])"
                  style="width: 40px; height: 40px"
                />
                <span v-else>--</span>
              </template>
            </template>
          </el-table-column>
        </template>
        <!-- 按钮操作组-->
        <el-table-column
          v-if="operates && !options.slot"
          ref="fixedColumn"
          label="操作"
          :align="left"
          :width="operates.width"
          :fixed="operates.fixed"
        >
          <template slot-scope="scope">
            <div class="operate-group">
              <template v-for="(btn, key) in operates.list">
                <el-button
                  :key="key"
                  :type="btn.type"
                  size="mini"
                  :icon="btn.icon"
                  :disabled="btn.disabled"
                  :plain="btn.plain"
                  :style="btn.style"
                  @click.native.prevent="btn.method(scope.row, key)"
                >{{ btn.label }}</el-button>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="options.slot"
          label="操作"
          :align="options.align || 'left'"
          :width="options.oPWidth"
          :fixed="options.oPfixed"
        >
          <template slot-scope="scope">
            <slot :row="scope.row"></slot>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页-->
    <el-pagination
      v-if="pagination.show"
      background
      @size-change="handleSizeChange"
      @current-change="handleIndexChange"
      :page-size="pagination.pageSize"
      :page-sizes="
        pagination.pageSizeArr && pagination.pageSizeArr.length > 0
          ? pagination.pageSizeArr
          : [10, 50, 100, 500, 5000]
      "
      :current-page="pagination.pageIndex"
      layout="total,sizes, prev, pager, next,jumper"
      :total="pagination.total"
      style="margin-top: 20px; text-align: left"
    ></el-pagination>
  </div>
</template>


<script>
import ElTable from "element-ui/packages/table";
import ElTableColumn from "element-ui/packages/table-column";
import ElButton from "element-ui/packages/button";

import ElImage from "element-ui/packages/image";
import ElPagination from "element-ui/packages/pagination";

export default {
  name: "ElQueryTable",
  props: {
    list: {
      type: Array,
      default: () => [] // prop:表头绑定的地段，label：表头名称，align：每列数据展示形式（left, center, right），width:列宽
    }, // 数据列表
    columns: {
      type: Array,
      default: () => [] // 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽
    },
    operates: {
      type: Object,
      default: () => {
        // width:按钮列宽，fixed：是否固定（left,right）,按钮集合 === label: 文本，type :类型（primary / success / warning / danger / info / text
        // show：是否显示，icon：按钮图标，plain：是否朴素按钮，disabled：是否禁用，method：回调方法
      }
    },
    pagination: {
      type: Object,
      default: {} // 分页参数 === pageSize:每页展示的条数，pageIndex:当前页，pageArray: 每页展示条数的控制集合，默认 _page_array
    },
    getList: Function,
    tableRowClassName: Function,
    options: {
      type: Object,
      default: {}
    } // table 表格的控制参数
  },
  components: {
    ElTable,
    ElTableColumn,
    ElButton,
    ElImage,
    ElPagination,

    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null
        }
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index
        };
        if (ctx.props.column) params.column = ctx.props.column;
        return ctx.props.render(h, params);
      }
    }
  },
  data() {
    return {
      multipleSelection: [], // 多行选中
      imgrl: process.env.VUE_APP_IMGURL
    };
  },
  created() {
    // options 处理
    if (this.options.initTable !== false) {
      this.getList();
    }
    // === 表格参数默认值
    this.$parent.options = Object.assign(
      {
        // maxHeight: 500, // 表格 max-height
        initTable: true, // 是否一进来就加载表格数据
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: false, // 是否支持列表项选中功能
        border: true
      },
      this.options
    );
  },
  methods: {
    // 是否需要多出隐藏
    showToolTip(tip) {
      if (tip === false) {
        return false;
      }
      return true;
    },
    // 切换每页显示的数量
    handleSizeChange(size) {
      this.pagination.pageSize = size;
      this.getList();
    },
    // 切换页码
    handleIndexChange(current) {
      this.pagination.pageIndex = current;
      this.getList();
    },
    // 多行选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit("handleSelectionChange", val);
    },
    //图片数组
    stringToArr(str) {
      let arr = str.split(",");
      let arr1 = [];
      arr.forEach(e => {
        arr1.push(this.imgrl + e);
      });
      return arr1;
    }
  }
};
</script>