<template>
  <el-dialog
    title="子商户管理"
    :visible.sync="visible"
    @close="handleClose">
    <div style="padding:10px">
      <el-button type="primary" size="small" style="margin-bottom: 10px" @click="handleAdd">添加子商户</el-button>
      <el-table :data="subMerchantList" border style="width: 100%">
        <el-table-column prop="name" label="子商户名称" min-width="120">
          <template slot-scope="scope">
            <el-input v-if="scope.row.isEdit" style="width: calc(100% - 22px);" v-model="scope.row.name" size="small"></el-input>
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="merId" label="子商户编号" min-width="120">
          <template slot-scope="scope">
            <el-input v-if="scope.row.isEdit" style="width: calc(100% - 22px);" v-model="scope.row.merId" size="small"></el-input>
            <span v-else>{{ scope.row.merId }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="merPrtclNo" label="子商户协议编号" min-width="140">
          <template slot-scope="scope">
            <el-input v-if="scope.row.isEdit" style="width: calc(100% - 22px);" v-model="scope.row.merPrtclNo" size="small"></el-input>
            <span v-else>{{ scope.row.merPrtclNo }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="termId" label="交易终端号" min-width="120">
          <template slot-scope="scope">
            <el-input v-if="scope.row.isEdit" style="width: calc(100% - 22px);" v-model="scope.row.termId" size="small"></el-input>
            <span v-else>{{ scope.row.termId }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="135">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.isEdit" type="text" size="small" @click="handleEdit(scope.row, scope.$index)">编辑</el-button>
            <el-button v-if="scope.row.isEdit" type="text" size="small" @click="handleSave(scope.row)">保存</el-button>
            <el-button v-if="scope.row.isEdit" type="text" size="small" @click="handleCancel(scope.row, scope.$index)">取消</el-button>
            <el-button v-if="!scope.row.isEdit" type="text" size="small" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <span slot="footer">
      <el-button @click="visible= false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getGhSubMerchantList, saveGhSubMerchant, updateGhSubMerchant, deleteGhSubMerchant } from '@/api/payChannel'

export default {
  data () {
    return {
      visible: false,
      form: {},
      loading: false,
      subMerchantList: []
    }
  },
  methods: {
    async show (data) {
      this.visible = true
      this.getTableData()
    },
    handleClose () {
      this.visible = false
      this.subMerchantList = []
    },
    handleAdd () {
      this.subMerchantList.push({
        name: '',
        merId: '',
        merPrtclNo: '',
        termId: '',
        isEdit: true
      })
    },
    handleEdit (row, idx) {
      this.subMerchantList.splice(idx, 1, { ...row, isEdit: true })
    },
    async getTableData () {
      this.loading = true
      const res = await getGhSubMerchantList()
      this.subMerchantList = res.data || []
      this.loading = false
    },
    async handleSave (row) {
      let res
      if (row.id) {
        res = await updateGhSubMerchant(row)
      } else {
        res = await saveGhSubMerchant(row)
      }

      if (res?.code === '200') {
        this.$message.success('保存成功')
        row.isEdit = false
      }

      this.getTableData()
    },
    handleCancel (row, index) {
      if (!row.id) {
        this.subMerchantList.splice(index, 1)
      } else {
        row.isEdit = false
      }
    },
    async handleDelete (row, index) {
      if (row.id) {
        const res = await deleteGhSubMerchant(row.id)

        if (res?.code === '200') {
          this.$message.success('删除成功')
        }

        this.getTableData()
      } else {
        this.subMerchantList.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
