<template>
  <div class="app-container">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>服务Gmv统计报表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card shadow="hover">
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-form :inline="true" size="small" v-model="listQuery">
          <el-form-item label="时间范围">
            <el-date-picker v-model="timeArray" type="daterange" class="filter-item" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" />
          </el-form-item>

          <el-form-item>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
          </el-form-item>

          <el-form-item>
            <form method="get" :action="exporturl" class="form-style">
              <input type="hidden" name="startTime" :value="startTime" />
              <input type="hidden" name="endTime" :value="endTime" />

              <input type="submit" style="display: none" ref="daochu" />
              <el-button type="primary" @click="daochuinit" class="el-icon-download">导出</el-button>
              <!-- <input type="text"  @click="daochuinit" value="导出" class="handleDownload"/> -->
            </form>
          </el-form-item>
        </el-form>
      </div>

      <!-- 查询结果 -->
      <el-table :data="list" border fit highlight-current-row>
        <el-table-column align="center" label="城市" prop="city" width="80" fixed="left" />
        <el-table-column align="center" label="单量或金额" prop="name" width="120" fixed="left" />
        <el-table-column v-for="(item, index) in tableList" :key="index" :label="item.attr1" align="center">
          <template slot-scope="scope">{{ scope.row.sumOramount[item.attr1] }}</template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import Service from "../script/api/service";

export default {
  name: "collectData",
  filters: {
    orderStatusFilter(status) {
      return statusMap[status];
    },
    channelsFilter(value) {
      const rs = vm.channels.filter(item => {
        return item.id === value;
      });
      if (rs != null && rs.length > 0) {
        return rs[0].name;
      }
    }
  },
  data() {
    return {
      campaignList: [],
      list: [],
      tableList: [],
      exporturl: process.env.baseUrl + "/report/exportServiceGmvExport",
      timeArray: [new Date(new Date() - 3600 * 1000 * 24 * 90), new Date()],
      listLoading: true,
      listQuery: {
        startTime: "",
        endTime: ""
      },

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  computed: {
    startTime() {
      if (this.timeArray != null) {
        return this.formateDay(this.timeArray[0]) + " 00:00:00";
      } else {
        return null;
      }
    },
    endTime() {
      if (this.timeArray != null) {
        return this.formateDay(this.timeArray[1]) + " 23:59:59";
      } else {
        return null;
      }
    }
  },
  beforeCreate() { },
  created() {
    this.getList();
  },
  methods: {
    daochuinit() {
      if (this.timeArray == null) {
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      } else {
        this.$refs.daochu.click();
      }
    },
    insertLog(requestParm, url) {
      // 插入导出日志
      // let requestParm={
      //      startDay:moment(this.listQuery.timePart[0]).format("YYYY-MM-DD"),
      //      endDay:moment(this.listQuery.timePart[1]).format("YYYY-MM-DD")
      // }
      let userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
      Service.$axiosExportLog({
        functionName: '报表统计-服务Gmv统计报表',
        systemName: '报表系统',
        requestParm: JSON.stringify(requestParm),
        requestUrl: process.env.baseUrl + url,
        userId: userInfo.id,
        userName: userInfo.userName
      })
        .then((res) => {
          // console.log('导出日志'+res.data);
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    getList() {
      // console.log(this.timeArray);
      if (this.timeArray && this.timeArray.length === 2) {
        this.listQuery.startTime =
          this.formateDay(this.timeArray[0]) + " 00:00:00";
        this.listQuery.endTime =
          this.formateDay(this.timeArray[1]) + " 23:59:59";
      } else {
        this.listQuery.startTime = null;
        this.listQuery.endTime = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      this.listLoading = true;

      Service.$axiosGetServiceGmv(this.listQuery)
        .then(response => {
          this.tableList = response.data.data.diList;
          this.list = response.data.data.listGmv;
          this.listLoading = false;
          this.insertLog(this.listQuery, '/reportservice/report/getServiceGmv');
        })
        .catch(() => {
          this.list = [];
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    }
  }
};
</script>

<style scoped>
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.crumbs {
  margin: 10px 0;
}

.handleDownload {
  display: inline-block;
  color: #fff;
  height: 32px;
  width: 60px;
  text-align: center;
  border-radius: 3px;
  background: #409eff;
  margin-right: 8px;
  border: none;
}
</style>
