<template>
  <div class="template-config-page">
    <el-card shadow="never" class="template-card">
      <div slot="header" class="card-header">
        <span>模板列表</span>
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="openTemplateDialog">
          新增模板
        </el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="templates"
        border
        highlight-current-row
        height="320"
        @current-change="handleTemplateSelect"
      >
        <el-table-column prop="name" label="模板名称" min-width="180" />
        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="editTemplate(scope.row)">编辑</el-button>
            <el-button type="text" size="mini" @click="removeTemplate(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- Template Config Dialog -->
    <el-dialog
      :visible.sync="configDialogVisible"
      title="模板配置"
      width="960px"
      append-to-body
      @close="handleConfigClose"
    >
      <el-row :gutter="16">
        <el-col :span="12">
          <el-card shadow="never">
            <div slot="header" class="card-header">
              <span>基础信息</span>
            </div>
            <el-form
              v-if="editingTemplate"
              ref="templateForm"
              :model="editingTemplate"
              :rules="templateRules"
              label-width="90px"
              size="small"
            >
              <el-form-item label="模板名称" prop="name">
                <el-input v-model="editingTemplate.name" maxlength="50" />
              </el-form-item>
              <el-form-item label="描述">
                <el-input
                  v-model="editingTemplate.description"
                  type="textarea"
                  rows="3"
                  maxlength="200"
                  show-word-limit
                />
              </el-form-item>
            </el-form>
            <el-empty v-else description="无模板数据" />
          </el-card>
          <el-card shadow="never" class="template-fields-card">
            <div slot="header" class="card-header">
              <span>字段配置</span>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-plus"
                :disabled="!editingTemplate"
                @click="addField"
              >
                添加字段
              </el-button>
            </div>
            <el-table
              :data="editingTemplate ? editingTemplate.fields || [] : []"
              empty-text="暂无字段"
              border
              size="small"
              height="320"
              row-key="id"
            >
              <el-table-column prop="label" label="字段名称" min-width="140">
                <template slot-scope="scope">
                  <span>{{ scope.row.label }}</span>
                  <el-tag
                    v-if="scope.row.type === 'group'"
                    type="info"
                    size="mini"
                    class="ml-6"
                  >分组</el-tag>
                  <el-tag
                    v-else-if="scope.row.type === 'list'"
                    type="success"
                    size="mini"
                    class="ml-6"
                  >列表</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="code" label="字段编码" width="140">
                <template slot-scope="scope">
                  <span v-if="scope.row.code">{{ scope.row.code }}</span>
                  <span v-else class="text-muted">--</span>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="类型" width="140">
                <template slot-scope="scope">
                  {{ fieldTypeLabel(scope.row.type) }}
                  <span v-if="scope.row.type === 'group'">
                    ({{ (scope.row.children && scope.row.children.length) || 0 }} 子字段)
                  </span>
                  <span v-else-if="scope.row.type === 'list'">
                    ({{ (scope.row.children && scope.row.children.length) || 0 }} 项)
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="required" label="必填" width="70">
                <template slot-scope="scope">
                  <el-tag
                    v-if="!['group', 'list'].includes(scope.row.type)"
                    :type="scope.row.required ? 'danger' : 'info'"
                    size="mini"
                  >
                    {{ scope.row.required ? '是' : '否' }}
                  </el-tag>
                  <span v-else class="text-muted">--</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="mini"
                    @click="editField(scope.row, editingTemplate.fields)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click="removeField(scope.row, editingTemplate.fields)"
                  >
                    删除
                  </el-button>
                  <el-button
                    v-if="['group', 'list'].includes(scope.row.type)"
                    type="text"
                    size="mini"
                    @click="openChildDialog(scope.row)"
                  >
                    配置子字段
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never">
            <div slot="header" class="card-header">
              <span>模板预览</span>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-check"
                :disabled="!editingTemplate"
                @click="saveTemplate"
              >
                保存模板
              </el-button>
            </div>
            <div class="preview-area" v-if="editingTemplate">
              <p class="preview-title">{{ editingTemplate.name }}</p>
              <el-form label-width="110px" size="small">
                <div v-for="(item, index) in previewFlatFields" :key="index">
                  <!-- Group header -->
                  <el-divider v-if="item.isGroupHeader">
                    {{ item.labelDisplay }}
                    <span class="preview-divider-tip">分组</span>
                  </el-divider>
                  
                  <!-- List header with table -->
                  <div v-else-if="item.isListHeader" class="list-preview-section">
                    <el-divider>
                      {{ item.labelDisplay }}
                      <span class="preview-divider-tip">列表</span>
                    </el-divider>
                    <el-table
                      :data="[{}, {}]"
                      border
                      size="small"
                      style="margin-top: 12px"
                    >
                      <el-table-column
                        v-for="child in item.listChildren"
                        :key="child.code || child.id"
                        :prop="child.code"
                        :label="child.label"
                        min-width="120"
                      >
                        <template slot-scope="scope">
                          <el-select
                            v-if="child.type === 'select'"
                            disabled
                            size="mini"
                            placeholder="示例"
                            style="width: 100%"
                          >
                            <el-option
                              v-for="opt in child.options || []"
                              :key="opt.value"
                              :label="opt.label"
                              :value="opt.value"
                            />
                          </el-select>
                          <el-input-number
                            v-else-if="child.type === 'number'"
                            disabled
                            size="mini"
                            style="width: 100%"
                          />
                          <el-date-picker
                            v-else-if="child.type === 'date'"
                            disabled
                            type="date"
                            size="mini"
                            placeholder="示例"
                            style="width: 100%"
                          />
                          <el-input
                            v-else
                            disabled
                            size="mini"
                            :type="child.type === 'textarea' ? 'textarea' : 'text'"
                            :rows="child.type === 'textarea' ? 2 : 1"
                            placeholder="示例输入"
                          />
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  
                  <!-- Regular form items (for groups and top-level fields) -->
                  <el-form-item
                    v-else-if="item.parentType !== 'list'"
                    :label="item.labelDisplay"
                  >
                    <template v-if="item.type === 'select'">
                      <el-select
                        disabled
                        style="width: 100%"
                        placeholder="示例输入"
                      >
                        <el-option
                          v-for="option in item.options || []"
                          :key="option.value"
                          :label="option.label"
                          :value="option.value"
                        />
                      </el-select>
                    </template>
                    <el-input-number
                      v-else-if="item.type === 'number'"
                      disabled
                      style="width: 100%"
                    />
                    <el-date-picker
                      v-else-if="item.type === 'date'"
                      disabled
                      type="date"
                      placeholder="示例输入"
                      style="width: 100%"
                    />
                    <el-input
                      v-else-if="['text', 'textarea'].includes(item.type)"
                      disabled
                      :type="item.type === 'textarea' ? 'textarea' : 'text'"
                      :rows="item.type === 'textarea' ? 3 : 1"
                      placeholder="示例输入"
                    />
                    <span v-else class="text-muted">未知字段类型: {{ item.type }}</span>
                  </el-form-item>
                </div>
              </el-form>
            </div>
            <el-empty v-else description="暂无模板进行预览" />
          </el-card>
        </el-col>
      </el-row>

      <el-dialog
        :visible.sync="fieldEditDialogVisible"
        :title="fieldForm.id ? '编辑字段' : '新增字段'"
        width="640px"
        append-to-body
        @close="handleFieldDialogClose"
      >
        <el-form ref="fieldFormRef" :model="fieldForm" :rules="fieldRules" label-width="110px">
          <el-form-item label="字段名称" prop="label">
            <el-input v-model="fieldForm.label" />
          </el-form-item>
          <el-form-item v-if="fieldForm.type !== 'group'" label="字段编码" prop="code">
            <el-input v-model="fieldForm.code" />
          </el-form-item>
          <el-form-item label="字段类型" prop="type">
            <el-select v-model="fieldForm.type" placeholder="请选择字段类型">
              <el-option label="文本" value="text" />
              <el-option label="文本域" value="textarea" />
              <el-option label="数字" value="number" />
              <el-option label="日期" value="date" />
              <el-option label="下拉选择" value="select" />
              <el-option label="字段分组" value="group" />
              <el-option label="列表" value="list" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="!['group', 'list'].includes(fieldForm.type)" label="必填">
            <el-switch v-model="fieldForm.required" />
          </el-form-item>
          <el-form-item v-if="!['group', 'list'].includes(fieldForm.type)" label="占位提示">
            <el-input v-model="fieldForm.placeholder" />
          </el-form-item>
          <el-form-item v-if="!['group', 'list'].includes(fieldForm.type)" label="数据来源">
            <el-select v-model="fieldForm.source.type" placeholder="请选择来源">
              <el-option label="人工填写" value="manual" />
              <el-option label="事件字段" value="path" />
              <el-option label="计算字段" value="expression" />
            </el-select>
            <el-input
              v-if="fieldForm.source.type !== 'manual'"
              v-model="fieldForm.source.path"
              class="mt-8"
              placeholder="例如 dispatchTask.incident.summary"
            />
          </el-form-item>
          <el-form-item v-if="fieldForm.type === 'list'" label="列表数据源">
            <el-input
              v-model="fieldForm.listConfig.sourcePath"
              placeholder="例如 incident.casualties"
            />
          </el-form-item>
          <el-form-item v-if="fieldForm.type === 'select'" label="选项配置">
            <div v-for="(option, index) in fieldForm.options" :key="index" class="option-row">
              <el-input v-model="option.label" placeholder="显示值" size="small" />
              <el-input v-model="option.value" placeholder="实际值" size="small" />
              <el-button
                type="text"
                icon="el-icon-delete"
                @click="removeOption(index)"
              />
            </div>
            <el-button type="text" icon="el-icon-plus" @click="addOption">添加选项</el-button>
          </el-form-item>
          <el-alert
            v-if="['group', 'list'].includes(fieldForm.type)"
            type="info"
            show-icon
            :closable="false"
            title="保存后可在子字段配置中维护具体字段"
          />
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="fieldEditDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveField">保 存</el-button>
        </span>
      </el-dialog>

      <el-dialog
        :visible.sync="childDialogVisible"
        width="720px"
        append-to-body
        title="子字段配置"
        @close="handleChildDialogClose"
      >
        <div v-if="childEditingField">
          <div class="child-dialog-header">
            <div>
              <p class="child-dialog-title">{{ childEditingField.label }}</p>
              <p class="child-dialog-desc">
                {{ childEditingField.type === 'group' ? '字段分组' : '列表字段' }}
              </p>
            </div>
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="addChildField">
              添加子字段
            </el-button>
          </div>
          <el-table
            :data="childEditingField.children || []"
            border
            size="small"
            row-key="id"
            empty-text="暂无子字段"
          >
            <el-table-column prop="label" label="字段名称" />
            <el-table-column prop="code" label="字段编码" width="160">
              <template slot-scope="scope">
                <span v-if="scope.row.code">{{ scope.row.code }}</span>
                <span v-else class="text-muted">--</span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="140">
              <template slot-scope="scope">
                {{ fieldTypeLabel(scope.row.type) }}
              </template>
            </el-table-column>
            <el-table-column prop="required" label="必填" width="90">
              <template slot-scope="scope">
                <el-tag
                  v-if="!['group', 'list'].includes(scope.row.type)"
                  :type="scope.row.required ? 'danger' : 'info'"
                  size="mini"
                >
                  {{ scope.row.required ? '是' : '否' }}
                </el-tag>
                <span v-else class="text-muted">--</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="editField(scope.row, childEditingField.children)"
                >
                  编辑
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="removeField(scope.row, childEditingField.children)"
                >
                  删除
                </el-button>
                <el-button
                  v-if="['group', 'list'].includes(scope.row.type)"
                  type="text"
                  size="mini"
                  @click="openChildDialog(scope.row)"
                >
                  子字段
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-empty v-else description="未选择子字段目标" />
      </el-dialog>

      <span slot="footer" class="dialog-footer">
        <el-button @click="configDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveTemplate">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listTemplates, getTemplate, addTemplate, updateTemplate, removeTemplates } from '@/api/emergency/reportTemplate'
