<template>
  <div>
    <el-container>
      <!--搜索-->
      <el-header class="searchBox">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
          <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 size="mini">
            <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" 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">
          <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNo" :limit.sync="searchForm.pageSize" @pagination="search" />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { exportAccess, accessList } from "./api.js";
import filter from "@/common/filter";
export default {
  data () {
    return {
      searchForm: {
        // productName: '',
        // fullCode: '',
        // phone: '',
        // handleType: '',
        // handleResult: '',
        // startTime: '',
        // endTime: '',
        pageSize: 20,
        pageNo: 1,
      },
      value2: "",
      tableData: [],
      total: 100,
      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 () {
    this.search();
  },
  methods: {
    // 改变页码触发
    pagination (page) {
      this.pageNo = page.page;
      // 重新获取列表数据
      this.search();
    },
    search () {
      // 同步搜索
      accessList(this.searchForm).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    searchBtn () {
      // 搜索按钮
      this.search();
    },
    reset () {
      // 重置
      this.searchForm = {
        cpid: "",
        categoryName: "",
        pageSize: 20,
        pageNo: 1,
      };
      this.search();
    },
    dateChange (e) {
      console.log(e);
      this.searchForm.startTime = filter.frDateTime(e[0]);
      this.searchForm.endTime = filter.frDateTime(e[1]);
    },


    download () {
      // 导出
      this.$modal
        .confirm("是否确认导出所有渠道数据")
        .then(function () {
          return exportAccess();
        })
        .then((response) => {
          this.$download.excel(response, "订单操作数据.xlsx");
        });
    },
  },
};
</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>
