<template>
    <!-- 寻源需求 -->
           <el-form
            :model="queryParams"
            ref="queryFormRef"
            :inline="true"
            size="default"
            label-width="0"
        >
            <!-- 表单搜索 -->
            <el-row>
                <el-col :span="6">
                    <el-form-item prop="contractName">
                        <el-input
                            v-model.trim="queryParams.contractName"
                            style="width: 100%"
                            clearable
                            placeholder="请输入合同名称"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="contractCode">
                        <el-input
                            v-model.trim="queryParams.contractCode"
                            style="width: 100%"
                            clearable
                            placeholder="请输入合同编号"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="createTime">
                        <el-date-picker
                            v-model="createTime"
                            type="daterange"
                            style="width: 100%"
                            range-separator="-"
                            value-format="YYYY-MM-DD"
                            start-placeholder="更新开始日期"
                            end-placeholder="更新结束日期"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                        <el-button class="primary-lease" type="primary" @click="getContractListData"
                            >查询</el-button
                        >
                        <el-button
                            class="primary-lease"
                            type="primary"
                            @click="onReset"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="18">
                    <el-form-item>
                        <el-button class="primary-lease" type="primary" @click="addContract"
                            >合同新建</el-button
                        >
                    </el-form-item>
                </el-col>
            </el-row>
    </el-form>

    <!-- 表格 -->
    <el-table
        :data="qualityLis"
        show-overflow-tooltip
        :header-cell-style="{
            background: '#00a288',
            color: '#fff',
        }"
    >
        <el-table-column align="center" label="合同编码">
            <template #default="{ row }">
                <a
                    style="color:blue; "
                >
                    {{ row.contractCode }}
                </a>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="contractName" label="合同名称" />
        <el-table-column align="center" prop="status" label="状态" >
            <template #default="{ row }">
            <el-switch
                v-model="row.status"
                active-value="0"
                inactive-value="1"
                @change="handleStatusChange(row)"
            ></el-switch>
            </template>
        </el-table-column>
            <el-table-column align="center" prop="qcTime" label="合同附件">
                <template #default="{ row }">
                    <a
                        :href="row.bmFileInfoList[0].fileUrl"
                        target="_blank"
                        style="color: #00a288; text-decoration: underline"
                        >查看</a
                    >
                </template>
            </el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间" />
        <el-table-column align="center" prop="updateTime" label="更新时间" />
        <el-table-column align="center" label="操作" :width="220">
            <template #default="{ row }">
                <el-button
                    text
                    size="small"
                    type="primary"
                    
                    @click="onContract(row, false)"
                >
                    编辑
                </el-button>
                <el-button
                    text
                    size="small"
                    type="primary"
                    @click="onDelete(row.id, true)"
                >
                    删除
                </el-button>
            </template>
        </el-table-column> 
    </el-table>

    <!-- <PagingComponent
        @getList="getLeaseListData"
        :pageSize="searchParams.pageSize"
        :pageNumber="searchParams.pageNum"
        :total="total"
    /> -->

        <!-- 新增和修改弹框 -->
        <el-dialog
            v-model="dialogVisibleSettlein"
            :title="settleinTitle"
            width="40%"
            destroy-on-close
            class="centered-dialog"
            :close-on-click-modal="false"
            @close="onDialogClose"
        >
            <el-form
                label-width="140px"
                ref="addAndEditFormRef"
                label-position="right"
                :model="addAndEditForm"
                :rules="addAndEditFormRules"
            >
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="合同模板名称：" prop="contractName">
                            <el-input
                                autocomplete="off"
                                style="width: 850px"
                                maxlength="30"
                                v-model="addAndEditForm.contractName"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
                            支持格式：word.单个文件大小不能超过2M，最多可上传1张
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" >
                    <el-col :span="24">
                        <el-form-item label="附件" prop="fileInfoList">
                            <div style="flex: 1">
                                <UploadComponentNew
                                    :maxSize="10"
                                    :max-limit="1"
                                    width="100%"
                                    height="100%"
                                    :multiple="true"
                                    :autoUpload="true"
                                    :minLimit="addAndEditForm.fileInfoList.length"
                                    :actionUrl="uploadUrl"
                                    listType="text"
                                    :justifyContent="`flex-start`"
                                    @onFileChange="onFileChange"
                                    :acceptTypeList="['.doc','.docx' ]"
                                >
                                    <template v-slot:default>
                                        <!-- <el-icon size="48" color="#aaa"><Plus /></el-icon> -->
                                        <el-button
                                            :icon="UploadFilled"
                                            type="primary"
                                            class="primary-lease"
                                            >上传文件</el-button
                                        >
                                    </template>
                                </UploadComponentNew>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" class="primary-lease" @click="onCancel"
                        >取消</el-button
                    >
                    <el-button class="primary-lease" type="primary" @click="onSubmit()">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
</template>

<script setup lang="ts">
import TableComponent from 'components/TableComponent/index.vue'
import FormComponent from 'components/FormComponent/index.vue'
import PagingComponent from 'components/PagingComponent/index.vue'
import UploadComponentNew from 'components/uploadComponentNew/index.vue'
import TitleTip from 'components/TitleTip/index.vue'
import uploadComponent from 'components/uploadComponent/index.vue'
import previewImg from './previewImg/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { ref } from 'vue'
import { useStore } from 'store/user'
const store = useStore()
import { mainStore } from 'store/main'
const store2 = mainStore()
const isViewForm = ref(false)

