<template>
  <div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
    <div v-if="!friendLinkDialogVisible">
      <div class="filter-container" ref="filter-container">
        <el-form :inline="inline" ref="queryForm" :model="listQuery" label-width="100px">
        </el-form>
        <!--        <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>-->
        <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate"
                   type="primary" icon="edit">添加
        </el-button>
      </div>
      <el-table :key='tableKey' :data="list" border fit highlight-current-row
                style="width: 100%">
        <el-table-column
          type="index"
          align="center" label="序号" width="65">
        </el-table-column>
        <el-table-column width="100" align="center" label="排序">
          <template slot-scope="scope">
            <span>{{scope.row.rank}}</span>
          </template>
        </el-table-column>
        <el-table-column width="100" align="center" label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.onState===true?'上架':'下架'}}</span>
          </template>
        </el-table-column>

        <el-table-column width="200" align="center" label="前台显示文字">
          <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>

        <el-table-column width="200" align="center" label="链接">
          <template slot-scope="scope">
            <span>{{scope.row.linkUrl}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发布时间">
          <template slot-scope="scope">
            <span>{{scope.row.publishTime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="200" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button size="small" class="el-button el-button--text el-button--small" @click="handleUpdate(scope.row)">
              {{'编辑'}}
            </el-button>
            <el-button size="small" class="el-button el-button--text el-button--small" style="color: #6ce26c;"
                       v-if="scope.row.onState==false" @click="upStatus(scope.row,true)">上架
            </el-button>
            <el-button size="small" class="el-button el-button--text el-button--small" style="color: #1d90e6"
                       v-if="scope.row.onState==true" @click="upStatus(scope.row,false)">下架
            </el-button>
            <el-button class="el-button el-button--text el-button--small" style="color:red;" size="small"
                       @click="deleteHandler(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                       layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>
    <!-- 友情连接 -->
    <FriendLink v-if="friendLinkDialogVisible" :oneRow="oneRow" :title="modalTitle"
                v-on:friendLinkDialogEvent="friendLinkDialogEvent"></friendLink>

  </div>
</template>

<script>

    import {mapGetters} from 'vuex';
    import {
        deleteById,
        page,
        updateOnstateById
    } from '../../api/officialWebsit/friendLink';

    import Element1 from "../admin/menu/components/element";
    import ElRow from "element-ui/packages/row/src/row";
    import ElCol from "element-ui/packages/col/src/col";

    import {timestamp2Date} from "../../utils/dateUtils";
    import FriendLink from "./modal/friendLinkModel";

    export default {
        name: 'friendLinkManager',
        components: {
            FriendLink,
            ElCol,
            ElRow,
            Element1
        },
        data() {
            return {
                modalTitle: "创建",
                BASE_API: process.env.BASE_API,
                friendLinkDialogVisible: false,//添加、编辑弹框
                showLoadingBody: false,
                form: {
                    name: undefined,//名称
                    linkUrl: undefined,  //连接地址
                    brief: undefined, //简要说明
                    rank: 0, //排序
                    onState: false// 上下架状态
                },
                publishTime: undefined,
                list: null,
                total: null,
                status: {
                    0: '下架',
                    1: '上架'
                },
                listLoading: true,
                listQuery: {
                    page: 1,
                    limit: 10,
                    onState: undefined
                },
                inline: true,
                textMap: {
                    update: '编辑',
                    create: '创建'
                },
                labelForm: {},
                tableKey: 0
            }
        },
        created() {
            this.page()
        },
        methods: {
            /**
             * 添加
             * */
            handleCreate() {
                this.modalTitle = '创建';
                this.oneRow = {};
                this.friendLinkDialogVisible = true;
            },
            /**
             *  上下架
             */
            upStatus(row, onState) {
                updateOnstateById(row.id, onState).then(response => {
                    if (response.status === 200) {
                        this.$notify({
                            title: '成功',
                            message: '成功',
                            type: 'success',
                            duration: 2000
                        });
                        this.page();
                    } else {
                        this.$notify({
                            title: '失败',
                            message: '操作失败！',
                            type: 'error',
                            duration: 2000
                        });
                    }
                });
            },
            /**
             * 删除
             * */
            deleteHandler(row) {
                this.$confirm('确定删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteById(row.id).then(response => {
                        if (response.status === 200) {
                            this.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.page();
                        } else {
                            this.$notify({
                                title: '删除失败',
                                message: '操作失败！',
                                type: 'error',
                                duration: 2000
                            });
                        }
                    });
                })
            },

            /**
             * 编辑
             * */
            handleUpdate(row) {
                this.modalTitle = '编辑';
                this.oneRow = row;
                this.friendLinkDialogVisible = true;
            },
            /**
             * modal传递回来的数据
             * */
            friendLinkDialogEvent(e) {
                this.friendLinkDialogVisible = false;
                if (e) {
                    //编辑成功-重新加载列表
                    this.page();
                }
            },

            /**
             * 获取
             * */
            page() {
                this.listLoading = true;
                page(this.listQuery).then(response => {
                    let totalCountRs = undefined;
                    let listRs = undefined;
                    if (!this.$utils.isEmpty(response.data.data) && this.$utils.isInteger(response.data.totalCount)) {
                        listRs = response.data.data;
                        totalCountRs = response.data.totalCount;
                        listRs.map(function (item) {
                            if (item.publishTime != null) {
                                item.publishTime = timestamp2Date(item.publishTime);
                            }
                        });
                    }
                    this.listLoading = false;
                    this.list = listRs;
                    this.total = totalCountRs;
                })

            },
            handleFilter() {
                this.listQuery.page = 1;
                this.$refs.queryForm.validate(valid => {
                    if (valid) {
                        this.getList();
                    } else {
                        return false;
                    }
                });
            },
            handleSizeChange(val) {
                this.listQuery.limit = val;
                this.page();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.page();
            }
        }
    }
</script>
