<style>
  .minimenuDiv {
    padding: 20px;
  }

  .minimenuDiv .query-box {
    width: 100%;
    padding: 0 0 20px;
    border-bottom: 1px solid #ccc;
    position: relative;
    text-align: right;
  }

  .minimenuDiv .normalBtn {
    color: #fff;
    padding: 0 15px;
    height: 30px;
    background: #e95252;
    border: 1px solid #e95252;
    cursor: pointer;
    border-radius: 15px;
    margin-left: 10px;
    outline: none;
  }

</style>
<template>
  <div class="minimenuDiv">
    <div class="query-box">
      名称： <el-input type="text" style="width:234px;" size="small" v-model="msg.PageName" clearable
        @keyup.enter.native="msg.pageIndex=1,getPageList()"></el-input>
      类型： <el-select style="width:234px;" size="small" v-model="msg.QPageType">
        <el-option label="全部" :key="0" :value="0"></el-option>
        <el-option v-for="item in pageType" :key="item.Id" :value="item.Id" :label="item.Name"></el-option>
      </el-select>
      状态： <el-select style="width:234px;" size="small" v-model="msg.Status">
        <el-option label="全部" :key="-1" :value="-1"></el-option>
        <el-option :key="0" :value="0" label="正常"></el-option>
        <el-option :key="1" :value="1" label="禁用"></el-option>
      </el-select>
      <button type="button" class="normalBtn" @click="msg.pageIndex=1,getPageList()">查询</button>
      <button type="button" class="normalBtn" @click="menuDialog=true,resetMsg()">新增</button>
      <button type="button" class="normalBtn" @click="CommonJump('setminipage',{})">设置小程序菜单</button>
    </div>
    <table class="commonTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>菜单编号</th>
        <th>菜单名称</th>
        <th>菜单链接</th>
        <th>菜单分类</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in dataList" :key="index">
        <td>{{item.PageId}}</td>
        <td>{{item.PageName}}</td>
        <td>{{item.PageUrl}}</td>
        <td>{{item.PageTypeStr}}</td>
        <td>{{item.StatusStr}}</td>
        <td>
          <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
            <el-button type="primary" icon="el-icon-edit" @click="getMenu(item.PageId)" circle style="padding:6px;">
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <el-button v-if="item.Status==0" type="danger" icon="el-icon-delete" @click="delMenu(item.PageId)" circle
              style="padding:6px;"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="恢复" placement="top-start">
            <el-button v-if="item.Status==1" type="primary" icon="iconfont icon-icon_huifu"
              @click="recoverMenu(item.PageId)" circle style="padding:5px;"></el-button>
          </el-tooltip>
        </td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      v-if="dataList.length>0" layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total">
    </el-pagination>

    <!-- 新增菜单 -->
    <el-dialog title="新增菜单" :visible.sync="menuDialog" width="500px">
      <el-form :model="addMsg" :rules="menurules" ref="addMsg" label-width="150px">
        <el-form-item label="菜单名称" prop="PageName">
          <el-input type="text" style="width:234px" size="small" maxlength="25" v-model="addMsg.PageName"></el-input>
        </el-form-item>
        <el-form-item label="菜单连接" prop="MenuUrl">
          <el-input type="text" style="width:234px" size="small" maxlength="100" v-model="addMsg.PageUrl"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-select style="width:234px;" size="small" v-model="addMsg.PageType">
            <el-option v-for="item in pageType" :key="item.Id" :value="item.Id" :label="item.Name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否有参数">
          <el-switch v-model="addMsg.IsParameter" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="参数值" v-if="addMsg.IsParameter==1">
          <el-input type="text" style="width:234px" size="small" maxlength="25" v-model="addMsg.ParameterValue">
          </el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input type="text" style="width:234px" @keyup.native="checkInteger(addMsg,'PageSort')" size="small"
            maxlength="25" v-model="addMsg.PageSort"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="menuDialog = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm('addMsg')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        menuDialog: false,
        currentPage: 1,
        total: 0,
        msg: {
          pageIndex: 1,
          pageSize: 20,
          QPageType: 0,
          PageName: "", //菜单名称
          Status: -1, //菜单状态
        },
        dataList: [],
        addMsg: {
          PageId: 0, //页面编号
          PageType: 1, //页面类型(1-基础页面,2-营销页面，3-订单页面，4-插件页面，5-diy页面
          PageName: '', //页面名称
          PageUrl: "", //页面地址
          PageSort: 0, //页面排序
          IsParameter: 0, //是否有参数(0-无参数，1-有参数)
          ParameterValue: "", //参数值
        },
        pageType: [],
        menurules: {
          PageName: [{
            required: true,
            message: '请填写菜单名称。',
            trigger: 'blur'
          }],
        }
      };
    },
    created() {

    },
    methods: {
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getPageList();
      },
      submitForm(addMsg) {
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.addMenu();
          } else {
            return false;
          }
        });
      },
      //重置菜单
      resetMsg() {
        this.addMsg.PageId = 0;
        this.addMsg.PageType = 1;
        this.addMsg.PageName = "";
        this.addMsg.PageUrl = "";
        this.addMsg.PageSort = 0;
        this.addMsg.IsParameter = 0;
        this.addMsg.ParameterValue = "";
      },
      //获取页面类型
      getPageTypeList() {
        this.apipost("/api/Tenant/GetMiniProgramePageType", {}, res => {
          if (res.data.resultCode == 1) {
            this.pageType = res.data.data;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //获取分页数据
      getPageList() {
        this.apipost("/api/Tenant/GetMiniProgramePageManage_Page", this.msg, res => {
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //添加修改菜单
      addMenu() {
        this.apipost("/api/Tenant/SetMiniProgramePageManage", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.getPageList();
            this.menuDialog = false;
            this.resetMsg();
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //根据编号获取菜单
      getMenu(Id) {
        this.apipost("/api/Tenant/GetMiniProgramePageManage", {
          PageId: Id
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
            this.menuDialog = true;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //删除菜单
      delMenu(Id) {
        var that = this;
        that.Confirm("是否删除?", function () {
          that.apipost("/api/Tenant/SetMiniProgramePageManageStatus", {
            PageId: Id,
            Status: 1
          }, res => {
            if (res.data.resultCode == 1) {
              that.Success(res.data.message);
              that.getPageList();
            } else {
              that.Info(res.data.message);
            }
          })
        });
      },
      //恢复菜单
      recoverMenu(Id) {
        this.apipost("/api/Tenant/SetMiniProgramePageManageStatus", {
          PageId: Id,
          Status: 0
        }, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.getPageList();
          } else {
            this.Info(res.data.message);
          }
        })
      },

    },
    mounted() {
      this.getPageTypeList();
      this.getPageList();
    }
  };

</script>
