<template>
    <div>
        <home-header></home-header>
        <div class="box-container">
            <div class="nav-box">能力集市 / 算法对比</div>
            <div class="content">
                <div class="left">
                    <div class="left-item" v-for="(data, i) in tableData" :key="i"
                        :class="activeNameIndex == i ? 'active' : ''" @click="changeTab(i, data)">
                        {{ data.title }}
                    </div>
                </div>
                <div class="right">
                    <div class="top no-border-right">
                        <div class="td-name">
                            {{ `共选取${getLength(detailArray)}个算法` }}
                        </div>
                        <div class="td" v-for="(item, k) in detailArray" :key="k">
                            <span v-if="item">{{ item.name || '--' }}</span>
                            <svg v-if="item" t="1655780098058" @click="deleteList(k)" class="icon-delete"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3248"
                                width="20" height="20">
                                <path
                                    d="M966.128 181.12H840.96c-0.168 0-0.32-0.096-0.488-0.096-0.16 0-0.312 0.096-0.48 0.096H184.064c-0.176 0-0.32-0.096-0.48-0.096-0.16 0-0.304 0.096-0.48 0.096H57.872a32.6 32.6 0 1 0 0 65.208h93.104v651.928c0 69.32 56.392 125.744 125.712 125.744h470.688c69.32 0 125.712-56.424 125.712-125.744V246.328h93.04a32.6 32.6 0 1 0 0-65.208z m-158.256 717.136c0 33.376-27.136 60.528-60.504 60.528H276.688c-33.352 0-60.496-27.16-60.496-60.528V246.328h591.68v651.928z"
                                    fill="#838384" p-id="3249"></path>
                                <path
                                    d="M346.488 814.744a32.608 32.608 0 0 0 32.608-32.608V422.888a32.6 32.6 0 0 0-65.216 0v359.24a32.6 32.6 0 0 0 32.608 32.616zM512 814.744a32.6 32.6 0 0 0 32.608-32.608V422.888a32.6 32.6 0 0 0-65.216 0v359.24A32.6 32.6 0 0 0 512 814.744zM677.544 814.744a32.584 32.584 0 0 0 32.6-32.608V422.888c0-18.008-14.576-32.6-32.6-32.6s-32.608 14.592-32.608 32.6v359.24a32.592 32.592 0 0 0 32.608 32.616zM318.848 157.6a32.608 32.608 0 0 0 32.608-32.6c0-23.808 64.048-59.792 160.576-59.792 96.512 0 160.544 35.984 160.544 59.792a32.6 32.6 0 0 0 32.608 32.6 32.592 32.592 0 0 0 32.6-32.6C737.792 53.736 640.736 0 512.032 0 383.312 0 286.24 53.736 286.24 125a32.608 32.608 0 0 0 32.608 32.6z"
                                    fill="#838384" p-id="3250"></path>
                            </svg>
                            <svg @click="addList" v-if="!item && k === detailArray.filter(v => v).length"
                                t="1655780573478" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1373" width="50" height="50">
                                <path
                                    d="M960.083 512.001c0 21.998-17.834 39.829-39.832 39.829H103.745c-21.998 0-39.829-17.831-39.829-39.829s17.831-39.829 39.829-39.829h816.506c21.999 0.001 39.832 17.832 39.832 39.829z"
                                    fill="#838384" p-id="1374"></path>
                                <path
                                    d="M512 63.915c21.995 0 39.829 17.834 39.829 39.835v816.503c0 22.001-17.834 39.832-39.829 39.832-21.998 0-39.832-17.831-39.832-39.832V103.75c0-22.001 17.834-39.835 39.832-39.835z"
                                    fill="#838384" p-id="1375"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="bottom" ref="bottomRef">
                        <div class="bottom-item" v-for="(data, i) in tableData" :key="i">
                            <div class="title" :ref="data.title">{{ data.title }}</div>
                            <!-- 算法优势 -->
                            <div class="group-data" v-if="data.groupName">
                                <compare-group-view :dataList="data.list"></compare-group-view>
                            </div>
                            <div class="flex-row-start row-tr" v-else v-for="(rowData, j) in data.list" :key="j"
                                :class="j == data.list.length - 1 ? 'border-bottom' : ''">
                                <div class="td-name">
                                    {{ rowData.name }}
                                </div>
                                <div class="flex-row-start">
                                    <div class="td" v-for="(item, k) in rowData.infoList" :key="k">
                                        {{ item || '--' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- :pagination="pagination" :loading="loading" -->
        <a-modal class="modal-box" title="请选择" :visible="showAddModal" :onOk='handleOk' :onCancel='handleCancel'>
            <a-table :columns="columns" :data-source="dataList" style="height:500px;overflow-y:auto"
                :row-selection="rowSelection" rowKey="id">
            </a-table>
        </a-modal>
    </div>
</template>

<script setup>
import HomeHeader from '@/views/home/components/header'
import CompareGroupView from '@/views/home/components/CompareGroupView'
import { pageWithAttrs } from '@/api/abilityStatistics'
import { detailJson } from './temp'
import { defineComponent, ref, onMounted, getCurrentInstance, computed, unref, reactive, nextTick } from 'vue';
import { Table } from 'ant-design-vue';
import { selectOne } from '@/api/home'
import { getType } from '@turf/invariant';


const ctx = getCurrentInstance();
// 最大4列
const maxColumn = 4;

const pagination = ref([])
const columns = ref([
    {
        title: '算法名称',
        dataIndex: 'name',
    },
    {
        title: '算法类型',
        dataIndex: 'type',
    },
])
// 详情列表
const detailArray = ref([
    '', '', '', ''
])

const dataObj = {
    '基本信息': [
        {
            name: '算法名称',
            key: 'name'
        },
        {
            name: '算法类别',
            key: 'type'
        },
        {
            name: '部署位置',
        },
        {
            name: '应用领域'
        },
        {
            name: '共享条件',
            key: 'shareCondition'
        },
        {
            name: '共享类型',
            key: 'shareType'
        },
        {
            name: '算法介绍视频'
        },
    ],
    "算法优势": [
        {
            name: '算法优势名称',
            key: 'name'
        }, {
            name: '算法优势描述',
            key: 'desc'
        },
    ]
}

const listArray = [
    {
        name: '算法名称',
        list: [
            {
                value: '人脸识别'
            },
            {
                value: '犯罪嫌疑人追踪'
            },
        ]
    },
    {
        name: '算法类别',
        list: [
            {
                value: '智能算法'
            },
            {
                value: '图形服务'
            },
        ]
    },
    {
        name: '算法优势名称',
        groupName: '算法优势',
        list: [
            {
                value: '人脸识别精准',
            },
            {
                value: '犯罪嫌疑人追踪比较快',
            },
        ]
    },
    {
        name: '算法优势描述',
        groupName: '算法优势',
        list: [
            {
                value: '人脸识别精准',
            },
            {
                value: '犯罪嫌疑人追踪比较快',
            },
        ]
    },
    {
        name: '是否计费',
        list: [
            {
                value: '是',
            },
            {
                value: '否',
            },
        ]
    }
]

const titleObj = {
    '基本信息': [
        {
            text: '算法名称', key: 'name'
        },
        {
            text: '算法类别', key: '算法类别'
        },
        {
            text: '部署位置', key: '部署位置'
        },
        {
            text: '应用领域', key: '应用领域'
        },
        {
            text: '共享条件', key: 'shareCondition'
        },
        {
            text: '共享类型', key: 'shareType'
        },
        {
            text: '算法描述', key: 'description'
        },
        {
            text: '算法介绍视频', key: '算法介绍视频'
        },
    ],
    '算法优势': [
        {
            text: '算法优势名称', key: 'name'
        },
        {
            text: '算法优势描述', key: 'desc'
        },
    ],
    '应用场景': [
        {
            text: '场景名称', key: '场景名称'
        },
        {
            text: '场景描述', key: '场景描述'
        },
    ],
    '应用案例': [
        {
            text: '关联应用', key: ''
        },
        {
            text: '算法需求背景', key: ''
        },
        {
            text: '算法应用期望达成效果', key: ''
        },
    ],
    '计费标准': [
        {
            text: '是否计费', key: ''
        },
        {
            text: '计费方式', key: ''
        },
        {
            text: '计费描述', key: ''
        },
        {
            text: '计费标准', key: ''
        },
    ],
    '使用方式': [
        {
            text: '服务接口', key: ''
        },
        {
            text: '接口请求方式', key: ''
        },
        {
            text: '技术文档', key: ''
        },
        {
            text: '是否支持试用', key: ''
        },
        {
            text: '试用描述', key: ''
        },
        {
            text: '试用地址', key: ''
        },
    ],
    '服务商': [
        {
            text: '服务商名', key: ''
        },
        {
            text: '服务商联系人', key: ''
        },
        {
            text: '服务商联系电话', key: ''
        },
    ]
}

const arrayStr = [
    '算法优势', '应用场景', '计费标准信息', '常见问题'
]

const activeNameIndex = ref(0)
const showAddModal = ref(false)
const dataList = ref([])
const selectedRowKeys = ref([]); // Check here to configure the default column

// 初始化
onMounted(() => {
    getDetail()
    getList().then(res => {
        Promise.all(selectedRowKeys.value.map(v => getDetail(v))).then(data => {
            data.map((v, i) => {
                detailArray.value.splice(i, 1, formatterData(v));
            })
            nextTick(() => {
                getNewData()
            })
        })
    })
})

let tableData = ref([])
const getNewData = () => {
    Object.keys(titleObj).map((title, i) => {
        // 标题
        let _newObj = {
            title: title,
            list: []
        }
        if (arrayStr.includes(title)) {
            _newObj.groupName = title
        }
        let list = []
        titleObj[title].map(v => {
            let obj = {
                name: v.text,
                infoList: getInfoList(v)
            }
            list.push(obj)
        })
        _newObj.list = list;
        tableData.value.push(_newObj)
    })

    nextTick(() => {
        console.log('tableData----333-------->', tableData);
    })
}


const getInfoList = (rowItem) => {
    let arr = []
    detailArray.value.map(item => {
        console.log('item------------>', item);
        let val = undefined;
        val = item[rowItem.key || rowItem.text]
        arr.push(val)
    })
    return arr;
}

const getArrayLength = (list) => {
    let _newList = list.filter(v => v) || []
    return _newList.length
}
// 获取算法列表
const getList = () => {
    const data = {
        deptIds: [],
        districtId: '',
        infoList: [
            { attrType: "组件类型", attrValue: "智能算法" }
        ],
        name: '',
        orderField: 'total',
        orderType: 'DESC',
        pageNum: 1,
        pageSize: 15,
        type: '组件服务',
    }
    return new Promise((resolve, reject) => {
        pageWithAttrs(data).then((res) => {
            dataList.value = res.data.data.records || []
            nextTick(() => {
                // 默认前两个
                selectedRowKeys.value.push(dataList.value[0].id)
                selectedRowKeys.value.push(dataList.value[1].id)
            })
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}
// 删除
const deleteList = (i) => {
    detailArray.value.splice(i, 1, '')
    nextTick(() => {
        console.log('detailArray------------>', detailArray.value);
        getNewData()
    })
}
const addList = () => {
    showAddModal.value = true
}
const handleOk = () => {
    if (getArrayLength(selectedRowKeys) > 4) {
        alert('最多选择四个算法');
        return;
    }
    showAddModal.value = false
}
const handleCancel = () => {
    showAddModal.value = false
    console.log('showAddModal------------>', showAddModal);

}

const rowSelection = computed(() => {
    return {
        selectedRowKeys: unref(selectedRowKeys),
        onChange: changableRowKeys => {
            console.log('selectedRowKeys changed: ', changableRowKeys);
            selectedRowKeys.value = changableRowKeys;
        },
        hideDefaultSelections: true,
    };
});

// 切换左侧
const changeTab = (n, data) => {
    activeNameIndex.value = n;
    // 获取元素距离父元素的距离
    let realTop = ctx.refs[data.name][0].offsetTop;
    ctx.refs.bottomRef.scrollTo({
        'top': realTop - 250,
        'behavior': 'smooth'
    })
}

//  ['1522550194535735298', '1522550194523152385']
const getDetail = (id = '1539125877366808578') => {
    return new Promise((resolve, reject) => {
        selectOne(id).then((res) => {
            resolve(res.data.data)
        })
    })
}

const isJson = (str) => {
    if (typeof str == 'string') {
        try {
            let obj = JSON.parse(str)
            return true
        } catch (e) {
            return false;
        }
    }
}

// 处扁平化数据
const formatterData = (obj) => {
    let _newObj = {}
    obj.infoList.map(v => {
        _newObj[v.attrType] = isJson(v.attrValue) ? JSON.parse(v.attrValue) : v.attrValue;
    })
    let _obj = Object.assign({}, obj, _newObj)
    console.log('_obj-----处扁平化数据------->', _obj);

    return _obj

}


const isArrayAction = (name, itemData) => {
    if (Array.isArray(itemData[name])) {
        return true
    } else {
        return false
    }
}


const getLength = (array) => {
    let newArr = array.filter(v => v !== '')
    return newArr.length
}



</script>



<style lang="less" scoped>
// @font-face {
//     font-family: 'num-typeface';
//     src: url('~@/assets/newHome/font/num-typeface.otf');
// }

.border {
    border: 1px solid #bbb;
    border-bottom: none;
    border-right: none;
}

.border-bottom {
    border-bottom: 1px solid #bbb;
}

.no-border-right {
    border: 1px solid #bbb;
    border-right: none;
}

.flex-row-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.box-container {
    width: 1592px;
    height: 900px;
    margin: 0 auto;
    padding-top: 60px;

    .content {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .nav-box {
        height: 30px;
        line-height: 30px;
        width: 100%;
        margin-bottom: 10px;
        font-size: 12px;
    }


    .left {
        width: 200px;
        height: 800px;
        background: rgba(244, 245, 248, 0.8);

        .left-item {
            margin: 0 14px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #212121;
            border-bottom: 1px solid #dddee1;

            &:hover {
                cursor: pointer;
                // color: #FFF;
            }
        }

        .active {
            background: #0058e1;
            color: #fff;
            margin: 0;
        }
    }

    .right {
        width: 1360px;
        height: 800px;
        margin-left: 32px;

        .top {
            width: 100%;
            height: 130px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .td-name {
                height: 130px;
                line-height: 130px;
            }

            .td {
                height: 130px;
                line-height: 130px;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
            }


            .icon-delete {
                position: absolute;
                right: 10px;
                top: 10px;
            }
        }


        .bottom {
            width: 100%;
            overflow-y: auto;
            height: 800px;
            padding-bottom: 40px;
        }


    }
}

.title {
    font-size: 14px;
    padding: 20px 0 10px 10px;
    color: #212121;
    font-weight: bold;
}

.td-name {
    border-right: 1px solid #bbb;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 200px;
    font-size: 14px;
}

.td {
    border-right: 1px solid #bbb;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 290px;
    font-size: 14px;
    box-sizing: border-box;
    table-layout: fixed;
    word-wrap: break-all;
    word-break: normal;
    overflow: hidden;
}

.row-tr {
    border: 1px solid #bbb;
    border-right: none;
    border-bottom: none;
}

.border-bottom {
    border-bottom: 1px solid #bbb;
}

.modal-box {
    height: 500px;
    width: 800px;
}
</style>