<template>
  <div class="article-manager">
    <el-card :bordered="false" shadow="never" class="ivu-mt mt16" :body-style="{ padding: '0 20px 20px' }">
      <div>
        <el-form :model="page" label-width="80px" label-position="right" inline @submit.native.prevent class="mt16">
          <el-form-item label="订单编号：">
            <el-input clearable placeholder="订单编号/商品货号" v-model="page.params.orderCode" />
          </el-form-item>

          <el-form-item label="申请时间：">
            <el-date-picker v-model="page.params.refundTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
          </el-form-item>
          <el-form-item label="处理状态：">
            <el-select v-model="page.params.refundstatus" placeholder="状态" clearable @keyup.enter.native="getList">
              <el-option label="待处理" value="0" />
              <el-option label="已处理" value="1" />
              <el-option label="已拒绝" value="-1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="userSearchs">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="Button">
        <el-button class="export" @click="exports">导出</el-button>
      </div>
      <el-table
        :data="tableList"
        class="ivu-mt mt14"
        v-loading="loading"
        highlight-current-row
        :row-key="getRowKey"
        @selection-change="handleSelectRow"
        empty-text="暂无数据"
      >
        <el-table-column type="selection" width="60" :reserve-selection="true"> </el-table-column>
        <el-table-column label="订单编号" width="180" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.orderCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="油站" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.takeSiteName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户账号" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.acctId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="退款积分" min-width="60" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.refundIntegral }}</span>
          </template>
        </el-table-column>

        <el-table-column label="申请状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.refundStatus | refundStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="处理时间" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.refundOptTime || '暂无' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" minWidth="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="detail(scope.row)">查看订单</el-button>
            <el-button @click="auth(scope.row, scope)" type="text" v-if="scope.row.refundStatus == '0'">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totalCount"
        />
      </div>

      <el-drawer title="详情" class="table-detail-drawer" :visible.sync="refundDetailDialog" direction="ltr" size="70%">
        <orderRefundListDetail :detailData="detailData" @closeDialog="closeDialog" v-if="refundDetailDialog" />
      </el-drawer>

      <el-dialog title="审核" :visible.sync="verifyDialog" v-el-drag-dialog width="45%">
        <orderRefundListVerify @getList="getList" @closeDialog="closeDialog" v-if="verifyDialog" :detailData="detailData" />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import orderInfoApi from '@/api/order/orderInfo.js'
import orderRefundListDetail from './orderRefundListDetail'
import orderRefundListVerify from './orderRefundListVerify'
export default {
  name: 'product_productList',
  components: { orderRefundListDetail, orderRefundListVerify },

  filters: {
    refundStatus(e) {
      switch (e) {
        // 0待审核 1 审核通过-1 审核不通过
        case '0':
          return '待审核'
        case '1':
          return '审核通过'
        case '-1':
          return '审核不通过'
        default:
          return '暂无'
      }
    }
  },
  data() {
    return {
      template: false,
      refundDetailDialog: false,
      verifyDialog: false,
      batchModal: false,
      grid: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        params: {},
        totalCount: 0
      },
      type: '',
      tableList: [],
      loading: false,
      data: [],
      total: 0,
      ids: [],
      goodsId: '',
      isProductBox: false,
      multipleSelection: [],
      detailData: {} //详情对象
    }
  },
  created() {
    // delete this.page.params.orderStatus

    this.getList()
  },

  activated() {},
  methods: {
    closeLabel(label) {
      let index = this.dataLabel.indexOf(this.dataLabel.filter(d => d.id == label.id)[0])
      this.dataLabel.splice(index, 1)
    },

    getPath() {},
    // 导出
    async exports() {
      let [th, filekey, data, fileName] = [[], [], [], '']
      let excelData = JSON.parse(JSON.stringify(this.artFrom))
      excelData.page = 1
      excelData.limit = 50
      excelData.ids = this.ids
      for (let i = 0; i < excelData.page + 1; i++) {
        let lebData = await this.getExcelData(excelData)
        if (!fileName) fileName = lebData.filename
        if (!filekey.length) {
          filekey = lebData.fileKey
        }
        if (!th.length) th = lebData.header
        if (lebData.export.length) {
          data = data.concat(lebData.export)
          excelData.page++
        } else {
          this.$exportExcel(th, filekey, fileName, data)
          return
        }
      }
    },
    getExcelData(excelData) {},

    getRowKey(row) {
      return row.id
    },
    //  选中某一行
    handleSelectRow(selection) {
      const uniqueArr = []
      const ids = []
      for (let i = 0; i < selection.length; i++) {
        const item = selection[i]
        if (!ids.includes(item.id)) {
          uniqueArr.push(item)
          ids.push(item.id)
        }
      }
      this.ids = ids
      this.multipleSelection = uniqueArr
    },

    handleSizeChange(val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    },

    // 订单列表；
    getList() {
      orderInfoApi.getRefundOrder(this.page).then(res => {
        if ((res.code = 20000)) ({ list: this.tableList = [], totalCount: this.page.totalCount = 0 } = res.data)
      })
    },
    // 表格搜索
    userSearchs() {
      this.page.currentPage = 1
      this.getList()
    },
    closeDialog() {
      this.verifyDialog = false
      this.refundDetailDialog = false
    },
    // 数据导出；
    exportData: function() {},

    // 详情
    detail(row) {
      orderInfoApi.getRefund(row.id).then(res => {
        if ((res.code = 20000)) {
          this.detailData = res.data
          this.refundDetailDialog = true
        }
      })
    },
    // 取消
    auth(row, tit, num) {
      // orderInfoApi.get(row.id).then(res => {
      //   if ((res.code = 20000)) {
      this.detailData = row
      this.verifyDialog = true
      console.log(row)
      // }
      // })
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-tabs__item {
  height: 54px !important;
  line-height: 54px !important;
}
::v-deep .ivu-modal-mask {
  z-index: 999 !important;
}

::v-deep .ivu-modal-wrap {
  z-index: 999 !important;
}

.Box {
  ::v-deep .ivu-modal-body {
    height: 700px;
    overflow: auto;
  }
}

.batch-box {
  ::v-deep .ivu-modal-body {
    overflow: auto;
    min-height: 350px;
  }
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11;
}

::v-deep .happy-scroll-content {
  width: 100%;

  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }

  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(180deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .demo-spin-col {
    height: 100px;
    position: relative;
    border: 1px solid #eee;
  }
}

.labelInput {
  border: 1px solid #dcdee2;
  width: 100%;
  padding: 0 15px;
  border-radius: 5px;
  min-height: 30px;
  cursor: pointer;
  font-size: 12px;

  .span {
    color: #c5c8ce;
  }

  .iconxiayi {
    font-size: 12px;
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: var(--prev-color-primary);
  font-size: 12px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown-menu__item {
  a {
    color: #606266;
  }
}
.label_width {
  width: 400px;
}
</style>