import { toTemplateFieldArray } from '@/utils/reportTemplateFields'

export default {
  name: 'ReportTemplateConfig',
  data() {
    return {
      loading: false,
      templates: [],
      currentTemplate: null,
      configDialogVisible: false,
      editingTemplate: null,
      templateRules: {
        name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }]
      },
      fieldEditDialogVisible: false,
      childDialogVisible: false,
      childEditingField: null,
      fieldTargetList: null,
      fieldForm: {
        id: null,
        label: '',
        code: '',
        type: 'text',
        required: true,
        placeholder: '',
        options: [],
        children: [],
        source: {
          type: 'manual',
          path: ''
        },
        listConfig: {
          sourcePath: ''
        }
      }
    }
  },
  created() {
    this.fetchTemplates()
  },
  computed: {
    previewFlatFields() {
      if (!this.editingTemplate || !this.editingTemplate.fields) return []
      const walk = (fields = [], prefix = '', parentType = null) => {
        const result = []
        fields.forEach(field => {
          if (field.type === 'group') {
            // Group: show header, then children as form items
            const display = prefix ? `${prefix} / ${field.label}` : field.label
            result.push({
              ...field,
              labelDisplay: display,
              isGroupHeader: true
            })
            result.push(...walk(field.children || [], display, 'group'))
          } else if (field.type === 'list') {
            // List: show header, then render as table
            const display = prefix ? `${prefix} / ${field.label}` : field.label
            result.push({
              ...field,
              labelDisplay: display,
              isListHeader: true,
              listChildren: field.children || [] // Preserve children for table columns
            })
          } else {
            // Regular field
            const display = prefix ? `${prefix} / ${field.label}` : field.label
            result.push({
              ...field,
              labelDisplay: display,
              type: field.type || 'text',
              parentType: parentType // Track if inside group or list
            })
          }
        })
        return result
      }
      return walk(this.editingTemplate.fields)
    },
    fieldRules() {
      const vm = this
      return {
        label: [{ required: true, message: '请输入字段名称', trigger: 'blur' }],
        code: [{
          validator(rule, value, callback) {
            if (vm.fieldForm.type === 'group') {
              return callback()
            }
            if (!value) {
              return callback(new Error('请输入字段编码'))
            }
            callback()
          },
          trigger: 'blur'
        }],
        type: [{ required: true, message: '请选择字段类型', trigger: 'change' }]
      }
    }
  },
  methods: {
    normalizeField(field = {}) {
      return {
        id: field.id || null,
        label: field.label || '',
        code: field.code || '',
        type: field.type || 'text',
        required: typeof field.required === 'boolean' ? field.required : true,
        placeholder: field.placeholder || '',
        options: Array.isArray(field.options) ? field.options : [],
        children: Array.isArray(field.children) ? field.children : [],
        source: {
          type: (field.source && field.source.type) || 'manual',
          path: (field.source && field.source.path) || ''
        },
        listConfig: {
          sourcePath: (field.listConfig && field.listConfig.sourcePath) || ''
        }
      }
    },
    createEmptyField() {
      return this.normalizeField({})
    },
    async fetchTemplates() {
      this.loading = true
      try {
        const response = await listTemplates({})
        if (response.code === 200) {
          this.templates = response.rows || response.data || []
          if (this.templates.length > 0) {
            this.currentTemplate = this.templates[0]
          }
        } else {
          this.$message.error(response.msg || '加载模板列表失败')
        }
      } catch (error) {
        this.$message.error('加载模板列表失败')
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    handleTemplateSelect(template) {
      this.currentTemplate = template
    },
    openTemplateDialog() {
      this.editingTemplate = { 
        id: null, 
        name: '', 
        description: '', 
        fields: [] 
      }
      this.configDialogVisible = true
      this.$nextTick(() => {
        this.$refs.templateForm && this.$refs.templateForm.clearValidate()
      })
    },
    async editTemplate(template) {
      try {
        const response = await getTemplate(template.id)
        if (response.code === 200) {
          this.editingTemplate = JSON.parse(JSON.stringify(response.data))
          this.$set(
            this.editingTemplate,
            'fields',
            toTemplateFieldArray(this.editingTemplate.fields)
          )
          this.configDialogVisible = true
          this.$nextTick(() => {
            this.$refs.templateForm && this.$refs.templateForm.clearValidate()
          })
        } else {
          this.$message.error(response.msg || '加载模板详情失败')
        }
      } catch (error) {
        this.$message.error('加载模板详情失败')
        console.error(error)
      }
    },
    async saveTemplate() {
      if (!this.editingTemplate) return
      this.$refs.templateForm.validate(async (valid) => {
        if (!valid) return
        try {
          let response
          if (this.editingTemplate.id) {
            // Update
            response = await updateTemplate(this.editingTemplate.id, this.editingTemplate)
          } else {
            // Create
            response = await addTemplate(this.editingTemplate)
          }
          if (response.code === 200) {
            this.$message.success('模板已保存')
            this.configDialogVisible = false
            this.editingTemplate = null
            await this.fetchTemplates() // Reload list
          } else {
            this.$message.error(response.msg || '保存失败')
          }
        } catch (error) {
          this.$message.error('保存模板失败')
          console.error(error)
        }
      })
    },
    removeTemplate(template) {
      this.$confirm('确认删除模板 "' + template.name + '"?', '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          const response = await removeTemplates([template.id])
          if (response.code === 200) {
            this.$message.success('删除成功')
            await this.fetchTemplates() // Reload list
            if (this.currentTemplate && this.currentTemplate.id === template.id) {
              this.currentTemplate = this.templates[0] || null
            }
          } else {
            this.$message.error(response.msg || '删除失败')
          }
        } catch (error) {
          this.$message.error('删除模板失败')
          console.error(error)
        }
      }).catch(() => {})
    },
    addField(targetList) {
      if (!this.editingTemplate) {
        return this.$message.warning('请先选择模板')
      }
      const list = targetList || this.ensureTemplateFields()
      // Ensure it's an array before storing
      if (!Array.isArray(list)) {
        console.error('Invalid list provided to addField:', list)
        this.fieldTargetList = this.ensureTemplateFields()
      } else {
        this.fieldTargetList = list
      }
      this.fieldForm = this.createEmptyField()
      this.fieldEditDialogVisible = true
      this.$nextTick(() => {
        this.$refs.fieldFormRef && this.$refs.fieldFormRef.clearValidate()
      })
    },
    editField(field, targetList) {
      const list = targetList || this.ensureTemplateFields()
      // Ensure it's an array before storing
      if (!Array.isArray(list)) {
        console.error('Invalid list provided to editField:', list)
        this.fieldTargetList = this.ensureTemplateFields()
      } else {
        this.fieldTargetList = list
      }
      this.fieldForm = this.normalizeField(JSON.parse(JSON.stringify(field)))
      this.fieldEditDialogVisible = true
      this.$nextTick(() => {
        this.$refs.fieldFormRef && this.$refs.fieldFormRef.clearValidate()
      })
    },
    ensureTemplateFields() {
      if (!this.editingTemplate) {
        return []
      }
      if (!this.editingTemplate.fields || !Array.isArray(this.editingTemplate.fields)) {
        this.$set(this.editingTemplate, 'fields', [])
      }
      return this.editingTemplate.fields
    },
    saveField() {
      if (!this.editingTemplate) return
      // Capture the target list BEFORE validation to prevent it from being overwritten
      const targetList = this.fieldTargetList || this.ensureTemplateFields()
      if (!targetList || !Array.isArray(targetList)) {
        console.error('Invalid target list:', targetList)
        this.$message.error('字段列表初始化错误')
        return
      }
      
      this.$refs.fieldFormRef.validate(valid => {
        if (!valid) return
        // Use the captured reference, not this.fieldTargetList which might be overwritten
        const list = targetList
        const payload = this.normalizeField(JSON.parse(JSON.stringify(this.fieldForm)))
        if (this.fieldForm.id) {
          const index = list.findIndex(item => item.id === this.fieldForm.id)
          if (index > -1) {
            this.$set(list, index, payload)
          }
        } else {
          payload.id = Date.now()
          list.push(payload)
        }
        this.fieldEditDialogVisible = false
        this.fieldTargetList = null
        this.$message.success('字段已保存（示例）')
      })
    },
    removeField(field, targetList) {
      const list = targetList || (this.editingTemplate ? this.editingTemplate.fields : null)
      if (!list) return
      this.$confirm('确认删除字段 "' + field.label + '"?', '提示', { type: 'warning' })
        .then(() => {
          const index = list.findIndex(item => item.id === field.id)
          if (index > -1) {
            list.splice(index, 1)
          }
        }).catch(() => {})
    },
    openChildDialog(field) {
      if (!field.children || !Array.isArray(field.children)) {
        this.$set(field, 'children', [])
      }
      this.childEditingField = field
      this.childDialogVisible = true
    },
    addChildField() {
      if (!this.childEditingField) return
      if (!this.childEditingField.children || !Array.isArray(this.childEditingField.children)) {
        this.$set(this.childEditingField, 'children', [])
      }
      this.addField(this.childEditingField.children)
    },
    addOption() {
      this.fieldForm.options = this.fieldForm.options || []
      this.fieldForm.options.push({ label: '', value: '' })
    },
    removeOption(index) {
      this.fieldForm.options.splice(index, 1)
    },
    fieldTypeLabel(type) {
      const map = {
        text: '文本',
        textarea: '文本域',
        number: '数字',
        date: '日期',
        select: '下拉',
        group: '分组',
        list: '列表'
      }
      return map[type] || type
    },
    handleConfigClose() {
      this.editingTemplate = null
      this.$nextTick(() => {
        this.$refs.templateForm && this.$refs.templateForm.resetFields()
      })
    },
    handleFieldDialogClose() {
      this.fieldTargetList = null
      this.fieldForm = this.createEmptyField()
      this.$nextTick(() => {
        this.$refs.fieldFormRef && this.$refs.fieldFormRef.resetFields()
      })
    },
    handleChildDialogClose() {
      this.childDialogVisible = false
      this.childEditingField = null
    }
  }
}
</script>

<style scoped>
.template-config-page {
  padding: 16px;
}
.template-card {
  margin-bottom: 16px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ml-6 {
  margin-left: 6px;
}
.mt-8 {
  margin-top: 8px;
}
.text-muted {
  color: #999;
}
.template-fields-card {
  margin-top: 16px;
}
.detail-row {
  margin-top: 8px;
}
.option-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.preview-area {
  min-height: 320px;
}
.preview-title {
  font-weight: 600;
  margin-bottom: 12px;
}
.preview-divider-tip {
  margin-left: 8px;
  font-size: 12px;
  color: #999;
}
.list-preview-section {
  margin-bottom: 16px;
}
.child-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.child-dialog-title {
  font-weight: 600;
  margin: 0;
}
.child-dialog-desc {
  margin: 4px 0 0;
  color: #909399;
  font-size: 12px;
}
</style>