const isDisabled = ref(false)

const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'

const qualityLis = ref<any>([])
const queryFormRef = ref<any>(null)

import {
    getContractListApi, //列表
    addContractApi, //新增
    editContractApi, //修改
    delContractApi, //删除
} from 'http/api/contract-manage'
import { InfoFilled, UploadFilled } from '@element-plus/icons-vue'
const total = ref(0)
const createTime = ref([])
/* 查询参数 */
const queryParams: any = reactive({
    contractName: '',
    contractCode: '',
    startTime: '',
    endTime: '',
    pageSize: 10,
    pageNum: 1,
})

const addAndEditForm = ref<any>({
    id: '',
    contractName: '',
    fileInfoList: [],
    fileInfoTempList: [],
    bmFileInfoList: [],
})

// 获取列表
const getContractListData = async () => {
    if (createTime.value.length > 0) {
        console.log('33333', createTime.value)
        queryParams.startTime = createTime.value[0]
        queryParams.endTime = createTime.value[1]
    }
    const { data: res }: any = await getContractListApi(queryParams)
    qualityLis.value = res
    total.value = res.total
}

// 重置
const onReset = () => {
    createTime.value = []
    queryParams.startTime = ''
    queryParams.endTime = ''
    queryParams.pageNum = 1
    queryParams.pageSize = 10
    queryFormRef.value.resetFields()
    getContractListData()
}

//状态选择
const handleStatusChange = (row:any)=>{

}

const addAndEditFormRef = ref()
const settleinTitle = ref('')
// 合同新增弹框显示隐藏
const dialogVisibleSettlein: any = ref(false)
// 合同新增
const addContract = () => {
     settleinTitle.value = '合同新建'
     dialogVisibleSettlein.value = true;
}

// 合同编辑
const onContract = (row: any) => {
    addAndEditForm.value.id = row.id
    addAndEditForm.value.contractName = row.contractName
    console.log('2222',addAndEditForm.value.contractName)
    settleinTitle.value = '合同修改'
    dialogVisibleSettlein.value = true
}

const onDialogClose = () => {
    addAndEditFormRef.value.resetFields()
    addAndEditForm.value.fileInfoTempList = []
    addAndEditForm.value.fileInfoList = []
    addAndEditForm.value.bmFileInfoList = []
    addAndEditForm.value.id = ''
    addAndEditForm.value.contractName = ''
}

// 自定义事件
const onFileChange = (fileList: any) => {
    addAndEditForm.value.fileInfoTempList = []
    const fileListTemp = fileList.map((e: any) => {
        return {
            fileName: e.name,
            fileUrl: e.url,
        }
    })

    addAndEditForm.value.fileInfoTempList.push(...fileListTemp)
}

const addAndEditFormRules = reactive({
    contractName: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
    fileInfoList: [{ required: true, message: '请上传合同附件', trigger: 'blur' }],
})

// 提交
const onSubmit = () => {
    addAndEditForm.value.fileInfoList = addAndEditForm.value.fileInfoTempList
    addAndEditFormRef.value.validate(async (valid: any) => {
        if (valid) {
            const SEN_API = settleinTitle.value === '合同修改' ? editContractApi : addContractApi
            addAndEditForm.value.bmFileInfoList = addAndEditForm.value.fileInfoList
            const res: any = await SEN_API(addAndEditForm.value)
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '提交成功',
                })
                dialogVisibleSettlein.value = false
                getContractListData()
            }
        }
    })
}

// 删除
const onDelete = async (id: any) => {
    const res: any = await delContractApi({ id })
    if (res.code === 200) {
        ElMessage({
            type: 'success',
            message: '删除成功',
        })
        getContractListData()
    }
}


// 取消按钮
const onCancel = () => {
    dialogVisibleSettlein.value = false
}

onMounted(() => {
    getContractListData()
    // getEquipmentTypeApi().then((res: any) => {
    //     deviceTypeTree.value = res.data
})
</script>

<style lang="scss" scoped>
:deep.upload-tip .el-form-item__label {
    color: transparent;
}
.el-pagination {
    justify-content: flex-end;
    padding: 5px 0;
}
:deep.el-pagination.is-background .el-pager li.is-active {
    background-color: #3cb4a6;
}
:deep.el-form--inline .el-form-item {
    margin-right: 6px;
    width: 95%;
}

.img-list {
    display: flex;
    align-items: center;

    .img-items {
        width: 120px;
        height: 120px;
        margin-right: 8px;
        position: relative;

        img {
            width: 100%;
            height: 100%;
        }

        .mask-img {
            visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #000;
            opacity: 0.5;
            display: flex;
            align-items: center;
            justify-content: center;

            .delete-icon {
                font-size: 20px;
                cursor: pointer;
                z-index: 9;
                color: #fff;
            }
        }
    }
    .img-items:hover .mask-img {
        visibility: visible;
    }
}
</style>
