<script>
import { getRuleDetail } from '@/api/rules/index'

export default {
  name: 'Info',
  props: {
    type: {
      type: String,
      default: 'edit'
    }
  },
  inject: ['dialogOptions'],
  data() {
    return {
      tableDate: {
        data: [],
        columns: []
      },
      // 规则名称、创建时间
      form: {
        ruleName: '',
        createdDate: ''
      }
    }
  },
  methods: {
    save() {}
  },
  beforeMount() {
    // 获取规则详情
    getRuleDetail(this.dialogOptions.currentRow.id).then(res => {
      const { content } = res.content
      console.log('origin query request', content)
      // 设置表单数据
      this.form.ruleName = content.ruleName
      this.form.createdDate = content.createdDate
      // 设置表格数据
      this.tableDate.data = content.ruleList

      // 1. 是 提示词规则
      if (content.ruleType.toString() === '1') {
        this.tableDate.columns = [{ prop: 'titleLevel', key: '样式' }, { prop: 'ruleRegex', key: '提示词' }, { prop: 'description', key: '备注' }]
      }
      // 2. 是 拆分规则
      else if (content.ruleType.toString() === '2') {
        this.tableDate.columns = [
          { prop: 'attribute', key: '属性' },
          { prop: 'attributeDesc', key: '属性描述' },
          { prop: 'keyword', key: '关键词' },
          { prop: 'example', key: '题词示例' },
          { prop: 'prompt', key: '提示词' }
        ]
      }
    })
  }
}
</script>

<template>
  <div>
    <!-- 开头的 form 表格 -->
    <el-form :model="form" label-width="100px">
      <el-col :span="12">
        <el-form-item label="规则名称">
          <el-input v-model="form.ruleName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="创建时间">
          <el-input v-model="form.createdDate"></el-input>
        </el-form-item>
      </el-col>
    </el-form>
    <!-- 规则详情列表 -->
    <r-table :deletion="false" :data="tableDate.data" :columns="tableDate.columns"></r-table>
  </div>
</template>

<style lang="css" scoped></style>
