//列表头
//css定义字体大小
Vue.component('yj-list-head', {
    template:
        `
    <ul :class="out_class" :style="style_ul">
        <li class="title" :style="style_title" v-html="out_title"></li>
        <li class="more" :style="style_more" v-html="out_more"></li>
    </ul>
    `,
    props: {
        subclass: {
            type: String,
            default: function () {
                return '';
            }
        },
        height: {
            type: Number,
            default: function () {
                return 38;
            }
        },
        backgroundcolor: {
            type: String,
            default: function () {
                return '';
            }
        },
        color: {
            type: String,
            default: function () {
                return '';
            }
        },
        icon: {
            type: String,
            default: function () {
                return 'yj icon-caret-right';
            }
        },
        title: {
            type: String,
            default: function () {
                return '';
            }
        },
        more: {
            type: String,
            default: function () {
                return '';
            }
        },
        url: {
            type: String,
            default: function () {
                return '#';
            }
        }
    },
    computed: {
        style_ul: function () {
            let str = "";
            if (this.backgroundcolor !== '')
                str += "background-color:" + this.backgroundcolor + ";";
            if (this.height > 0)
                str += "height:" + this.height + "px;";
            return str;
        },
        style_title: function () {
            let str = "";
            if (this.color !== '')
                str += "color:" + this.color + ";";
            if (this.height > 0)
                str += "line-height:" + this.height + "px;height:" + this.height + "px;";
            return str;
        },
        style_more: function () {
            let str = "";
            if (this.color !== '')
                str += "color:" + this.color + ";";
            if (this.height > 0)
                str += "line-height:" + this.height + "px;height:" + this.height + "px;";
            return str;
        },
        style_i: function () {
            let str = "";
            if (this.color !== '')
                str += "color:" + this.color + ";";
            return str;
        },
        out_class: function () {
            let str = "yj-list-head";
            if (this.subclass !== '')
                str += " " + this.subclass;
            return str;
        },
        out_title: function () {
            let str = "";
            if (this.icon !== '')
                str += "<i class='" + this.icon + "' style='" + (this.color !== "" ? "color:" + this.color + ";" : "") + "'></i> ";
            str += this.title;
            return str;
        },
        out_more: function () {
            let str = "";
            if (this.more !== '')
                str += "<a href='" + this.url + "' target='_blank' style='" + (this.color !== "" ? "color:" + this.color + ";" : "") + "'>" + this.more + "</a>";
            return str;
        }
    }
});

//文章列表
//css定义字体颜色、大小
Vue.component('yj-news-list', {
    template:
        `
    <ul v-if="in_datalist.length>0" :class="out_class">
        <li v-for="(item,index) in in_datalist" :style="style_li">
            <div class="title" :style="style_title" v-html="out_title(item.title,item.id)"></div>
            <div class="datetime" :style="style_datetime">{{item.datetime}}</div>
        </li>
    </ul>
    `,
    data: function () {
        return {
            in_widths: [],
            in_datalist: []
        }
    },
    props: {
        subclass: {
            type: String,
            default: function () {
                return '';
            }
        },
        widths: {
            type: String,
            default: function () {
                return '80%#20%';
            }
        },
        height: {
            type: Number,
            default: function () {
                return 38;
            }
        },
        borderbottom: {
            type: String,
            default: function () {
                return '';
            }
        },
        icon: {
            type: String,
            default: function () {
                return 'yj icon-caret-right';
            }
        },
        url: {
            type: String,
            default: function () {
                return '/news/info';
            }
        },
        datalist: {
            type: Array,
            default: function () {
                return [];
            }
        }
    },
    computed: {
        out_class: function () {
            let str = "yj-news-list";
            if (this.subclass !== '')
                str += " " + this.subclass;
            return str;
        },
        style_li: function () {
            let str = "";
            if (this.height > 0)
                str += "height:" + this.height + "px;";
            if (this.borderbottom !== '')
                str += "border-bottom:" + this.borderbottom + ";";
            return str;
        },
        style_title: function () {
            let str = "";
            if (this.widths !== '')
                str += "width:" + this.in_widths[0] + ";";
            if (this.height > 0)
                str += "height:" + this.height + "px;line-height:" + this.height + "px;";
            return str;
        },
        style_datetime: function () {
            let str = "";
            if (this.widths !== '')
                str += "width:" + this.in_widths[1] + ";";
            if (this.height > 0)
                str += "height:" + this.height + "px;line-height:" + this.height + "px;";
            return str;
        }
    },
    watch: {
        widths: {
            immediate: true,
            handler(newVal, oldVal) {
                if (typeof (newVal) === 'string' && newVal !== '')
                    this.in_widths = newVal.split('#');
            }
        },
        datalist: {
            immediate: true,
            handler(newVal, oldVal) {
                if (Array.isArray(newVal)) {
                    this.in_datalist = newVal;
                }
            }
        }
    },
    methods: {
        out_title: function (title, id) {
            let str = "";
            if (this.icon !== '')
                str += "<i class='" + this.icon + "'></i> ";
            if (this.url !== '')
                str += "<a href='" + this.url + "?id=" + id + "' target='_blank'>" + title + "</a>";
            else
                str += title;
            return str;
        }
    }
});

