<template>
  <div>
    <tf-page>
      <template #action>
        <tf-title>业务对象类型表</tf-title>
        <el-divider></el-divider>
        <el-button size="small" type="primary" @click="getDataList">刷新列表</el-button>
        <el-button size="small" type="primary" @click="addBo">新建业务对象</el-button>
        <!-- <el-button size="small" type="primary">批量删除</el-button> -->
        <el-input v-model="searchBoGroup" placeholder="所属组名称" size="small" style="width:200px"></el-input>
      </template>
      <tf-table ref="mainTb" row-key="id" :pagination="pagination" @expand-change="expandChange" @page-change="onPageChange" :data="dataList">
        <el-table-column type="expand">
          <template slot-scope="props">
            <tf-page style="minHeight:500px;padding:0 1%;">
              <template #action>
                <tf-title>{{props.row.boType}}属性列表</tf-title>
                <el-divider></el-divider>
                <el-button size="small" type="primary" @click="getSubDataList">刷新列表</el-button>
                <el-button size="small" type="primary" @click="addBoInfo">新建属性</el-button>
                <el-button size="small" type="primary" @click="delBoInfoByIds">批量删除</el-button>
              </template>
              <tf-table @selection-change="selectChange" row-key="id" :pagination="subpagination" @page-change="onSubPageChange" :data="props.row.dataList">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="name" label="属性名称"></el-table-column>
                <el-table-column prop="code" label="编码"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click='editBoInfo(scope.row)'>编辑</el-button>
                    <el-button type="primary" size="mini" @click='delBoInfoById(scope.row)'>删除</el-button>
                  </template>
                </el-table-column>
              </tf-table>
            </tf-page>
          </template>
        </el-table-column>
        <!-- <el-table-column type="selection"></el-table-column> -->
        <el-table-column prop="boGroup" label="所属组名称"></el-table-column>
        <el-table-column prop="boType" label="类型名称"></el-table-column>
        <el-table-column prop="createUserName" label="创建用户"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.origin != 2" type="primary" size="mini" @click='editBo(scope.row)'>编辑</el-button>
            <el-button v-if="scope.row.origin != 2" type="primary" size="mini" @click='delBo(scope.row)'>删除</el-button>
          </template>
        </el-table-column>
      </tf-table>
    </tf-page>
    <tf-dialog :title="isBoEdit?'修改业务对象':'新增业务对象'" :visible.sync='isBodialogShow' width="600px">
      <el-form v-model="addBoForm" label-width="100px">
        <el-form-item label="类型名称">
          <el-input v-model="addBoForm.boType"></el-input>
        </el-form-item>
        <el-form-item label="所属组名称">
          <el-select v-model="addBoForm.boGroup" style="width:100%">
            <el-option v-for="(item,index) in boGroups" :key="index" :value="item" :label="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align:right">
        <el-button size="small" @click="isBodialogShow=false">取消</el-button>
        <el-button size="small" type="primary" v-if="isBoEdit" @click="editBoSubmit">提交</el-button>
        <el-button size="small" type="primary" v-if="!isBoEdit" @click="addBoSubmit">提交</el-button>
      </div>
    </tf-dialog>
    <tf-dialog :title="isBoInfoEdit?'修改属性':'新增属性'" :visible.sync='isBoInfodialogShow' width="600px">
      <el-form v-model="addBoInfoForm" label-width="100px">
        <el-form-item label="属性编码">
          <el-input v-model="addBoInfoForm.code"></el-input>
        </el-form-item>
        <el-form-item label="属性名称">
          <el-input v-model="addBoInfoForm.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align:right">
        <el-button size="small" @click="isBoInfodialogShow=false">取消</el-button>
        <el-button size="small" type="primary" v-if="isBoInfoEdit" @click="editBoInfoSubmit">提交</el-button>
        <el-button size="small" type="primary" v-if="!isBoInfoEdit" @click="addBoInfoSubmit">提交</el-button>
      </div>
    </tf-dialog>
  </div>
