<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head th:replace="components/vue/vue-list :: head('新闻', 'list')"></head>
<body>
<div id="app">
    <template>
        <div style="margin-left: 6px;margin-bottom: 6px;">
            <el-form :inline="true" :model="searchForm" style="margin: 0; padding: 0;">
                <el-form-item th:label="#{newsInfo.title}">
                    <el-input size="small" v-model="searchForm.title" th:placeholder="#{pleaseInput} + #{title}" clearable></el-input>
                </el-form-item>
                <el-form-item th:label="#{newsInfo.newsStatus}">
                    <el-select size="small" v-model="searchForm.status" th:placeholder="#{pleaseChoose}">
                        <el-option
                                v-for="item in newsStatusList"
                                :key="item.typeCode"
                                :label="item.typeName"
                                :value="item.typeCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item th:label="#{newsInfo.newsType}">
                    <el-select size="small" v-model="searchForm.newsType" th:placeholder="#{pleaseChoose}">
                        <el-option
                                v-for="item in newsTypeList"
                                :key="item.typeCode"
                                :label="item.typeName"
                                :value="item.typeCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item th:label="#{newsInfo.publishDate}">
                    <el-date-picker size="small"
                            v-model="searchForm.publishDate"
                            type="daterange"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            unlink-panels
                            range-separator="-"
                            th:start-placeholder="#{startDate}"
                            th:end-placeholder="#{endDate}">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" icon="el-icon-search" @click="doSearch"><span th:text="#{search}"></span></el-button>
                    <el-button size="mini" icon="el-icon-refresh" @click="doReset"><span th:text="#{reset}"></span></el-button>
                </el-form-item>
            </el-form>
            <el-button th:if="${#authorization.expression('hasAnyRole(''__${add}__'')')}" type="primary" size="mini" icon="el-icon-plus" @click="doAdd"><span th:text="#{add}"></span></el-button>
            <!--<el-button type="primary" size="mini" icon="el-icon-upload2" @click="doImport"><span th:text="#{import}"></span></el-button>
            <el-button type="primary" size="mini" icon="el-icon-download" @click="doExport"><span th:text="#{export}"></span></el-button>-->
        </div>
        <el-table border stripe size="medium" height="356" :data="tableData" highlight-current-row
                  style="font-size: 12px"
                  v-loading="tableLoading" cell-style="padding:1px">
            <el-table-column align="center" type="index" :index="indexSerial" width="50"></el-table-column>
                    <!--<el-table-column align="center" prop="id" label="id" width="120"></el-table-column>
                    <el-table-column align="center" prop="createBy" label="创建人id" width="120"></el-table-column>
                    <el-table-column align="center" prop="createDate" label="创建时间" width="120"></el-table-column>
                    <el-table-column align="center" prop="updateBy" label="更新人id" width="120"></el-table-column>
                    <el-table-column align="center" prop="updateDate" label="更新时间" width="120"></el-table-column>-->
                    <el-table-column align="center" prop="title" th:label="#{newsInfo.title}" width="120"></el-table-column>
                    <el-table-column align="center" prop="userId" th:label="#{newsInfo.userId}" width="120"></el-table-column>
                    <el-table-column align="center" prop="newsStatus" th:label="#{newsInfo.newsStatus}" width="120" :formatter="formatNewsStatus"></el-table-column>
                    <el-table-column align="center" prop="content" th:label="#{newsInfo.content}" width="120" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column align="center" prop="imageUrl" th:label="#{newsInfo.imageUrl}" width="120">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="right">
                                <img :src="scope.row.imageUrl" th:alt="#{loading}" style="width: 120px; height: 120px;">
                                <div slot="reference" class="name-wrapper">
                                    <img :src="scope.row.imageUrl" th:alt="#{loading}"
                                         style="width: 24px; height: 24px;padding: 0; margin: 0">
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="publishDate" th:label="#{newsInfo.publishDate}" width="140"></el-table-column>
                    <el-table-column align="center" prop="tags" th:label="#{newsInfo.tags}" width="120"></el-table-column>
                    <el-table-column align="center" prop="newsType" th:label="#{newsInfo.newsType}" width="120" :formatter="formatNewsType"></el-table-column>
            <el-table-column align="center" th:label="#{operation}" width="200">
                <template slot-scope="scope">
                    <el-button th:if="${#authorization.expression('hasAnyRole(''__${edit}__'')')}" size="mini" type="primary" icon="el-icon-edit"
                               @click="handleEdit(scope.$index, scope.row)">
                    </el-button>
                    <el-button th:if="${#authorization.expression('hasAnyRole(''__${delete}__'')')}" size="mini" type="danger" icon="el-icon-delete"
                               @click="handleDelete(scope.$index, scope.row)">
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-col class="toolbar" style="padding:10px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNo"
                           :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total"
                           style="float:right"></el-pagination>
        </el-col>
    </template>
