<template>
  <el-dialog title="查看内容" :visible.sync="dialogVisible" width="600px" @close="cancelSubmit()">
    <div v-loading="loading">
      <div v-if="!isEdit" style="background: #F7F8FA;margin-bottom:20px">
        <div v-html="template" style="font-size:12px;line-height:22px;margin:0 16px;padding:12px 0"></div>
      </div>
      <div>
        <el-input placeholder="请输入会员信息搜索" prefix-icon="el-icon-search" v-model="search" class="mr10 w220" clearable @change="getTableList" @clear="getTableList"></el-input>
      </div>
      <el-table :data="tableData" class="mt20">
        <el-table-column min-width="100px" show-overflow-tooltip v-for="(item, index) in headList" :key="index" :label="item" :prop="index === 0 ? 'paramOne' : (index === 1 ? 'paramTwo' : 'paramThree')"></el-table-column>
        <!-- <el-table-column label="卡号" prop="paramOne"></el-table-column>
        <el-table-column label="卡密/券码" prop="paramTwo"></el-table-column> -->
        <el-table-column label="当前状态" prop="statusFlag">
          <template slot-scope="scope"><span class="state-point" :class="[ scope.row.statusFlag ? 'state-point-success' : 'state-point-warning' ]">{{ scope.row.statusFlag === 0 ? '未兑换' : '已兑换' }}</span></template>
        </el-table-column>
        <el-table-column label="用户/会员" prop="name"></el-table-column>
      </el-table>
      <div class="pagination-conteiner" style="background:#fff;" v-show="total > 0">
        <div class="pagination" style="text-align: right;">
          <dm-pagination small @current-change="getTableList" :current-page.sync="currentPage" :page-size="pageSize" layout="prev, pager, next" :total="total" v-if="total != 0"> </dm-pagination>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer"></div>
  </el-dialog>
</template>

<script>
// import request from '../service/request.js';
import api from '@/api/gift.js';
const { virtualCardList, giftGet } = api;
export default {
  props: {
    dialogId: {
      type: String,
      default() {
        return '';
      }
    },
    isEdit: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      currentPage: 1,
      pageSize: 4,
      total: '',
      tableData: [],
      template: '',
      search: '',
      headList: []
    };
  },
  mounted() {
    this.dialogVisible = true;
    this.giftId = this.dialogId;
    this.getTableList();
    if(!this.isEdit){
      this.getMess();
    }
  },
  methods: {
    getTableList(){
      console.log('查看内容');
      this.loading = true;
      let params = {
        id: this.giftId,
        key: this.search,
        pageSize: this.pageSize,
        currentPage: this.currentPage
      };
      virtualCardList(params).then(res =>{
        console.log(res);
        this.tableData = res.result.result || [];
        let list = [];
        list = this.tableData.length ? this.tableData[0].headList : [];
        if(list.length){
          this.headList = list.map((item, index) => {
            if(item.indexOf('<span style="text-decoration: underline">') != -1){
              item = item.replace('<span style="text-decoration: underline">', '');
            }
            if(item.indexOf('</span>') != -1){
              item = item.replace('</span>', '');
            }
            return item;
          });
        }
        this.total = res.result.totalCount;
      }).finally(() => this.loading = false);
    },
    getMess(){
      let params = {
        id: this.giftId
      };
      giftGet(params).then(res => {
        if(res.code === '0000'){
          this.template = res.result.template || '';
        }else{
          this.$message.error(res.message);
        }
      });
    },
    // submitProNanme() {
    //   this.dialogVisible = false;
    //   // setInterval(() => {
    //   this.$emit('closeUploadDetail');
    //   // }, 10);
    // },
    // 取消修改
    cancelSubmit() {
      this.dialogVisible = false;
      setInterval(() => {
        this.$emit('closeUploadDetail');
      }, 10);
    }
  }
};
</script>
<style scoped></style>
