<template>
  <div class="content-main-manage">
    <div class="content-main">
     <div class="content-body-wrap">
       <div class="content-body">
         <statistics-list :tabsInitData="tabsInitData" :tabsTitleColor="tabsTitleColor" :spanNum=0 w="20%" :unitArr="unitArr" :tabsIcon="tabsIcon" url="metroapi/dataQuality/report/statistical" ref="statistics"></statistics-list>
          <div class="search-list">
            <div class="search-left">
              <Form class="common-form common-form-list" ref="tableParams" :model="tableParams" inline>
                 <FormItem label="" prop="appId">
                  <Select v-model="tableParams.appId" placeholder="来源应用">
                    <Option v-for="item in appData" :value="item.id" :key="item.id">{{ item.appName}}</Option>
                  </Select>
                </FormItem>
                <FormItem label="" prop="reportClass">
                  <Select v-model="tableParams.reportClass" placeholder="请选择报告类型">
                      <Option v-for="item in reportList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="" >
                  <Button type="primary" class="common-btn-search" @click="searchClick">
                    <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 筛选
                  </Button> 
                  <Button type="primary" class="common-btn-search" style="margin-left:10px" @click="resetClick('tableParams')">
                    <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 重置
                  </Button>
                </FormItem>
              </Form>
            </div>
            </div> 
            <div class="manage-main-center">
              <Table :columns="columns" :data="tableData" class="common-table app-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
                <template slot="loading">
                    <Loading-animation></Loading-animation>
                </template>
                 <template slot-scope="{ row }" slot="action">
                  <Tooltip content="查看" placement="top">
                      <i class="iconfont icon-chakan" style="cursor:pointer;color:#ebd100;fontSize:20px;marginRight:6px;vertical-align: middle" @click="lookClick(row)"></i>
                  </Tooltip>
                  <Tooltip content="下载" placement="top">
                      <i class="iconfont icon-_chakanxiazai" style="cursor:pointer;color: #0bb5f4;fontSize:20px;marginRight:6px" @click="downClick(row)"></i>
                  </Tooltip>
                </template>
              </Table>
            </div>
            <div class="common-page">
              <div class="common-page-total">
                共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
              </div>
              <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
            </div>
       </div>
     </div>
    </div>
    <down-all-quality-report ref="report" class="down-report"></down-all-quality-report>
    <down-app-quality-report ref="appReport" class="down-report"></down-app-quality-report>
  </div>
