<template>
  <div class="mod-config">
    <el-row>
      <el-col :span="24" style="display:flex">

        <div style=" margin: auto; width: 300px;height: 50px;display:flex">
          <h2>赫艾内部MES沟通系统</h2>
        </div>


      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="dataList"
          border
          ref="task_table"
          :height="height"
          :row-class-name="tableRowClassName"
          @mouseenter.native="mouseEnter"
          @mouseleave.native="mouseLeave"
          style="width: 100%;">
          <el-table-column
            v-for="(item,index) in columnList" :key="index"
            :sortable="item.columnSortable"
            :prop="item.columnProp"
            :header-align="'center'"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :align="item.align"
            :fixed="item.fixed==''?false:item.fixed"
            :width="item.columnWidth"
            :label="item.columnLabel">
            <template slot-scope="scope">
              <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
              <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                                 style="width: 100px; height: 80px"/></span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import {getTaskDetailList} from '@/api/taskmanage/tasklist.js'

  let domTimer = '' // 自动滚动的定时任务
  let dataTimer = '' // 数据定时任务
  export default {
    data() {
      return {
        height: 200,
        dataForm: {
          site: this.$store.state.user.site ? this.$store.state.user.site : 1,
          customer: '',
          taskHeader: '',
          project: '',
          taskDescription: '',
          taskInitiator: '',
          finalStatus: '未完成',
          department: '',
          responsiblePerson: '',
          startDate: '',
          endDate: '',
          finishStartDate: '',
          finishEndDate: '',
          status: '',
        },
        // 展示列集
        columnList: [
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "customer",
            columnLabel: "客户",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 100,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "project",
            columnLabel: "项目",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 100,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "taskHeader",
            columnLabel: "任务主题",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "taskStartDate",
            columnLabel: "发起日期",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 100,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "requiredCompletionDate",
            columnLabel: "要求完成日期",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 100,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },

          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "depUserName",
            columnLabel: "责任部门|责任人",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 120,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "status",
            columnLabel: "状态",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 80,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
        ],
        dataList: [],
        // 默认的刷新，滚动时间，滚动间距
        refreshTime: 5,
        rollTime: 5,
        rollPx: 1,
      }
    },
    activated() {
      // this.getDataList()

    },
    mounted() {
      this.$nextTick(() => {
        this.height = window.innerHeight - 30;
      })
    },
    methods: {
      // 获取数据列表
      getDataList() {
        getTaskDetailList(this.dataForm).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.data
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (row.status == '未受理' && this.dayjs(this.dayjs()).diff( row.createdDate,'minutes')/60>=12) {
          return 'finish'
        }
        if (row.status == '未受理') {
          return 'not-processing'
        }
        if (row.status == '已受理') {
          return 'processing'
        }
        // return ''
      },
      // 鼠标进入
      mouseEnter(time) {
        // 鼠标进入停止滚动和切换的定时任务
        this.autoRoll(true)
      },
      // 鼠标离开
      mouseLeave() {
        // 开启
        this.autoRoll()
      },
      // 设置自动滚动
      autoRoll(stop) {
        if (stop) {
          clearInterval(domTimer)
          return
        }
        this.$nextTick(() => {
          // 拿到表格挂载后的真实DOM
          const table = this.$refs.task_table
          // 拿到表格中承载数据的div元素
          const divData = table.bodyWrapper
          // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
          domTimer = setInterval(() => {
            // 元素自增距离顶部像素
            divData.scrollTop = this.decimalUtil.add(Number(divData.scrollTop), Number(this.rollPx))
            // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
            if (divData.clientHeight + divData.scrollTop + 1 >= divData.scrollHeight) {
              // 重置table距离顶部距离
              divData.scrollTop = 0
            }
          }, this.rollTime * 10)
        })

      },
    },
    created() {
      this.autoRoll()
      dataTimer = setInterval(() => {
        this.getDataList()
      }, 3000)
    },
    beforeUnmount() {
      clearInterval(dataTimer)
      clearInterval(domTimer)
    }
  }
</script>
<style>
  .mod-config .not-processing {
    background-color: #ffff00;
  }

  .mod-config .processing {
   // background-color: #5f0e3f;
  }

  .mod-config .finish {
    background-color:orangered;
  }
</style>
