<template>
  <div class="payreturnPage">
    <!-- 搜索 -->
    <div class="formSearch" >
      <el-input
        v-model="query.search"
        clearable
        size="mini"
        class="filter-item"
        style="display: inline-table; width: 400px; margin-left: 10px"
        placeholder="请输入内容"
      >
        <template #prepend>
          <el-select
            v-model="query.searchType"
            size="mini"
            style="width: 150px"
            placeholder="请选择"
          >
            <el-option label="订单id" value="1" />
            <el-option label="买家账户" value="2" />
            <el-option label="收件人姓名" value="3" />
            <el-option label="收件人手机号" value="4" />
            <!-- <el-option label="商品ID" value="5" /> -->
            <el-option label="下单号码" value="6" />
            <el-option label="订单编号" value="7" />
            <el-option label="支付单号" value="8" />
          </el-select>
        </template>
      </el-input>
      <el-input
        v-model="query.shopName"
        maxlength="20"
        clearable
        size="mini"
        class="filter-item"
        style="width: 200px; margin-left: 10px"
        placeholder="请输入商户名称"
      />
      <el-date-picker
        v-model="query.dates"
        type="daterange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        size="mini"
        class="filter-item"
        style="margin-left: 10px; line-height: 1"
      />
      <el-button
        size="mini"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="margin-left: 10px"
        @click="handleSearch"
      >
        查找
      </el-button>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table
        v-loading="listLoading"
        ref="multipleTable"
        :data="tableData"
        border
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column align="center" width="55" type="selection">
        </el-table-column>
        <el-table-column
          align="center"
          width="120"
          label="订单ID"
          prop="orderId"
          fixed="left"
        >
          <template slot-scope="{ row }">
            {{ row.orderId }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="220"
          label="订单编号"
          prop="orderFormid"
          fixed="left"
        />
        <el-table-column
          align="center"
          label="下单时间"
          prop="createTime"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          width="180"
          label="下单号码"
          prop="customerPhone"
        />
        <el-table-column
          align="center"
          label="下单账户"
          prop="customerName"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          width="220"
          label="商家名称"
          prop="shopName"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          width="220"
          label="支付金额（元）"
          prop="price"
        />
        <el-table-column
          align="center"
          width="120"
          label="商家赠送代金券"
          prop="shopVoucher"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          width="120"
          label="平台赠送代金券"
          prop="platformVoucher"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          width="120"
          label="总赠送代金券"
          prop="presenterVoucher"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          width="120"
          label="代金券抵扣金额"
          prop="voucherPrice"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          min-width="120"
          label="订单状态"
          prop="state"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <span v-if="row.state == 1">待付款</span>
            <span v-else-if="row.state == 2">待发货</span>
            <span v-else-if="row.state == 3">待收货</span>
            <span v-else-if="row.state == 4">已完成</span>
            <span v-else-if="row.state == 5">交易关闭（已取消）</span>
            <span v-else-if="row.state == 6">待成团</span>
            <span v-else-if="row.state == 7">待售后</span>
            <span v-else-if="row.state == 8">待核销（未付款）</span>
            <span v-else-if="row.state == 9">待核销（已付款）</span>
            <span v-else-if="row.state == 10">已核销</span>
            <span v-else>--</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="100"
          label="商品数量"
          prop="number"
        />
        <el-table-column
          align="center"
          label="订单类型"
          prop="scanType"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <el-tag v-if="row.scanType === 1" effect="plain">常规订单</el-tag>
            <el-tag v-else-if="row.scanType === 2" effect="plain"
              >收款码订单</el-tag
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="收件人"
          prop="receiveName"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="手机号"
          prop="receivePhone"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="操作"
          width="180"
          fixed="right"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <el-button type="warning" size="mini" @click="handleDetail(row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="订单详情"
        :visible.sync="detailVisible"
        width="74%"
        center
        :close-on-click-modal="false"
      >
        <OrderDetail :detail-row="form" @cancel="detailVisible = false" />
      </el-dialog>
      <div class="fenye">
        <el-pagination
          :current-page="query.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import OrderDetail from "./components/pendDetails";
//   import { getExplosiveProductCategory } from '@/api/explosiveProduct/category'
import { orderGetAll } from "@/api/order";

export default {
  components: {
    OrderDetail,
  },
  data() {
    return {
      listLoading: false,
      query: {
        page: 1,
        pageSize: 10,
        templateType: 1,
        procureType: 1,
        supplerRole: 1,
        dates: [], // 下单时间数组
        shopName: "",
        search: "",
      },
      total: 1,
      tableData: [],
      form: {},
      //    详情弹框
      detailVisible: false,
    };
  },
  created() {
    this.getAll();
  },
  methods: {
    //  订单详情
    handleDetail(row) {
      this.detailVisible = true;
      this.form = row;
      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row);
    },
    async getAll() {
      this.listLoading = true;
      try {
        const res = await orderGetAll(this.query);
        this.tableData = res.data.list;
        this.total = res.data.total;
      } finally {
        this.listLoading = false;
      }
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.getAll();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getAll();
    },
    handleSearch() {
      this.total = 1;
      this.query.page = 1;
      this.getAll();
    },
    clear() {
      this.query = {
        page: 1,
        pageSize: 10,
      };
    },

    // 删除
    //   handleDelete(row) {
    //     this.$confirm(`是否删除【${row.categoryName}】这项分类?`, '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     })
    //       .then(async () => {
    //         const res = await deleteExplosiveProductCategory({ categoryId: row.id })
    //         if (res.code == '200') {
    //           this.$message.success('删除成功')
    //           this.search()
    //         }
    //       })
    //       .catch(() => {})
    //   }
  },
};
</script>

<style lang="scss" scoped>
.payreturnPage {
  padding: 30px;
  .formSearch{
    margin-bottom: 20px;
  }
  .tableBox {
    .fenye {
      margin: 20px;
    }
  }
}
</style>
