/**
 * @description shopItem 菜单 panel tab 配置
 * @author sunze
 */

import editor from '../../editor/index'
import { PanelConf } from '../menu-constructors/Panel'
import { getRandom } from '../../utils/util'
import $ from '../../utils/dom-core'

export default function (editor: editor, video: string): PanelConf {
    // panel 中需要用到的id
    const inputIFrameId = getRandom('input-iframe')
    const btnOkId = getRandom('btn-ok')

    /**
     * 插入商品
     * @param iframe html标签
     */
    function insertVideo(video: string): void {
        editor.cmd.do('insertHTML', video + '<p><br></p>')
    }

    const conf = {
        width: 300,
        height: 0,

        // panel 中可包含多个 tab
        tabs: [
            {
                // tab 的标题
                title: editor.i18next.t('menus.panelMenus.shopItem.插入商品'),
                // 模板
                tpl: `<div>
                        <input 
                            id="${inputIFrameId}" 
                            type="text" 
                            class="block" 
                            placeholder="${editor.i18next.t('请输入商品id')}"/>
                        </td>
                        <div class="w-e-button-container">
                            <button id="${btnOkId}" class="right">
                                ${editor.i18next.t('插入')}
                            </button>
                        </div>
                    </div>`,
                // 事件绑定
                events: [
                    // 插入视频
                    {
                        selector: '#' + btnOkId,
                        type: 'click',
                        fn: () => {
                            // 执行插入视频
                            const config = editor.config
                            let shopItemServer = config.shopItemServer
                            const $item = $('#' + inputIFrameId)
                            let item = $item.val().trim()
                            const xhr = new XMLHttpRequest()
                            xhr.open('POST', shopItemServer + '?id=' + item)
                            // 服务端返回之后
                            xhr.withCredentials = editor.config.withCredentials && true
                            console.log(shopItemServer, item)
                            xhr.onreadystatechange = () => {
                                console.log(1111)
                                if (xhr.readyState !== 4) return
                                const status = xhr.status
                                if (status < 200) return // 请求发送过程中，尚未返回
                                if (status >= 300 && status < 400) return // 重定向
                                if (status >= 400) {
                                    // 40x 50x 报错
                                    console.error('wangEditor - XHR 报错，状态码 ' + status)
                                    return
                                }

                                // status = 200 ，得到结果
                                const resultStr = xhr.responseText
                                let result
                                if (typeof resultStr !== 'object') {
                                    try {
                                        result = JSON.parse(resultStr)
                                        if (result.data == null) {
                                            alert('商品不存在')
                                            return
                                        } else {
                                            insertVideo(
                                                '<p>&nbsp;</p>' +
                                                    '<div class="insert-outer" res-data-id="2643112">' +
                                                    '<span class="embed-card main-site res_smzdm">' +
                                                    '<span class="embed-card-logo res_smzdm">' +
                                                    '<img class="res_smzdm" src="http://dwz.date/cNJX" _src="http://dwz.date/cNJX">' +
                                                    '</span><span class="embed-card-info  res_smzdm">' +
                                                    '<span class="card-name res_smzdm">' +
                                                    result.data.title +
                                                    '<strong class="price res_smzdm">' +
                                                    result.data.price.price +
                                                    '</strong></span><span class="card-abstract res_smzdm"></span>' +
                                                    '<span class="card-controls res_smzdm"><span class="mall-data res_smzdm">' +
                                                    '京东</span><span class="card-btn-deep res_smzdm">去购买</span></span></span></span></div><p>&nbsp;<br></p>'
                                            )
                                        }
                                    } catch (ex) {
                                        console.error(
                                            'wangEditor - 返回结果不是 JSON 格式',
                                            resultStr
                                        )
                                        return
                                    }
                                } else {
                                    result = resultStr
                                }
                            }
                            xhr.send(null)
                            return true
                        },
                    },
                ],
            }, // tab end
        ], // tabs end
    }

    return conf
}