<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="100">
        </el-table-column>
        <el-table-column prop="url" label="路径" width="250">
        </el-table-column>
        <el-table-column prop="description" label="描述" width="200">
        </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="成功响应">
          <!-- <el-input v-model="addMockForm.success"></el-input> -->
          <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="失败响应">
          <!-- <el-input v-model="addMockForm.fail"></el-input> -->
          <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" width="60">
          </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>
  </div>
</template>

<script>
import { getMockList, addMock } from '@/api/mock'
import vueJsonEditor from 'vue-json-editor'
export default {
  data() {
    return {
      queryInfo: {
        pageNo: '',
        pageSize: ''
      },
      mockList: [],
      addDialogVisible: false,
      detailDialogVisible: false,
      editDialogVisible: false,
      activeTab: 'basic',
      successResponse: '',
      failResponse: '',
      activeUrl: '',
      activeDescription: '',
      addMockForm: {
        url: '',
        description: '',
        success: '',
        fail: '',
        flag: ''
      },
      successJson: '',
      failJson: ''
    }
  },
  components: {
    vueJsonEditor
  },
  methods: {
    // 获取mock列表
    getMockList() {
      getMockList().then((resp) => {
        this.mockList = resp.data.data
      })
    },
    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
    },
    openEditDialog(row) {
      this.editDialogVisible = true
    },
    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失败！')
        }
      })
    },
    onSuccessJsonChange() {},
    onSuccessJsonSave() {},
    onFailJsonChange() {},
    onFailJsonSave() {}
  },
  created() {
    this.getMockList()
  }
}
</script>

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