<template>
<ifbp-page>
<!-- <div class="app-detail"> -->
  <ifbp-breadcrumb  v-if="isAppCreate" name="新增磁贴信息"></ifbp-breadcrumb>
  <ifbp-breadcrumb v-else name="修改磁贴信息"></ifbp-breadcrumb>
  <ifbp-button-area>
      <i class="el-icon-edit" v-if="!isAppCreate" @click="appFromEdit"></i>
      <el-button @click="onCancel" v-if="this.isAppFormEdit" id="appletBtn">取消</el-button>
      <el-button type="primary" @click="onSubmit" v-if="this.isAppFormEdit">保存</el-button>
  </ifbp-button-area>
  <!-- 编辑状态下的条件设置 -->
<ifbp-main-area type="detail">
  <el-form ref="appFormData" :model="appFormData" :rules="rules" inline label-width="110px" class="oldApplet" v-if="this.isAppFormEdit">
    <el-form-item label="产品" prop="areaId">
      <el-select v-model="appFormData.areaId" @change="appDetailChange">
        <el-option v-for="item in proDetailOptions" :value="item.id" :label="item.areaName">{{item.areaName}}</el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="磁贴分组" prop="groupId">
      <el-select v-model="appFormData.groupId">
        <el-option v-for="item in appDetailOptions2" :value="item.id" :label="item.name">{{item.name}}</el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="磁贴标签" prop="labels">
      <el-select v-model="appFormData.labels">
        <el-option v-for="item in labels" :value="item.code" :label="item.name">{{item.name}}</el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="磁贴名称" prop="appName">
      <el-input v-model="appFormData.appName"></el-input>
    </el-form-item>
    <el-form-item label="磁贴编码" prop="appCode">
      <el-input v-model="appFormData.appCode"></el-input>
    </el-form-item>
    <el-form-item label="磁贴类型" prop="platform">
      <el-select v-model="appFormData.platform">
        <el-option v-for="item in platformOptions" :value="item.value" :label="item.name">{{item.name}}</el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="磁贴链接" prop="url">
      <el-input v-model="appFormData.url"></el-input>
    </el-form-item>
    <el-form-item label="磁贴链接类型" prop="urltype">
      <el-select v-model="appFormData.urltype">
        <el-option v-for="item in linkType" :value="item.value" :label="item.name">{{item.name}}</el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="磁贴描述信息">
      <el-input v-model="appFormData.appDesc"></el-input>
    </el-form-item>
    <el-form-item label="排序级别">
      <el-input v-model="appFormData.appIndex"></el-input>
    </el-form-item>
    <el-form-item label="页脚">
      <el-input v-model="appFormData.footer"></el-input>
    </el-form-item>
  </el-form>
  <!-- 非编辑状态下的条件设置 -->
  <el-form ref="appFormData" :model="appFormData" :rules="rules" inline label-width="110px" class="oldApplet" v-else>
    <el-form-item label="产品" prop="areaId">
      <span v-for="item in proDetailOptions" v-show="item.id === appFormData.areaId">{{item.areaName}}</span>
    </el-form-item>
    <el-form-item label="磁贴分组" prop="groupId">
      <span v-for="item in appDetailOptions2" v-show="item.id === appFormData.groupId">{{item.name}}</span>
    </el-form-item>
    <el-form-item label="磁贴标签" prop="labels">
      <span v-for="item in labels" v-show="appFormData.labels.indexOf(item.code) > -1">{{item.name+' '}}</span>
    </el-form-item>
    <el-form-item label="磁贴名称" prop="appName">
      {{appFormData.appName}}
    </el-form-item>
    <el-form-item label="磁贴编码" prop="appCode">
      {{appFormData.appCode}}
    </el-form-item>
    <el-form-item label="磁贴类型" prop="platform">
      <span v-for="item in platformOptions" v-show="item.value === appFormData.platform">{{item.name}}</span>
    </el-form-item>
    <el-form-item label="磁贴链接" prop="url">
      {{appFormData.url}}
    </el-form-item>
    <el-form-item label="磁贴链接类型" prop="urltype">
      <span v-for="item in linkType" v-show="item.value === appFormData.urltype">{{item.name}}</span>
    </el-form-item>
    <el-form-item label="磁贴描述信息">
      {{appFormData.appDesc}}
    </el-form-item>
    <el-form-item label="排序级别">
      {{appFormData.appIndex}}
    </el-form-item>
    <el-form-item label="页脚">
      {{appFormData.footer}}
    </el-form-item>
  </el-form>
  <div class="" id="iconPicker">
    <div class="icon-show">
      <div class="icon-info">
        <i :class="appFormData.appIcon + ' iconfont_form'"></i>
      </div>
      <el-upload
      class="avatar-uploader"
      action="/wbalone/appMGT/iconUpload"
      v-if="this.isAppFormEdit"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="appFormData.iconContent":src="appFormData.iconContent" class="avatar">
      <div v-else style="height:100%;text-align:center;width:100%;">
        <i class="el-icon-plus avatar-uploader-icon"></i>点击上传图标
      </div>
      <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
    </el-upload>
    <div class="avatar-uploader" v-if="!this.isAppFormEdit">
      <img :src="appFormData.iconContent" class="avatar">
    </div>
   </div>
   <div class="" v-if="this.isAppFormEdit">
     <p class="iconChoose">您可选择如下icon作为磁贴图标</p>
     <el-tabs type="border-card" v-model="tabPath" @tab-click="tabShow" style="width:60%" class="mrtb">
       <el-tab-pane :label="item.name" :name="item.path" v-for="item in iconsList" style="height:150px; overflow-y:scroll;">
         <span :class="item2.fontClass" v-for="item2 in iconArray" @click="iconClick(item2)"></span>
       </el-tab-pane>
     </el-tabs>
     <div class="colors">
       <span :class="item.colorclass" v-for="item in colors" @click="setColors(item)">
       </span>
     </div>
   </div>

  </div>
  <div class="newApplet">
    <el-form class="" ref="AppMagnetType" :rules="appMagnetRules" inline label-width="110px" style="width:26%" :model="appFormData" v-if="this.isAppFormEdit">
      <el-form-item label="磁贴样式" prop="tileType">
        <el-select v-model="appFormData.tileType" @change="magnetTypeChange">
          <el-option v-for="item in appStyle" :value="item.value" :label="item.name">{{item.name}}</el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form class="" ref="AppMagnetType" :rules="appMagnetRules" inline label-width="80px" style="width:26%" :model="appFormData" v-else>
      <el-form-item label="磁贴样式" prop="tileType">
        <!-- {{appFormData.tileType}} -->
        <span v-for="item in appStyle" v-if="(item.value === appFormData.tileType)&& (appFormData.tileType)">{{item.name}}</span>
      </el-form-item>
    </el-form>
  </div>

  <div class="appCharts"  v-if="isShowCharts">
    <el-form class="" ref="chartForm" :rules="chartRules" inline label-width="110px"  :model="appFormData" v-if="this.isAppFormEdit">
      <el-form-item label="图表类型" prop="chartType">
        <el-select v-model="appFormData.chartType">
          <el-option v-for="item in chartType" :value="item.value" :label="item.name">{{item.name}}</el-option>
        </el-select>
        <!-- <el-input v-model="appFormData.chartType"></el-input> -->
      </el-form-item>
      <el-form-item label="图表数据URL" prop="chartUrl">
        <el-input v-model="appFormData.chartUrl"></el-input>
      </el-form-item>

    </el-form>
    <el-form class="" ref="chartForm" :rules="chartRules" inline label-width="110px"  :model="appFormData" v-else>
      <el-form-item label="图表类型" prop="chartType">
        {{appFormData.chartType}}
      </el-form-item>
      <el-form-item label="图表数据URL" prop="chartUrl">
        {{appFormData.chartUrl}}
      </el-form-item>

    </el-form>
  </div>
  <div class="dataApi"  v-if="isShowApi">
    <el-form class="" ref="apiForm" :rules="apiRules" inline label-width="110px"  :model="appFormData" v-if="this.isAppFormEdit">
      <el-form-item label="数字数据URL" prop="numberUrl">
        <el-input v-model="appFormData.numberUrl"></el-input>
      </el-form-item>
      <el-form-item label="单位">
        <el-input v-model="appFormData.numberUnit"></el-input>
      </el-form-item>
      <el-form-item label="颜色">
        <el-input v-model="appFormData.numberColor"></el-input>
      </el-form-item>
      <el-form-item label="条件">
        <!-- <el-input v-model="appFormData.numberCondition"></el-input> -->
        <el-select v-model="appFormData.numberCondition" @change="numberConditionChange">
          <el-option v-for="item in numberCondition" :label="item.name" :value="item.value">{{item.name}}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="条件值" prop="numberValue" :required="!!appFormData.numberCondition">
        <el-input type="number" v-model="appFormData.numberValue"></el-input>
      </el-form-item>
      <el-form-item label="对应条件显示的颜色" prop="numberConditionColor" :required="!!appFormData.numberCondition">
        <el-input  v-model="appFormData.numberConditionColor"></el-input>
      </el-form-item>
      <!-- <el-form-item label="对应条件显示的颜色">
        <div class="colors ApiColors">
          <span :class="item.colorclass" v-for="item in colors" @click="setApiColors(item)">
          </span>
        </div>
      </el-form-item> -->
    </el-form>
    <el-form class="" ref="apiForm" :rules="apiRules" inline label-width="110px"  :model="appFormData" v-else>
      <el-form-item label="数字数据URL" prop="numberUrl">
        {{appFormData.numberUrl}}
      </el-form-item>
      <el-form-item label="单位">
        {{appFormData.numberUnit}}
      </el-form-item>
      <el-form-item label="颜色">
        {{appFormData.numberColor}}
      </el-form-item>
      <el-form-item label="条件" >
        <!-- {{appFormData.numberCondition}} -->
        <span v-for="item in numberCondition" v-if="(appFormData.numberCondition === item.value)&&(appFormData.numberCondition)">{{item.name}}</span>
      </el-form-item>
      <el-form-item label="条件值" prop="numberValue" :required="!!appFormData.numberCondition">
        {{appFormData.numberValue}}
      </el-form-item>
      <el-form-item label="对应条件显示的颜色" prop="numberConditionColor" :required="!!appFormData.numberCondition">
        {{appFormData.numberConditionColor}}
      </el-form-item>
    </el-form>
    <div class="colors ApiColors" id="ApiColors" v-if="this.isAppFormEdit">
      <div class="apiSetColor">
      请选择数值颜色
      </div>
      <span :class="item.colorclass" v-for="item in colors" @click="setApiColors(item)">
      </span>
    </div>
    <div class="colors ApiColors" v-if="this.isAppFormEdit">
      <div class="apiSetColor">
        请选择带条件的数值颜色
      </div>
      <span :class="item.colorclass" v-for="item in colors" @click="setApiConditionColors(item)">
      </span>
    </div>
  </div>
  <div class="appSubTable">
    <!--<div class="app-detail">-->
      <div class="title-container">
        <h2 class="name">磁贴授权功能</h2>
      </div>
      <div class="apptitle">
        <div class="fl input-group">
          <el-checkbox v-model="checkedAll" @change="checkAll">全选</el-checkbox>
          <el-button type="primary" @click="changeFan" size="small">反选</el-button>
        </div>
        <div class="fr input-group">
          <el-button type="primary" @click="openDialogClick">选择新增</el-button>
          <el-button type="primary" @click="update">更新</el-button>
          <el-button type="primary" @click="multiDelete">删除</el-button>
        </div>
      </div>
    </div>

    <!--磁贴授权功能-->
    <div class="main-panel" style="padding:0px 0px;">
      <div class="applet" id="group_list" style="padding: 10px 0px 0px 0px;margin-top: 0px;">
        <!--div下放的是功能块-->
        <div class="row">
          <div class="func-div" v-for="(item, index) in list">
            <div class="app-wrap" @click="checkClick(item)">
              <el-row style="padding-top: 10px;margin-bottom: 5px;">
                <el-col :span="4" style="padding-left: 10px;">
                  <el-checkbox v-model="item.checked"></el-checkbox><!--:value="item.pk_relation"-->
                </el-col>
                <el-col :span="20" align="middle">
                  {{item.pk_app_func?item.beanMap.pk_app_func_ref[item.pk_app_func]?item.beanMap.pk_app_func_ref[item.pk_app_func].name:'':''}}
                </el-col>
              </el-row>

              <div class="img-and-dynamic">
              <span class="img-area">
                <i class="iconfont appIcon cyan iconfont icon-tablelayout cyan " ></i><!--:class="item.app_icon"-->
              </span>
              </div>
            </div>
            <div class="checkbox-wrap">
              <template v-if="modeMap[item.pk_app_func]">
                <el-checkbox v-if="modeMap[item.pk_app_func].globe" v-model="item.f_global" label="全局"></el-checkbox>
                <el-checkbox v-if="modeMap[item.pk_app_func].group" v-model="item.f_group" label="集团"></el-checkbox>
                <el-checkbox v-if="modeMap[item.pk_app_func].org" v-model="item.f_org"  label="组织"></el-checkbox>
              </template>
              <el-button type="primary" style="float:right;margin-right:10px;" @click="del(index, item)" icon="delete" size="mini"></el-button>
            </div>
          </div>
        </div>
      </div>
      <!--    </div>-->
      <!--分页组件-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalElements">
      </el-pagination>

      <!--dialog-->
      <el-dialog title="未授权功能" :customClass="modclass" :visible="addDialogVisible" @update:visible="val => this.addDialogVisible = val" fullscreen="true"  :show-close="false">

        <div id="group_list">
          <div class="apptitle ">
            <h2 class="name fl">未授权功能</h2>
            <div class="fr">
              <el-button type="text" @click="showSearch">
                高级搜索
                <i class="el-icon-caret-bottom" v-if="this.isHide"></i>
                <i class="el-icon-caret-top" v-if="!this.isHide"></i>
              </el-button>
              <!-- <el-button type="primary" @click="goBack" style="float:right;margin-left:20px;">返回</el-button> -->
            </div>
          </div>


          <div id="advanced-search1" :class="{hide: isHide}">
            <el-form ref="form" :model="form" inline label-width="110px">
              <el-form-item label="产品">
                <el-select v-model="proValueFunc"  placeholder="请选择产品" @change="appChangeFunc">
                  <el-option v-for="item in proDetailOptions" :value="item.moduleid" :label="item.systypename">
                    {{item.systypename}}
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="功能分类"><!--磁贴分组-->
                <el-select v-model="appletGroupsValueFunc" placeholder="请选择功能分类" @change="appletChangeFunc">
                  <el-option v-for="item in appOptionsFunc2" :value="item.pk_app_groups" :label="item.name">
                    {{item.name}}
                  </el-option>
                </el-select>
              </el-form-item>
              <!--<el-form-item label="编码/名称" >
                <el-input placeholder="请选择编码/名称" @keyup.enter.native="inputUp" v-model="input1"></el-input>
              </el-form-item>-->
            </el-form>
          </div>
          <div class="apptitle">
            <div class="fl input-group">
              <el-checkbox v-model="checkedAllDialog" @change="checkAllDialog">全选</el-checkbox>
              <el-button type="primary" @click="fanCheckAllDialog" size="small">反选</el-button>
            </div>
          </div>

          <!--div下放的是功能块-->
          <div class="row">
            <div class="func-div" v-for="(item, index) in unrelatedList">
              <div class="app-wrap" @click="checkDialogClick(item)">
                <el-row style="padding-top: 10px;margin-bottom: 5px;">
                  <el-col :span="4" style="padding-left: 10px;">
                    <el-checkbox v-model="item.checked"></el-checkbox><!--:value="item.pk_relation"-->
                  </el-col>
                  <el-col :span="20" align="middle">
                    {{item.pk_app_func?item.beanMap.pk_app_func_ref[item.pk_app_func]?item.beanMap.pk_app_func_ref[item.pk_app_func].name:'':''}}
                  </el-col>
                </el-row>

                <div class="img-and-dynamic">
              <span class="img-area">
                <i class="iconfont appIcon cyan iconfont icon-tablelayout cyan " ></i><!--:class="item.app_icon"-->
              </span>
                </div>
              </div>
              <div class="checkbox-wrap">
                <template v-if="modeMap[item.pk_app_func]">
                  <el-checkbox v-if="modeMap[item.pk_app_func].globe" v-model="item.f_global" label="全局"></el-checkbox>
                  <el-checkbox v-if="modeMap[item.pk_app_func].group" v-model="item.f_group" label="集团"></el-checkbox>
                  <el-checkbox v-if="modeMap[item.pk_app_func].org" v-model="item.f_org"  label="组织"></el-checkbox>
                </template>
              </div>
            </div>
          </div>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmClick">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </ifbp-main-area>
  <!-- </div> -->
