<template>
  <div class="app-container">
    <div class="head-container">
      <el-button type="primary" icon="el-icon-plus" @click="$refs.addPayType.show()">添加支付方式</el-button>
    </div>
    <div class="head-container">
      <el-table :data="tableData.list" v-loading="tableData.loading"><el-table-column prop="icon" label="图标">
          <template v-slot="scope">
            <el-image :src="scope.row.icon" style="width: 40px;height: 40px;"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="payName" label="支付方式"></el-table-column>
        <el-table-column prop="payType" label="类型"></el-table-column>
        <el-table-column prop="isOpenCashDrawer" label="开钱箱权限">

          <template v-slot="scope">
            <el-switch v-model="scope.row.isOpenCashDrawer" :active-value="1" :inactive-value="0" disabled></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="isDisplay" label="是否生效">

          <template v-slot="scope">
            <el-switch v-model="scope.row.isDisplay" :active-value="1" :inactive-value="0" disabled></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="sorts" label="条件排序"></el-table-column>
        <el-table-column label="操作" width="150">

          <template v-slot="scope">
            <el-button type="text" icon="el-icon-edit" @click="$refs.addPayType.show(scope.row)">编辑</el-button>
          </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>
    <addPayType ref="addPayType" @success="getTableData" />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { tbShopPayTypeGet } from '@/api/setting.js'
import addPayType from './components/addPayType'
export default {
  components: { addPayType },
  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 tbShopPayTypeGet({
          page: this.tableData.page,
          size: this.tableData.size,
          shopId: localStorage.getItem('shopId')
        })
        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>