<template>
<div class="list">
        <div class="system-table-search">
      <div class="flex-h">
        <div class="flex-item flex-h">
          <el-button size="mini" type="success" @click='goBacke'>返回</el-button>
        </div>
        <!-- <el-form :inline="true">
          <el-form-item label="用户姓名">
            <el-input v-model="filterData.personName" placeholder="用户姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="filterData.phone" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item label="用户类型">
            <el-select v-model="filterData.personType" placeholder="用户类型">
              <el-option label="置业顾问" value="Realty Consultant"></el-option>
              <el-option label="销售主管" value="Sales Executive"></el-option>
              <el-option label="经纪人" value="estate agent"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="filterData.targetName" placeholder="商品名称"></el-input>
          </el-form-item>
          <el-form-item label="兑换时间">
            <el-date-picker
                      v-model="filterData.startCreateDate"
                      type="date"
                      placeholder="开始时间">
                    </el-date-picker>
                    <el-date-picker
                      v-model="filterData.endCreateDate"
                      type="date"
                      placeholder="结束时间">
                    </el-date-picker>
          </el-form-item>
          <el-form-item label="领取时间">
          <el-date-picker
                      v-model="filterData.startVerifyDate"
                      type="date"
                      placeholder="开始时间">
                    </el-date-picker>
                    <el-date-picker
                      v-model="filterData.endVerifyDate"
                      type="date"
                      placeholder="结束时间">
                    </el-date-picker>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="filterData.status" placeholder="状态">
              <el-option label="已领取" value="1"></el-option>
              <el-option label="未领取" value="0"></el-option>
            </el-select>
          </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
  </el-form-item>
</el-form>     -->
      </div>
      <div class="moreFilter"></div>
    </div>
  <el-table
    :data="list || []"
    style="width: 100%">
    <el-table-column
      prop="personName"
      label="用户姓名">
    </el-table-column>
    <!-- <el-table-column
      label="用户类型">
      <template slot-scope="scope">
          <span v-if="scope.row.personType === 'Realty Consultant'">置业顾问</span>
          <span v-if="scope.row.personType === 'Sales Executive'">销售主管</span>
          <span v-if="scope.row.personType === 'estate agent'">经纪人</span>
      </template>
    </el-table-column> -->
    <el-table-column
      prop="phone"
      label="手机号">
    </el-table-column>
    <el-table-column
      label="商品图片">
      <template slot-scope="scope">
          <div class="header">
            <img :src="scope.row.image" alt="" />
          </div>
        </template>
    </el-table-column>
    <el-table-column
      prop="targetName"
      label="兑换商品">
    </el-table-column>
    <el-table-column
      label="兑换时间">
      <template slot-scope="scope">
          <span>{{formateDate(scope.row.createDate)}}</span>
      </template>
    </el-table-column>
    <!-- <el-table-column
      label="领取时间">
      <template slot-scope="scope">
          <span>{{formateDate(scope.row.verifyDate)}}</span>
      </template>
    </el-table-column> -->
    <el-table-column   label="状态">
      <template slot-scope="scope">
        <span :style="{color:(scope.row.status == 1?'':'red')}" >{{scope.row.status == 1 ? '已领取' : '未领取'}}</span>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button type="text" @click="changeStatus(scope.row)" size="small">{{scope.row.status == 1?'':'核销'}}</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    small
    style="margin-top:10px;"
    layout="prev, pager, next"
    :current-page.sync="pageNavi.current"
    :pageSize="pageNavi.size"
    :total="pageNavi.total || 0"
    @current-change="getList"
  >
  </el-pagination>
</div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import dayjs from 'dayjs'

const { mapActions: mapExchangeActions } = createNamespacedHelpers("exchange");

export default {
  name: "goods-list",
  data() {
    return {
      filterData: {
        tel: "",
      },
      list: [],
      pageNavi: {
        current: 1,
        size: 20,
        total: 0
      }
    };
  },
  computed: {},
  methods: {
    ...mapExchangeActions(["getExchanges", "changeExchangeStatus"]),
    getList() {
      const pageNumber = this.pageNavi.current || 1;
      const pageSize = this.pageNavi.size;

      this.getExchanges({
        ...this.filterData,
        pageNumber,
        pageSize
      })
        .then(res => {
          const { records, ...pageNavi } = res;

          this.list = records;
          this.pageNavi = pageNavi;
        })
        .catch(err => {
          this.$notify.error(err.msg || err.message);
        });
    },
    addGoods() {
      this.$router.push({ name: "goods.edit" });
    },
    goBacke() {
      this.$router.go(-1)
    },
    toDetail(row) {
      this.$router.push({
        name: "goods.edit",
        params: { id: row.goodsId }
      });
    },
    changeStatus(row) {
      this.showLoadding("保存中...");
      this.changeExchangeStatus(row)
        .then(res => {
          this.hideLoadding();
          this.$notify.info("核销成功");
          this.search();
        })
        .catch(err => {
          this.hideLoadding();
          this.$notify.error(err.message);
        });
    },
    showLoadding(text) {
      this.loading = this.$loading({
        text,
        lock: true,
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)"
      });
    },
    hideLoadding() {
      if (this.loading) this.loading.close();
    },
    search() {
      this.pageNavi.current = 1;
      this.getList();
    },
    newPage(page) {
      this.$router.replace({ name: "goods.list", query: { page } });
    },
    formateDate(dt) {
      return !dt ? '' : dayjs(dt).format('YYYY-MM-DD HH:mm')
    },
  },
  created() {
    this.pageNavi.current = this.$route.query.page || 1;
    this.filterData.tel = this.$route.params.tel
    this.getList();
  }
};
</script>

<style lang="scss" scoped>
.list {
  .header {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  img {
      width: 100%;
      height: 100%;
    }
}
.system-table-search {
  width: calc(100% - 40px);
  margin: 20px auto 0;
}

.system-table-search li {
  margin-right: 20px;
}

.system-table-search ul {
  font-size: 0;
  white-space: nowrap;
}

.system-table-search ul > li {
  display: inline-block;
}

.flex-h {
  display: flex;
  align-items: center;
}

.flex-item {
  flex: 1;
  -webkit-flex: 1;
  position: relative;
  overflow: hidden;
}
</style>
