<template>
  <div style="height: 330px">
    <el-tabs type="border-card">
      <el-tab-pane label="新增与更新">
        <div style="height: 250px">
          <el-alert
            :title="prompt"
            type="info"
          />
          <el-form class="mt-7">
            <el-form-item
              label="项目状态："
              size="large"
            >
              <el-input
                v-model="projectState.name"
                placeholder="请输入项目状态"
                style="max-width: 600px"
                size="large"
                clearable
              >
                <template #append>
                  <el-select
                    v-model="projectState.id"
                    placeholder="项目状态"
                    style="width: 115px"
                    clearable
                  >
                    <el-option
                      v-for="item in data.stateList"
                      :key="item.ID"
                      :label="item.name"
                      :value="item.ID"
                    />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item
              label="文件类型："
              size="large"
            >
              <el-input
                v-model="fileType.name"
                style="max-width: 600px"
                placeholder="请输入文件类型"
                size="large"
                clearable
              >
                <template #append>
                  <el-select
                    v-model="fileType.id"
                    placeholder="文件类型"
                    style="width: 115px"
                    clearable
                  >
                    <el-option
                      v-for="item in data.typeList"
                      :key="item.ID"
                      :label="item.name"
                      :value="item.ID"
                    />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
          <el-row
            justify="end"
            align="middle"
            class="mt-10"
          >
            <el-button
              :icon="Edit"
              size="large"
              @click="itemEdit"
            >编辑</el-button>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="删除">
        <div style="height: 250px">
          <el-row
            align="middle"
            justify="center"
            class="mt-5"
          >
            <el-col :span="3">
              <span>项目状态：</span>
            </el-col>
            <el-col :span="11">
              <el-select
                v-model="deleteState.id"
                placeholder="请选择项目状态"
                style="width: 100%"
                clearable
                size="large"
              >
                <el-option
                  v-for="item in data.stateList"
                  :key="item.ID"
                  :label="item.name"
                  :value="item.ID"
                />
              </el-select>
            </el-col>
            <el-col
              :span="4"
              :offset="1"
            >
              <el-button
                :icon="Delete"
                size="large"
                @click="omitState"
              >删除</el-button>
            </el-col>
          </el-row>
          <el-row
            align="middle"
            justify="center"
            class="mt-10"
          >
            <el-col :span="3">
              <span>文件类型：</span>
            </el-col>
            <el-col :span="11">
              <el-select
                v-model="deleteType.id"
                placeholder="请选择文件类型"
                style="width: 100%"
                clearable
                size="large"
              >
                <el-option
                  v-for="item in data.typeList"
                  :key="item.ID"
                  :label="item.name"
                  :value="item.ID"
                />
              </el-select>
            </el-col>
            <el-col
              :span="4"
              :offset="1"
            >
              <el-button
                :icon="Delete"
                size="large"
                @click="omitType"
              >删除</el-button>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
defineOptions({
  name: 'OptionEdit'
})
import { reactive, ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { editorData } from '@/pinia/project/project'
import { createProjectState, updateProjectState, deleteProjectState } from '@/api/project'
import { createFileType, updateFileType, deleteFileType } from '@/api/file'
import { ElMessage } from 'element-plus'

const data = editorData()
// 数据

const prompt = '注意：不选择类型或状态默认为添加,选择后默认为更新'
const projectState = reactive({
  id: '',
  name: ''
})

const fileType = reactive({
  id: '',
  name: ''
})

const deleteState = reactive({
  id: ''
})

const deleteType = reactive({
  id: ''
})

const currentState = ref('')

const currentType = ref('')

// 方法

// 新增与更新
const itemEdit = () => {
  if (projectState.name.length !== 0) {
    if (typeof projectState.id !== 'number') {
      const createState = { name: projectState.name }
      createProjectState(createState).then(res => {
        if (res.code === 0) {
          ElMessage({
            message: '添加项目状态成功',
            type: 'success',
            showClose: true,
            duration: 2000
          })
          data.getStateList()
        }
      })
    } else {
      updateProjectState(projectState).then(res => {
        if (res.code === 0) {
          ElMessage({
            message: '更新项目状态成功',
            type: 'success',
            showClose: true,
            duration: 2000
          })
          data.getStateList()
        }
      })
    }
    projectState.id = ''
    projectState.name = ''
  }
  if (fileType.name.length !== 0) {
    if (typeof fileType.id !== 'number') {
      const createType = { name: fileType.name }
      createFileType(createType).then(res => {
        if (res.code === 0) {
          ElMessage({
            message: '添加文件类型成功',
            type: 'success',
            showClose: true,
            duration: 2000
          })
          data.getTypeList()
        }
      })
    } else {
      updateFileType(fileType).then(res => {
        if (res.code === 0) {
          ElMessage({
            message: '更新文件类型成功',
            type: 'success',
            showClose: true,
            duration: 2000
          })
          data.getTypeList()
        }
      })
    }
    fileType.id = ''
    fileType.name = ''
  }
}

// 删除
const omitState = () => {
  const stateList = data.stateList
  if (typeof deleteState.id === 'number') {
    stateList.forEach(item => {
      if (item.ID === deleteState.id) {
        currentState.value = item.name
      }
    })
    deleteProjectState(deleteState).then(res => {
      if (res.code === 0) {
        ElMessage({
          message: `已删除项目状态：${currentState.value}`,
          type: 'success',
          showClose: true,
          duration: 2000
        })
        deleteState.id = ''
        data.getStateList()
      }
    })
  } else {
    ElMessage({
      message: '请选择一个项目状态',
      type: 'error',
      showClose: true,
      duration: 2000
    })
  }
}
const omitType = () => {
  const typeList = data.typeList
  if (typeof deleteType.id === 'number') {
    typeList.forEach(item => {
      if (item.ID === deleteType.id) {
        currentType.value = item.name
      }
    })
    deleteFileType(deleteType).then(res => {
      if (res.code === 0) {
        ElMessage({
          message: `已删除文件类型：${currentType.value}`,
          type: 'success',
          showClose: true,
          duration: 2000
        })
        deleteType.id = ''
        data.getTypeList()
      }
    })
  } else {
    ElMessage({
      message: '请选择一个文件类型',
      type: 'error',
      showClose: true,
      duration: 2000
    })
  }
}
</script>

<style scoped lang="scss">

</style>
