<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>
      <div class="filter">
        <el-select v-model="selectModule" placeholder="模块" @change="selectModuleChange" clearable>
          <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="searchMockList">查询</el-button>
        <el-button type="primary" @click="addDialogVisible = true">新增mock</el-button>
      </div>
      <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="300">
        </el-table-column>
        <el-table-column prop="description" label="描述" width="200">
        </el-table-column>
        <el-table-column label="当前返回" width="100">
          <slot slot-scope="scope">
            <p v-if="scope.row.flag === 1">成功响应</p>
            <p v-else-if="scope.row.flag === 0">失败响应</p>
          </slot>
        </el-table-column>
        <el-table-column label="是否加密" width="100">
          <slot slot-scope="scope">
            <p v-if="scope.row.encrypt === 0">不加密</p>
            <p v-else-if="scope.row.encrypt === 1">加密</p>
          </slot>
        </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="queryModuleList.pageNum" :page-size="queryModuleList.pageSize" layout="total, prev, pager, next"
        :total="totalNum"></el-pagination>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog title="Mock详情" :visible.sync="detailDialogVisible" width="60%" @close="closeDetailDialog">
      <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%" @close="closeEditDialog">
      <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-radio-group v-model="addMockForm.type">
            <el-radio :label="1">json</el-radio>
            <el-radio :label="2">字符串</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否加密">
          <el-radio-group v-model="addMockForm.encrypt">
            <el-radio :label="0">不加密</el-radio>
            <el-radio :label="1">加密</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属模块">
          <el-select v-model="addMockForm.module" placeholder="模块" clearable>
            <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成功响应">
          <vue-json-editor v-if="addMockForm.type === 1" v-model="addMockForm.success" :mode="'code'" :showBtns="false" lang="zh" @json-change="onSuccessJsonChange" @json-save="onSuccessJsonSave" />
          <el-input v-else-if="addMockForm.type === 2" v-model="addMockForm.success" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="失败响应">
          <vue-json-editor v-if="addMockForm.type === 1" v-model="addMockForm.fail" :mode="'code'" :showBtns="false" lang="zh" @json-change="onFailJsonChange" @json-save="onFailJsonSave" />
          <el-input v-else-if="addMockForm.type === 2" v-model="addMockForm.fail" type="textarea"></el-input>
        </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="返回类型">
          <el-radio-group v-model="editMockForm.type">
            <el-radio :label="1">json</el-radio>
            <el-radio :label="2">字符串</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否加密">
          <el-radio-group v-model="editMockForm.encrypt">
            <el-radio :label="0">不加密</el-radio>
            <el-radio :label="1">加密</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属模块">
          <el-select v-model="editMockForm.module" placeholder="模块" clearable>
            <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成功响应">
          <vue-json-editor v-if="editMockForm.type === 1" v-model="editMockForm.success" :mode="'code'" :showBtns="false" lang="zh" @json-change="onSuccessJsonChange" @json-save="onSuccessJsonSave" />
          <el-input v-else-if="editMockForm.type === 2" v-model="editMockForm.success" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="失败响应">
          <vue-json-editor v-if="editMockForm.type === 1" v-model="editMockForm.fail" :mode="'code'" :showBtns="false" lang="zh" @json-change="onFailJsonChange" @json-save="onFailJsonSave" />
          <el-input v-else-if="editMockForm.type === 2" v-model="editMockForm.fail" type="textarea"></el-input>
        </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, getMockModuleList } from '@/api/mock'
import vueJsonEditor from 'vue-json-editor'
export default {
  data() {
    return {
      queryModuleInfo: {
        pageNum: 1,
        pageSize: 20
      },
      queryModuleList: {
        pageNo: 1,
        pageSize: 10,
        module: ''
      },
      moduleList: [],
      selectModule: '',
      mockList: [],
      addDialogVisible: false,
      detailDialogVisible: false,
      editDialogVisible: false,
      activeTab: 'basic',
      successResponse: '',
      failResponse: '',
      activeUrl: '',
      activeDescription: '',
      addMockForm: {
        url: '',
        description: '',
        success: '',
        fail: '',
        flag: 1,
        type: 1,
        encrypt: 0,
        module: ''
      },
      editMockForm: {
        id: '',
        url: '',
        description: '',
        success: '',
        fail: '',
        flag: '',
        type: 1,
        encrypt: 0,
        module: ''
      },
      successJson: '',
      failJson: '',
      totalNum: ''
    }
  },
  components: {
    vueJsonEditor
  },
  methods: {
    // 获取模块列表
    getMockModuleList() {
      getMockModuleList(this.queryModuleInfo).then((resp) => {
        this.moduleList = resp.data.data.list
      })
    },
    // 选中模块变化时
    selectModuleChange() {
      this.queryModuleList.module = this.selectModule
    },
    // 获取mock列表
    getMockList() {
      getMockList(this.queryModuleList).then((resp) => {
        this.mockList = resp.data.data.list
        this.totalNum = resp.data.data.total
      })
    },
    // 打开mock详情对话框
    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
    },
    // 新增mock
    addMock() {
      if (this.addMockForm.type === 1) {
        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失败！')
        }
      })
    },
    // 打开编辑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)
      this.editMockForm.type = row.type
      this.editMockForm.encrypt = row.encrypt
      this.editMockForm.module = row.module
    },
    // 修改mock
    editMock() {
      if (this.editMockForm.type === 1) {
        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失败！')
        }
      })
    },
    // 查询对应模块mock
    searchMockList() {
      this.getMockList()
    },
    onSuccessJsonChange() {},
    onSuccessJsonSave() {},
    onFailJsonChange() {},
    onFailJsonSave() {},
    handleSizeChange(newSize) {
      this.queryModuleList.pageSize = newSize
      this.getMockList()
    },
    handleCurrentChange(newPage) {
      this.queryModuleList.pageNum = newPage
      this.getMockList()
    },
    closeDetailDialog() {
      this.activeTab = 'baisc'
    },
    closeEditDialog() {}
  },
  created() {
    this.getMockModuleList()
    this.getMockList()
  }
}
</script>

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