</div>
</body>
<script th:src="@{/js/vue/common.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    //Vue.http.options.emulateJSON = true;
    //Vue.http.options.emulateHTTP = true;
    var headerName = [[${_csrf.headerName}]];
    axios.defaults.headers.common[headerName] = [[${_csrf.token}]];

    //国际化
    international([[${session.locale}]]);

    var requestUrls = {
        list: "/api/newsInfos/data",
        add: "/api/newsInfos/add",
        edit: "/api/newsInfos/edit?id=",
        delete: "/api/newsInfos/ids/"
    };

    var app = new Vue({
        el: '#app',
        data: {
            newsTypeList: [[${newsTypeList}]],
            newsStatusList: [[${newsStatusList}]],
            tableData: [],
            pageNo: 1,
            pageSize: 10,
            total: 1000,
            tableLoading: true,
            searchForm: {
                title: "",
                status: "",
                publishDate: ""
            }
        },
        mounted: function () {
            this.loadData(this.pageNo, this.pageSize);
        },
        methods: {
            formatNewsStatus(row, column) {
                let list = [[${newsStatusList}]];
                for (let i = 0; i < list.length; i++) {
                    if (String(row.newsStatus) === String(list[i]["typeCode"])) {
                        return list[i]["typeName"];
                    }
                }
                return row.sex;
            },
            formatNewsType(row, column) {
                let list = [[${newsTypeList}]];
                for (let i = 0; i < list.length; i++) {
                    if (String(row.newsType) === String(list[i]["typeCode"])) {
                        return list[i]["typeName"];
                    }
                }
                return row.sex;
            },
            indexSerial(index) {
                return index + 1 + (this.pageNo - 1) * this.pageSize;
            },
            loadData(pageNo, pageSize) {
                if (!isNaN(pageNo)) {
                    this.pageNo = pageNo;
                }
                if (!isNaN(pageSize)) {
                    this.pageSize = pageSize;
                }
                var params_ = {
                    pageNo: this.pageNo,
                    pageSize: this.pageSize
                };

                Object.assign(params_, this.searchForm);
                for (let key in params_) {
                    if (isArray(params_[key])) {
                        params_[key] = params_[key].join(',');
                    }
                }

                this.tableLoading = true;
                this.$http.get(requestUrls.list, {
                    params: params_
                }).then((response) => {
                    this.tableLoading = false;
                    this.total = parseInt(response.data.total);
                    this.tableData = [];
                    for (let key in response.data.rows) {
                        this.$set(this.tableData, key, response.data.rows[key]);
                    }
                }).catch((error) => {
                    this.tableLoading = false;
                    let errorMessage = [[#{requestError}]];
                    if (error.response) {
                        errorMessage = error.response.data.message;
                    }
                    parent.showError(errorMessage);
                });
            },
            //每页显示数据量变更
            handleSizeChange(val) {
                //清除上一次请求的缓存，不然字体图标有缓存
                this.tableData = [];

                this.pageSize = val;
                this.loadData(this.pageNo, this.pageSize);
            },
            //页码变更
            handleCurrentChange(val) {
                //清除上一次请求的缓存，不然字体图标有缓存
                this.tableData = [];

                this.pageNo = val;
                this.loadData(this.pageNo, this.pageSize);
            },
            doSearch(event) {
                this.pageNo = 1;
                this.loadData(this.pageNo, this.pageSize);
            },
            doReset(event) {
                for (let i in this.searchForm) {
                    this.searchForm[i] = null;
                }
                this.doSearch(event);
            },
            handleEdit(index, row) {
                parent.showWindow({
                    title: [[#{edit}]],
                    content: requestUrls.edit + row.id
                });
            },
            handleDelete(index, row) {
                parent.showDelete(index, row);
            },
            doAdd(event) {
                parent.showWindow({
                    title: [[#{add}]],
                    content: requestUrls.add
                });
            },
            doEdit(event) {

            },
            doDelete(index, row) {
                this.$http.delete(requestUrls.delete + row.id)
                    .then((response) => {
                        parent.showSuccess([[#{delete}]]);
                        this.loadData(this.pageNo, this.pageSize);
                    }).catch((response) => {
                    console.error(response);
                });
            },
            doImport(event) {
                this.$http.get("/api/authorities/import", {}).then(function (response) {
                    this.$notify({
                        title: '提示',
                        message: response.data.message,
                        position: 'bottom-right',
                        duration: 2000
                    });
                }).catch(function (response) {
                    console.error(response);
                });
            },
            doExport(event) {
                window.open("/api/authorities/export");
            }
        }
    });

    function iframeMethond(index, row) {
        console.log('iframeMethond');
        app.doDelete(index, row);
    }

    function iframeUpdateList() {
        app.loadData(app.pageNo, app.pageSize);
    }

    /*]]>*/
</script>
</html>