<template>
  <div v-if="detailVisible" class="obpm-menuDetail">
    <!-- v-if="menuId!=''" -->
    <el-container direction="vertical">
      <el-row :gutter="24" class="borderBottom margin0">
        <el-col :span="6" :offset="18" class='pt-1 pb-1'>
          <el-button type="primary" @click="onSaveAndNewBtnClick('menuForm')" size="small">{{$t("btns.save_new")}}</el-button>
          <el-button size="small" @click="onSaveBtnClick('menuForm')" :loading="btnLoading">{{$t("btns.save")}}</el-button>
        </el-col>
      </el-row>
      <el-form ref="menuForm" :model="detail" label-position="top" size="mini" :rules="menuRules"  v-loading="loading">
        <el-row>
          <el-col :span="8">
            <el-form-item :label="$t('menu.name')" prop="name"  class="padding0Label">
              <!-- <input type="text" v-model="detail.name"> -->
              <el-input type="text" v-model="detail.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4">
            <!-- 做成下拉选择 -->
            <el-form-item :label="$t('menu.multilanguage_tag')" prop="multiLanguageLabel"  class="padding0Label">
              <el-input type="text" :readonly="true" v-model="detail.multiLanguageLabel"></el-input>
              <el-button plain @click="showMultiLanguage">{{$t('btns.select')}}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item :label="$t('menu.permission')" prop="permissionType" class="padding0InlineLabel">
              <el-radio v-model="detail.permissionType" label="public">{{$t('menu.public')}}</el-radio>
              <el-radio v-model="detail.permissionType" label="private">{{$t('menu.private')}}</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="2">
            <!-- 需要获取module的数据 -->
            <el-form-item :label="$t('menu.superior')" prop="superior" class="padding0Label">
              <el-select v-model="detail.superior" :placeholder="$t('placeholder.select')" @change="changeShow">
                <el-option
                  v-for="item in menuOption"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              :label="$t('menu.show_total')"
              prop="showtotalrow"
              v-if="detail.linkType == '01' && show"
              class="padding0Label"
            >
              <el-switch v-model="detail.showtotalrow" active-value="true" inactive-value="false"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item :label="$t('menu.ordernumber')" prop="orderno" class="padding0Label">
              <el-input-number v-model="detail.orderno" controls-position="right" :min="0" :precision="0" class="width100"></el-input-number>
              <!-- <el-input type="number" :min="0" v-model.number="detail.orderno"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4">
            <el-form-item :label="$t('menu.open_link')" prop="opentarget" v-if="show" class="padding0Label">
              <el-select v-model="detail.opentarget">
                <el-option 
                  v-for="item in opentargetOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item :label="$t('menu.links_type')" prop="linkType" class="padding0Label">
              <el-select v-model="detail.linkType" @change="resetModuleId">
                <el-option
                  v-for="item in linkTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              :label="$t('menu.module')"
              prop="moduleid"
              v-if="(detail.linkType == '00' || detail.linkType == '01' || detail.linkType == '02'||detail.linkType == '09') "
              class="padding0Label"
            >
              <el-select v-model="detail.moduleid" :placeholder="$t('placeholder.select')" @change="changeModule">
                <el-option
                  v-for="item in moduleOption"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4">
            <el-form-item :label="$t('menu.onactionform')" v-if="detail.linkType == '00' " class="padding0Label">
              <el-select v-model="actionContent" :placeholder="$t('placeholder.select')">
                <el-option
                  v-for="item in actionFormOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('menu.onactionview')" v-if="detail.linkType == '01' " class="padding0Label">
              <el-select v-model="actionContent" :placeholder="$t('placeholder.select')">
                <el-option
                  v-for="item in actionViewOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('menu.onactionreport')" v-if="(detail.linkType == '02') " class="padding0Label">
              <el-select v-model="actionContent" :placeholder="$t('placeholder.select')">
                <el-option
                  v-for="item in actionReportOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('menu.custom_report')" v-if="detail.linkType == '09'" class="padding0Label">
              <el-select v-model="actionContent" :placeholder="$t('placeholder.select')">
                <el-option
                  v-for="item in customizeReportOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              :label="$t('menu.show_type')"
              prop="showType"
              v-if="(detail.linkType == '00' || detail.linkType == '02') "
              class="padding0Label"
            >
              <el-select v-model.number="detail.showType" :placeholder="$t('placeholder.select')">
                <el-option
                  v-for="item in showTypeOption"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              :label="$t('menu.customize_links_external')"
              prop="showType"
              v-if="(detail.linkType == '05' || detail.linkType == '06') "
              class="padding0Label"
            >
              <el-select
                v-model="detail.directory"
                :placeholder="$t('placeholder.select')"
                v-if="detail.linkType == '05'"
              >
                <el-option key="protal" label="protal" value="protal"></el-option>
              </el-select>
              <el-input
                type="text"
                v-model="actionContentOther"
                v-if="(detail.linkType == '05' || detail.linkType == '06') "
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item :label="$t('menu.script')" prop="actionScript" v-if="detail.linkType == '07' ">
              <el-input type="textarea" :rows="5" v-model="actionScript" style="width: 95%"></el-input>
              <i class="el-icon-edit-outline" @click="showScriptEditor" style="width: 5%"></i>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-table :data="queryString" >
              <el-table-column :label="$t('menu.parametername')" width="180">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    type="text"
                    v-model="scope.row.paramKey"
                  >{{ scope.row.paramKey }}</el-input>
                </template>
              </el-table-column>
              <el-table-column :label="$t('menu.parametervalue')" width="180">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    type="text"
                    v-model="scope.row.paramValue"
                  >{{ scope.row.paramValue }}</el-input>
                </template>
              </el-table-column>
              <el-table-column :label="$t('menu.op')">
                <template slot="header">
                  <el-button size="mini" @click="addParam()">{{$t('btns.add')}}</el-button>
                </template>
                <template slot-scope="scope">
                  <el-button size="mini" @click="delParam(scope.$index)">{{$t('btns.delete')}}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$t('widget.icon_type')" class="padding0InlineLabel">
              <el-radio v-model="icon.icontype" label="img">{{$t('widget.icon')}}</el-radio>
              <el-radio v-model="icon.icontype" label="font">{{$t('widget.font_icon')}}</el-radio>
            </el-form-item>
            <el-form-item :label="$t('menu.icon')" class="padding0Label">
              <!-- <el-radio v-model="detail.ico.icon" label="img">图片</el-radio> v-if="detail.ico.icontype=='img'" -->
              <div v-if="icon.icontype == 'img'">
                <div class="adminLogo" style="display: block;">
                  <img class="adminLogoImg" :src="getLogoUrl('/'+icon.imgUrl)" />
                </div>
                <el-button class="obpm-btn-default mr-1" plain @click="selectImg" type="primary">{{$t('btns.choose')}}</el-button>
              </div>
              <div v-if="icon.icontype == 'font'">
                <i :class="icon.fontUrl" class="d-block" :style="fontStyle"></i>
                <div>
                  <el-button class="obpm-btn-default mr-1" plain @click="selectFont" type="primary">{{$t('btns.choose')}}</el-button>
                  <ColorPicker ref="fontcolor" style="vertical-align: bottom;"  @setColor="setColor"  :isFontColor="false" v-model="icon.iconFontColor" :colorValue="icon.iconFontColor"></ColorPicker>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="show && type.toLocaleLowerCase().includes('pc')">
          <el-col>
            <el-form-item :label="$t('menu.status')">
              <el-radio-group v-model="detail.status">
                <el-radio :label="1">{{$t('menu.valid')}}</el-radio>
                <el-radio :label="0">{{$t('menu.invalid')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-container>
    <icon_select
      :visible.sync="iconSelectCheck"
      :logoUrl="icon.imgUrl"
      @select-ok="onSelectIconOk"
      v-if="iconSelectCheck"
    />
    <font_select
      :visible.sync="fontSelectCheck"
      :logoUrl="icon.fontUrl"
      @select-ok="onSelectFontOk"
      v-if="fontSelectCheck"
    />

    <!-- 多语言弹窗 -->
    <!-- multiVisible: 弹框显示  closeMultiLanguage： 关闭前回调  selectRowValue：选择行  isNested：是否为内置嵌套的弹窗 languageData: 多语言数据  delMultiLanguage：删除多语言  changeLanguageParams：参数改变 -->
    <MultiLanguages 
      :multiVisible="languagesVisible" 
      @closeMultiLanguage="languagesVisible = false" 
      @selectRowValue="handelMultiLanguage" 
      :isNested="true"
      :languageData="languageData"
      @delMultiLanguage="delMultiLanguage"
      @changeLanguageParams="changeLanguageParams"
      @resetMultiLanguage="resetMultiLanguage"
    />

    <!-- 脚本选择器弹窗 -->
    <!-- scriptEditorVisible:弹窗显示   showScritptEditorCode：将文本框的值传给编译器  handleScriptEditor：将编译器的值传给textarea-->
    <ScriptEditorSelect
      v-if="scriptEditorVisible"
      :scriptEditorVisible="scriptEditorVisible"
      :editorCode="showScritptEditorCode"
      @closeScriptEditorDialog="scriptEditorVisible = false"
      @saveScriptEditor="handleScriptEditor"
    />
  </div>
</template>

<script>
import {
  getMenuDetail,
  getAllMenu,
  putMenuDetail,
  newMenu,
  getLogoUrl,
} from "@/service/CommontoolsAPI.js";
import { getAllmodules } from "@/service/CommonApi.js";
import { getModuleFormList } from "@/service/FormApi.js";
import { getModuleViewList } from "@/service/ViewApi.js";
import { getReportsList } from "@/service/ReportApi.js";
import { getChartsList } from "@/service/ModulesApi.js";
import { getMultiLanguageList, deleteMultiLanguageList } from "@/service/MultiLanguageAPI.js";
import icon_select from "@/components/Common/icon_select.vue";
import font_select from "@/components/Common/font_select.vue";
import MultiLanguages from "@/components/Common/languages_select";
import ScriptEditorSelect from "@/components/Common/scriptEditor";
import ColorPicker from "@/components/Common/ColorPicker";
import { nameCheck } from "@/utils/utils.js";
import {delMsg} from '@/utils/elementui'

export default {
  name: "menuDetail",
  props: ["type", "visible"],
  components: {
    icon_select,
    font_select,
    MultiLanguages,
    ScriptEditorSelect,
    ColorPicker
  },
  data () {
    return {
      appId: sessionStorage.getItem("appId"),
      menuId: "",
      menuOption: [],
      detail: {
        name: "",
        permissionType: "public",
        orderno: 0,
        opentarget: "detail",
        status: 1
      },
      menuRules: {
        name: [
          { required: true, message: this.$t('placeholder.name'), trigger: "blur" },
          { validator: nameCheck, trigger: "blur" },
        ],
      },
      options: [],
      opentargetOptions: [
        {
          value: "detail",
          label: this.$t('label.work_area_open'),
        },
        {
          value: "target",
          label: this.$t('label.new_win_open'),
        },
      ],
      linkTypeOptions: [
        {
          value: "",
          label:this.$t('btns.choose'),
        },
        {
          value: "00",
          label: this.$t('label.form_start'),
        },
        {
          value: "01",
          label: this.$t('view.view'),
        },
        {
          value: "02",
          label: this.$t('widget.chart'),
        },
        {
          value: "07",
          label: this.$t('label.url_script'),
        },
        {
          value: "09",
          label: this.$t('menu.custom_report'),
        }
      ],
      queryString: [],
      moduleOption: [],
      actionFormOption: [],
      actionViewOption: [],
      actionReportOption: [], // 作用报表
      customizeReportOption: [], // 自定义报表
      actionContent: "",
      actionContentOther: "", // 自定义链接
      actionScript: "", // 脚本链接
      showTypeOption: [
        { value: this.$t('label.all'), id: 0 },
        { value: this.$t('label.just_menu'), id: 1 },
        { value: this.$t('label.just_flow'), id: 2 },
      ],
      icon: { 
        icontype: "img",
        imgUrl: "/uploads/lib/icon_menu_default.png",
        fontUrl: "",
        iconFontColor: "rgba(0, 0, 0, 1)"
        },
      iconSelectCheck: false,
      fontSelectCheck: false,
      show: true,
      isResetForm: "", // 是否重置表单

      languagesVisible: false, // 多语言弹窗
      languageData: {}, // 多语言数据
      languageParams:{
        label:'',
        text:'',
        type:'',
        currpage: 1,
        pagelines: 10,
      },

      scriptEditorVisible: false, // 脚本编辑器弹窗

      fontStyle: '', // 字体图标的样式

      hasRequestData: false, // 是否有数据

      loading: false, // 标识是否需要加载
      btnLoading: false, // 按钮的加载
    };
  },

  created () {
    this.getAllMenu();
    this.getModules();
  },
  computed: {
    detailVisible: {
      get () {
        // this.resetData(); 影响点击新建后再点击编辑数据被重置
        return this.visible;
      },
      set (val) {
        this.$emit("update:visible", true);
        this.$emit("change", val);
        this.$forceUpdate();
      },
    },
    /**
     * textarea 传给 脚本编辑器的值
     */
    showScritptEditorCode () {
      return this.actionScript
    },
  },
  watch: {
    menuId () {
      if(this.menuId){
        this.getData();
      }
      this.getModules();
    },
    "$store.state.menuTreeMenuId" () {
      if(this.$store.state.isShowMunuDetail){
        this.detailVisible = true;
      }
      this.detail = {
        name: "",
        permissionType: "public",
        orderno: 0,
        opentarget: "detail",
        superior: "",
        linkType: "",
      };
      this.menuId = this.$store.state.menuTreeMenuId;
      
      if(this.menuId!=""){
        this.$nextTick(() => {
          this.resetMenuForm();
        })
      }
      //id变化的时候刷新菜单列表
      if (this.$store.state.menuSuperiorId != "" && this.type == "newMobile") {
        this.show = true;
      }
      this.getAllMenu();
      this.getFormList();
    },
    "$store.state.menuSuperiorId"(){
      this.detail.superior= this.$store.state.menuSuperiorId;
      this.getAllMenu();
      this.changeShow();
      //新建的时候 loading结束
      if(this.menuId=="")this.loading = false;

    }
  },
  methods: {
    getLogoUrl(url){
      return getLogoUrl(url)
    }, 
    resetData () {
      if (this.type == "newPc" || this.type == "newMobile") {
        this.detail = {
          name: "",
          permissionType: "public",
          orderno: 0,
          opentarget: "detail",
          superior: this.$store.state.menuSuperiorId,
          linkType: "",
          status: 1
        };
        if (this.type == "newMobile" && this.detail.superior == "") {
          this.show = false;
        }
        this.icon = {
          imgUrl: "/uploads/lib/icon_menu_default.png",
          icontype: "img",
          fontUrl: "",
          iconFontColor: "rgba(0, 0, 0, 1)"
        };
        // this.$store.dispatch("resetMenuTreeMenuId");
      }
    },
    changeShow () {
      if (this.type == "newMobile") {
        // this.show = false;
      }
    },
    onSelectFontOk (font) {
      this.icon.fontUrl = font
      this.icon.icontype = 'font'
      this.fontSelectCheck = false; 
    },
    selectFont () {
      this.fontSelectCheck = true;
    },
    getUrl (url) {
      return getLogoUrl(url);
    },
    onSelectIconOk (item) {
      if (item) {
        if (item.path) {
          this.icon.icontype = "img";
          this.icon.imgUrl = item.path;
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: this.$t('msg.select_fail'),
          });
        }
      }
    },
    selectImg () {
      this.iconSelectCheck = true;
    },
    onSaveAndNewBtnClick (formName) {
      this.onSaveBtnClick(formName);
      this.isResetForm = true
    },
    onSaveBtnClick (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.isResetForm = false;
          // 模块
          if (this.detail.linkType == "00" || this.detail.linkType == "01" || this.detail.linkType == "02" || this.detail.linkType == "09") {
            if (this.detail.moduleid == "" || !this.detail.moduleid) {
              this.$message({
                showClose: true,
                message: this.$t('msg.select_module'),
                type: "error",
              });
              return false;
            } else {
              // 手机端的一级不需判断表单视图报表等
              if((this.type.indexOf("obile") != -1) && (this.$store.state.mobileSave == "" || this.$store.state.mobileSave == null)){
                console.log('手机端一级不需要判断')
              }else{
                if (this.actionContent == "" || !this.actionContent){
                  if (this.detail.linkType == "00") {
                    this.$message({
                      showClose: true,
                      message: this.$t('msg.select_form'),
                      type: "error",
                    });
                    return false;
                  } else if (this.detail.linkType == "01") {
                    this.$message({
                      showClose: true,
                      message: this.$t('msg.select_view'),
                      type: "error",
                    });
                    return false;
                  } else if (this.detail.linkType == "02" || this.detail.linkType == "09") {
                    this.$message({
                      showClose: true,
                      message: this.$t('msg.select_report'),
                      type: "error",
                    });
                    return false;
                  }
                }
              }
              
            }
          }else if(this.detail.linkType == "05" || this.detail.linkType == "06"){
            if(this.actionContentOther == '' || this.actionContentOther == undefined){
              return this.$message.error(this.$t('msg.select_link'))
            }
          }

          // 图片或字体图标
          if(this.icon.icontype == 'img'){
            this.detail.ico = `{"icon":"${this.icon.imgUrl}","icontype":"${this.icon.icontype}"}`
          }else if(this.icon.icontype == 'font'){
            this.detail.ico = `{"icon":"${this.icon.fontUrl}","icontype":"${this.icon.icontype}","iconFontColor":"${this.icon.iconFontColor}"}`
          }

          // actionContentOther 的 值
          if(this.detail.linkType == '07'){
            this.actionContent = this.actionScript
          }else if(this.detail.linkType == '05' || this.detail.linkType == '06'){
            this.actionContent = this.actionContentOther
          }

          // 如果链接类型不是视图，显示总数设置为false
          if(this.detail.linkType != '01'){
            this.detail.showtotalrow = "false"
          }

          // this.detail.ico = JSON.stringify(this.icon);
          this.detail.queryString = JSON.stringify(this.queryString);
          if(this.detail.superior==this.appId)this.detail.superior='';
          let detail = {
            name: "",
            description: "",
            multiLanguageLabel: "",
            opentarget: "",
            ico: "ico",
            superior: "",
            linkName: "",
            linkType: "",
            moduleid: "",
            directory: "",
            actionContent: this.actionContent || "",
            queryString: "",
            permissionType: "public",
            isUsual: "",
            isMobile: "",
            orderno: 0,
            showtotalrow: "",
            status: 1
          };
          if (this.menuId != "") {
            this.detail.actionContent=this.actionContent;
            // 编辑
            this.btnLoading = true
            let response = await putMenuDetail({
                applicationId: this.appId,
                menuId: this.menuId,
                data: this.detail,
              });
            this.btnLoading = false
            if (response.data.errcode == 0) {
              this.$message.success(this.$t('msg.ss'))
              // 刷新左边的tree
              this.$emit("refreshMenu");
              //刷新上级数据
              this.getAllMenu();
              if(this.isResetForm){
                this.resetMenu()
                this.resetMenuForm()
              }else{
                this.$store.dispatch('saveMenuTreeMenuId', this.detail.id)
                this.$store.dispatch('setMenuSuperiorId', '')
              }
            }
          } else {
            // 新建
            detail = { ...detail, ...this.detail };
            let isMobile;
            if (this.type == "newPc") isMobile = false;
            else if (this.type == "newMobile") isMobile = true;
            this.btnLoading = true
            let response = await newMenu(this.appId, isMobile, detail);
            this.btnLoading = false
            if (response.data.errcode == 0) {
              this.$message.success(this.$t('msg.created_ss'))
              this.getAllMenu();
              
              if(this.isResetForm){
                this.resetMenu()
                this.resetMenuForm()
              }else{
                this.$store.dispatch('saveMenuTreeMenuId', response.data.data.id)
                this.$store.dispatch('setMenuSuperiorId', "")
              }
              // 刷新左边的tree
              this.$emit("refreshMenu");
            }
          }
        } else {
          this.isResetForm = false;
          return false;
        }
      });
    },
    // 需要传给 menuTree 重置内容
    resetMenuForm () {
      this.$refs["menuForm"].resetFields();
    },
    // 重置内容
    resetMenu(){
      this.detail = {
        name: "",
        description: "",
        multiLanguageLabel: "",
        opentarget: "",
        ico: "ico",
        superior: "",
        linkName: "",
        linkType: "",
        moduleid: "",
        directory: "",
        actionContent: this.actionContent || "",
        queryString: "",
        permissionType: "public",
        isUsual: "",
        isMobile: "",
        orderno: 0,
        showtotalrow: "",
        status: 1
      };
      this.queryString=[]
      if (this.type == "newMobile" && this.detail.superior == "") {
        this.show = false;
      }
      this.icon = {
        imgUrl: "/uploads/lib/icon_menu_default.png",
        fontUrl: "",
        icontype: "img",
        iconFontColor: "rgba(0, 0, 0, 1)"
      };
      // 重置表单id
      this.$store.dispatch("resetMenuTreeMenuId");
      // 重置验证规则
      this.isResetForm = false;
      if (this.type.indexOf("pc") != -1) {
        // this.type = "newPc";
        this.$emit("changePcType");
      } else if (this.type.indexOf("obile") != -1) {
        // this.type = "newMobile";
        this.$emit("changeMobileType");
      }
    },
    //获取所有树形菜单
    getAllMenu () {
      let type;
      if (this.type == "newPc"|| this.type=='pc'){
        type = "pc";
        if(this.type.toLowerCase().indexOf('pc') != -1 && this.linkTypeOptions.length < 8){
          this.linkTypeOptions.push({
            value: "05",
            label: this.$t('label.url_in'),
          },
          {
            value: "06",
            label: this.$t('label.url_out'),
          })
        }
      }else if (this.type == "newMobile"|| this.type=='mobile') type = "mobile";
      getAllMenu(
        {
          applicationId: this.appId,
          currentMenuId: "",
          type: "",
          showType: type,
        },
        {
          onSucess: (response) => {
            if (response.data.errcode == 0) {
              // this.loading = false
              this.menuOption = response.data.data;
              this.menuOption[0].id=this.appId;
            }
          },
        }
      );
    },
    changeModule () {
      this.actionContent = "";
      if (this.detail.linkType == "00") this.getFormList();
      else if (this.detail.linkType == "01") this.getViewList();
      else if (this.detail.linkType == "02") this.getReportList();
      else if(this.detail.linkType == "09") this.getCustomizeReportList()
      this.$forceUpdate()
    },
    getFormList () {
      if(this.detail.moduleid){
        getModuleFormList(
          {
            moduleId: this.detail.moduleid,
            name:'',
            description:'',
            pageNo: 1,
            linesPerPage: 1000000,
            type:1,
          },
          {
            onSucess: (response) => {
              if (response.data.errcode == 0) {
                this.actionFormOption = response.data.data;
                // 确认表单id是否有值
                if(this.hasRequestData){
                  this.checkActionFormId()
                }
              }
            },
          }
        );
      }else{
        this.actionFormOption = []
      }
    },
    getViewList () {
      if(this.detail.moduleid){
        getModuleViewList(
          {
            moduleId: this.detail.moduleid,
            searchword: "",
            pageNo: "",
            linesPerPage: 1000000,
          },
          {
            onSucess: (response) => {
              if (response.data.errcode == 0) {
                this.actionViewOption = response.data.data.datas;
                // 确认视图id是否有值
                if(this.hasRequestData){
                  this.checkActionViewId()
                }
              }
            },
          }
        );
      }else{
        this.actionViewOption = []
      }
    },
    async getReportList(){
      if(this.detail.moduleid){
        let response = await getChartsList(
          {
            moduleId: this.detail.moduleid,
            searchword: "",
            pageNo: 1,
            linesPerPage: 1000000
          });
        if (response.data.errcode == 0) {
          this.actionReportOption = response.data.data.data;
          // 确认是否统计图id是否存在
          if(this.hasRequestData){
            this.checkActionReportId()
          }
        }
      }else{
        this.actionReportOption = []
      }
    },
    async getCustomizeReportList () {
      if(this.detail.moduleid){
        let response = await getReportsList(
          {
            moduleId: this.detail.moduleid,
            searchword: "",
            pageNo: "",
            linesPerPage: 1000000,
          });
          if (response.data.errcode == 0) {
            // 需要过滤报表的打印模板
            this.customizeReportOption = response.data.data.datas.filter(item => item.isPrint== 0);
            // 确认是否自定义报表id是否存在
            if(this.hasRequestData){
              this.checkcustomizeReportId()
            }
          }
      }else{
        this.customizeReportOption = []
      }
    },
    addParam () {
      this.queryString.push({ paramKey: "", paramValue: "" });
    },
    delParam (index) {
      this.queryString.splice(index, 1);
    },
    async getModules () {
      let currentModuleId = ""
      let response = await getAllmodules(this.appId, currentModuleId);
      if (response.data.errcode == 0) {
        this.moduleOption = response.data.data;
        // 确认模块di是否存在
        if(this.detail.moduleid){
          this.checkModuleId()
        }
      }
    },
    getData () {
      this.loading = true
      getMenuDetail(this.menuId, {
        onSucess: (resp) => {
          if (resp.data.errcode == 0) {
            this.hasRequestData = true // 有数据请求回来
            this.detail = resp.data.data;
            this.detail.linkType = resp.data.data.linkType ? resp.data.data.linkType : "";
            if (this.detail.linkType == "00") this.getFormList();
            else if (this.detail.linkType == "01") this.getViewList();
            else if (this.detail.linkType == "02")this.getReportList();
            else if(this.detail.linkType == "09") this.getCustomizeReportList()
            else this.loading = false
            
            if (this.detail.linkType == "00" ||this.detail.linkType == "01" ||this.detail.linkType == "02" ||this.detail.linkType == "09")this.actionContent = this.detail.actionContent;
            else if(this.detail.linkType == "07")  this.actionScript = this.detail.actionContent;
            else this.actionContentOther = this.detail.actionContent;
            if ((this.detail.superior == "" || !this.detail.superior) &&this.type.indexOf("obile") != -1)this.show = false;
            else if(this.detail.superior  &&this.type.indexOf("obile") != -1)this.show=true;
            if(!this.detail.linkType)this.detail.linkType="";
            this.queryString = JSON.parse(this.detail.queryString);
            this.icon = JSON.parse(this.detail.ico);
            // 设置字体图标及颜色
            if(this.icon.icontype == 'img'){
              this.icon.imgUrl = this.icon.icon
              this.icon.fontUrl = ""
            }else{
              this.icon.fontUrl = this.icon.icon
              this.icon.imgUrl = ""
              this.fontStyle = 'color:' + this.icon.iconFontColor
            }
          }else{
            this.loading = false
            this.$message.error(resp.data.errmsg)
          }
        },
      });
    },

    /**
     * 链接类型改变清空模块的值
     */
    resetModuleId(){
      this.detail.moduleid = '';
      this.actionContent = '';
      // 清空已有的数组【防止新建时不需选择就出现内容】
      this.actionFormOption = []
      this.actionViewOption = []
      this.actionReportOption = []
      this.customizeReportOption = []
      this.$forceUpdate();
      
    },

    /**
     * 显示多语言弹框
     */
    showMultiLanguage() {
      this.languagesVisible = true;
      this.getMultiLanguagetions()
    },

    /**
     * 多语言列表
     */
    async getMultiLanguagetions() {
      let appId = sessionStorage.getItem("appId");
      
      const response = await getMultiLanguageList(this.languageParams, appId);
      if (response.data.errcode == 0) {
        let list = response.data.data;
        if(list.data == null){
          list.data = []
        }
        list.data.map((item) => {
          if (item.type == 1) {
            item.language = "English";
          } else if (item.type == 2) {
            item.language = "简体中文";
          } else if (item.type == 3) {
            item.language = "繁體中文";
          }
        });
        this.languageData = list;
      }
    },

    /**
     * 删除多语言
     */
    async delMultiLanguage(arr){
      try{
        await delMsg(this.$t('msg.delConfirm'), this.$t('msg.tip'))
        const response = await deleteMultiLanguageList(arr)
        if (response.data.errcode == 0) {
          this.$message.success(this.$t('msg.remove_ss'));
          this.getMultiLanguagetions();
        }
      }catch(e){
        console.log(e)
      }
    },

    /**
     * 多语言参数改变时重新请求
     */
    changeLanguageParams(params){
      this.languageParams = params
      this.getMultiLanguagetions()
    },

    /**
     * 清空多语言的值
     */
    resetMultiLanguage(){
      this.detail.multiLanguageLabel = ''
    },

    /**
     * 选择多语言的值
     */
    handelMultiLanguage(row) {
      this.detail.multiLanguageLabel = row.label;
    },

    /**
     * 确认模块id是否存在
     */
    checkModuleId(){
      let flag = false
      this.moduleOption.some(item => {
        if(item.id === this.detail.moduleid){
          flag = true
          return
        }
      })
      if(!flag) this.detail.moduleid = ''
    },

    /**
     * 确认表单id是否存在
     */
    checkActionFormId(){
      let flag = false
      this.actionFormOption.some(item => {
        if(item.id === this.actionContent){
          flag = true
          return
        }
      })
      if(!flag) this.actionContent = ''
      this.loading=false;
    },

    /**
     * 确认视图id是否存在
     */
    checkActionViewId(){
      let flag = false
      this.actionViewOption.some(item => {
        if(item.id === this.actionContent){
          flag = true
          return
        }
      })
      if(!flag) this.actionContent = ''
      this.loading=false;

    },
    /**
     * 确认图表id是否存在
     */
    checkActionReportId(){
      let flag = false
      this.actionReportOption.some(item => {
        if(item.id === this.actionContent){
          flag = true
          return
        }
      })
      if(!flag) this.actionContent = ''
      this.loading=false;

    },
    /**
     * 确认自定义报表id是否存在
     */
    checkcustomizeReportId(){
      let flag = false
      this.customizeReportOption.some(item => {
        if(item.id === this.actionContent){
          flag = true
          return
        }
      })
      if(!flag) this.actionContent = ''
      this.loading=false;

    },

    /**
     * 显示脚本编辑器弹框
     */
    showScriptEditor () {
      this.scriptEditorVisible = true;
    },
    /**
     * 将脚本编辑器的值写入到textarea中
     */
    handleScriptEditor (val) {
      this.actionScript = val
    },

    /**
     * 读取和设置颜色
     */
    setColor(val) {
      this.icon.iconFontColor = val
      // 设置颜色
      this.fontStyle = 'color:' + val
    },
  },
};
</script>
