<template>
    <!--搜索框 开始-->
    <el-form class="list-search-container" size="small" :inline="true">
        <el-form-item label="客户名称：">
            <el-input v-model.trim="query.name" size="small" type="text" placeholder="客户名称" :clearable="true"
                style="width: 150px;" />
        </el-form-item>
        <el-form-item>
            <el-button type="success" icon="Search" @click="handleSearch">搜索</el-button>
            <el-button class="write-button" icon="RefreshRight" size="small" @click="handleSearch('clear')">重置</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
import { getToken } from '@/utils/auth'
import { getProject, saveProject } from "@/api/business/project"
import Person from '@/views/dialog/Person.vue'
const { proxy } = getCurrentInstance()
/** 父组件传参 */
const props = defineProps({
    getList: {
        type: Function,
        default: () => { }
    }
})
const { getList } = toRefs(props)
/** 字典数组区 */
const { develop_type } = proxy.useDict('develop_type')
/** 表单抽屉 页变量 */
const title = ref("")
const loading = ref(false)
const multiple = ref(true)
const visible = ref(false)
const editStatus = ref(false)
const isFullscreen = ref(false)
const addDetailNum = ref(1)
const currentMember = {}
const webHost = import.meta.env.VITE_APP_BASE_API
const setHeaders = {
    Authorization: getToken()
}
const data = reactive({
    form: {},
    rules: {
        name: [
            { required: true, message: "项目名称不能为空", trigger: "blur" }
        ],
        standard: [
            { required: true, message: "项目规格不能为空", trigger: "blur" }
        ],
        num: [
            { required: true, message: "项目数量不能为空", trigger: "blur" }
        ],
        sort: [
            { required: true, message: "排序不能为空", trigger: "blur" }
        ],
    }
});

const { form, rules } = toRefs(data);
/***********************  表单页方法 ****************************/

/** 抽屉打开 */
function open(id) {
    reset();
    visible.value = true;
    if (id) {
        getProject(id).then(response => {
            form.value = response.data;
            editStatus.value = false
            title.value = "修改项目信息"
        })
    } else {
        editStatus.value = true
        title.value = "添加项目信息"
    }
}

/**  取消按钮 */
function cancel() {
    visible.value = false;
    reset();
}

/** 表单重置 */
function reset() {
    form.value = {
        members: [],
        attaches: []
    };
    proxy.resetForm("projectRef");
}

/** 上传后方法处理 */
function uploadSuccess(res) {
    if (res.code == 200) {
        const newAttach = {
            name: res.data.name,
            url: res.data.url
        }
        form.value.attaches.push(newAttach)
    } else {
        proxy.$modal.msgError('上传失败' + res.msg)
    }
}

function handleDownLoad(url) {
    window.open(webHost + url)
}

// 全屏缩放
function handleScreen() {
    const dom = document.querySelector('.list-container > .el-drawer__wrapper > .el-overlay')
    isFullscreen.value = !isFullscreen.value
    dom.style.position = isFullscreen.value ? 'fixed' : 'absolute'
}

function getForm() {
    loading.value = true
    getProject(form.value.id).then(response => {
        loading.value = false
        form.value = response.data
    })
}

/** 提交保存 */
function submitForm() {
    proxy.$refs["projectRef"].validate(valid => {
        if (valid) {
            saveProject(form.value).then(response => {
                proxy.$modal.msgSuccess("保存成功!");
                editStatus.value = false
                form.value = response.data
                getList.value()
            })
        }
    })
}

/** 添加从表 */
function handleAdd() {
    for (var i = 0; i < addDetailNum.value; i++) {
        form.value.members.push({})
    }
}


/** 删除从表 */
function handleDel(index) {
    proxy.$modal
        .confirm('确定删除?')
        .then(() => {
            form.value.members.splice(index, 1)
        })
        .catch(() => {
            proxy.$modal.msg('已取消删除')
        })
}

function handleDelAttach(index) {
    proxy.$modal
        .confirm('确定删除?')
        .then(() => {
            form.value.attaches.splice(index, 1)
        })
        .catch(() => {
            proxy.$modal.msg('已取消删除')
        })
}

/** 单选添加 */
function handleDialogOpen(person) {
    multiple.value = false
    currentMember.value = person
    proxy.$refs.personRef.open()
}

/** 多选添加 */
function handleAddBatch() {
    multiple.value = true
    proxy.$refs.personRef.open()
}


function handleSingleSelected(person) {
    console.log('单选带回', person)
    if (form.value.members.findIndex((item) => item.personId === person.id) === -1) {
        currentMember.value.personId = person.id
        currentMember.value.name = person.name
        currentMember.value.code = person.code
        currentMember.value.gender = person.gender
        currentMember.value.age = person.age
        currentMember.value.phone = person.phone
    } else {
        proxy.$modal.msgError(person.name + '已存在,请勿重复添加！')
    }
}

function handleMultipleSelected(selection) {
    console.log('多选回带', selection)
    for (var i = 0; i < selection.length; ++i) {
        const newPerson = {}
        if (form.value.members.findIndex((item) => item.personId === selection[i].id) === -1) {
            newPerson.personId = selection[i].id
            newPerson.name = selection[i].name
            newPerson.code = selection[i].code
            newPerson.gender = selection[i].gender
            newPerson.age = selection[i].age
            newPerson.phone = selection[i].phone
            form.value.members.push(newPerson)
        } else {
            proxy.$modal.msgError(selection[i].name + '已存在,请勿重复添加！')
        }
    }
}


// 暴露给父组件的方法
defineExpose({
    open
})
</script>
<style>
.companylist .el-badge__content.el-badge__content--undefined.is-fixed {
    top: 0px;
    right: -5px;
}

.companylist .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: rgb(64, 158, 255);
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(64, 158, 255) rgba(0, 0, 0, 0);
    border-style: none none solid none;
    border-width: 0 0 3px 0;
    box-shadow: none;
}

.companylist .el-radio-button__inner {
    border: none;
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
    border-style: none none solid none;
    border-width: 0 0 3px 0;
    box-shadow: none;
}

.companylist .el-radio-button:first-child .el-radio-button__inner {
    border-left: none;
    border-radius: 0 0 0 0;
}

.companylist .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0 0 0 0;
}

.companylist .badge-radio .el-badge__content.el-badge__content--undefined.is-fixed {
    top: -8px;
    right: 10px;
}

.custom-tooltip .el-tooltip__popper {
    width: 200px;
    /* 设置 Tooltip 的宽度 */
}

.el-upload {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: 0;
    margin-left: 2px;
    margin-right: 2px;
}

/* .input-icon {
  background: url('../../assets/layout/input-icon.png') center center no-repeat;
  background-size: 20px;
}
.export-icon {
  background: url('../../assets/layout/export-icon.png') center center no-repeat;
  background-size: 20px;
} */
</style>