</template>
<script>
import StatisticsList from '../../../components/StatisticsList.vue'
import DownAllQualityReport from '../../../login/DownAllQualityReport.vue'
import DownAppQualityReport from '../../../login/DownAppQualityReport.vue';
export default {
  name: "DataReport",
  components: {
    StatisticsList,DownAllQualityReport,DownAppQualityReport
  },
  data() {
    return {
      tabsIcon: [
        { imgSrc: require('@/assets/images/dataReport1.png') },
        { imgSrc: require('@/assets/images/dataReport2.png') },
        { imgSrc: require('@/assets/images/dataReport3.png') },
        { imgSrc: require('@/assets/images/dataReport4.png') },
        { imgSrc: require('@/assets/images/dataReport5.png') },
      ],
      tabsTitleColor:['#45F2FD', '#EBF310', '#54D593', '#FD7545','#fabb2e'],
      unitArr: ['条','条','条','条','条'],
      tabsInitData: [
        { name: '数据质量日报', value: 0},
        { name: '数据质量月报', value: 0},
        { name: '数据质量年报', value: 0},
        { name: '平台数据质量报告', value: 0},
        { name: '应用数据质量报告', value: 0},
      ],
      loading: true,
      reportList: [{label: "日报",value: 'DAY'},{label: "月报",value: 'MONTH'},{label: "年报",value: 'YEAR'}],
      tableParams: {
        appId: '',
        reportClass: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      tableTotal: 0,
      tablePage: 0,
      columns: [
          {
            title: '序号',
            type: 'index',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
           {
            title: '报告名称',
            key: 'reportName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '应用',
            key: 'appName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '报告类型',
            key: 'reportClassName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '创建时间',
            key: 'createTime',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '操作',
            align: 'center',
            slot: 'action',
            width: 120,
          }
      ],
      applicationParams: {
        level: '',
        lineId: '',
        stationId: '',
        equipmentCheck: '',
        instrumentCheck: '',
        pageNum: 1,
        pageSize: 9999
      },
      appData: []
    };
  },
  mounted() {
    this.getType()
    this.getTableData()
  },
  methods: {
    rowClassName(row, index) {
      if (index % 2 == 0) {
        return "ivu-table-stripe-even";
      } else {
        return "ivu-table-stripe-odd";
      }
    },
    // 分页
    changePage (val) {
      this.tableParams.pageNum = val
      this.getTableData()
    },
    //跳转
    sizeChange (val) {
      this.tableParams.pageSize = val
      this.getTableData()
    },
    getType  () {
      // 指标类型数据
      this.$get('metroapi/application/info/list', this.applicationParams).then(res=>{
        if (res.httpCode == 1 ){
          this.appData = res.data.data
          this.appData.unshift({ id: '-1', appName: '来源应用' })
        } else {
          this.appData = []
        }
      })
    },
    // 获取表格数据
    getTableData () {
      let params = JSON.parse(JSON.stringify(this.tableParams))
      params.appId= params.appId == '-1'?'':params.appId
      this.loading = true
      this.$get('metroapi/dataQuality/report/list?', params).then(res=>{
        this.loading = false
          if (res.httpCode == 1 ){
            this.tableData = res.data.data
            this.tableTotal = res.data.count
            if (res.data.data.length==0) {
              this.tablePage = 0
            } else {
              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
            }
            if (res.data.data.length==0 && this.tableParams.pageNum>1) {
              this.tableParams.pageNum--
              return this.getTableData()
            }
          } else {
            this.tableData = []
            this.tableTotal = 0
          }
        })
    },
    searchClick () {
      this.tableParams.pageNum = 1
      this.getTableData()
    },
    resetClick (name) {
     this.$refs[name].resetFields()
     this.tableParams.pageNum = 1
     this.getTableData()
    }, 
    lookClick (row) {
      if (row.appName == '全部') {
        let newpage = this.$router.resolve({ 
          path: '/login/DownAllQualityReport',
          query: {reportClassName:row.reportClassName, beginDate:row.beginDate,endDate:row.endDate}
        })
        window.open(newpage.href, '_blank');
      } else {
        let newpage = this.$router.resolve({ 
          path: '/login/DownAppQualityReport',
          query: {reportClassName:row.reportClassName, beginDate:row.beginDate,endDate:row.endDate,appId:row.appId,appName:row.appName}
        })
        window.open(newpage.href, '_blank');
      }
    },
    downClick (row) {
      if (row.appName == '全部') {
        this.$refs.report.downReport(row)
      } else {
        this.$refs.appReport.downReport(row)
      }
    },
  }
};
</script>
<style scoped lang="stylus">
.content-main-manage {
  overflow: hidden;
  height: calc(100% - 50px);
  width: 100%;
}
.content-main {
  width: 100%;
  height: 100%;
}
.content-body-wrap {
  width: 100%;
  height: 100%;
  background: #06214d;
  padding: 10px;
}
.content-body {
  height: 100%;
  position: relative;
}
.search-list {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
}
.search-left {
  display: flex;
  align-items: center;
   .ivu-select {
     width: 150px;
     height: 32px;
   }
   .ivu-select-single .ivu-select-selection {
     height: 100%;
   }
    >>> .ivu-input {
     width: 225px;
     height: 32px;
   }
    >>> .ivu-date-picker-editor .ivu-input {
     width: 315px;
   }
    >>> .ivu-input-prefix, >>> .ivu-input-suffix {
     height: 32px;
     line-height: 32px;
   }
}
>>> .common-form-list .ivu-form-item {
 margin-bottom: 0px;
}
.manage-main-center {
  width: 100%;
  height: calc(100% - 150px);
}
.common-table {
  max-height: 100%;
}
>>> .common-table .ivu-table th {
  height: 48px;
 }
 >>> .common-table .ivu-table td {
  height: 47px;
 }
  >>> .common-table .ivu-spin-fix {
   top: 48px;
 }
  >>> .app-table .ivu-spin-fix {
   height: calc(100vh - 355px);
 }
 >>> .common-table .ivu-table-tip {
  background: url('../../../assets/images/noData.png') no-repeat center;
}
>>> .common-table .ivu-table-tip table {
 display: none;
}
>>> .app-table .ivu-table-tip {
   height: calc(100vh - 355px);
 }
.common-page {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  right: 0;
}
.common-page-total {
  color: #fff;
  padding-right: 10px;
  font-size: 14px;
  span {
    color #409EFF;
  }
}
.modal-content-top-title {
  font-size: 12px;
  color: #fff;
  padding-left: 8px;
  border-left: 2px solid #0185EA;
  height: 18px;
  line-height: 18px;
  margin-bottom: 20px;
}
.modal-content {
  margin-top: 20px;
}
/* 对话框里的input里的placeholder样式修改 */
/deep/ .ivu-input::-webkit-input-placeholder , /deep/ .ivu-input-number-input::-webkit-input-placeholder{
  color: #718EBD;
}
/deep/ .ivu-input::-moz-placeholder, /deep/ .ivu-input-number-input::-webkit-input-placeholder{   /* Mozilla Firefox 19+ */
  color: #718EBD;
}
/deep/ .ivu-input::-moz-placeholde, /deep/ .ivu-input-number-input::-webkit-input-placeholderr{    /* Mozilla Firefox 4 to 18 */
 color: #718EBD;
}
/deep/ .ivu-input::-ms-input-placeholder, /deep/ .ivu-input-number-input::-webkit-input-placeholder{  /* Internet Explorer 10-11 */
  color: #718EBD;
}
.down-report {
  top: 0;
  z-index: -1;
}
</style>