</template>
<script lang="ts">
/**
 * 业务对象建模
 */
import { Vue, Prop, Watch, Component } from 'vue-property-decorator'
import { getDefaultPagination } from '@/utils/constant'
import {
  addBoInfo,
  editBoInfo,
  delBoInfoById,
  delBoInfoByIds,
  GetBoPage_api,
  getExsitBoGroup,
  getBoinfoPage,
  editPage_api,
  AddPage_api,
  delBoPageById
} from '@/api/APIs'
import { ElTable } from 'element-ui/types/table'
@Component({
  name: 'BusinessObjectModeling'
})
export default class BusinessObjectModeling extends Vue {
  /**主表分页 */
  pagination = getDefaultPagination()
  /**子表分页 */
  subpagination = getDefaultPagination()
  /**主表数据 */
  dataList = []
  /**主表展开行 */
  expandRow = null
  /**业务对象新增或删除 */
  isBoEdit = false
  /**业务属性新增或删除 */
  isBoInfoEdit = false
  /**业务对象编辑框 */
  isBodialogShow = false
  /**业务属性编辑框 */
  isBoInfodialogShow = false
  /**业务对象信息 */
  addBoForm = {
    id: '',
    boType: '',
    boGroup: ''
  }
  /**业务属性信息 */
  addBoInfoForm = {
    id: '',
    name: '',
    code: ''
  }
  /**勾选的业务属性 */
  checkedBoinfos = []
  /**搜索所属组 */
  searchBoGroup = ''
  /**已存在业务对象组 */
  boGroups = []
  @Watch('searchBoGroup')
  searchBogroup(value) {
    this.pagination = getDefaultPagination()
    this.getDataList()
  }
  /**主表分页事件 */
  onPageChange(pagination) {
    this.pagination = { ...this.pagination, ...pagination }
    this.getDataList()
  }
  /**子表分页事件 */
  onSubPageChange(pagination) {
    this.subpagination = { ...this.subpagination, ...pagination }
    this.getSubDataList()
  }
  /**主表展开行事件 */
  expandChange(value, expanded) {
    if (expanded.length === 0) {
      this.$set(value, 'dataList', [])
      this.expandRow = null
      return
    }
    let params = { boId: value.id }
    params = { ...params, ...this.subpagination }
    if (this.expandRow)
      ((this.$refs.mainTb as ElTable).$refs.table as ElTable).toggleRowExpansion(this.expandRow, false)
    getBoinfoPage(params)
      .then((result) => {
        if (result.code !== 1) return
        this.$set(value, 'dataList', result.result.records)
        this.expandRow = value
        const { current, size, total } = result.result
        this.subpagination = { current, size, total }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  mounted() {
    this.getDataList()
    this.getBoGroup()
  }
  /**获取已存在的组 */
  getBoGroup() {
    getExsitBoGroup({}).then((result) => {
      this.boGroups = result.result
    })
  }
  /**项目业务对象 */
  getDataList() {
    let params = {
      boGroup: this.searchBoGroup
    }
    params = { ...params, ...this.pagination }
    GetBoPage_api(params)
      .then((result) => {
        if (result.code !== 1) return
        this.dataList = result.result.records
        const { current, size, total } = result.result
        this.pagination = { current, size, total }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  /**业务对象属性 */
  getSubDataList() {
    const value = this.expandRow
    let params = { boId: value.id }
    params = { ...params, ...this.subpagination }
    getBoinfoPage(params)
      .then((result) => {
        if (result.code !== 1) return
        this.$set(value, 'dataList', result.result.records)
        this.expandRow = value
        const { current, size, total } = result.result
        this.subpagination = { current, size, total }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  /**新增业务对象按钮事件 */
  addBo() {
    this.isBodialogShow = true
    this.isBoEdit = false
    this.addBoForm.boType = ''
    this.addBoForm.boGroup = ''
  }
  /**新增业务对象提交 */
  addBoSubmit() {
    const data = {
      boType: this.addBoForm.boType,
      boGroup: this.addBoForm.boGroup
    }
    AddPage_api(data)
      .then((result) => {
        if (result.code === 1) {
          this.$message.success('添加成功')
          this.isBodialogShow = false
          this.getDataList()
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  /**编辑业务对象按钮事件 */
  editBo(row) {
    this.isBodialogShow = true
    this.isBoEdit = true
    this.addBoForm.boType = row.boType
    this.addBoForm.boGroup = row.boGroup
    this.addBoForm.id = row.id
  }
  /**编辑业务对象提交 */
  editBoSubmit() {
    const data = {
      id: this.addBoForm.id,
      boType: this.addBoForm.boType,
      boGroup: this.addBoForm.boGroup
    }
    editPage_api(data)
      .then((result) => {
        if (result.code === 1) {
          this.$message.success('修改成功')
          this.isBodialogShow = false
          this.getDataList()
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  /**删除业务对象 */
  delBo(row) {
    this.$confirm('是否删除业务对象？', '提示', {
      type: 'warning'
    }).then(() => {
      delBoPageById({ id: row.id })
        .then((result) => {
          if (result.code === 1) {
            this.$message.success('删除成功')
            this.getDataList()
          }
        })
        .catch((err) => {
          console.error(err)
        })
    })
  }
  /**新增业务属性按钮事件 */
  addBoInfo() {
    this.isBoInfodialogShow = true
    this.isBoInfoEdit = false
    this.addBoInfoForm.name = ''
    this.addBoInfoForm.code = ''
  }
  /**新增业务属性提交 */
  addBoInfoSubmit() {
    const data = {
      boId: this.expandRow.id,
      name: this.addBoInfoForm.name,
      code: this.addBoInfoForm.code
    }
    addBoInfo(data)
      .then((result) => {
        if (result.code === 1) {
          this.$message.success('添加成功')
          this.isBoInfodialogShow = false
          this.getSubDataList()
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  /**编辑业务属性按钮事件 */
  editBoInfo(row) {
    this.isBoInfodialogShow = true
    this.isBoInfoEdit = true
    this.addBoInfoForm.code = row.code
    this.addBoInfoForm.name = row.name
    this.addBoInfoForm.id = row.id
  }
  /**编辑业务属性提交 */
  editBoInfoSubmit() {
    const data = {
      id: this.addBoInfoForm.id,
      name: this.addBoInfoForm.name,
      code: this.addBoInfoForm.code
    }
    editBoInfo(data)
      .then((result) => {
        if (result.code === 1) {
          this.$message.success('修改成功')
          this.isBoInfodialogShow = false
          this.getSubDataList()
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  /**删除业务对象 */
  delBoInfoById(row) {
    this.$confirm('是否删除属性？', '提示', {
      type: 'warning'
    }).then(() => {
      delBoInfoById({ id: row.id })
        .then((result) => {
          if (result.code === 1) {
            this.$message.success('删除成功')
            this.getSubDataList()
          }
        })
        .catch((err) => {
          console.error(err)
        })
    })
  }
  /**删除业务对象 */
  delBoInfoByIds() {
    const ids = this.checkedBoinfos.map((item) => item.id).join(',')
    this.$confirm('是否删除属性？', '提示', {
      type: 'warning'
    }).then(() => {
      delBoInfoByIds({ ids: ids })
        .then((result) => {
          if (result.code === 1) {
            this.$message.success('删除成功')
            this.getSubDataList()
          }
        })
        .catch((err) => {
          console.error(err)
        })
    })
  }
  /**属性表格勾选事件 */
  selectChange(selection) {
    this.checkedBoinfos = selection
  }
}
</script>
<style lang="scss" scoped>
.container {
  background: #fff;
  >>> .actions {
    margin-bottom: 0;
    .el-divider--horizontal {
      margin: 15px 0;
    }
  }
  >>> .content {
    .tf-table .el-table:not(.el-table--border) .el-table__body tr.el-table__row td.el-table__cell button {
      color: #fff;
    }
  }
}
</style>