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": "题目" })
    @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 })
    @tfcpd({ "lang": "", "def": "标签", component: DynamicTags, width: 300 })
    @tsfpd({
        lang: "", "def": "标签", fieldType: "select", async getData() {
            return {
                data: [{
                    label: "vue3",
                    value: "vue3"
                }, {
                    label: "react",
                    value: "react"
                }, {
                    label: "js",
                    value: "js"
                }, {
                    label: "html",
                    value: "html"
                }, {
                    label: "css",
                    value: "css"
                }, {
                    label: "webpack",
                    value: "webpack"
                }, {
                    label: "微信小程序",
                    value: "微信小程序"
                }, {
                    label: "typescript",
                    value: "typescript"
                }, {
                    label: "boss_vue",
                    value: "boss_vue"
                }, {
                    label: "高频_css",
                    value: "高频_css"
                }]
            }
        }
    })
    tag: string[] = [];

    @tcmd({ "key": "table:searchFormMethod", "value": { "type": "getList", "es": "onAfter" } })
    getList = async (params: any) => {
        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": 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 };
    //     }
    // }
}