<template>
   <el-dialog v-model="dialogData.visible" title="配置阶段">
    <el-table :data="master.templatePhases" style="width: 100%"  height="400px">
      <el-table-column label="阶段名称" width="400px">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-input v-model="scope.row.label" placeholder="Please input" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180px" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center; justify-content: center">
            <el-button type="danger" size="small" @click="dialogData.deletePharse(scope.$index)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex-center-h" style="margin-top: 10px">
      <el-input v-model="dialogData.addInput" placeholder="输入阶段名称" style="width: 300px">
        <template #prepend>
          <el-icon><Plus /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" style="margin-left: 10px" @click="dialogData.addPhases">新增</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import {  reactive } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
export default {
  name: 'TemplatePhases',
  props: {
    master: {
      type: Object,
      default: null
    }
  },
  setup(props, context) {
    const dialogData = reactive({
      visible: false,
      addInput: '',
      show: () => {
        dialogData.visible = true
      },
      addPhases: () => {
        if (!dialogData.addInput) {
          return false
        }
        props.master.templatePhases.push({
          children: [],
          data: null,
          displayShow: null,
          id: 1,
          isLeaf: true,
          label: dialogData.addInput,
          selected: false,
          text: '',
          title: '',
          value: '',
        })
        dialogData.addInput = ''
      },
      deletePharse: (index: number) => {
        ElMessageBox.confirm('确定删除吗？', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          props.master.templatePhases.splice(index, 1)
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        })
      }
    })
    return {
      dialogData
    }
  }
}
</script>

<style>

</style>