<style>
  .WebSiteCustomer .el-button.is-circle {
    padding: 6px;
  }

  .WebSiteCustomer .preview {
    color: #409eff;
    text-decoration: underline
  }

  .webSitePageName {
    cursor: pointer;
    color: #409eff;
  }

</style>
<template>
  <!--自定义页面-->
  <div class="WebSiteCustomer">
    <div class="query-box">
      <ul>
        <li>
          <label>名称</label>
          <el-input v-model="msg.PageName" :placeholder="$t('system.ph_in')" @keyup.native.enter="getData" class="w210">
          </el-input>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getData()" />
          <input type="button" class="normalBtn" @click="goUrl('WebSiteUpdate',0)" value="新增頁面" />
        </li>
      </ul>
    </div>
    <div>
      <el-table :data="dataList" style="width: 100%" v-loading="loading"
        :default-sort="{prop: 'date', order: 'descending'}">
        <el-table-column prop="PageName" label="頁面名稱" header-align="center" align="center">
          <template slot-scope="scope">
            <span class="webSitePageName" @click="GoCustom(scope.row.Id)">{{scope.row.PageName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="CreateByName" label="新增人員" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="UpdateTimeStr" label="最後更新時間" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="CreateTimeStr" label="新增時間" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="IsIndex" label="设为首页" header-align="center" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.IsIndex"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeIndexStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
              <el-button type="primary" icon="el-icon-edit" circle @click="goUrl('WebSiteUpdate',scope.row.Id)">
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" circle @click="deleteData(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total=total>
      </el-pagination>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        msg: {
          PageName: '', //名称
          pageSize: 15,
          pageIndex: 1,
        },
        total: 0,
        currentPage: 1,
        dataList: [],
        addMsg: {
          Id: 0, //编号
          IsOpen: 0, //状态(0-关闭，1-开启)
          PageName: '', //档案名称
          Url: '', //档案路劲
        },
        //当前登录用户信息
        CurrentUserInfo: {},
      }
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.CurrentUserInfo = userInfo;
      this.getData();
    },
    methods: {
      //获取配置
      getData() {
        //获取现有线路列表
        this.loading = true;
        this.apipost(
          "ws_get_GetPagePageList",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              res.data.data.pageData.forEach(x=>{
                x.IsIndex=x.IsIndex==1
              })
              this.dataList = res.data.data.pageData;
              this.total = res.data.data.count
            } else {
              this.loading = false;
            }
          },
          err => {}
        );
      },
      handleCurrentChange(val) {
        //翻页功能按钮
        this.msg.pageIndex = val;
        this.getData();
      },
      resetPageIndex() {
        //查询初始化页码
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      //删除
      deleteData(item) {
        var that = this;
        that.Confirm("是否删除?", function () {
          that.apipost(
            "ws_post_RemovePage", {
              Id: item.Id
            },
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getData();
              } else {
                that.Error(res.data.message);
              }
            },
            null
          );
        });
      },
      //跳转
      goUrl(name, id) {
        this.$router.push({
          name: name,
          query: {
            Id: id,
            blank: "y",
            tab: "编辑自定页面"
          }
        });
      },
      changeIndexStatus(e){
        this.loading = true;
        let msg={
          id:e.Id,
          isindex:e.IsIndex?1:0
        }
        this.apipost(
          "ws_get_setPageIndex",
          msg,
          res => {
            this.loading = false;
            this.getData();
          },
          err => {}
        );
      },
      //跳转预览
      GoCustom(Id) {
        var B2BDomain = this.CurrentUserInfo.B2BDomain;
        this.$tripUtils.GotoB2CCustomer(B2BDomain, Id);
      }
    }
  }

</script>