<template>
  <el-table
    empty-text="暂无数据"
    ref="table"
    :data="tableList"
    border
    stripe
    fit
    highlight-current-row
    :height="tableHeight"
    @selection-change="selectionChange"
    @row-click="rowClick"
  >
    <!-- 选择框 -->
    <el-table-column
      v-if="select"
      type="selection"
      fixed="left"
      width="55"
      align="center"
    />
    <template v-for="(itm, idx) in header">
      <!-- 需要内嵌代码的列 -->
      <el-table-column
        v-if="itm.tag"
        :key="idx"
        :prop="itm.prop ? itm.prop : null"
        :label="itm.label ? itm.label : null"
        :width="itm.width ? itm.width : null"
        :sortable="itm.sortable ? itm.sortable : false"
        :align="itm.align ? itm.align : 'center'"
        :fixed="itm.fixed ? itm.fixed : null"
        :show-overflow-tooltip="itm.tooltip"
        min-width="50"
      >
        <!-- 一些需要特殊处理的单元格放到这里 -->
        <template slot-scope="scope">
          <!-- 详细任务进度 -->
          <template v-if="itm.tag === 'detailProgress'">
            <el-progress
              v-if="
                scope.row.currentPlan &&
                  scope.row.totalPlan <= scope.row.currentPlan
              "
              :text-inside="true"
              :stroke-width="16"
              :percentage="100"
              status="success"
            ></el-progress>
            <el-progress
              v-else-if="scope.row.totalPlan"
              :text-inside="true"
              :stroke-width="16"
              :percentage="
                Math.floor(
                  (scope.row.currentPlan * 10000) / scope.row.totalPlan
                ) / 100
              "
            ></el-progress>
            <el-progress
              v-else
              :text-inside="true"
              :stroke-width="16"
              :percentage="0"
            ></el-progress>
            {{ "(" + scope.row.currentPlan + "/" + scope.row.totalPlan + ")" }}
          </template>
          <!-- 总任务进度 -->
          <template v-if="itm.tag === 'allTaskProgress'">
            <el-progress
              v-if="scope.row.current && scope.row.total <= scope.row.current"
              :text-inside="true"
              :stroke-width="16"
              :percentage="100"
              status="success"
            ></el-progress>
            <el-progress
              v-else-if="scope.row.total"
              :text-inside="true"
              :stroke-width="16"
              :percentage="
                Math.floor((scope.row.current * 10000) / scope.row.total) / 100
              "
            ></el-progress>
            <el-progress
              v-else
              :text-inside="true"
              :stroke-width="16"
              :percentage="0"
            ></el-progress>
            {{ "(" + scope.row.current + "/" + scope.row.total + ")" }}
          </template>
          <!-- 按钮设置 -->
          <template v-else-if="itm.tag === 'operation'">
            <!-- status 0 没开启 1 开启等待执行 2完成 4执行中 -->
            <el-tag v-if="scope.row.status == 0" type="info" effect="dark">
              <i class="el-icon-video-play"></i>任务未开启
            </el-tag>
            <el-tag
              v-else-if="scope.row.status == 1"
              type="warning"
              effect="dark"
            >
              <i class="el-icon-info"></i>等待执行
            </el-tag>
            <el-tag
              v-else-if="scope.row.status == 2"
              type="success"
              effect="dark"
            >
              <i class="el-icon-success"></i>执行成功
            </el-tag>
            <el-tag
              v-else-if="scope.row.status == 4"
              type="primary"
              effect="dark"
            >
              <i class="el-icon-loading"></i>执行中...
            </el-tag>
          </template>
          <!-- 查看 -->
          <template v-if="itm.tag === 'onpenTask'">
            <el-button type="text" @click="openTaskDetail(scope.row)">
              查看
            </el-button>
          </template>
        </template>
      </el-table-column>
      <!-- 正常列 -->
      <el-table-column
        v-else
        :key="idx"
        :prop="itm.prop ? itm.prop : null"
        :label="itm.label ? itm.label : null"
        :width="itm.width ? itm.width : null"
        :sortable="itm.sortable ? itm.sortable : false"
        :align="itm.align ? itm.align : 'center'"
        :fixed="itm.fixed ? itm.fixed : null"
        :formatter="itm.formatter"
        :show-overflow-tooltip="itm.tooltip"
        min-width="50"
      />
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableHeight: null
    };
  },
  props: {
    tableList: {
      type: Array,
      default: () => []
    },
    header: {
      type: Array,
      default: () => []
    },
    select: {
      type: Boolean,
      default: () => false
    },
    selectionChange: {
      type: Function,
      default: () => null
    },
    rowClick: {
      type: Function,
      default: () => null
    }
  },
  mounted() {
    this.$nextTick(() => {
      //表格高度自适应浏览器大小
      this.changeTableHight();
      window.onresize = () => {
        this.changeTableHight();
      };
    });
  },
  destroyed() {
    //高度自适应事件注销
    window.onresize = null;
  },
  watch: {
    /**
     * 数据变化后 高度自适应
     */
    tableList() {
      this.$nextTick(() => {
        this.changeTableHight();
      });
    }
  },
  methods: {
    /**
     * 高度自适应
     * 当表格展示空间小于460按460px展示，大于的时候高度填充
     */
    changeTableHight() {
      let Height = window.innerHeight || document.body.clientHeight;
      //高度设置
      let disTop = this.$refs.table.$el;
      //如果表格上方有元素则减去这些高度适应窗口，66是底下留白部分
      Height -= disTop.offsetTop + 66;
      if (disTop.offsetParent) Height -= disTop.offsetParent.offsetTop;
      this.tableHeight = Height < 460 ? 460 : Height;
      //重绘表格
      this.$refs.table.doLayout();
    },
    /**
     * 开启改价任务,分发给父组件
     */
    openTaskDetail(row) {
      this.$emit("openTaskDetail", row);
    }
  }
};
</script>

<style></style>
