import 'reflect-metadata';
// import {
//     TableColumnPropertyDecorator as tcpd,
//     TableFormColumnPropertyDecorator as tfcpd,
//     TableColumnMethodDecorator as tcmd, TOperateType,
//     TableSearchFormPropertyDecorator as tsfpd
// } from "@/components/UmTable";
import * as api from "@/common/api"
// import UmTableForm from '@/components/UmTable/UmTableForm.vue';

import {
    UmTableForm,
    TableColumnPropertyDecorator as tcpd,
    TableFormColumnPropertyDecorator as tfcpd,
    TableColumnMethodDecorator as tcmd, TOperateType,
    TableSearchFormPropertyDecorator as tsfpd
} from "funjiaui";
// import {
//     TableColumnPropertyDecorator as tcpd,
//     TableFormColumnPropertyDecorator as tfcpd,
//     TableColumnMethodDecorator as tcmd, TOperateType,
//     TableSearchFormPropertyDecorator as tsfpd
// } from "funjiaui/UmTable";


import DynamicTags from '@/components/DynamicTags.vue';
// import { ElButton, ElInput, ElTag,ElDialog } from 'element-plus';
import { Codemirror } from 'vue-codemirror';


export default class QA {
    @tcpd({ "lang": "", "def": "id", width: 240 })
    @tfcpd({ "lang": "", "def": "id", fieldType: "primaryKey" })
    id: number = 0;

    @tsfpd({ lang: "", "def": "关键字" })
    keyword: string = "";

    @tcpd({ "lang": "", "def": "题目", minWidth: 120 })
    @tfcpd({ "lang": "", "def": "题目", rule: [{ "type": "require", message: "不能为空" }], component: Codemirror })
    question: string = "";

    // @tcpd({ "lang": "", "def": "答案", minWidth: 120 })
    @tfcpd({ "lang": "", "def": "答案", component: Codemirror, width: 300 })
    answer: string = "";

    @tcpd({
        "lang": "", "def": "标签", minWidth: 120, columnRender: function (props) {
            console.log(arguments);
            const rowData = arguments[2];
            return rowData.tags.map(item => { return item.name }).join(",")
        }
    })
    @tfcpd({ "lang": "", "def": "标签", component: DynamicTags, width: 300 })
    @tsfpd({
        lang: "", "def": "标签", fieldType: "select", async getData() {
            const params = {
                page: 1,
                pageSize: 999
            }
            const data = await api.getDynamicList(params, 'tag');
            console.log(data.data);
            return {
                data: (data?.data || [])?.map(item => {
                    return {
                        label: item.name,
                        value: item.documentId
                    };
                })
            }
        }
    })
    tags: string[] = [];

    @tcmd({ "key": "table:searchFormMethod", "value": { "type": "getList", "es": "onAfter" } })
    getList = async (params: any) => {
        const ky = params.keyword || undefined;
        params.filters = {
            $or: [
                {
                    question: {
                        $containsi: ky
                    }
                },
                { tags: { documentId: { $eq: params.tags || undefined } } }
            ]
        };
        return await api.getQAList(params);
    }

    @tcmd({
        "key": "table:toolbar", "value": {
            "type": "添加", "priority": 1, "es": "onAfter", "dialogContent": UmTableForm, "dialogTitle": "增加", "dialogWidth": 1200
        }
    })
    onAdd = async (data: any) => {
        const { code, msg } = await api.addQA({ ...data });
        if (code != 0) {
            return { code: 1, message: msg };
        }
        else {
            return { code: 0 };
        }
    }

    exportText(filename, text) {
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
        element.setAttribute('download', filename);

        element.style.display = 'none';
        document.body.appendChild(element);

        element.click();

        document.body.removeChild(element);
    }

