<template>
  <Mask :is-show="isShow" @close="isShow = false" title="添加子项目">
    <div style="display: flex">
      <el-form
          :model="form"
          :rules="{name: [{required: true, message: '请输入项目名称', trigger: 'blur'}]}"
          class="form"
          label-width="auto"
      >
        <el-form-item label="项目名称" prop="name">
          <el-input
              class="input"
              v-model="form.name"
              placeholder="请输入项目名称"
          />
        </el-form-item>
      </el-form>
    </div>
    <el-input v-model="search" placeholder="请输入搜索内容" style="width: 300px"></el-input>
    <el-button type="primary" @click="addProject">添加项目</el-button>
    <List :dataList="dataList" :search="search" ref="listRef" @selected="select"></List>
    <div class="page">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="size"
          :current-page="current_page"
          @current-change="current_page = $event"
      >
      </el-pagination>
      <div class="page_btn_list">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="close">取消</el-button>
        <el-button @click="deleteDetail">删除</el-button>
      </div>
    </div>
  </Mask>
  <Mask :is-show="isShowAdd" @close="isShowAdd = false" title="子项目列表">
    <ListChild @close="isShowAdd=false" @selected="selected"></ListChild>
  </Mask>
</template>
<script setup lang="ts">
import {nextTick, ref, defineExpose, defineProps} from 'vue'
import Mask from "@/components/common/Mask.vue";
import CloseBtn from "@/components/CloseBtn.vue";
import {post} from "@/utils/request.ts"
import {ElMessage} from "element-plus";
import List from "@/components/settings/List.vue";
import ListChild from "@/components/settings/ListChild.vue";

const props = defineProps({
  add: {
    type: Boolean,
    default: false
  }
})
const isShow = ref<any>(false)
const search = ref<any>('')
const current_page = ref<any>(1)
const size = ref<any>(20)
const total = ref<any>(0)
const dataList = ref<any>([])
const id = ref<any>('')
const init = (row: any) => {
  isShow.value = true
  id.value = row.id
  form.value.name = row.name
  if (row.itemJson) {
    dataList.value = JSON.parse(row.itemJson)
  }
}
const initData = () => {
  isShow.value = true
}
const emit = defineEmits(['close'])
const close = () => {
  isShow.value = false
  form.value = {name: '', ids: []}
  emit('close')
}

const form = ref<any>({name: '', ids: [], id: ''})
const save = () => {
  if (dataList.value) {
    dataList.value.forEach((item: any) => {
      form.value.ids.push(item.id)
    })
  } else {
    form.value.ids = []
  }
  if (id.value) {
    form.value.id = id.value
    post('item/group/save', {data: form.value}).then(() => {
      ElMessage.success('保存成功')
      close()
    })
  } else {
    post('item/group/save', {data: form.value}).then(() => {
      ElMessage.success('保存成功')
      close()
    })
  }
}
const addProject = () => {
  isShowAdd.value = true
}
const listRef = ref<any>('')
const selected = (e: any) => {
  dataList.value.push(...e)
}
const select = (e: any) => {
  dataList.value = dataList.value.filter((item: any) => item.id != e.id)
}
const isShowAdd = ref<any>(false)
const deleteDetail = () => {
  post('item/group/delete', {id: id.value}).then(() => {
    ElMessage.success('删除成功')
    close()
  })
}
defineExpose({init, initData})
</script>
<style scoped lang="scss">
.page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
</style>