<template>
  <div>
    <!-- 头部导航栏 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>Mock</el-breadcrumb-item>
      <el-breadcrumb-item>Mock列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-button type="primary" @click="addDialogVisible = true">新增mock</el-button>
      <el-table :data="mockList" border style="width: 100%">
        <el-table-column prop="id" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="url" label="路径" width="200">
        </el-table-column>
        <el-table-column prop="description" label="描述" width="200">
        </el-table-column>
        <!-- <el-table-column prop="success" label="成功响应" width="250">
        </el-table-column>
        <el-table-column prop="fail" label="失败响应" width="250">
        </el-table-column> -->
        <el-table-column label="操作">
          <slot slot-scope="scope">
            <el-button type="warning" @click="openDetailDialog(scope.row)">详情</el-button>
            <el-button type="success" @click="openEditDialog(scope.row)">编辑</el-button>
            <!-- <el-button type="danger">删除</el-button> -->
          </slot>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryInfo.pageNum" :page-size="queryInfo.pageSize" layout="total, prev, pager, next"
        :total="totalNum"></el-pagination>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog title="Mock详情" :visible.sync="detailDialogVisible" width="60%">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <p>路径：{{ activeUrl }}</p>
          <p>描述：{{ activeDescription }}</p>
        </el-tab-pane>
        <el-tab-pane label="成功响应" name="success">
          <vue-json-editor v-model="successResponse" :mode="'code'" :showBtns="false" lang="zh" @json-change="onSuccessJsonChange" @json-save="onSuccessJsonSave" />
        </el-tab-pane>
        <el-tab-pane label="失败响应" name="fail">
          <vue-json-editor v-model="failResponse" :mode="'code'" :showBtns="false" lang="zh" @json-change="onSuccessJsonChange" @json-save="onSuccessJsonSave" />
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="detailDialogVisible = false">保 存</el-button>
      </span>
    </el-dialog>

    <!-- 新增对话框 -->
    <el-dialog title="Mock详情" :visible.sync="addDialogVisible" width="60%">
      <el-form label-width="80px" :model="addMockForm">
        <el-form-item label="路径">
          <el-input v-model="addMockForm.url"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="addMockForm.description"></el-input>
        </el-form-item>
        <el-form-item label="成功响应">
          <vue-json-editor v-model="addMockForm.success" :mode="'code'" :showBtns="false" lang="zh" @json-change="onSuccessJsonChange" @json-save="onSuccessJsonSave" />
        </el-form-item>
        <el-form-item label="失败响应">
          <vue-json-editor v-model="addMockForm.fail" :mode="'code'" :showBtns="false" lang="zh" @json-change="onFailJsonChange" @json-save="onFailJsonSave" />
        </el-form-item>
        <el-form-item label="当前返回">
          <el-switch v-model="addMockForm.flag" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMock">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑Mock" :visible.sync="editDialogVisible" width="60%">
      <el-form label-width="80px" :model="editMockForm">
        <el-form-item label="路径">
          <el-input v-model="editMockForm.url"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="editMockForm.description"></el-input>
        </el-form-item>
        <el-form-item label="成功响应">
          <vue-json-editor v-model="editMockForm.success" :mode="'code'" :showBtns="false" lang="zh" @json-change="onSuccessJsonChange" @json-save="onSuccessJsonSave" />
        </el-form-item>
        <el-form-item label="失败响应">
          <vue-json-editor v-model="editMockForm.fail" :mode="'code'" :showBtns="false" lang="zh" @json-change="onFailJsonChange" @json-save="onFailJsonSave" />
        </el-form-item>
        <el-form-item label="当前返回">
          <el-switch v-model="editMockForm.flag" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editMock">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMockList, addMock, editMock } from '@/api/mock'
import vueJsonEditor from 'vue-json-editor'
export default {
  data() {
    return {
      queryInfo: {
        pageNo: 1,
        pageSize: 10
      },
      mockList: [],
      addDialogVisible: false,
      detailDialogVisible: false,
      editDialogVisible: false,
      activeTab: 'basic',
      successResponse: '',
      failResponse: '',
      activeUrl: '',
      activeDescription: '',
      addMockForm: {
        url: '',
        description: '',
        success: '',
        fail: '',
        flag: ''
      },
      editMockForm: {
        id: '',
        url: '',
        description: '',
        success: '',
        fail: '',
        flag: ''
      },
      successJson: '',
      failJson: '',
      totalNum: ''
    }
  },
  components: {
    vueJsonEditor
  },
  methods: {
    // 获取mock列表
    getMockList() {
      getMockList(this.queryInfo).then((resp) => {
        this.mockList = resp.data.data.list
        this.totalNum = resp.data.data.total
      })
    },
    openDetailDialog(row) {
      this.detailDialogVisible = true
      this.successResponse = JSON.parse(row.success)
      this.failResponse = JSON.parse(row.fail)
      this.activeUrl = row.url
      this.activeDescription = row.description
    },
    addMock() {
      this.addMockForm.success = JSON.stringify(this.addMockForm.success)
      this.addMockForm.fail = JSON.stringify(this.addMockForm.fail)
      addMock(this.addMockForm).then((resp) => {
        if (resp.data.data === true) {
          this.addDialogVisible = false
          this.getMockList()
          return this.$message.success('新增mock成功！')
        } else {
          return this.$message.error('新增mock失败！')
        }
      })
    },
    openEditDialog(row) {
      this.editDialogVisible = true
      this.editMockForm.id = row.id
      this.editMockForm.url = row.url
      this.editMockForm.description = row.description
      this.editMockForm.success = JSON.parse(row.success)
      this.editMockForm.fail = JSON.parse(row.fail)
      this.editMockForm.flag = String(row.flag)
    },
    editMock() {
      this.editMockForm.success = JSON.stringify(this.editMockForm.success)
      this.editMockForm.fail = JSON.stringify(this.editMockForm.fail)
      editMock(this.editMockForm).then((resp) => {
        if (resp.data.data === true) {
          this.editDialogVisible = false
          this.getMockList()
          return this.$message.success('修改mock成功！')
        } else {
          return this.$message.error('修改mock失败！')
        }
      })
    },
    onSuccessJsonChange() {},
    onSuccessJsonSave() {},
    onFailJsonChange() {},
    onFailJsonSave() {},
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getMockList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getMockList()
    }
  },
  created() {
    this.getMockList()
  }
}
</script>

<style lang="less" scoped>
.el-table {
  margin-top: 20px;
}
</style>
