<template>
  <div v-if="visible">
    <el-form :model="form" label-width="100px">
      <!-- 表单内容 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="知识拆分规则">
            <el-input v-model="form.ruleName" size="medium" placeholder="请输入知识拆分规则"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" size="medium" @click="getDataList" class="ml20">查询</el-button>
          <el-button type="primary" size="medium" @click="addRule" class="ml20">+ 新增规则</el-button>
        </el-col>
      </el-row>
      <!-- 其他表单项 -->
    </el-form>
    <r-table :columns="columns" :data="tableData" :isSelectOnly="true" :deletion="false" @selection-change="getCheckData"></r-table>
    <!-- 添加 AddRule 组件 -->
    <add-rule ref="addRule" @getDataList="getDataList"></add-rule>
  </div>
</template>

<script>
import AddRule from './AddRule.vue' // 导入 AddRule 组件
import { getRulesPage } from '@/api/generatedApi/index'

export default {
  name: 'CustomSplitDialog',
  components: {
    AddRule // 注册 AddRule 组件
  },
  props: {},
  data() {
    return {
      visible: false,
      form: {
        ruleName: ''
        // 表单数据
      },
      tableData: [
        // 表格数据示例
        { id: 1, name: 'Item 1', selected: false },
        { id: 2, name: 'Item 2', selected: false },
        { id: 3, name: 'Item 3', selected: false }
      ],
      addRuleVisible: false, // 控制 AddRule 组件的显示状态
      selectData: []
    }
  },
  methods: {
    init() {
      this.visible = true
      this.getDataList()
    },
    getCheckData(value) {
      console.log(value)
      this.selectData = value
      this.ruleId = value[0].id
    },
    getDataList() {
      // 1-文档拆分规则  2-文档题词规则
      let params = {
        ruleType: 2,
        ...this.form
      }
      getRulesPage(params).then(res => {
        console.log(res.content.content.list)
        this.tableData = res.content.content.list
      })
    },
    close() {
      this.visible = false
    },
    handlePreview(row) {
      this.$refs.addRule.init(row.id, { preview: true })
    },
    handleEdit(row) {
      // 修改逻辑
      this.$refs.addRule.init(row.id)
    },
    closeDialog() {
      this.$emit('update:visible', false)
    },
    addRule() {
      this.$refs.addRule.init()
      // this.addRuleVisible = true; // 显示 AddRule 组件
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  },
  computed: {
    columns() {
      return [
        {
          type: 'selection',
          prop: 'knowledgeName',
          width: '100',
          align: 'center'
        },
        {
          key: '知识拆分规则名称',
          prop: 'ruleName',
          align: 'center'
        },
        {
          key: '备注',
          prop: 'description',
          align: 'center'
        },
        {
          key: '操作',
          prop: 'knowledgeDesc',
          width: '150px',
          align: 'center',
          render: (h, params) => {
            return h('span', {}, [
              h(
                'el-button',
                {
                  class: 'floatSpan',
                  props: {
                    type: 'primary',
                    size: 'medium'
                  },
                  on: {
                    click: () => this.handleEdit(params.row)
                  }
                },
                '修改'
              ),
              h(
                'el-button',
                {
                  class: 'floatSpan',
                  props: {
                    type: 'primary',
                    size: 'medium'
                  },
                  on: {
                    click: () => this.handlePreview(params.row)
                  }
                },
                '预览'
              )
            ])
          }
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
// 样式可以根据需要调整
</style>
