<template>
  <div class="app-container">
    <addModal ref="addModel" @success="modalSuccess" />
    <div style="margin-bottom: 20px;">
      <el-input v-model="form.name" placeholder="商户名称" style="width: 256px;" class="filter-item" />
      <el-button class="filter-item" type="primary" style="margin-left: 20px;" icon="el-icon-search" @click="query">
        搜索
      </el-button>
      <el-button class="filter-item" style="margin-left: 20px;" type="primary" icon="el-icon-plus" @click="handleCreate">
        添加
      </el-button>
    </div>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      element-loading-text="加载中..."
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ ((pagination.current - 1) * pagination.pageSize) + (scope.$index + 1) }}
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="设备appId">
        <template slot-scope="scope">
          {{ scope.row.machineAppId }}
        </template>
      </el-table-column>
      <el-table-column label="商户appId">
        <template slot-scope="scope">
          {{ scope.row.serviceAppId }}
        </template>
      </el-table-column>
      <el-table-column label="商户平台地址">
        <template slot-scope="scope">
          {{ scope.row.serviceAddress }}
        </template>
      </el-table-column>
      <el-table-column label="是否第三方应用" align="center" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.thirdAuth | statusFilter">
            {{ scope.row.thirdAuth ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column label="三方授权appId">
        <template slot-scope="scope">
          {{ scope.row.thirdAuthAppId }}
        </template>
      </el-table-column> -->
      <el-table-column label="三方授权token">
        <template slot-scope="scope">
          {{ scope.row.appAuthToken }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="授权状态" align="center" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag :type="(row.thirdAuth ? (row.appAuthTokenStatus ? true : false) : false) | statusFilter">
            {{ row | statusFilterStr }}
          </el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
            删除
          </el-button>
          <!-- <template>
            <el-button v-if="row.appAuthTokenStatus" size="mini" type="danger" @click="statusChange(row, false)">停用</el-button>
            <el-button v-else size="mini" type="danger" @click="statusChange(row, true)">启用</el-button>
          </template> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="pagination.total"
      :page.sync="pagination.current"
      :limit.sync="pagination.pageSize"
      :page-sizes="pagination.pageSizeOptions"
      :layout="pagination.layout"
      @pagination="handleSizeChange"
    />
  </div>
</template>

<script>
import AddModal from './modal/AddModal.vue'
import tableMixins from '@/mixins/tableMixins'
import { getList, deleteById, updateStatusById } from '@/api/merchant'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination, AddModal },
  filters: {
    statusFilter(status) {
      return status ? 'success' : 'info'
    },
    statusFilterStr(obj) {
      return obj.thirdAuth ? (obj.appAuthTokenStatus ? '已授权' : '未授权') : '未启用'
    }
  },
  mixins: [tableMixins],
  data() {
    return {
      form: {}
    }
  },
  methods: {
    initData() {
      this.getTableList()
    },
    // 获取表格数据
    async getTableList() {
      this.tableLoading = true
      try {
        const result = await getList(this.getFilterParams())
        this.setDataList(result.data)
      } catch (e) {
        console.log(e)
      } finally {
        this.tableLoading = false
      }
    },
    // 获取筛选信息
    query() {
      this.clearPageParams()
      this.getTableList()
    },
    // 增加筛选条件
    transformFilterForm() {
      return {
        name: this.form.name || null
      }
    },
    modalSuccess(isEdit) {
      if (!isEdit) {
        this.clearPageParams()
      }
      this.getTableList()
    },
    handleCreate() {
      this.$refs.addModel.open()
    },
    handleUpdate(row) {
      this.$refs.addModel.open(Object.assign({}, row))
    },
    handleDelete(row, index) {
      const that = this
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        type: 'warning',
        beforeClose: async(action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            instance.confirmButtonText = '提交中...'
            try {
              await deleteById(row.id)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              that.getTableList()
            } catch (e) {
              // this.$message({
              //   type: 'error',
              //   message: '删除失败!'
              // })
            } finally {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
                instance.cancelButtonLoading = false
              }, 300)
            }
          } else {
            done()
          }
        }
      }).then(() => {}).catch(() => {})
    },
    statusChange(row, status) {
      const that = this
      this.$confirm(`确定 ${status ? '启用授权' : '停用授权'} 操作吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        type: 'warning',
        beforeClose: async(action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            instance.confirmButtonText = '提交中...'
            try {
              await updateStatusById(row.id, status)
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              that.getTableList()
            } catch (e) {
              // this.$message({
              //   type: 'error',
              //   message: '删除失败!'
              // })
            } finally {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
                instance.cancelButtonLoading = false
              }, 300)
            }
          } else {
            done()
          }
        }
      }).then(() => {}).catch(() => {})
    }
  }
}
</script>