</ifbp-page>
</template>
<script>
import appFuncRelations from "./appFuncRelations.js";
export default {
  mixins: [appFuncRelations],
  data() {
    // debugger;
    var id = this.$root.$router.currentRoute.params.id;
    var icons = require('../../../legacy/fonts/iconsConfig.js');
    // var isAppCreate = this.$route.fullPath === "/applet/add";
    var isAppCreate = !id;
    var valiNumberVal = (rule, value, callback) => {
      var patt1=new RegExp("^[0-9]*[1-9][0-9]*$");
      if(((value ===null || value === '') && !!this.appFormData.appIndex) || !patt1.test(value)){
        callback(new Error('请输入数字'));
      }else {
        callback();
      }
    };
    var valiNumberValue = (rule, value, callback) => {
        if((value === ''|| value === null) && !!this.appFormData.numberCondition){
          callback(new Error('请输入条件值'));
        } else {
          callback();
        }
    };
    var valiNumberColor = (rule,value,callback) => {
        if((value === '' || value === null) && !!this.appFormData.numberCondition){
          callback(new Error('请选择条件值的颜色'));
        } else {
          callback();
        }

    };
    return {
      id: id,
      appFormData: {
        areaId: '',
        groupId:'',
        labels:[],
        appName:'',
        appCode:'',
        platform:'',
        urltype:'',
        url:'',
        appDesc:'',
        appIndex:'',
        tileType:'',
        appIcon:'cyan  icon-appicon ',
        chartUrl:'',
        numberUnit:'',
        numberUrl:'',
        numberColor:'',
        numberValue:0,
        numberCondition:0,
        numberConditionColor:'',
        footer:'',
        chartType:'',
        iconContent:''
      },
      appDetailOptions: [],
      proDetailOptions: [],
      appDetailOptions2: [],
      appGroupsValue: '',
      proDetailValue: '',
      appStyleValue: '',
      groupId: '',
      areaId: '',
      labels: [],
      iconAdd:'',
      tabPath: icons.icons[0].path || '',
      iconArray: [],
      iconsList: icons.icons,
      iconShow: '',
      setIconColors:'',
      setIconFontClass:'',
      appSubData:[],
      numberColor:'',
      isShowIcon:true,
      isShowCharts:false,
      isShowApi:false,
      isAppCreate:isAppCreate,
      isAppFormEdit:isAppCreate,
      isAppSubFormEdit:false,
      appSubDelDialogVisible:false,
      appSubCreateData:{},
      isAppSubCreate:false,
      appSubDelId:'',
      appSubDataOrigin:{},
      imageUrl:'',
      arr: [],
      linkType: [
        {
        name: "请选择分组",
        value: ""
        },
        {
          name: "vue页面",
          value: "plugin"
        },
        {
          name: "网页链接",
          value: "url"
        },
        {
          name: "概览页",
          value: "view"
        }
      ],
      platformOptions: [
        {
          name: "请选择分组",
          value: ""
        },
        {
          name: "平台应用",
          value: "web"
        },
        {
          name: "非平台应用",
          value: "app"
        }
      ],
      appStyle: [
        {
        name: "请选择分组",
        value: ""
        },
        // {
        //   name: "图标",
        //   value: "icon"
        // },
        {
          name: "图表",
          value: "charts"
        },
        {
          name: "数字",
          value: 'api'
        }
      ],
     colors: [
       {name: "red        ", colorclass: "bg-red        " },
       {name: "pink       ", colorclass: "bg-pink       " },
       {name: "purple     ", colorclass: "bg-purple     " },
       {name: "deep-purple", colorclass: "bg-deep-purple" },
       {name: "indigo     ", colorclass: "bg-indigo     " },
       {name: "blue       ", colorclass: "bg-blue       " },
       {name: "light-blue ", colorclass: "bg-light-blue " },
       {name: "cyan       ", colorclass: "bg-cyan       " },
       {name: "teal       ", colorclass: "bg-teal       " },
       {name: "green      ", colorclass: "bg-green      " },
       {name: "light-green", colorclass: "bg-light-green" },
       {name: "lime       ", colorclass: "bg-lime       " },
       {name: "yellow     ", colorclass: "bg-yellow     " },
       {name: "amber      ", colorclass: "bg-amber      " },
       {name: "orange     ", colorclass: "bg-orange     " },
       {name: "deep-orange", colorclass: "bg-deep-orange" },
       {name: "brown      ", colorclass: "bg-brown      " },
       {name: "grey       ", colorclass: "bg-grey       " },
       {name: "blue-grey  ", colorclass: "bg-blue-grey  " },
       {name: "black      ", colorclass: "bg-black      " }
     ],
     numberCondition:[
       {name:"请选择条件", value:0},
       {name:"大于", value:1},
       {name:"小于", value:2},
       {name:"等于", value:3},
       {name:"大于等于", value:4},
       {name:"小于等于", value:5}
     ],
     chartType:[
       {name:"请选择图表类型", value:""},
       {name:"子弹图", value:"bulletChart"},
       {name:"折线图", value:"lineChart"},
       {name:"柱状图", value:"cloumnChart"},
       {name:"进度条", value:"appProgress"},
      //  {name:"自定义", value:"customChart"}
     ],
     rules:{
       areaId:[{required: true, message: '请选择产品', trigger: 'change' }],
       groupId:[{required: true, message: '请选择磁贴分组', trigger: 'change' }],
       appName:[{required: true, message: '请输入磁贴名称', trigger: 'blur' }],
       appCode:[{required: true, message: '请输入磁贴编码', trigger: 'blur' }],
       platform:[{required: true, message: '请选择磁贴类型', trigger: 'change' }],
       url:[{required: true, message: '请输入磁贴链接', trigger: 'blur' }],
       urltype:[{required: true, message: '请选择磁贴链接类型', trigger: 'change' }],
       appIndex:[{validator: valiNumberVal, trigger: 'blur' }]
     },
     appMagnetRules:{
      //  tileType:[{required: true, message: '请选择磁贴样式', trigger: 'change' }],
     },
     chartRules:{
       chartType:[{required: true, message: '请选择磁贴图表类型', trigger: 'blur' }],
       chartUrl:[{required: true, message: '请输入磁贴图表url', trigger: 'blur' }]
     },
     apiRules:{
       numberUrl:[{required: true, message: '请输入磁贴数值url', trigger: 'blur' }],
       numberValue:[{ validator:valiNumberValue, trigger: 'blur' }],
       numberConditionColor:[{validator:valiNumberColor, trigger: 'blur' }]
     },
     appSubRules:{
       funName:[{required: true, message: '请输入名称', trigger: 'blur' }],
       funUrl:[{required: true, message: '请输入url', trigger: 'blur' }],
     },
    };
  },
  created() {
    this.loadDetailList();
    this.loadLabels();
    this.tabShow({
      index: 0
    });
    if (this.id) {
      setTimeout(() => {
        this.requestDetail();
      }, 100);
    }
    var hrefs = "";
    this.iconsList.forEach((item) => {
      hrefs += '<link rel="stylesheet" href="' + item.path + '"/>';
    });
    $(document.head).append(hrefs);
    this.requestList();
  },
  methods: {
    backInfo() {
      this.$router.push("/applet");
    },
    //图标上传成功的方法
    handleAvatarSuccess(res, file) {
        this.imageUrl = 'data:image/png;base64,' + res.data;
        this.appFormData.iconContent = this.imageUrl;
      },
      beforeAvatarUpload(file) {
        console.log(file);
        // const isJPG = file.type === 'image/jpeg';
        // const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        // if (!isLt2M) {
        //   this.$message.error('上传头像图片大小不能超过 2MB!');
        // }
        // return isJPG && isLt2M;
      },
    numberConditionChange(val){
      this.appFormData.numberCondition = val;
      this.appFormData.numberConditionColor = '';
      this.appFormData.numberValue = 0;

    },
    // 主表提交功能
    onSubmit() {
      // debugger;
      var vm = this;
      var ruluesComplete = function() {
        var url = '/wbalone/appMGT/update';
        if(this.isAppCreate) {
          url = '/wbalone/appMGT/create';
        }
        this.$http({
          url: url,
          method: 'post',
          data: this.appFormData,
          dataType: 'json',
        }).then((res) => {
          if (res) {
            if(res.data.status === 1){
              this.$message({
                  message: "保存成功"
                });
              if(!this.id) {
                this.id = res.data.data.id;
                // this.appFormData.id = res.data.data.id;
                this.appFormData = res.data.data;

              }
              // this.appFormData = res.data.data;
              this.isAppCreate = false;
              this.isAppFormEdit = false;
              this.$emit('onSubmit', this.appformData);
            } else {
              this.$message({
                message: res.data.error.errorMessage,
                type: 'error'
              });
            }
          }
        }).catch(() => {
          this.$message({
            message: '保存失败',
            type: 'error'
          });
        });
      };
      this.$refs.appFormData.validate((valid) => {
           if (valid) {
             if(this.appFormData.tileType === '' || this.appFormData.tileType === null){
               ruluesComplete.apply(vm);
             }else {
               if(this.isShowCharts){
                 this.$refs.chartForm.validate((chartValid) => {
                   if(chartValid) {
                     ruluesComplete.apply(vm);
                   }
                 });
               }
               if(this.isShowApi){
                 // debugger;
                 this.$refs.apiForm.validate((apiValidate) => {
                   if(apiValidate) {
                      ruluesComplete.apply(vm);
                   }
                 });
               }
             }
           }
      });
    },
    //主表取消功能
    onCancel() {
      // debugger;
      if(this.isAppCreate){
        this.$router.back(-1);
      } else {
        this.isAppCreate = false;
        this.isAppFormEdit = false;
      }
    },
    appFromEdit() {
      this.isAppFormEdit = !this.isAppFormEdit;
    },
    magnetTypeChange(val) {
      // debugger;
      if(val === "charts"){
        this.isShowCharts = true;
        this.isShowApi = false;
        // this.isShowIcon = false;
      }
      if(val === "api") {
        this.isShowApi = true;
        this.isShowCharts = false;
        // this.isShowIcon = false;
      }
      if(val === "") {
        // this.isShowIcon = true;
        this.isShowApi = false;
        this.isShowCharts = false;
      }
    },
    iconClick(item) {
      this.setIconFontClass = item.fontClass;
      this.appFormData.appIcon = this.setIconFontClass +' '+ this.setIconColors||'';
    },
    setColors(item) {
      this.setIconColors = item.name;
      var iconFontClassArray = this.appFormData.appIcon.trim().split(" ");
      this.setIconFontClass = (iconFontClassArray[0] || '') + ' ' + (iconFontClassArray[1] || '');
      this.appFormData.appIcon = this.setIconFontClass + ' '+this.setIconColors;
    },
    loadIconsByuri: function(iconsItem) {
      var vm = this;
      $.ajax({
        url: iconsItem.path,
        success: function(res) {
          // debugger;
          var jsonArray = [];
          var arr = res.substring(res.indexOf("/*icon-class*/"))
            .replace("/*icon-class*/", "")
            .trim()
            .replace(/[\r\n]/g, "")
            .split("}");
          $.each(arr, (i, item) => {
            if (item.length) {
              jsonArray.push({
                category: iconsItem.name,
                name: item.substring(item.indexOf("-") + 1, item.indexOf(":")),
                fontClass: iconsItem.fontfamily + " " + item.substring(item.indexOf(".") + 1, item.indexOf(":"))
              });
            }
          });
          vm.iconArray = jsonArray;
        }
      });
    },
    requestDetail() {
      this.$http({
        url: "/wbalone/appMGT/findOne/" + this.id,
        type: 'GET',
        dataType: 'json',
      }).then((res) => {
        if (res.data.status === 1) {
          var data = JSON.parse(JSON.stringify(res.data.data));
          // var label = res.data.data.labels;
          // delete data.labels;
          // data.label = label;
          this.appFormData = data;
          this.appDetailChange(this.appFormData.areaId);
          if(this.appFormData.tileType === 'icon'){
            this.isShowIcon = true;
            this.isShowCharts = false;
            this.isShowApi = false;
          }
          if(this.appFormData.tileType === 'charts') {
            this.isShowIcon = false;
            this.isShowCharts = true;
            this.isShowApi = false;
          }
          if(this.appFormData.tileType === 'api') {
            this.isShowIcon = false;
            this.isShowCharts = false;
            this.isShowApi = true;
          }
        }
      }).catch(() => {
        this.$message({
          message: '信息获取失败',
          type: 'error'
        });
      });
    },
    appDetailChange(val) {
      this.appDetailOptions2 = [{
        areaId: "",
        groupIndex: 1,
        id: "",
        name: "选择分组"
      }].concat(this.appDetailOptions.filter(item => (item.areaId === val)));
      if ( this.isAppFormEdit) {
        this.appFormData.groupId = '';
      }

    },
    loadDetailList() {
      this.$http({
        url: '/wbalone/appArea/listWithGroup',
        type: 'GET',
        dataType: 'json',
        // data: data,
      }).then((res) => {
        // debugger;
        for (var i = 0; i < res.data.data.length; i++) {
          this.arr.push(res.data.data[i].area);
          this.appDetailOptions = this.appDetailOptions.concat(res.data.data[i].group);
        }
        this.proDetailOptions = [{
          areaName: "全部分组",
          id: ""
        }].concat(this.arr);
      }).catch(() => {
        this.$message({
          message: '信息获取失败',
          type: 'error'
        });
      });
    },
    loadLabels() {
      // var group;
      this.$http({
        url: '/wbalone/label/listByGroup?group=app',
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json',
        // data: {group: "app"},
      }).then((res) => {
        // debugger;
        if (res.data.status === 1) {
          this.labels = res.data.data;
        }
      }).catch(() => {
        this.$message({
          message: '信息获取失败',
          type: 'error'
        });
      });
    },
    tabShow(tab) {
      // debugger;
      var item = this.iconsList[parseInt(tab.index, 10)];
      this.loadIconsByuri(item);
    },
    setApiColors(item) {
      this.appFormData.numberColor = item.name;
    },
    setApiConditionColors(item){
      // debugger;
      this.appFormData.numberConditionColor = item.name;
    },
    requestSubApplet() {
      this.$http({
        url: "/wbalone/wbmangetFunction/getAllByAppId/" + this.id,
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json',
      }).then((res) => {
        if (res.data.status === 1) {
          this.appSubData = res.data.data;
        }
      }).catch(() => {
        this.$message({
          message: '信息获取失败',
          type: 'error'
        });
      });
    },
    appSubCreate() {
      // debugger;
      if(this.isAppCreate) {
        this.$message("先保存主表数据！");
        return;
      }
      this.appSubCreateData=this.appSubCreateData;
      this.appSubCreateData = {
        appId:this.id,
      };
      this.isAppSubFormEdit = true;
      this.isAppSubCreate = true;
    },
    onSubSubmit() {
      // debugger;
      this.$refs.appSubFormData.validate((valid) => {
        if (valid) {
          var url = '/wbalone/wbmangetFunction/create';
          this.$http({
            url: url,
            method: 'post',
            data: this.appSubCreateData,
            dataType: 'json',
          }).then((res) => {
            if (res) {
              if(res.data.status === 1){
                this.appSubCreateData = res.data.data;
                if(this.isAppSubCreate) {
                  this.appSubData.push(this.appSubCreateData);
                } else {
                  this.appSubData.splice(this.subIndex, 1, this.appSubCreateData);
                }
                this.isAppSubFormEdit = false;
                this.totalElements += 1;
                this.$emit('onSubmitSub', this.appSubFormData);
              }else{
                this.$message({
                  message: res.data.error.errorMessage,
                  type: 'error'
                });
              }
            }
          }).catch(() => {
            this.$message({
              message: '保存失败',
              type: 'error'
            });
          });
        }
      });
    },
    onSubCancel() {
      this.isAppSubFormEdit = false;
    },
    deleteAppSubFun() {
      var url = '/wbalone/wbmangetFunction/deleteById/'+this.appSubDelId;
      var data = this.subArr;
      this.$http({
        url: url,
        method: 'get',
        data: data,
        dataType: 'json',
        headers:{
          'Content-Type':'application/json'
        }
      }).then((res) => {
        if (res.data.status === 1) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.appSubDelDialogVisible = false;
          this.requestSubApplet();
        } else {
          this.$message({
            message: res.data.error.errorMessage,
            type: 'error'
          });
        }
      }).catch(() => {
        this.$message({
          message: '删除失败',
          type: 'error'
        });
      });

    },
    appSubEdit(row){
      this.appSubDataOrigin = JSON.parse(JSON.stringify(row));
      this.$refs.appSubTable.expandRow(row);
    },
    appSubDelete(row){
      // debugger;
      this.appSubDelDialogVisible = true;
      this.appSubDelId = row.id;
    },
    appSubUpdate(){
      // debugger;
         this.$refs.aaaa.validate((valid) => {
            if(valid){
                var url = '/wbalone/wbmangetFunction/update';
                this.$http({
                  url: url,
                  method: 'POST',
                  data: this.appSubDataOrigin,
                  dataType: 'json'
                }).then((res) => {
                  if (res.data.status === 1) {
                    this.$message({
                      message: '添加成功！',
                      type: 'success'
                    });
                    this.requestSubApplet();
                    // location.hash = '/staff';
                    // this.$router.push("/staff");
                  } else {
                  //alert(res.data.error.errorMessage);
                    this.$message({
                      message: res.data.error.errorMessage,
                      type: 'error'
                    });
                  }
                }).catch(() => {
                   //this.currentValue = json.data.content;
                });
            }
          });
    },
    appSubUpdateCancel(row) {
      this.appSubDataOrigin = row;
      this.$refs.appSubTable.expandRow(row);
    }
  },
  mounted() {
    // debugger;
//    this.requestSubApplet();
  }
};
</script>

<style>

</style>
