<template>
  <el-drawer
    v-model="drawerData.drawerShow"
    title="配置交付文档"
    direction="rtl"
    :before-close="drawerData.handleClose"
  >
    <el-tabs class="demo-tabs" stretch>
      <el-tab-pane v-for="(item, index) in list" :key="index">
        <template #label>
          <span class="custom-tabs-label">
            <span>{{item.label}}</span>
          </span>
          <span class="count" v-if="item.children.length ">{{item.children.length}}</span>
        </template>
        <el-descriptions
          v-for="(child, childIndex) in item.children"
          :key="childIndex"
          class="margin-top"
          :title="child.name"
          :column="3"
          :size="size"
          border
        >
          <template #extra>
            <el-button type="primary" size="small" @click="drawerData.onAdd(index)">编辑</el-button>
            <el-button type="primary" size="small" @click="drawerData.delete(childIndex)">删除</el-button>
            <el-button type="primary" size="small" @click="drawerData.editRole">权限配置</el-button>
            <el-button type="primary" size="small">审批路径</el-button>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                必须上传
              </div>
            </template>
            {{child.isUpload}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                必须审批
              </div>
            </template>
            {{child.isComment}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                默认文件夹
              </div>
            </template>
            {{child.folder}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                评审方式
              </div>
            </template>
            {{child.isComment}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                秘级
              </div>
            </template>
            {{child.level}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                文档编号
              </div>
            </template>
            {{child.code}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                前置交付文档
              </div>
            </template>
            {{ child.beforeFolder}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                文档说明
              </div>
            </template>
            {{ child.desc }}
          </el-descriptions-item>
        </el-descriptions>
        <el-empty description="暂无文档" v-if="item.children.length === 0" />
        <el-button type="primary" style="margin-top: 10px" size="small" @click="drawerData.onAdd(index)">添加交付文档清单</el-button>
        <el-button type="primary" style="margin-top: 10px" size="small">设置排序</el-button>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
  <el-dialog v-model="dialogData.visible" title="交付文档">
    <el-form :model="dialogData.formData" :rules="dialogData.rules" label-width="120px">
      <el-form-item
        v-for="(item, index) in dialogData.formItem"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      >
        <custom-form-item
          v-model:modValue="dialogData.formData[item.prop]"
          :type="item.type"
          :inputType="item.inputValue"
          :options="list"
          :selectProp="item.selectProp"
        >
          <template v-slot:radios>
            <el-radio :label="0">机密</el-radio>
            <el-radio :label="1">秘密</el-radio>
            <el-radio :label="2">内部公开</el-radio>
            <el-radio :label="3">公开</el-radio>
          </template>
        </custom-form-item>
      </el-form-item>
    </el-form>
     <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogData.visible = false">取消</el-button>
        <el-button type="primary" @click="dialogData.onConfirm"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { reactive } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { FormItem } from '@/table/type'
export default {
  name: 'ExpectDoc',
  props: {
    list: {
      type: Array as any,
      default: () => {
        return []
      }
    }
  },
  setup(props) {
    const drawerData = reactive({
      drawerShow: false,
      index: 0,
      show: () => {
        drawerData.drawerShow = true
      },
      onAdd: (index: number) => {
        drawerData.index = index
        dialogData.visible = true
      },
      delete: (index: number) => {
        ElMessageBox.confirm('确定删除吗？', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        })
      },
      editRole: () => {
        ElMessage({
          type: 'error',
          message: '部门功能未开发，暂无法配置权限',
        })
      }
    })

    const formItem: FormItem[] = [
      {
        label: '交付文档名称',
        prop: 'name',
        type: 'input'
      },
      {
        label: '默认存放文件夹',
        prop: 'folder',
        type: 'input'
      },
      {
        label: '所属阶段',
        prop: 'pharse',
        type: 'select',
        selectProp: {
          value: 'id',
          label: 'label'
        }
      },
      {
        label: '文档分类',
        prop: 'type',
        type: 'select',
        selectProp: {
          value: 'id',
          label: 'label'
        }
      },
      {
        label: '文档编号',
        prop: 'code',
        type: 'input'
      },
      {
        label: '评审方式',
        prop: 'commentType',
        type: 'select',
        selectProp: {
          value: 'id',
          label: 'label'
        }
      },
      {
        label: '密级',
        prop: 'level',
        type: 'radio'
      },
      {
        label: '必须上传',
        prop: 'isUpload',
        type: 'switch'
      },
      {
        label: '必须审批',
        prop: 'isComment',
        type: 'switch'
      },
      {
        label: '前置交付文档',
        prop: 'beforeFolder',
        type: 'select',
        selectProp: {
          value: 'id',
          label: 'label'
        }
      },
      {
        label: '文档说明',
        prop: 'desc',
        type: 'input',
        inputType: 'textarea'
      },
    ]

    const dialogData = reactive({
      visible: false,
      formItem: formItem,
      formData: {
        id: '',
        name: '',
        folder: '',
        pharse: '',
        type: '',
        code: '',
        commentType: '',
        level: 0,
        isUpload: true,
        isComment: true,
        beforeFolder: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入交付文档名称', trigger: 'blur' }
        ],
        commentType: [
          { required: true, message: '请输入选择评审类型', trigger: 'blur' }
        ]
      },
      onConfirm: () => {
        props.list[drawerData.index].children.push(dialogData.formData)
        dialogData.visible = false
      }
    })
    return { drawerData, dialogData }
  }
}
</script>

<style lang="scss" scoped>
.count{
  position: absolute;
  top: 0px; right: 0;
  width: 20px;
  height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.margin-top{
  margin-top: 20px;
}
</style>
