<template>
  <div class="xTable">
    <div class="thead">
      <i class="left"></i>
      <i class="right"></i>
      <div class="fields" :class="{ current: isScroll }">
        <div v-for="(item, i) in fields" :key="i" :style="{ width: item.width, flex: item.width ? 'unset' : 1, textAlign: item.textAlign }">
          <div @click="sortHandle(item, i)" :class="{ cursor: item.sort !== undefined }">
            <span class="sortFont">{{ item.name }}</span>
            <div class="sortCss">
              <i v-if="item.sort" :class="item.sort.indexOf('asc') > -1 ? 'asc' : ''" :style="{ opacity: item.sortStr == 'asc' ? 1 : 0.4 }"></i>
              <i v-if="item.sort" :class="item.sort.indexOf('desc') > -1 ? 'desc' : ''" :style="{ opacity: item.sortStr == 'desc' ? 1 : 0.4 }"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tbody" ref="tbody" v-if="list.length > 0">
      <div class="row" v-for="(item, i) in list" :key="i" :class="{ current: active == i, stripeClass: stripeStatus }" @click="rowHandle(item, i)">
        <div :style="{ width: fields[0].width, flex: fields[0].width ? 'unset' : 1, textAlign: 'center' }">
          {{ i + 1 + (pageIndex - 1) * pageSize }}
        </div>
        <div
          v-for="(field, j) in newFields"
          :key="j"
          :style="{
            width: field.width,
            textAlign: field.textAlign,
            flex: field.width ? 'unset' : 1,
          }"
          :title="field.showTitle ? item[field.field] : ''"
          v-if="field.field"
        >
          <!-- //暂时先在这里 -->
          <div v-if="field.slotShow" class="cell">
            <template>
              <slot :name="field.field" :scope="item"></slot>
            </template>
          </div>
          <div v-else>
            <span v-if="field.isClick == true" @click.stop="$emit('tableCellHandle', field.field, item)" :style="{ color: field.color }">
              {{ item[field.field] }}
            </span>
            <span v-else class="spanColor" :style="{ color: field.color }">{{ item[field.field] }}</span>
          </div>
        </div>

        <template>
          <div
            class="btns"
            v-if="showHandle"
            :style="{
              width: fields[fields.length - 1].width,
              flex: fields[fields.length - 1].width ? 'unset' : 1,
            }"
          >
            <slot name="after" :scope="item"></slot>
          </div>
        </template>
      </div>
    </div>
    <div v-else class="noData">暂无数据</div>

    <el-pagination
      v-if="paginationStatus"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="pageSizesArr"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :pager-count="pagerCount"
      style="text-align: right; margin-top: 10px"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "TableTemplate",
  data() {
    return {
      isScroll: false,
      sortStr: "asc",
      setName: "",
    };
  },
  props: {
    stripeStatus: {
      type: Boolean,
      default: false,
    },
    showHandle: {
      type: Boolean,
      default: false,
    },
    fields: {
      type: Array,
      default: () => [],
    },
    pageIndex: {
      //当前页码
      type: Number,
      default: 1,
    },
    pageSize: {
      //每页几条数
      type: Number,
      default: 20,
    },
    total: {
      //总条数
      type: Number,
      default: 1,
    },
    list: {
      type: Array,
      default: () => [],
    },
    currentRow: {
      type: Number,
      default: 0,
    },
    pagerCount: {
      type: Number,
      default: 5,
    },
    pageSizesArr: {
      type: Array,
      default: () => [10, 15, 20, 50, 100],
    },
    paginationStatus: {
      type: Boolean,
      default: true,
    },
  },
  mounted() {
    this.fields.forEach(item => {
      if (item.sort && (item.sort.indexOf("asc") > -1 || item.sort.indexOf("desc") > -1)) {
        this.$set(item, "sortStr", item.sortStr ? item.sortStr : "");
      }
    });
  },
  filters: {
    readFlagStatus(val) {
      if (val == 1) {
        return "已读";
      } else {
        return "未读";
      }
    },
    isOverStatus(val) {
      if (val == 1) {
        return "已办理";
      } else {
        return "办理中";
      }
    },
  },
  computed: {
    newFields() {
      let arr = [];
      this.fields.map(item => {
        if (item.field !== "xNumber" && item.field !== "xHandle") {
          arr.push(item);
        }
      });
      console.log(arr, 22221);
      return arr;
    },
    active: {
      get() {
        return this.currentRow;
      },
      set(n) {
        this.$emit("currentRow", n);
      },
    },
  },
  methods: {
    sortHandle(item, i) {
      if (item.name != this.setName) {
        this.fields.forEach(item => {
          if (item.sort && (item.sort.indexOf("asc") > -1 || item.sort.indexOf("desc") > -1)) {
            this.$set(item, "sortStr", item.sortStr ? item.sortStr : "");
          }
        });
        this.setName = item.name;
      }
      if (item.sortStr == "asc") {
        item.sortStr = "desc"; //降序
      } else if (item.sortStr == "desc") {
        item.sortStr = ""; //降序
      } else {
        item.sortStr = "asc"; //降序
      }
      if (item.sort !== undefined) {
        this.$emit("sortHandle", { i, item });
      }
    },

    rowHandle(item, i) {
      this.active = i;
      this.$emit("rowHandle", item);
    },

    handleSizeChange(v) {
      this.$emit("pageSizeChange", v);
    },

    handleCurrentChange(v) {
      this.$emit("pageIndexChange", v);
    },
  },
  watch: {
    list: {
      handler(newVal) {
        this.$nextTick(() => {
          if (newVal.length > 0) this.$refs.tbody.scrollTop = 0;
        });
      },
      deep: true,
    },
  },
};
</script>
<style></style>
