<template>
  <div>
    <el-container>
      <!--搜索-->
      <el-header class="searchBox">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="产品名称">
            <el-input v-model="searchForm.productName" placeholder="产品名称" />
          </el-form-item>
          <el-form-item label="渠道编码">
            <el-input v-model="searchForm.fullCode" placeholder="渠道编码" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="searchForm.phone" placeholder="手机号" />
          </el-form-item>
          <el-form-item label="订购/退订">
            <el-select v-model="searchForm.handleType" placeholder="请选择">
              <el-option key="0" label="订购" value="0" />
              <el-option key="1" label="退订" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.handleResult" placeholder="请选择">
              <el-option key="1" label="成功" value="1" />
              <el-option key="0" label="失败" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="value2"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              @change="dateChange"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="searchBtn">查询</el-button>
            <el-button @click="reset">重置</el-button>
              <el-button type="warning" @click="download()">导出</el-button>
          </el-form-item>
        </el-form>
      </el-header>

      <!--表格-->
      <el-main class="tableBox">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="tradeNo" label="订单号" width="120" />
          <el-table-column prop="cpid" label="CPID" width="70" />
          <el-table-column prop="spid" label="SPID" width="70" />
          <el-table-column prop="productName" label="产品名称" />
          <el-table-column prop="phone" label="会员手机号" />
          <el-table-column prop="handleType" label="订购/退订" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.handleType === 0 ? '订购' : '退订' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="handleResult" label="订购结果" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.handleResult > 0 ? '成功' : '失败' }}</span>
            </template>
          </el-table-column>
            <el-table-column prop="handleResult" label="描述" width="120">
                <template slot-scope="scope">
                    <span>{{ scope.row.remark ? scope.row.remark : '--'}}</span>
                </template>
            </el-table-column>
          <el-table-column prop="fullCode" label="渠道编码" />
          <el-table-column prop="createTime" label="订购时间" width="160" />
        </el-table>
        <div class="block">
          <el-pagination
            :current-page.sync="searchForm['pageNum']"
            :page-sizes="[20, 50, 100, 300]"
            :page-size="searchForm['pageSize']"
            layout="total, sizes, pager"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
  </div>

</template>

<script>
import { get } from '@/api/common'
import filter from '@/common/filter'
import axios from "axios";
import {
    getToken
} from "../../../utils/auth";
export default {
  name: 'RunData',
  data() {
    return {
      searchForm: {
        productName: '',
        fullCode: '',
        phone: '',
        handleType: '',
        handleResult: '',
        startTime: '',
        endTime: '',
        pageSize: 20,
        pageNum: 1
      },
      value2: '',
      tableData: [],
      total: 5000,
      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])
          }
        }]
      }
    }
  },
  created() {
    var that = this
    that.search()
  },
  methods: {
    async search() { // 同步搜索
      await get('/handleRecord/page', this.searchForm)
        .then((res) => {
          this.tableData = res.data.list
          this.total = res.data.total
        }).catch((err) => {
          console.log(err)
        })
    },
    searchBtn() { // 搜索按钮
      this.search()
    },
    reset() { // 重置
      this.searchForm = {
        cpid: '',
        categoryName: '',
        pageSize: 20,
        pageNum: 1
      }
      this.search()
    },
    dateChange(e) {
      console.log(e)
      this.searchForm.startTime = filter.frDateTime(e[0])
      this.searchForm.endTime = filter.frDateTime(e[1])
    },
    handleSizeChange(e) { // 单页数量
      this.searchForm.pageSize = e
      this.search()
    },
    handleCurrentChange(e) { // 跳页
      this.searchForm.pageNum = e
      this.search()
    },
      download() { // 导出
          let formData = new FormData();
          for (let i in this.searchForm) {
              if (this.searchForm[i]) {
                  formData.append(i, this.searchForm[i]);
              }
          }
          let loading = this.$loading({
              lock: true,
              text: "下载量较大,请耐心等待",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
          });
          axios({
              method: "post",
              url: process.env.VUE_APP_BASE_API + "/handleRecord/download",
              data: formData,
              responseType: "blob",
              headers: {
                  "Content-Type": "multipart/form-data",
                  token: getToken(),
              },
          }).then((res) => {
              if (res.data) {
                  loading.close();
                  let a = document.createElement("a");
                  let blob = new Blob([res.data], {
                      type: "application/vnd.ms-excel",
                  });
                  let objectUrl = URL.createObjectURL(blob);
                  a.setAttribute("href", objectUrl);
                  a.setAttribute("download", "订购数据.xlsx");
                  a.click();
                  URL.revokeObjectURL(a.objectUrl);
              }
          });
      },
  }
}
</script>

<style scoped lang="scss">
.searchBox {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;
  height: unset !important;
  form {
    margin: auto;
    .el-form-item {
      margin: 5px 5px;
    }
  }
}
.el-header {padding: 20px}
.el-form-item {margin-bottom: unset}
.tableBox{
  margin-top: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;
}
.block {
  margin-top: 20px;
  float: right;
}
.demo-drawer__content {
  padding: 20px 5%;
  line-height: 32px;
  .el-form-item {
    margin-top: 20px;
  }
  .demo-drawer__footer {
    position: fixed;
    bottom: 30px;
    width: 45%;
    margin-top: 20px;
    display: flex;
    button {
      flex: 1;
    }
  }
}
</style>