    @tcmd({
        "key": "table:toolbar", "value": {
            "type": "自定义", "priority": 1, "es": "onAfter", title: "导出anki脚本"
        }
    })
    onExport = async (params: any) => {
        const { data } = await api.getQAList({ ...params, page: 1, pageSize: 10000 });
        const head = `#separator:tab
#html:true
#tags column:3
`
        const style = `<style>iframe{width:100%;height:90vh;}</style>`;

        const content = data.map(item => {
            return `"${style}<iframe src=""http://192.168.6.130:5176/#/question?id=${item.id}"" frameborder=""0""></iframe><br>"	"${style}<iframe src=""http://192.168.6.130:5176/#/answer?id=${item.id}"" frameborder=""0""></iframe><br>"`;
        }).join("\n")

        this.exportText("anki脚本.txt", head + content);
        return true;
    }

    /**
     * 获取详情数据
     */
    @tcmd({ "value": { "type": "edit", "es": "onBefore", "dialogContent": UmTableForm, "dialogTitle": "编辑", "dialogWidth": 1200 } })
    getDetail = async (rowId: number, r, meta) => {
        const { data } = await api.getQA({ id: rowId });
        return data;
    }


    @tcmd({
        "value": {
            "type": "edit", "es": "onAfter",
            sort: 2,
            // isShow
        }
    })
    onEdit = async (params: any) => {
        const { code, msg } = await api.updateQA({ ...params });
        if (code != 0) {
            return { code: 1, message: msg };
        }
        else {
            return { code: 0 };
        }
    }

    @tcmd({
        "value": {
            "type": "del", "es": "onAfter", "dialogContent": "确定要删除该条数据吗？",
            sort: 3,
            dialogWidth: 400
            // isShow
        }
    })
    delByIds = async (rowId: number) => {
        const { code, msg } = await api.deleteQA({ ids: [rowId] });
        if (code != 0) {
            return { code: 1, message: msg };
        }
        else {
            return { code: 0 };
        }
    }

    @tcmd({ "key": "table:toolbar", "value": { "type": "批量删除", "priority": 5, "es": "onAfter", "dialogContent": "确定要删除选择的数据吗？" } })
    onMutilDel = async function (ids: any[]) {
        // console.log(arguments)
        // return;
        const { code, msg } = await api.deleteQA({ ids });
        if (code != 0) {
            return { code: 1, message: msg };
        }
        else {
            return { code: 0 };
        }
    }


    // @tcmd({
    //     "key": "table:toolbar", "value": {
    //         "type": "添加", "priority": 1, "es": "onAfter", "dialogContent": UmTableForm, "dialogTitle": "增加", "dialogWidth": 650
    //     }
    // })
    // onAdd = async (data: any) => {
    //     const { code, msg } = await api.addQA(data);
    //     if (code != 0) {
    //         return { code: 1, message: msg };
    //     }
    //     else {
    //         return { code: 0 };
    //     }
    // }

    /**
     * 获取详情数据
     */
    @tcmd({ "value": { "type": "edit", "es": "onBefore", "dialogContent": UmTableForm, "dialogTitle": "编辑", dialogWidth: 1200 } })
    getDetail = async (rowId: number, r, meta) => {
        const { data } = await api.getQA({ id: rowId });
        return data;
    }


    @tcmd({
        "value": {
            "type": "edit", "es": "onAfter",
            sort: 2,
            // isShow
        }
    })
    onEdit = async (params: any) => {
        const { code, msg } = await api.updateQA(params);
        if (code != 0) {
            return { code: 1, message: msg };
        }
        else {
            return { code: 0 };
        }
    }

    // @tcmd({
    //     "value": {
    //         "type": "del", "es": "onAfter", "dialogContent": "确定要删除该条数据吗？",
    //         sort: 3,
    //         // isShow
    //     }
    // })
    // delByIds = async (rowId: number) => {
    //     const { code, msg } = await api.deleteQA({ ids: [rowId] });
    //     if (code != 0) {
    //         return { code: 1, message: msg };
    //     }
    //     else {
    //         return { code: 0 };
    //     }
    // }
}