<template>
  <div class="after_sale_service_page">
    <div class="content">
      <el-tabs
        v-model="formParams.queryType"
        @tab-click="selectItem"
      >
        <el-tab-pane
          v-for="(item, index) in tabList"
          :key="index"
          :label="item.name"
          :name="item.id"
        />
      </el-tabs>
      <div class="toolbar">
        <el-form
          :inline="true"
          :model="formParams"
        >
          <el-form-item label="店铺名称/编号">
            <el-input v-model="formParams.keyword" size="mini" />
          </el-form-item>

          <el-form-item label="订单id">
            <el-input v-model="formParams.orderCode" size="mini" />
          </el-form-item>

          <el-form-item label="下单时间">
            <el-date-picker
              v-model="date"
              size="mini"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd"
              @change="handleChange"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              @click="query"
            >
              查询
            </el-button>
            <el-button
              plain
              size="mini"
              @click="reset"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="content_table">
        <div class="table">
          <el-table
            :data="tableData.returnInterventionDTOList"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              label="订单id"
            />
            <el-table-column
              prop="storeName"
              label="店铺名称"
            />
            <el-table-column
              prop="tenantCode"
              label="店铺编码"
            />
            <el-table-column
              prop="returnProductCount"
              label="售后商品数量"
            />
            <el-table-column
              v-if="formParams.queryType === '1'"
              prop="applySum"
              :formatter="getPrice"
              label="退款金额"
            />
            <el-table-column
              v-else
              prop="value5"
              :formatter="getPrice"
              label="订单金额"
            />
            <el-table-column label="操作">
              <template
                slot-scope="scope"
              >
                <el-button
                  v-if="formParams.queryType ==='1'"
                  type="text"
                  size="small"
                  @click.native.prevent="handle(scope.row.id)"
                >
                  处理
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="details(scope.row.id)"
                >
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
          v-show="tableData.total > 0"
          :limit.sync="formParams.pageSize"
          :page.sync="formParams.pageIndex"
          :total="Number(tableData.total)"
          @pagination="fetch"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import AfterSale from '@/api/AfterSale'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      formParams: {
        keyword: '',
        orderCode: '',
        startTime: '',
        endTime: '',
        pageSize: 10,
        pageIndex: 1,
        queryType: '1'
      },
      date: [],
      tableData: {},
      tabList: [
        { name: '待处理', id: '1' },
        { name: '已处理', id: '2' }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await AfterSale.getList(this.formParams)
      const resData = res.data
      if (resData.code === 0) {
        this.tableData = resData.data
      }
    },
    getPrice(item, row, value) {
      return value / 100
    },
    query() {
      this.getList()
    },
    details(id) {
      this.$router.push({ path: '/after-sale-service/details', query: { id }})
    },
    handle(id) {
      this.$router.push({ path: '/after-sale-service/details', query: { id }})
    },
    reset() {
      this.formParams = {
        keyword: '',
        orderCode: '',
        startTime: '',
        endTime: '',
        pageSize: 10,
        pageIndex: 1,
        queryType: '1'
      }
    },
    fetch() {
      this.getList()
    },
    selectItem() {
      this.getList()
    },
    handleChange(value) {
      this.formParams.startTime = (value && value[0]) || ''
      this.formParams.endTime = (value && value[1]) || ''
    }
  }
}
</script>

<style lang='less' scoped>

.after_sale_service_page {
    padding: 10px 20px;
    box-sizing: border-box;
    .content {
        background-color: #fff;
        .toolbar {
            padding: 10px;
        }
    }
}

/deep/ .el-table {
  th {
      background: #EEF3FF;
      color:#333333;
      font-size:16px;
      font-weight: 400;
      border-color: #E0E5EB;
      text-align: center;
  }
  td {
    font-size: 14px;
    text-align: center;
    color: #666666;
  }
}
</style>