//图片列表
//css定义字体颜色、大小
Vue.component('yj-pic-list', {
    template:
        `
    <ul v-if="in_datalist.length>0" :class="out_class" :style="style_ul">
        <li v-for="(item,index) in in_datalist">
            <div>
                <div class="pic" v-html="out_pic(item.pic,item.title,item.content,item.id)"></div>
                <div class="title" v-html="out_title(item.title,item.content,item.id)"></div>
            </div>
        </li>
    </ul>
    `,
    data: function () {
        return {
            in_datalist: []
        }
    },
    props: {
        subclass: {
            type: String,
            default: function () {
                return '';
            }
        },
        columns: {
            type: String,
            default: function () {
                return 'repeat(4,1fr)';
            }
        },
        gap: {
            type: Number,
            default: function () {
                return 10;
            }
        },
        width: {
            type: Number,
            default: function () {
                return 250;
            }
        },
        height: {
            type: Number,
            default: function () {
                return 0;
            }
        },
        url: {
            type: String,
            default: function () {
                return '';
            }
        },
        datalist: {
            type: Array,
            default: function () {
                return [];
            }
        }
    },
    computed: {
        out_class: function () {
            let str = "yj-pic-list";
            if (this.subclass !== '')
                str += " " + this.subclass;
            return str;
        },
        style_ul: function () {
            let str = "grid-template-columns:" + this.columns + ";";
            if (this.gap > 0)
                str += "grid-column-gap:" + this.gap + "px;grid-row-gap:" + this.gap + "px;";
            return str;
        }
    },
    watch: {
        datalist: {
            immediate: true,
            handler(newVal, oldVal) {
                if (Array.isArray(newVal)) {
                    this.in_datalist = newVal;
                }
            }
        }
    },
    methods: {
        out_pic: function (pic, title, content, id) {
            let str = "<img";
            if (pic !== '')
                str += " src='" + pic + "'";
            else
                str += " src='/content/images/none.jpg'";
            if (this.width > 0)
                str += " width='" + this.width + "'";
            if (this.height > 0)
                str += " height='" + this.height + "'";
            str += " title='" + title + "' />";
            //2023.04.09
            if (content !== '' && content !== '无') {
                str = "<a href='" + content + "' target='_blank'>" + str + "</a>";
            }
            else {
                if (this.url !== '')
                    str = "<a href='" + this.url + "?id=" + id + "' target='_blank'>" + str + "</a>";
                else
                    str = "<a href='" + pic + "' target='_blank'>" + str + "</a>";
            }
            return str;
        },
        out_title: function (title, content, id) {
            let str = "";
            if (this.url !== '')
                str += "<a href='" + this.url + "?id=" + id + "' target='_blank'>" + title + "</a>";
            else
                str += title;
            return str;
        }
    }
});