<template>

  <div>

    <!--查询表单-->

    <el-form :model="params">

    <el-select v-model="params.siteId" placeholder="请选择站点">

    <el-option

    v-for="item in siteList"

    :key="item.siteId"

    :label="item.siteName"

    :value="item.siteId">

    </el-option>

    </el-select>

    页面别名：<el-input v-model="params.pageAliase" style="width: 100px"></el-input>

    <el-button type="primary" v-on:click="query" size="small">查询</el-button>

      <router-link class="mui-tab-item" :to="{path:'/cms/page/add/',query:{

      page: this.params.page,

      siteId: this.params.siteId}}">

        <el-button type="primary" size="small">新增页面</el-button>

      </router-link>

    </el-form>

    <el-table

      :data="list"

      style="width: 100%">

      <el-table-column type="index" width="">

      </el-table-column>

      <el-table-column

        prop="pageName"

        label="页面名称"

        width="">

      </el-table-column>

      <el-table-column

        prop="pageAliase"

        label="别名"

        width="">

      </el-table-column>

      <el-table-column

        prop="pageWebPath"

        label="访问路径">

      </el-table-column>

      <el-table-column

        prop="pagePhyisicalPath"

        label="物理路径">

      </el-table-column>

      <el-table-column

        prop="pageCreateTime"

        label="创建时间">

      </el-table-column>

      <el-table-column label="操作" width="">

        <template slot-scope="page">

          <el-button

            size="small"

            type="text"

            @click="edit(page.row.pageId)">编辑

          </el-button>

          <el-button

            size="small"

            type="text"

            @click="del(page.row.pageId)">删除

          </el-button>

        </template>

      </el-table-column>

    </el-table>

    <el-pagination

      layout="prev, pager, next"

      :total="total"

      :page-size="params.size"

      @current-change="changePage"

      :current-page="this.params.page"

      style="float: right;">

    </el-pagination>

  </div>

</template>

<script>

  import * as cmsApi from '../api/cms'

  import ElButton from "../../../../node_modules/element-ui/packages/button/src/button.vue";

  //import ElButton from "../../../../node_modules/element-ui/packages/button/src/button.vue";

  export default {

    //components: {ElButton},

    components: {ElButton},

    data() {

      return {

        list: [],

        siteList:[],//站点列表

        total: ,

        params: {

          page: ,

          size: ,

          siteId:'',

          pageAliase:''

        }

      }

    },

    methods: {

      query: function () {

        //alert('查询')

        //调用服务端的接口

        cmsApi.page_list(this.params.page,this.params.size,this.params).then((res) => {

          this.list = res.queryResult.list;

          this.total = res.queryResult.total;

        });

      },

      changePage: function (page) {

        this.params.page = page;

        this.query()

      },

      edit:function (pageId) {

        //打开修改页面

        this.$router.push({

          path: '/cms/page/edit/'+pageId

        })

      },

      del:function (pageId) {

        this.$confirm('确认删除吗？', '提示', {}).then(() => {

          cmsApi.page_del(pageId).then(res=>{

            if(res.success){

              this.$message.success("删除成功")

              this.query()

            }else{

              this.$message.error("删除失败")

            }

          })

        })

      }

    },

    mounted() {

      //当DOM元素渲染完成后调用

      this.query()

      this.siteList=[

        {

          siteId:'5a751fab6abb5044e0d19ea1',

          siteName:'门户主站'

        },

        {

          siteId:'',

          siteName:'测试站'

        }

      ];

    },

    created() {

      //取出路由中的参数，赋值给数据对象

      this.params.page=Number.parseInt(this.$route.query.page || )

      this.params.siteId=this.$route.query.siteId || ''

    }

  }

</script>