<template>
  <div class="CustomPage">
    <template v-if="CustomIsShowAdd">
      <div class="head-title">
        页面管理
        <el-button @click="CustomIsShowAdd=false" style="float:right;margin-top: -5px;" size="small" type="primary">
          新增页面
        </el-button>
      </div>
      <div class="content">
        <div class="searchInput">
          <el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入标题名称" v-model="msg.PageName"
            size="small" clearable @keyup.enter.native="msg.pageIndex=1,getList()" @clear="msg.pageIndex=1,getList()">
          </el-input>
          <span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"
            @click="msg.pageIndex=1,getList()"> </span>
        </div>
        <br>
        <el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
          <el-table-column prop="Id" label="ID" width="100">
          </el-table-column>
          <el-table-column prop="PageName" label="标题">
          </el-table-column>
          <el-table-column label="导航与模板" prop="DetailsList" width="400">
            <template slot-scope="scope">
              <div class="templat-list">
                <template v-if="scope.row.DetailsList && scope.row.DetailsList.length>0"
                  v-for="(subItem,subIndex) in scope.row.DetailsList">
                  <div class="templat-item" :key="subIndex">
                    <div style="color: rgb(153, 153, 153);">
                      <template v-if="subItem.NavName&&subItem.NavName!=''">{{subItem.NavName}}：</template>
                      {{subItem.TemplateShowName}}</div>
                  </div>
                </template>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="IsShowBottomTabBar" label="导航条" width="100">
            <template slot-scope="scope">
              <template v-if="scope.row.IsShowNav==1">
                显示
              </template>
              <template v-else>
                <font style="color:red;">不显示</font>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="IsShowBottomTabBar" label="底部导航" width="100">
            <template slot-scope="scope">
              <template v-if="scope.row.IsShowBottomTabBar==1">
                显示
              </template>
              <template v-else>
                <font style="color:red;">不显示</font>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="IsNoShowTitle" label="标题" width="100">
            <template slot-scope="scope">
              <template v-if="scope.row.IsNoShowTitle==0">
                显示
              </template>
              <template v-else>
                <font style="color:red;">不显示</font>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="IsHome" label="设为首页" width="150">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.IsHome" active-color="#409EFF" :active-value="1" :inactive-value="0"
                @change="updateIsHome(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="IsSchoolHomePage" label="设为校园版首页" width="180" v-if="mall_userInfo.IsOpenSchool==1">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.IsSchoolHomePage" active-color="#409EFF" :active-value="1"
                :inactive-value="0" @change="updateSchoolIsHome(scope.row)">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column prop="IsUse" label="禁用/启用" width="120">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.IsUse" active-color="#409EFF" :active-value="1" :inactive-value="0"
                @change="updateIsUse(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <img @click="EditCustom(scope.row)" style="width:32px;height:32px;margin:0 10px"
                src="../../assets/img/userman/edit.png" alt="">
              <img @click="RemoveCustom(scope.row,6)" style="width:32px;height:32px;margin:0 10px"
                src="../../assets/img/userman/del.png" alt="">
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:right" background @current-change="handleCurrentChange"
          :page-size="msg.pageSize" layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </template>
    <template v-else>
      <div class="head-title">
        <span @click="CustomIsShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">自定义页面</span><span
          style="margin:0 9px;color:#C0C4CC">/</span><span>编辑</span>
      </div>
      <div class="content">
        <div class="conten_indder">
          <el-form label-width="150px">
            <el-form-item label="标题">
              <el-input type="text" size="small" v-model="addMsg.PageName"></el-input>
            </el-form-item>
            <el-form-item label="启用/禁用">
              <el-switch v-model="addMsg.IsUse" active-color="#409EFF" :active-value="1" :inactive-value="0">
              </el-switch>
            </el-form-item>
            <el-form-item label="显示导航条">
              <el-switch v-model="addMsg.IsShowNav" active-color="#409EFF" :active-value="1" :inactive-value="0">
              </el-switch>
            </el-form-item>
            <el-form-item label="显示底部导航条">
              <el-switch v-model="addMsg.IsShowBottomTabBar" active-color="#409EFF" :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-form-item>
            <el-form-item label="不显示标题">
              <el-switch v-model="addMsg.IsNoShowTitle" active-color="#409EFF" :active-value="1" :inactive-value="0">
              </el-switch>
            </el-form-item>
            <el-form-item label="模板和导航">
              <div style="max-width:480px;">
                <div class="Custom_item" v-for="(item,index) in addMsg.DetailsList" :key="index">
                  <div flex="box:last">
                    <el-form label-width="80px">
                      <el-form-item label="导航名称" style="margin-bottom:20px;">
                        <el-input type="text" v-model="item.NavName" size="small"></el-input>
                      </el-form-item>
                      <el-form-item label="对应模板">
                        <el-input type="text" size="small" v-model="item.TemplateShowName" :disabled="true">
                          <el-button slot="append" @click="isShowModule=true,commonIndex=index">选择模板</el-button>
                        </el-input>
                      </el-form-item>
                    </el-form>
                    <div style="padding-left: 15px;">
                      <el-tooltip class="item" effect="dark" content="删除导航" placement="bottom">
                        <img @click="delModel(item,index)" style="cursor:pointer;"
                          src="../../assets/img/userman/del.png" alt="">
                      </el-tooltip>
                    </div>
                  </div>
                </div>
                <el-button type="text" @click="addModule()">
                  <i class="el-icon-plus"></i>
                  <span style="color: rgb(53, 53, 53);">新增模版和导航</span>
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
      </el-button>
    </template>
    <!-- 选择模板 -->
    <el-dialog title="选择模板" :visible.sync="isShowModule" width="910px">
      <choiceModule ref="choiceModule" @getCustom="getCustom"></choiceModule>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowModule = false">取 消</el-button>
        <el-button size="small" type="primary" @click="choiceModule()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import choiceModule from "../common/choiceModule.vue";
  export default {
    data() {
      return {
        commonIndex: -1,
        loading: false,
        CustomIsShowAdd: true,
        //模板弹窗
        isShowModule: false,
        dataList: [],
        msg: {
          PageName: "", //页面名称
          pageIndex: 1,
          pageSize: 10,
        },
        addMsg: {
          Id: 0,
          PageName: '',
          IsHome: 0,
          IsUse: 1,
          IsShowNav: 0,
          IsShowBottomTabBar: 1, //是否显示底部导航
          IsNoShowTitle: 0, //是否不显示标题 
          DetailsList: []
        },
        total: 0,
        mall_userInfo: {}
      };
    },
    components: {
      choiceModule
    },
    created() {
      this.mall_userInfo = JSON.parse(localStorage.mall_userInfo)
    },
    methods: {
      //选择模板
      getCustom(obj) {
        if (this.commonIndex > -1) {
          this.addMsg.DetailsList[this.commonIndex].TemplateId = obj.Id;
          this.addMsg.DetailsList[this.commonIndex].TemplateShowName = '#' + obj.Id + ':' + obj.TemplateName;
        }
        this.isShowModule = false;
      },
      //更新是否禁用
      updateIsUse(item) {
        this.apipost("/api/Template/SetMiniprogramPageTemplIsUse", {
          Id: item.Id,
          IsUse: item.IsUse
        }, res => {
          if (res.data.resultCode == 1) {
            this.getList();
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //更新是否为首页
      updateIsHome(item) {
        this.apipost("/api/Template/SetMiniprogramPageTemplIsHome", {
          Id: item.Id,
          IsHome: item.IsHome
        }, res => {
          if (res.data.resultCode == 1) {
            this.getList();
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //更新是否为校园首页
      updateSchoolIsHome(item) {
        this.apipost("/api/Template/SetMiniprogramPageSchoolIsHome", {
          Id: item.Id,
          IsSchoolHomePage: item.IsSchoolHomePage
        }, res => {
          if (res.data.resultCode == 1) {
            this.getList();
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
        })
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      getList() {
        this.apipost("/api/Template/GetMiniprogramPageTemplPageList", 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);
          }
        })
      },
      submitform(addMsg) {
        this.apipost("/api/Template/SetMiniprogramPageTempl", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.getList();
            this.CustomIsShowAdd = true;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //编辑
      EditCustom(item) {
        this.apipost("/api/Template/GetMiniprogramPageTempl", {
          Id: item.Id
        }, res => {
          if (res.data.resultCode == 1) {
            var jsonData = res.data.data;
            this.addMsg.Id = jsonData.Id;
            this.addMsg.PageName = jsonData.PageName;
            this.addMsg.IsUse = jsonData.IsUse;
            this.addMsg.IsShowNav = jsonData.IsShowNav;
            this.addMsg.IsHome = jsonData.IsHome;
            this.addMsg.DetailsList = jsonData.DetailsList;
            this.addMsg.IsShowBottomTabBar = jsonData.IsShowBottomTabBar;
            this.addMsg.IsNoShowTitle = jsonData.IsNoShowTitle;
            this.CustomIsShowAdd = false;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //删除
      RemoveCustom(item) {
        let that = this;
        that.Confirm("是否删除?", function () {
          that.apipost("/api/Template/RemoveMiniprogramPageTempl", {
            Id: item.Id,
            Status: 1,
          }, res => {
            if (res.data.resultCode == 1) {
              that.getList();
            } else {
              that.Info(res.data.message);
            }
          })
        });
      },
      //新增模板导航
      addModule() {
        let obj = {
          Id: 0,
          PageTemplID: 0,
          NavName: "",
          TemplateId: 0,
        }
        this.addMsg.DetailsList.push(obj);
      },
      //删除模板
      delModel(item, index) {
        let that = this;
        if (item.Id > 0) {
          that.Confirm("是否删除?", function () {
            that.apipost("/api/Template/RemoveMiniprogramPageTemplDetails", {
              Id: item.Id,
            }, res => {
              if (res.data.resultCode == 1) {
                that.addMsg.DetailsList.splice(index, 1);
              } else {
                that.Info(res.data.message);
              }
            })
          });
        } else {
          that.addMsg.DetailsList.splice(index, 1);
        }
      }
    },
    mounted() {
      this.getList();
    }
  };

</script>
<style>
  .CustomPage .templat-list {
    border: 1px solid #EBEEF5;
  }

  .CustomPage .templat-item {
    line-height: 40px;
    height: 40px;
    display: flex;
    font-size: 13px;
  }

  .templat-item:nth-child(odd) {
    background-color: #f7f7f7;
  }

  .templat-item:nth-child(even) {
    background-color: #fff;
  }

  .CustomPage .templat-item div {
    width: 90%;
    padding-left: 20px;
  }

  .CustomPage .Custom_item {
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
    margin-bottom: 10px;
  }

  .CustomPage .Custom_item>div {
    padding: 20px;
  }

  .CustomPage .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .CustomPage .conten_indder {
    padding: 20px;
    background-color: #fff;
    padding-right: 50%;
    min-width: 1100px;
  }

</style>
