<template>
  <div class="divBox">
    <div slot="header" class="clearfix">
      <div class="container">
        <el-form size="small" label-width="100px">
          <el-form-item label="用户UID：" class="width100">
            <el-input v-model="tableFrom.uid" @keyup.enter.native="getList(1),getCardList()" placeholder="请输入用户UID"
              class="selWidth" size="small" clearable>
              <el-button slot="append" icon="el-icon-search" size="small" class="el-button-solt"
                @click="getList(1),getCardList()" />
            </el-input>
          </el-form-item>
          <el-form-item label="订单编号：" class="width100">
            <el-input v-model="tableFrom.order_id" @keyup.enter.native="getList(1),getCardList()" placeholder="请输入订单编号"
              class="selWidth" size="small" clearable>
              <el-button slot="append" icon="el-icon-search" size="small" class="el-button-solt"
                @click="getList(1),getCardList()" />
            </el-input>
            <el-button size="small" type="primary" icon="el-icon-top" @click="exportRecord">列表导出</el-button>
            <el-button size="small" type="primary" @click="getExportFileList">导出记录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <cards-data :card-lists="cardLists" />
    </div>
    <el-card class="box-card">
      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini" class="table"
        highlight-current-row>
        <el-table-column prop="order_id" label="订单编号" min-width="200" />
        <el-table-column prop="uid" label="用户UID" min-width="80" />
        <el-table-column prop="create_time" label="创建时间" min-width="200" />
        <el-table-column prop="to_release" label="待释放数量" min-width="130" />
        <el-table-column prop="release" label="每天释放数量" min-width="130" />
        <!-- <el-table-column prop="already" label="已释放数量" min-width="130" /> -->
        <!-- <el-table-column prop="release_time" label="释放时间" min-width="130" /> -->
        <el-table-column prop="status" label="是否释放完毕" min-width="110">
          <template slot-scope="scope">
            <span class="spBlock">{{ scope.row.status ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="130" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" class="mr10" @click="onEdit(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="tableFrom.limit" :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>
    <!--导出订单列表-->
    <file-list ref="exportList" />
  </div>
</template>

<script>
  // +----------------------------------------------------------------------
  // | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
  // +----------------------------------------------------------------------
  // | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
  // +----------------------------------------------------------------------
  // | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
  // +----------------------------------------------------------------------
  // | Author: CRMEB Team <admin@crmeb.com>
  // +----------------------------------------------------------------------
  import {
    refundorderListApi,
    orderUpdateApi,
    orderDeliveryApi,
    exportRefundOrderApi,
    healthyorderListApi,
    healthyOrderApi,
    setHealthy
  } from "@/api/order";
  import {
    fromList
  } from "@/libs/constants.js";
  import fileList from '@/components/exportFile/fileList'
  export default {
    components: {
      fileList
    },
    name: "OrderRefund",
    data() {
      return {
        orderId: 0,
        tableData: {
          data: [],
          total: 0,
        },
        listLoading: true,
        tableFrom: {
          refund_order_sn: this.$route.query.refund_order_sn ? this.$route.query.refund_order_sn : "",
          order_sn: "",
          status: "",
          date: "",
          page: 1,
          limit: 20,
          is_trader: '',
          order_id: '',
          uid: ''
        },
        orderChartType: {},
        timeVal: [],
        fromList: fromList,
        selectionList: [],
        ids: "",
        tableFromLog: {
          page: 1,
          limit: 10,
        },
        tableDataLog: {
          data: [],
          total: 0,
        },
        LogLoading: false,
        dialogVisible: false,
        cardLists: [],
        orderDatalist: null,
      };
    },
    mounted() {
      if (this.$route.query.hasOwnProperty("sn")) {
        this.tableFrom.order_sn = this.$route.query.sn;
      } else {
        this.tableFrom.order_sn = "";
      }
      this.getList('');
    },
    // 被缓存接收参数
    activated() {
      if (this.$route.query.hasOwnProperty("sn")) {
        this.tableFrom.order_sn = this.$route.query.sn;
      } else {
        this.tableFrom.order_sn = "";
      }
      this.getList('');
    },
    methods: {
      // 设置权益积分
      onEdit(id) {

        this.$modalForm(setHealthy(id))
      },
      // 订单详情
      onOrderDetail(order_sn) {
        this.$router.push({
          name: "OrderList",
          query: {
            order_sn: order_sn,
          },
        });
      },
      // 导出
      exportRecord() {
        healthyOrderApi(this.tableFrom)
          .then((res) => {
            const h = this.$createElement;
            this.$msgbox({
              title: '提示',
              message: h('p', null, [
                h('span', null, '文件正在生成中，请稍后点击"'),
                h('span', {
                  style: 'color: teal'
                }, '导出记录'),
                h('span', null, '"查看~ '),
              ]),
              confirmButtonText: '我知道了',
            }).then(action => {

            });
          })
          .catch((res) => {
            this.$message.error(res.message)
          })
      },
      // 导出列表
      getExportFileList() {
        this.$refs.exportList.exportFileList()
      },
      getTotal(row) {
        let sum = 0;
        for (let i = 0; i < row.length; i++) {
          sum += row[i].product.cart_info.productAttr.price * row[i].refund_num;
        }
        return sum;
      },
      pageChangeLog(page) {
        this.tableFromLog.page = page;
        this.getList('');
      },
      handleSizeChangeLog(val) {
        this.tableFromLog.limit = val;
        this.getList(1);
      },
      // 选择时间
      selectChange(tab) {
        this.tableFrom.date = tab;
        this.tableFrom.page = 1;
        this.timeVal = [];
        this.getList('');
      },
      // 具体日期
      onchangeTime(e) {
        this.timeVal = e;
        this.tableFrom.date = e ? this.timeVal.join("-") : "";
        this.tableFrom.page = 1;
        this.getList('');
      },
      // 编辑
      edit(id) {
        this.$modalForm(orderUpdateApi(id)).then(() => this.getList(''));
      },
      // 发货
      send(id) {
        this.$modalForm(orderDeliveryApi(id)).then(() => this.getList(''));
      },
      // 列表
      getList(num) {
        this.listLoading = true;
        this.tableFrom.page = num ? num : this.tableFrom.page;
        healthyorderListApi(this.tableFrom)
          .then((res) => {
            console.log(res, 'shif+++++++++')
            this.tableData.data = res.data.list;
            this.tableData.total = res.data.count;
            this.orderChartType = res.data.stat;
            this.cardLists = res.data.stat;
            this.listLoading = false;
          })
          .catch((res) => {
            this.$message.error(res.message);
            this.listLoading = false;
          });
      },
      pageChange(page) {
        this.tableFrom.page = page;
        this.getList('');
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val;
        this.getList(1);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .demo-table-expands {
    /deep/ label {
      width: 110px !important;
      color: #99a9bf;
    }
  }

  .selWidth {
    width: 300px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
    font-size: 12px;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .tabBox_tit {
    width: 60%;
    font-size: 12px !important;
    margin: 0 2px 0 10px;
    letter-spacing: 1px;
    padding: 5px 0;
    box-sizing: border-box;
  }
</style>
