<template>
  <div class="app-container">
    <div class="head-container">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input v-model="query.name" size="small" clearable placeholder="请输入店铺名称" style="width: 100%;"
            class="filter-item" @keyup.enter.native="getTableData" />
        </el-col>
        <el-col :span="3">
          <el-input v-model="query.account" size="small" clearable placeholder="请输入商户号" style="width: 100%;"
            class="filter-item" @keyup.enter.native="getTableData" />
        </el-col>
        <el-col :span="3">
          <el-select v-model="query.status" placeholder="请选择店铺状态" style="width: 100%;">
            <el-option :label="item.label" :value="item.type" v-for="item in status" :key="item.type" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button @click="resetHandle">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="head-container">
      <el-button type="primary" icon="el-icon-plus" @click="$refs.addShop.show()">添加店铺</el-button>
    </div>
    <div class="head-container">
      <el-table :data="tableData.list" v-loading="tableData.loading">
        <el-table-column label="店铺信息" width="200">
          <template v-slot="scope">
            <div class="shop_info">
              <el-image :src="scope.row.coverImg"
                style="width: 50px;height: 50px;border-radius: 4px;background-color: #efefef;">
                <div class="img_error" slot="error">
                  <i class="icon el-icon-document-delete"></i>
                </div>
              </el-image>
              <div class="info">
                <span>{{ scope.row.shopName }}</span>
                <div class="tag_wrap">
                  <el-tag type="info" effect="dark" v-if="scope.row.profiles == 'no'">未激活</el-tag>
                  <el-tag type="warning" effect="dark" v-if="scope.row.profiles == 'probation'">试用</el-tag>
                  <el-tag type="success" effect="dark" v-if="scope.row.profiles == 'release'">正式</el-tag>
                  <el-tag type="primary" effect="dark" v-if="scope.row.isWxMaIndependent">独立小程序</el-tag>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="registerType" label="类型">
          <template v-slot="scope">
            <span v-if="scope.row.registerType == 'munchies'">快餐版</span>
            <span v-if="scope.row.registerType == 'restaurant'">餐饮版</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="商户号"></el-table-column>
        <el-table-column prop="lowPrice" label="来源"></el-table-column>
        <el-table-column prop="lowPrice" label="认证状态">-</el-table-column>
        <el-table-column prop="status" label="店铺状态">
          <template v-slot="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" disabled></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="到期时间">
          <template v-slot="scope">
            {{ dayjs(scope.row.expireAt).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template v-slot="scope">
            <el-button type="text" icon="el-icon-edit" @click="$refs.addShop.show(scope.row)">编辑</el-button>
            <el-dropdown @command="dropdownClick">
              <el-button type="text">更多<i class="el-icon-arrow-down"></i></el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{ row: scope.row, command: 1 }">详情</el-dropdown-item>
                <el-dropdown-item :command="2">续费记录</el-dropdown-item>
                <el-dropdown-item :command="3">前往店铺</el-dropdown-item>
                <el-dropdown-item :command="4">重置密码</el-dropdown-item>
                <el-dropdown-item divided :command="5">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </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>
    <addShop ref="addShop" @success="getTableData" />
    <detailModal ref="detailModal" />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { tbShopInfo } from '@/api/shop.js'
import addShop from '../components/addShop'
import detailModal from '../components/detailModal'
export default {
  components: { addShop, detailModal },
  data() {
    return {
      dayjs,
      query: {
        name: '',
        account: '',
        status: ''
      },
      status: [
        {
          type: 1,
          label: '开启'
        },
        {
          type: 0,
          label: '关闭'
        }
      ],
      tableData: {
        list: [],
        page: 0,
        size: 10,
        loading: false,
        total: 0
      }
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    dropdownClick(e) {
      switch (e.command) {
        case 1:
          this.$refs.detailModal.show(e.row)
          break;
        default:
          break;
      }
    },
    // 重置查询
    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 tbShopInfo({
          page: this.tableData.page,
          size: this.tableData.size,
          shopName: this.query.name,
          account: this.query.account,
          status: this.query.status
        })
        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>