<template>
  <div class="app-container">
    <div class="head-container">
      <div class="filter_wrap">
        <!-- <el-input v-model="query.name" size="small" clearable placeholder="请输入完整的代理商账号查找" style="width: 250px"
          @keyup.enter.native="getTableData" /> -->
        <el-select v-model="query.type" placeholder="请选择类型" style="width: 200px">
          <el-option label="快餐版" value="munchies" />
          <el-option label="餐饮版" value="restaurant" />
        </el-select>
        <el-select v-model="query.status" placeholder="请选择状态" style="width: 200px">
          <el-option label="待激活" :value="0" />
          <el-option label="已使用" :value="1" />
        </el-select>
        <el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 400px" @change="getTableData">
        </el-date-picker>
        <el-button type="primary" @click="getTableData">查询</el-button>
        <el-button @click="resetHandle">重置</el-button>
      </div>
    </div>
    <div class="head-container">
      <div class="filter_wrap">
        <el-button type="primary" icon="el-icon-plus" @click="$refs.addActivationCode.show()">添加激活码</el-button>
        <el-button icon="el-icon-download">导出Excel</el-button>
      </div>
    </div>
    <div class="head-container">
      <el-table :data="tableData.list" v-loading="tableData.loading">
        <el-table-column label="激活码" prop="registerCode" width="500px">
          <template v-slot="scope">
            <el-tooltip content="点击复制">
              <el-tag type="success" @click="copyHandle(scope.row.registerCode)">
                <i class="el-icon-paperclip"></i>
                {{ scope.row.registerCode }}
              </el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="商户名称" prop="name"></el-table-column>
        <el-table-column label="联系电话" prop="telephone"></el-table-column>
        <el-table-column label="版本类型" prop="type">
          <template v-slot="scope">
            <span v-if="scope.row.type == 'munchies'">快餐版</span>
            <span v-if="scope.row.type == 'restaurant'">餐饮版</span>
          </template>
        </el-table-column>
        <el-table-column label="激活时长" prop="periodYear"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template v-slot="scope">
            <el-tag type="info" v-if="scope.row.status == 0">待激活</el-tag>
            <el-tag type="success" v-if="scope.row.status == 1">已使用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createdAt">
          <template v-slot="scope">
            {{ scope.row.createdAt && dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="head-container">
      <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
        @current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <addActivationCode ref="addActivationCode" @success="getTableData" />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { tbMerchantRegisterList } from '@/api/shop.js'
import addActivationCode from './components/addActivationCode'
import VueClipboard from 'vue-clipboard2'
export default {
  components: { addActivationCode },
  data() {
    return {
      dayjs,
      query: {
        name: '',
        type: '',
        status: '',
        createdAt: []
      },
      status: [
        {
          type: 1,
          label: '开启'
        },
        {
          type: 0,
          label: '关闭'
        }
      ],
      tableData: {
        list: [],
        page: 0,
        size: 10,
        loading: false,
        total: 0
      }
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    copyHandle(text) {
      this.$copyText(text).then((e) => {
        this.$notify({
          title: '成功',
          message: `复制成功`,
          type: 'success'
        });
      })
    },
    // 重置查询
    resetHandle() {
      this.query.name = ''
      this.query.account = ''
      this.query.status = ''
      this.getTableData()
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e - 1
      this.getTableData()
    },
    async getTableData() {
      this.tableData.loading = true
      try {
        const res = await tbMerchantRegisterList({
          page: this.tableData.page,
          size: this.tableData.size,
          type: this.query.type,
          status: this.query.status,
          createdAt: this.query.createdAt
        })
        this.tableData.loading = false
        this.tableData.list = res.content
        this.tableData.total = res.totalElements
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.shop_info {
  display: flex;

  .info {
    flex: 1;
    padding-left: 4px;
  }
}
</style>