<!-- 各个单据导出下载管理 -->
<template>
  <div class="main-container order-mc-bg">
    <div class="sale-container">
      <!-- 列表 -->
      <div class="sale-page-body">
        <!-- 表头 -->
        <div class="sale-page-table-header" ref="getSaleTableHeader" style="padding-top: 15px;">
          <el-form :inline="true">
            <el-row class="form-row1">
              <el-col :span="20">
                <el-row :gutter="2">
                  <el-col :span="4">
                    <el-form-item label="任务类型">
                      <el-select v-model="search.type" placeholder="请选择" filterable clearable>
                        <el-option class="f-12" v-for="(value, key, index) in typelist" :key="key + index"
                          :label="value" :value="index + 1"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item label="操作日期">
                      <el-date-picker class="f-12" v-model="Time1" type="daterange" start-placeholder="开始时间"
                        end-placeholder="结束时间" value-format="YYYY-MM-DD" @change="time1Chang"></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="状态">
                      <el-select v-model="search.status" placeholder="请选择" filterable clearable>
                        <el-option class="f-12" v-for="(value, key, index) in statuslsit" :key="key + index"
                          :label="value" :value="index"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="操作人">
                      <el-input v-model.trim="search.user" placeholder="请输入操作人姓名" class="f-12"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4" class="form-row-lastcol">
                <el-row :gutter="2">
                  <el-col :span="24">
                    <el-form-item class="form-group1">
                      <el-button type="primary" size="small" @click="searchData">搜索</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 列表 -->
        <div class="sale-page-table-body">
          <el-table class="table-box" :data="tableData" border ref="tableInfoRef" v-loading="isLoading"
            element-loading-text="加载中，请稍后..." element-loading-spinner="el-icon-loading"
            style="width: 100%;font-size:12px" :max-height="heightNum" :header-cell-class-name="headerRigthMethod"
            :header-cell-style="headerBg">
            <el-table-column prop="type" label="任务类型" align="left">
              <template #default="scope">
                <span>{{ getPageObjValue(typelist, scope.row.type + '') }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="操作日期" align="left" />
            <el-table-column prop="status" label="状态" align="left">
              <template #default="scope">
                <span v-if="scope.row.status === '导出成功'" style="color:#3AD6AC">
                  {{ scope.row.status }}
                  <i class="iconfont icon-chenggong"></i>
                </span>
                <span v-if="scope.row.status === '导出失败'" style="color:#FF5363">
                  {{ scope.row.status }}
                  <i class="iconfont icon-shijing"></i>
                </span>
                <span v-if="scope.row.status === '正在导出'" style="color:#FDC027">{{ scope.row.status + '...' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="filePath" label="附件" align="left">
              <template #default="scope">
                <a class="text-blue" :href="scope.row.filePath"
                  v-if="scope.row.statusKey == 1 && (Math.abs((new Date(scope.row.date).getTime() - new Date().getTime()) / (24 * 60 * 60 * 1000)) <= 7)">下载</a>
                <a v-else style="color:#666:cursor: no-drop;">下载</a>
              </template>
            </el-table-column>
            <el-table-column prop="userName" label="操作人" align="left" />
          </el-table>
        </div>
      </div>
      <!-- 底部 -->
      <div class="sale-page-footer">
        <div class="footer-right">
          <el-pagination :page-sizes="[50, 100, 150]" :page-size="search.pageSize"
            layout="slot,sizes, total,prev,pager, next,jumper" :total="orderTotal" :current-page="search.pageNo"
            @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
        </div>
        <div class="footer-pagination-total-page">
          <span v-if="orderTotal">共{{ orderTotal }}页</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getObjValue } from '@/utils/pubulic.js'
export default {
  name: 'ExportMangeList',
  data () {
    return {
      typelist: {},
      statuslsit: {},
      // 搜索条件
      search: {
        orgId: '', // 组织id
        pageNo: 1, // 页码
        pageSize: 50, // 页数
        type: '', // 单据类型(任务类型)
        status: '', // 状态
        beginDate: '', // 下单时间 开始
        endDate: '', // 下单时间 结束
        user: '' // 操作人
      },
      Time1: [],
      tableData: [],
      rowShow: false,
      heightNum: 0,
      orderTotal: null,
      windowHeight: 0,
      isDown: true
    }
  },

  computed: {
    ...mapState({
      orgId: state => (state && state.user ? state.user.orgId : null)
    }),
    getPageObjValue: function () {
      // 根据key值显示对应的键名
      return function (arr, key) {
        return getObjValue(arr, key)
      }
    },
    unitSet: function () {
      // 根据key值显示对应的键名
      return function (arr, key) {
        return theUnitSet(arr, key)
      }
    }
  },
  activated () {
    // this.$refs.tableInfoRef.clearSelection()
  },
  watch: {
    orgId (value) {
      if (value) {
        this.search = {
          orgId: '', // 组织id
          pageNo: 1, // 页码
          pageSize: 50, // 页数
          type: '', // 单据类型(任务类型)
          status: '', // 状态
          beginDate: '', // 下单时间 开始
          endDate: '', // 下单时间 结束
          user: '' // 操作人
        }
        this.search.orgId = value
        this.getFileDownManagerQuery()
      }
    }
  },
  created () {
    this.customerSel1 = 1
    this.windowHeight = document.documentElement.clientHeight
    this.heightNum = this.windowHeight - (40 + 30 + 54 + 34 + 34 + 34 + 16 + 16)
    this.search.orgId = this.orgId
    this.Init()
  },
  activated () {
    // 键盘监听事件
    document.addEventListener('keyup', this.keyupFn, false)
  },
  deactivated () {
    document.removeEventListener('keyup', this.keyupFn, false)
  },
  methods: {
    keyupFn (e) {
      if (e.keyCode === 13) {
        // enter见搜索
        this.getFileDownManagerQuery()
      }
    },
    // 初始化
    Init () {
      this.getFileDownManagerQuery()
      this.getselectList()
    },
    handleSizeChange (val) {
      // 每页条数
      this.search.pageSize = val
      this.getFileDownManagerQuery(this.search)
    },
    handleCurrentChange (val) {
      // 分页当前页切换
      this.search.pageNo = val
      this.getFileDownManagerQuery(this.search)
    },
    //获取任务下拉和状态下拉数据
    getselectList () {
      this.$http.get('FileDownManager/GetStatus').then(res => {
        if (res.status === 200) {
          this.typelist = res.data.type
          this.statuslsit = res.data.status
        }
        // console.log('获取任务下拉和状态下拉数据', res)
      })
    },
    // 获取导出下载列表数据
    getFileDownManagerQuery () {
      this.isLoading = true
      this.$http.post('FileDownManager/FileDownManagerQuery', this.search).then(res => {
        if (res.status === 200) {
          this.isLoading = false
          this.tableData = res.data.list
          this.orderTotal = res.data.total
        }
      })
    },
    // 下单日期改变
    time1Chang (value) {
      if (value && value.length > 0) {
        this.search.beginDate = value[0]
        this.search.endDate = value[1]
      } else {
        this.search.beginDate = ''
        this.search.endDate = ''
      }
    },
    // 搜索事件
    searchData () {
      this.search.pageNo = 1
      this.getFileDownManagerQuery()
    },
    //控制表头颜色
    headerBg ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 17 || columnIndex === 18) {
        return `text-align:right!important;`
      }
    },
    headerRigthMethod ({ row, column, rowIndex, columnIndex }) {
      return 'headerRight'
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/saleOrder/saleOrderCommon.scss';
@import '@/assets/style/saleOrder/orderList.scss';
</style>