<style>
  .mimititle .mimitBody{
    padding:20px;
    background-color: #fff;
    margin:10px 0 20px 0;
    display:table;
    width:100%;
  }
  .mimititle .mimitList{
    margin-bottom:15px;
    display: flex;
    flex-direction: row;
  }
  .mimititle .mimitBody .el-tag{
    min-width: 120px;
    padding-right: 50px;
  }
  .mimititle .el-button--small{
    padding:9px 25px;
  }
</style>
<template>
  <div class="mimititle">
    <div class="CommonHeader">页面标题设置</div>
    <div class="mimitBody">
       <template v-for="(item,index) in dataList">
          <div class="el-col el-col-12 mimitList" :key="index">
              <el-tag>{{item.firstItem.PageName}}</el-tag>
              <el-input type="text" style="margin:0 20px;" v-model="item.firstItem.SelfPageName" size="small"></el-input>
          </div>
          <div class="el-col el-col-12 mimitList" :key="index+1000">
              <el-tag v-if="item.secondItem">{{item.secondItem.PageName}}</el-tag>
              <el-input v-if="item.secondItem" v-model="item.secondItem.SelfPageName" type="text" style="margin:0 20px;" size="small"></el-input>
          </div>
       </template>
    </div>
    <el-button size="small" type="primary" @click="submitForm()">保存</el-button>
    <el-button size="small" @click="resetInfo()">恢复默认</el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        dataList: [],
      };
    },
    created() {

    },
    methods: {
      getList() {
        this.dataList = [];
        this.apipost("/api/Tenant/GetMiniprogramPageListExt", {}, res => {
          if (res.data.resultCode == 1) {
            var data = res.data.data;
            var myArray = [];
            if (data && data.length > 0) {
              data.forEach(item => {
                if (item.SubMenuList && item.SubMenuList.length > 0) {
                  item.SubMenuList.forEach(subItem => {
                    myArray.push(subItem);
                  })
                }
              });
              if (myArray && myArray.length > 0) {
                var totalpage = 0;
                if (myArray.length % 2 == 1) {
                  totalpage = parseInt(myArray.length / 2) + parseInt(1);
                } else {
                  totalpage = parseInt(myArray.length / 2);
                }
                for (var index = 0; index < totalpage; index++) {
                  var singleIndex = index * 2;
                  var doubleIndex = Number(index * 2) + Number(1)
                  var obj = {
                    firstItem: "",
                    secondItem: ""
                  };
                  if (singleIndex <= myArray.length) {
                    obj.firstItem = myArray[singleIndex];
                  }
                  if (doubleIndex <= myArray.length) {
                    obj.secondItem = myArray[doubleIndex];
                  }
                  this.dataList.push(obj)
                }
              }
            }
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //保存标题
      submitForm() {
        var setArray = []; //新增修改的数组
        if (this.dataList && this.dataList.length > 0) {
          this.dataList.forEach(item => {
            if (item.firstItem) {
              setArray.push({
                Id: item.firstItem.Id,
                SelfPageName: item.firstItem.SelfPageName,
              });
            }
            if (item.secondItem) {
              setArray.push({
                Id: item.secondItem.Id,
                SelfPageName: item.secondItem.SelfPageName,
              });
            }
          })
        }
        var msg = {
          setMsg: setArray,
        };
        this.apipost("/api/Tenant/SetMiniprogramPageTitle", msg, res => {
          if (res.data.resultCode == 1) {
            this.getList();
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
        })
      },

      //恢复默认
      resetInfo(){
        if (this.dataList && this.dataList.length > 0) {
          this.dataList.forEach(item => {
            if (item.firstItem) {
              item.firstItem.SelfPageName=''
            }
            if (item.secondItem) {
              item.secondItem.SelfPageName=''
            }
          })
        }
      }
    },
    mounted() {
      this.getList();
    }
  };
</script>