<template>
  <div>
    <el-button type="primary" @click="handleClick">打开对话框</el-button>
    <el-button type="primary" @click="handleRecord">待优化点</el-button>
    <dee-dialog :dialog-visible="dialogVisible" @handleClose="handleClose">
      <dee-card :id="id" :name="cardName" :shape="shape" :icon="icon" :show="show" :shadow="shadow">
        <dee-step :steps="steps" :height="height" />
      </dee-card>
    </dee-dialog>
    <dee-dialog :dialog-visible="reDialogVisible" @handleClose="reDialogVisible=false">
      <p>1、step组件中active应该修改为属性传值,当前处理哪一步应该由父组件决定</p>
      <p>2、step组件中布局形式应该从父组件获取,step组件可以给一个默认值,需求不同布局方式可能存在差异</p>
      <p>3、dialog组件中可以增加确认和取消按钮,可以通过状态控制是否渲染,父组件只监听对应的事件处理业务逻辑</p>
      <p>4、dialog组件中增加自定义按钮,对于特殊业务场景增加其它按钮进行业务逻辑处理</p>
      <p>5、dialog组件增加可拖拽功能</p>
      <p>6、将pagination默认集成到table中,通过状态控制是否渲染,默认可以是渲染状态</p>
      <p>7、pagination的pageSize和currentPage可以进行合并后通过一个事件触发,当前组件中共有四个方法</p>
      <p>8、接口调用不建议通过vuex进行跳转,如果有数据需要保存到vuex中,可以在获取到数据后通过commit进行vuex中的数据状态更新</p>
      <p>9、form中的数据建议直接通过一个数组控制,减少数据结构的复杂性,便于操作,目前结构是formData:[{split,data}],form结构是在data中进行控制</p>
      <p>10、form中建议增加提交和取消按钮,其它按钮可以通过自定义的方式进行添加,和第3,4条类似</p>
    </dee-dialog>
  </div>
</template>

<script>
export default {
  name: 'Test',
  components: { },
  data() {
    return {
      dialogVisible: false,
      reDialogVisible: false,
      cardName: 'card名称',
      shape: 1,
      id: 1,
      icon: '',
      show: true,
      lock: true,
      shadow: true,
      height: '200px',
      steps: [{ title: '步骤一', description: '这是步骤一的描述' },
        { title: '步骤二', description: '这是步骤二描述' },
        { title: '步骤三', description: '这是步骤三的描述' }]
    }
  },
  methods: {
    handleClick() {
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleRecord() {
      this.reDialogVisible = true
    }
  }
}
</script>