<template>
  <el-dialog :visible.sync="detailList.show" width="1200px" center title="详细纪录">
    <el-form label-width="80px" inline>
      <el-form-item label="用户ID">
        <el-input size="small" v-model="form.user_id"/>
      </el-form-item>
      <el-form-item label="激活码">
        <el-input size="small" v-model="form.exchange_code"/>
      </el-form-item>
      <el-form-item label="是否激活">
        <el-select size="small" v-model="form.is_exchange">
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="getList" type="primary">搜索</el-button>
        <el-button size="small" @click="exprotList" type="success">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        label="用户信息">
        <template slot-scope="scope">
          <div v-if="scope.row.user_id===0">暂无</div>
          <div v-if="scope.row.user_id !== 0" style="display: flex">
            <img :src="scope.row.user_avatar" style="width: 40px;margin-right:5px;min-width:40px;height: 40px;border-radius: 50px"> {{scope.row.user_nickname}}(ID:{{scope.row.user_id}})
            <br> Tel:{{scope.row.user_mobile}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="exchange_no"
        label="兑换码">
      </el-table-column>
      <el-table-column
        label="商品">
        <template slot-scope="scope">
          【{{scope.row.goods_id}}】{{scope.row.goods_name}}
        </template>
      </el-table-column>
      <el-table-column
        prop="expire_at"
        label="失效时间">
      </el-table-column>
      <el-table-column
        prop="exchange_at"
        label="兑换时间">
        <template slot-scope="scope">
          <span v-if="scope.row.exchange_at !== '0000-00-00 00:00:00'">{{scope.row.exchange_at}}</span>
          <span v-if="scope.row.exchange_at === '0000-00-00 00:00:00'" style="color: red">尚未兑换</span>
        </template>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="totalPage" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
  </el-dialog>
</template>

<script>
  import {exchangeDetailApi,exportExcelApi} from "../../service/api";
  import page from '../framework/page'
  export default {
    name: "list",
    components: {
      page
    },
    props:[
      'detailList'
    ],
    data(){
      return {
        limit:10,
        list:[],
        form:{
          user_id:'',
          exchange_code:'',
          is_exchange:''
        },
        totalPage:0,
        nowPage:1
      }
    },
    methods:{
      initPage(){
        this.form = {
          user_id:'',
          exchange_code:'',
          is_exchange:''
        };
        this.getList()
      },
      onPageChange(val){
        this.nowPage = val;
        this.getList()
      },
      onSizeChange(val){
        this.limit = val;
        this.nowPage = 1;
        this.getList()
      },
      exprotList(){
        let json = {};
        if(this.form.is_exchange !== ''){
          json.is_exchange = this.form.is_exchange
        }
        if(this.form.user_id !== ""){
          json.user_id = this.form.user_id
        }
        exportExcelApi(`/api/admin/exchange/export/${this.detailList.id}`,json)
      },
      getList(){
        let json = {limit:this.limit, page: this.nowPage};
        if(this.form.is_exchange !== ''){
          json.is_exchange = this.form.is_exchange
        }
        if(this.form.user_id !== ""){
          json.user_id = this.form.user_id
        }
        if(this.form.exchange_code !== ''){
          json.exchange_code = this.form.exchange_code
        }
        exchangeDetailApi(this.detailList.id, json).then(res=>{
          this.list = res.list;
          this.totalPage = res.total;
        })
      }
    },
    watch:{
      'detailList.show'(value){
        if(value){
          this.initPage()
        }
      }
    }
  }
</script>

<style scoped>

</style>
