/*
 * @Author: cclu 1106109051@qq.com
 * @Date: 2024-07-31 15:19:37
 * @LastEditors: cclu 1106109051@qq.com
 * @LastEditTime: 2024-08-30 14:38:09
 * @FilePath: \cloud-platform\src\pages\basicManage\serverpartAssets\component\assetsDetail.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useState } from "react";
import { connect } from "umi";
import { getFieldEnum, handleGetPictureList, handleGetPROPERTYASSETSDetail, handleGetServerpartTree } from "../service";
import { Button, Divider, Tabs, Image } from "antd";
import { ProDescriptions } from "@ant-design/pro-components";
import StoreInfor from "./storeInfor";
import LogList from "./logList";
import ContractDetail from "./contractDetail";


type DetailProps = {
    currentRow: any;
    currentUser?: any
}
const AssetsDetail = ({ currentRow, currentUser }: DetailProps) => {
    // 资产详情
    const [assetsDetail, setAssetsDetail] = useState<any>()
    // 选择的tab
    const [selectTab, setSelectTab] = useState<string>('1')
    // 与资产关联的门店数据
    const [relatedShopData, setRelatedShopData] = useState<any>()
    // 上传平面图的图片列表
    const [fileList, setFileList] = useState<any>()
    // 预览图片
    const [imagePreviewVisible, setImagePreviewVisible] = useState<boolean>(false)
    // 已经请求完详情 可以将数据给下面的几个tab了
    const [detailIsOK, setDetailIsOk] = useState<boolean>(false)
    // 项目和合同的数据
    const [projectCOMPACTDataList, setProjectCOMPACTDataList] = useState<any>()
    // 资产详情显示的内容
    const columns: any = [
        {
            title: '服务区名称',
            dataIndex: 'SERVERPART_ID',
            valueType: 'select',
            request: async () => {
                const req: any = {
                    ProvinceCode: currentUser?.ProvinceCode,
                    ServerpartType: 1000,
                    StatisticsType: 1000,
                    ShowWholePower: false,
                    ShowSPRegion: false,
                    ShowRoyalty: false,
                    ShowCompactCount: false,
                }
                const data = await handleGetServerpartTree(req)

                return data
            }
        },
        {
            title: '资产名称',
            dataIndex: 'PROPERTYASSETS_NAME'
        },
        {
            title: '资产编码',
            dataIndex: 'PROPERTYASSETS_CODE'
        },
        {
            title: '资产类型',
            dataIndex: 'PROPERTYASSETS_TYPE',
            valueType: 'select',
            request: async () => {
                const list = await getFieldEnum({ FieldExplainField: 'PROPERTYASSETS_TYPE', notformate: true })
                return list
            }
        },
        {
            title: '面积',
            dataIndex: 'PROPERTYASSETS_AREA'
        },
        {
            title: '有效状态',
            dataIndex: 'PROPERTYASSETS_STATE',
            valueType: 'select',
            valueEnum: {
                1: '有效',
                0: '无效',
            }
        },
        {
            title: '说明信息',
            dataIndex: 'PROPERTYASSETS_INFO',
            span: 24
        },
        {
            title: '备注',
            dataIndex: 'PROPERTYASSETS_DESC',
            span: 24
        },
        {
            title: '',
            dataIndex: '',
            span: 24,
            render: (_, record) => {
                return <>
                    {
                        fileList && fileList.length > 0 ?
                            <Button type={"primary"} onClick={() => {
                                handlePreview()
                            }}>点击查看平面图</Button> : ''
                    }
                </>
            }
        },


    ]
    // tab的列表
    const tabList: any = [
        {
            key: '1',
            label: '门店信息',
        },
        // {
        //     key: '2',
        //     label: '项目合同',
        // },
        // {
        //     key: '3',
        //     label: '经营项目',
        // },
        {
            key: '3',
            label: '修改日志',
        },
    ]

    // 预览上传后的图片
    const handlePreview = async () => {

        setFileList(fileList)
        setImagePreviewVisible(true)

    };

    return (
        <div className={"AssetsDetail"}>
            <div className={"drawerTitle"}>{currentRow?.PROPERTYASSETS_NAME ? `${assetsDetail?.PropertyShop?.SERVERPART_NAME}${currentRow?.PROPERTYASSETS_NAME}详情` : ''}</div>
            {/* 资产详情部分 */}
            <div>
                <Divider orientation="left">资产详情</Divider>
                <ProDescriptions
                    request={async () => {
                        console.log('currentRow', currentRow);
                        const data = await handleGetPROPERTYASSETSDetail({ PROPERTYASSETSId: currentRow?.PROPERTYASSETS_ID })
                        console.log('detail', data);
                        setAssetsDetail(data)
                        setRelatedShopData(data.PropertyShop)
                        setProjectCOMPACTDataList(data.BusinessProjectList)
                        setDetailIsOk(true)
                        // 去拿图片列表
                        const imgReq: any = {
                            TableId: data.SERVERPART_ID,
                            TableType: 1201,
                            ImageIndex: data.PROPERTYASSETS_REGION
                        }
                        const imgData = await handleGetPictureList(imgReq)
                        console.log('imgData', imgData);
                        let imgList: any = imgData.List
                        let realImgList: any = []
                        if (imgList && imgList.length > 0) {
                            imgList.forEach((item: any) => {
                                realImgList.push({
                                    uid: item.ImageId,
                                    name: item.ImageName,
                                    status: 'done',
                                    url: item.ImageUrl,
                                    imgUrl: item.ImagePath,
                                })
                            })
                        }
                        setFileList(realImgList)
                        console.log('data', data);
                        return { data: data, success: true }
                    }}
                    columns={columns}
                >
                </ProDescriptions>
            </div>

            <div style={{ marginTop: '16px' }}>
                <Tabs
                    activeKey={selectTab}
                    items={tabList}
                    onChange={(e: any) => {
                        setSelectTab(e)
                    }}
                >
                </Tabs>

                {/* 门店信息  */}
                {
                    selectTab === '1' ? <StoreInfor detailData={relatedShopData} onShow={detailIsOK} /> : ''
                }
                {/* 合同详情 */}
                {
                    selectTab === '2' ? <ContractDetail detail={currentRow} tableData={projectCOMPACTDataList} /> : ''
                }
                {/* 经营项目
                {
                    selectTab === '3'? <BusinessProject/>:''
                } */}
                {/* 修改日志 */}
                {
                    selectTab === '3' ? <LogList detail={assetsDetail} /> : ''
                }
            </div>

            {/* 预览图片 */}
            {fileList && fileList.length > 0 && <div style={{ display: 'none' }}>

                <Image.PreviewGroup

                    preview={{
                        visible: imagePreviewVisible,
                        onVisibleChange: vis => {
                            setImagePreviewVisible(vis)
                        }

                    }}>
                    {
                        fileList.map((n) =>
                            <Image src={n.url} key={n.url} />
                        )
                    }

                </Image.PreviewGroup>
            </div>}
        </div >
    )
}

export default connect(({ user, }: ConnectState) => ({
}))(AssetsDetail);
