<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <el-form
            ref="searchForm"
            :model="searchForm"
            label-width="80px"
            inline
          >
            <el-form-item
              label=""
              prop="name"
            >
              <el-input v-model="searchForm.name" clearable placeholder="模型名称" style="width: 100%">
                <el-button slot="append" icon="el-icon-search" @click="listModel(1)"></el-button>
              </el-input>
            </el-form-item>
          </el-form>
          <el-table
            ref="tableModel"
            :data="tableData"
            border
            highlight-current-row
            @current-change="handleTableSel"
          >
            <el-table-column
              type="index"
              label="序号"
              width="50px"
              align="center"
            />
            <el-table-column
              prop="name"
              label="模型名称"
            />
          </el-table>
          <el-pagination
            class="margin-top-20 text-align-right"
            :current-page="pageForm.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <div class="top-container" style="display: flex;justify-content: space-between">
            <el-form
              ref="searchFormInstance"
              :model="searchFormInstance"
              label-width="80px"
              inline
            >
              <el-form-item
                label=""
                prop="name"
              >
                <el-input
                  v-model="searchFormInstance.instanceName"
                  clearable
                  placeholder="实例名称"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="listInstance(1)"
                  ></el-button>
                </el-input>
              </el-form-item>
            </el-form>
            <div class="buttons-group">
              <el-button type="primary" icon="el-icon-plus" @click="showAddView">增加实例</el-button>
            </div>
          </div>

          <el-table
            res="tableInstance"
            :data="tableDataInstance"
            border
          >
            <el-table-column
              type="index"
              label="序号"
              width="50px"
              align="center"
            />
            <el-table-column
              prop="instanceName"
              label="实例名称"
              min-width="220px"
            />
            <el-table-column
              prop="description"
              label="描述"
            />
            <el-table-column
              label="操作"
              width="140px"
              align="center"
            >
              <template slot-scope="props">
                <el-button type="text" style="margin-right: 10px" @click="showEditView(props.row)">编辑</el-button>
                <el-popconfirm
                  title="确定要删除此条记录吗？"
                  @onConfirm="deleteInstance(props.row.id)"
                >
                  <el-button slot="reference" type="text">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="margin-top-20 text-align-right"
            :current-page="pageFormInstance.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageFormInstance.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageFormInstance.total"
            @size-change="handleSizeChangeInstance"
            @current-change="handleCurrentChangeInstance"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      :title="add ? '增加实例' : '编辑实例'"
      :visible.sync="dialogVisible"
      width="700px"
      :before-close="beforeClose"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        label-width="90px"
        :rules="rules"
      >
        <el-form-item
          label="实例名称:"
          prop="instanceName"
        >
          <el-input v-model="addForm.instanceName" />
        </el-form-item>
        <el-form-item
          label="描述:"
          prop="description"
        >
          <el-input v-model="addForm.description" type="textarea" :rows="4" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="saveInstance">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listModel } from '@/api/data-management/model-management'
import { listInstance, addInstance, editInstance, deleteInstance } from '@/api/data-management/instance-management'
export default {
  name: 'ObjectModel',
  props: {},
  data() {
    return {
      searchForm: {
        name: null
      },
      searchFormInstance: {
        instanceName: null
      },
      addForm: {
        instanceName: null,
        description: null,
        id: null
      },
      tableData: [
      ],
      tableDataInstance: [
      ],
      pageForm: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      pageFormInstance: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      add: true,
      dialogVisible: false,
      currentRowId: null,
      currentRow: null,
      currentModelId: null,
      rules: {
        instanceName: [
          { required: true, message: '请输入实例名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入描述', trigger: 'blur' },
          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.listModel(1)
  },
  mounted() {},
  methods: {
    listModel(pageNum) {
      const { name } = this.searchForm
      const params = {
        name,
        pageNum,
        pageSize: this.pageForm.pageSize
      }
      listModel(params)
        .then(res => {
          const { data } = res
          this.tableData = data.records
          this.pageForm.total = data.total
          this.pageForm.pageNum = data.pageNum
          this.$nextTick()
            .then(_ => {
              this.tableData.length && this.$refs.tableModel.setCurrentRow(this.tableData[0])
            })
        })
        .catch(err => {
          console.error(err.message)
          this.$message.error('查询遇到问题')
        })
    },
    handleSizeChange(val) {
      this.pageForm.pageSize = val
      this.listModel(1)
    },
    handleCurrentChange(val) {
      this.pageForm.pageNum = val
      this.listModel(val)
    },
    handleSizeChangeInstance(val) {
      this.pageFormInstance.pageSize = val
      this.listInstance(1)
    },
    handleCurrentChangeInstance(val) {
      this.pageFormInstance.pageNum = val
      this.listInstance(val)
    },
    handleTableSel(val) {
      this.currentRow = val
      this.currentModelId = this.currentRow.id
      this.listInstance(1)
    },
    listInstance(pageNum) {
      if (this.currentModelId === null) {
        this.$message.error('请选择模型')
        return
      }
      const {
        instanceName
      } = this.searchFormInstance
      const params = {
        modelId: this.currentModelId,
        instanceName,
        pageNum,
        pageSize: this.pageFormInstance.pageSize
      }
      listInstance(params)
        .then(res => {
          const { data } = res
          this.tableDataInstance = data.records
          this.pageFormInstance.total = data.total
          this.pageFormInstance.pageNum = data.pageNum
        })
        .catch(err => {
          console.error(err.message)
          this.$message.error('查询遇到问题')
        })
    },
    resetFields() {
      this.addForm = {
        instanceName: null,
        description: null,
        id: null
      }
      this.$refs.addForm.clearValidate()
    },
    beforeClose(done) {
      this.resetFields()
      this.$nextTick()
        .then(_ => {
          done()
        })
    },
    closeDialog() {
      this.resetFields()
      this.$nextTick()
        .then(_ => {
          this.dialogVisible = false
        })
    },
    showAddView() {
      if (this.currentModelId === null) {
        this.$message.error('请选择模型')
        return
      }
      this.add = true
      this.dialogVisible = true
    },
    showEditView(row) {
      if (this.currentModelId === null) {
        this.$message.error('请选择模型')
        return
      }
      this.add = false
      this.dialogVisible = true
      this.addForm.instanceName = row.instanceName
      this.addForm.description = row.description
      this.addForm.id = row.id
    },
    saveInstance() {
      this.$refs.addForm.validate()
        .then(_ => {
          const { instanceName, description } = this.addForm
          const params = {
            instanceName,
            description,
            modelId: this.currentModelId
          }
          if (this.add) {
            addInstance(params)
              .then(_ => this.$message.success('操作成功'))
              .then(_ => this.listInstance(1))
              .then(_ => this.closeDialog())
              .catch(err => {
                this.$message.error('操作失败')
                console.error(err.message)
              })
          } else {
            params.id = this.addForm.id
            editInstance(params)
              .then(_ => this.$message.success('操作成功'))
              .then(_ => this.listInstance(1))
              .then(_ => this.closeDialog())
              .catch(err => {
                this.$message.error('操作失败')
                console.error(err.message)
              })
          }
        })
        .catch(_ => {})
    },
    deleteInstance(id) {
      deleteInstance({ id: id })
        .then(res => this.$message.success('操作成功'))
        .then(_ => {
          this.listInstance(this.pageFormInstance.pageNum)
        })
        .catch(err => {
          this.$message.error('操作失败')
          console.error(err.message)
        })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
