<template>
  <div class="mt-3">
    <el-scrollbar :style="{ height: tableHeight + 'px' }" :native="false">
      <el-form
        :model="params"
        ref="formbasic"
        :rules="rules"
        label-position="top"
        label-width="180px"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              :label="$t('form.name')"
              prop="name"
              class="padding0Label"
            >
              <el-input
                v-model="params.name"
                :readonly="params.id != ''"
                size="small"
                v-show="!params.id"
                :placeholder="$t('placeholder.name')"
                class="width-360"
              ></el-input>
              <el-input
                class="width-360"
                v-show="params.id"
                :value="params.name"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="4" v-if="!tabsFormVisible && params.type != 256">
            <el-row>
              <el-col :span="params.showLog == true ? 6 : 5">
                <el-form-item
                  :label="$t('form.show_log')"
                  class="padding0InlineLabel"
                >
                  <el-radio-group v-model="params.showLog">
                    <el-radio :label="true">{{ $t('form.yes') }}</el-radio>
                    <el-radio :label="false">{{ $t('form.no') }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6" v-if="params.showLog == true">
                <el-form-item
                  :label="$t('label.everytime')"
                  class="padding0InlineLabel"
                >
                  <el-radio-group v-model="params.recordlogForever">
                    <el-radio :label="true">{{ $t('form.yes') }}</el-radio>
                    <el-radio :label="false">{{ $t('form.no') }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="params.showLog == true ? 12 : 19">
                <span
                  v-if="tplFormVisible"
                  style="color: #33bd00; fontsize: 12px"
                  >{{$t('view.need_oldform')}}</span
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="$t('form.type')" class="padding0Label">
              <el-select
                v-model="params.type"
                :placeholder="$t('placeholder.select')"
                size="small"
                @change="onChangeFormType"
                class="width-360"
                :disabled="editForm"
              >
                <el-option
                  :label="$t('form.normal_forms')"
                  :value="1"
                ></el-option>
                <el-option :label="$t('form.tab')" :value="2"></el-option>
                <el-option
                  :label="$t('form.search_form')"
                  :value="256"
                ></el-option>
                <el-option
                  :label="$t('form.normal_mapping')"
                  :value="65536"
                ></el-option>
                <el-option
                  :label="$t('form.template_form')"
                  :value="1048576"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="8"
            :offset="4"
            v-if="!tabsFormVisible && !queryFormVisible"
          >
            <el-form-item
              :label="$t('form.permission')"
              class="padding0InlineLabel"
            >
              <el-radio-group v-model="params.permissionType">
                <el-radio label="public">{{ $t('form.public') }}</el-radio>
                <el-radio label="private">{{ $t('form.private') }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              :label="$t('form.style_lib')"
              class="padding0InlineLabel"
            >
              <el-select
                v-model="params.styleId"
                :placeholder="$t('placeholder.select')"
                size="small"
                class="width-360"
              >
                <el-option value="" label=""></el-option>
                <el-option
                  v-for="item in styleLibrary.datas"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              :label="$t('form.form_order_number')"
              class="padding0InlineLabel"
            >
              <el-input-number
                v-model="params.orderno"
                :min="0"
                :max="10000000"
                size="small"
                :precision="0"
                :step-strictly="true"
                :step="1"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col
            :span="8"
            :offset="4"
            v-if="mapFormVisible || tplFormVisible || formVisible"
          >
            <el-form-item
              :label="$t('form.show_watermark')"
              class="padding0InlineLabel"
            >
              <el-radio-group v-model="params.showWaterMark">
                <el-radio :label="true">{{ $t('form.yes') }}</el-radio>
                <el-radio :label="false">{{ $t('form.no') }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8" v-if="!tabsFormVisible">
            <el-form-item
              :label="$t('form.is_openable_script')"
              class="padding0InlineLabel module_form_base_isOpenableScript"
            >
              <el-input
                type="textarea"
                :rows="4"
                v-model="params.isopenablescript"
                size="small"
                :placeholder="$t('placeholder.boolean_value')"
                style="width: 95%"
                @focus="isOpenableScriptFocus = true"
                @blur="isOpenableScriptFocus = false"
              ></el-input>
              <i
                class="el-icon-edit-outline"
                style="width: 5%"
                @click="showScriptEditor('paramsIsopenablescript')"
              ></i>
              <p
                :class="{
                  green: true,
                  smallFont: true,
                  'd-none': !isOpenableScriptFocus,
                }"
              >
              {{$t('view.gird_unsupport')}}
              </p>
            </el-form-item>
          </el-col>
          <el-col
            :span="8"
            :offset="4"
            v-if="mapFormVisible || tplFormVisible || formVisible"
          >
            <el-form-item
              :label="$t('form.watermark')"
              class="padding0InlineLabel"
            >
              <el-input
                type="textarea"
                :rows="4"
                v-model="params.waterMarkScript"
                size="small"
                style="width: 95%"
              ></el-input>
              <i
                class="el-icon-edit-outline"
                style="width: 5%"
                @click="showScriptEditor('paramsWaterMarkScript')"
              ></i>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8" v-if="!tabsFormVisible">
            <el-form-item
              :label="$t('form.edit_able_script')"
              class="padding0InlineLabel"
            >
              <el-input
                type="textarea"
                :rows="4"
                v-model="params.iseditablescript"
                size="small"
                :placeholder="$t('placeholder.boolean_value')"
                style="width: 95%"
              ></el-input>
              <i
                class="el-icon-edit-outline"
                style="width: 5%"
                @click="showScriptEditor('paramsIseditablescript')"
              ></i>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4" v-if="!tabsFormVisible && params.type != 256">
            <el-form-item
              :label="$t('form.open_comment')"
              class="padding0InlineLabel"
            >
              <el-radio-group v-model="params.openComment">
                <el-radio :label="true">{{ $t('form.yes') }}</el-radio>
                <el-radio :label="false">{{ $t('form.no') }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8" >
            <el-form-item
              :label="$t('form.description')"
              class="padding0InlineLabel"
            >
              <el-input
                type="textarea"
                :rows="2"
                v-model="params.description"
                size="small"
                :placeholder="$t('placeholder.description')"
                style="width: 95%"
              ></el-input>
            </el-form-item>
          </el-col>
          <div v-if="(mapFormVisible || tplFormVisible || formVisible) && params.type != 256 && params.openComment">
            <el-col
              :span="4"
              :offset="4"
            >
              <el-form-item
                :label="$t('form.comment_title_script')"
                class="padding0InlineLabel"
              >
                <el-input
                  type="textarea"
                  :rows="4"
                  v-model="params.commentTitleScript"
                  size="small"
                  style="width: 95%"
                ></el-input>
                <i
                  class="el-icon-edit-outline"
                  style="width: 5%"
                  @click="showScriptEditor('paramsCommentTitleScript')"
                ></i>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                label="评论标识"
                class="padding0InlineLabel"
              >
                <el-input
                  type="textarea"
                  :rows="4"
                  v-model="params.commentFlagScript"
                  size="small"
                  style="width: 95%"
                ></el-input>
                <i
                  class="el-icon-edit-outline"
                  style="width: 5%"
                  @click="showScriptEditor('paramsCommentFlagScript')"
                ></i>
              </el-form-item>
            </el-col>
          </div>
          
        </el-row>
        <el-row :gutter="20" v-if="tabsFormVisible">
          <el-col :span="8" >
            <el-form-item
              :label="$t('form.open_comment')"
              class="padding0InlineLabel"
            >
              <el-radio-group v-model="params.openComment">
                <el-radio :label="true">{{ $t('form.yes') }}</el-radio>
                <el-radio :label="false">{{ $t('form.no') }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>

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

<script>
import { getStyleLibsList } from '@/service/LibraryAPI.js'
import { getModuleForm } from '@/service/FormApi.js'
import { nameCheck } from '@/utils/utils.js'

import ScriptEditor from '@/components/Common/scriptEditor'
export default {
  name: 'FormBasic',
  data() {
    return {
      tableHeight: 400,
      params: {
        appId: '',
        moduleId: '',
        id: '', //表单id
        name: '', //表单名称
        templatecontext: '', //源代码文本
        description: '', //描述
        type: 1, //类型
        styleId: '', //样式库id
        permissionType: 'public', //权限（所有用户可用：public，仅授权角色可用：private）
        showLog: false, //显示日志操作
        recordlogForever: false, // 是否每次修改都记录
        showWaterMark: false, //是否显示水印
        waterMarkScript: '', //水印脚本
        isopenablescript: '', //是否可打开脚本
        iseditablescript: '', //是否可编辑脚本
        openComment: false,//是否开通评论
        commentTitleScript: '',//评论标题
        commentFlagScript: '', // 评论标识
        mappingStr: {}, //映射表数据
        orderno: 1, //排序号
        // layoutType: "horizontal", //手机端表单控件布局样式
        showType: 'old', //显示新版还是旧版表单设计器
      },
      formVisible: true, //普通表单
      tabsFormVisible: false, //标签页i
      queryFormVisible: false, //查询表单
      mapFormVisible: false, //映射表单
      tplFormVisible: false, //模板表单

      formIscriptName: '',
      scriptid: '', //当前新表单设计器编辑的控件id

      scriptEditorVisible: false, // 脚本编辑器弹窗
      currentScriptEditor: '', // 当前点击的是哪一个脚本编辑器
      code: '', //新表单设计器打开脚本编辑器的值

      isOpenableScriptFocus: false, //是否可打开脚本的提示信息是否显示

      styleLibrary: [], // 样式库

      rules: {
        name: [
          { required: true, message: this.$t('placeholder.name'), trigger: 'blur' },
          { validator: nameCheck, trigger: 'blur' },
        ],
      },
    }
  },
  components: {
    ScriptEditor,
  },
  props: {
    formId: String,
    editForm: Boolean,
    isEdit: Boolean,
    showType: String,
    moduleId: String,
  },
  methods: {
    /**
     * 动态计算页面table高度
     */
    getScollerHeight() {
      setTimeout(() => {
        let clientHeight =
          document.documentElement.clientHeight || document.body.clientHeight
        //60 头部， 32 面包屑， 41 第一层页签， 40 第二层页签， 50 列表标题， 71 查询， 20 父组件外边距, 40分页, 16 外边距
        //这个组件在父组件dialog中高度给的85%，54 弹窗标题 30 弹窗底部padding 50 第一季页签 20机动距离
        this.tableHeight = clientHeight - 60 - 32 - 41 - 50 - 20 - 16
      }, 100)
    },

    /**
     * 获取表单详情
     */
    getFormDetail() {
      getModuleForm(this.formId, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            let data = response.data.data
            let params = {
              ...this.params,
              appId: sessionStorage.getItem('appId'),
              id: data.id, //表单id
              moduleId : this.moduleId,
              name: data.name, //表单名称
              templatecontext: data.templatecontext ? data.templatecontext : '', //源代码文本
              description: data.description ? data.description : '', //描述
              type: data.type, //类型
              styleId: data.styleId ? data.styleId : '', //样式库id
              showLog: data.showLog, //显示日志操作
              recordlogForever: data.recordlogForever
                ? data.recordlogForever
                : false, // 是否每次修改都记录
              showWaterMark: data.showWaterMark, //是否显示水印
              openComment: data.openComment ? data.openComment : false,//是否开通评论
              commentTitleScript: data.commentTitleScript ? data.commentTitleScript : '', //评论标题
              commentFlagScript: data.commentFlagScript ? data.commentFlagScript : '', //评论标识
              waterMarkScript: data.waterMarkScript ? data.waterMarkScript : '', //水印脚本
              isopenablescript: data.isopenablescript
                ? data.isopenablescript
                : '', //是否可打开脚本
              iseditablescript: data.iseditablescript
                ? data.iseditablescript
                : '', //是否可编辑脚本
              mappingStr: data.mappingStr ? data.mappingStr : {}, //映射表数据
              orderno: data.orderno, //排序号
              permissionType: data.permissionType, //权限
              showType: data.showType, //新版还是旧版表单设计器
            }
            this.params = params
          }
        },
      })
    },

    /**
     * 获取页签数据
     */
    async getStyleLibsList() {
      let params = {
        searchword: '',
        currpage: 1,
        pagelines: 10000,
      }
      let appId = sessionStorage.getItem('appId')
      const response = await getStyleLibsList(params, appId)
      if (response.data.errcode == 0) {
        this.styleLibrary = response.data.data
      }
    },

    /**
     * 切换表单类型
     */
    onChangeFormType(val) {
      let formVisible = false
      let tabsFormVisible = false
      let queryFormVisible = false
      let mapFormVisible = false
      let tplFormVisible = false

      switch (String(val)) {
        case '1':
          formVisible = true
          break
        case '2':
          tabsFormVisible = true
          break
        case '256':
          queryFormVisible = true
          break
        case '65536':
          mapFormVisible = true
          break
        case '1048576':
          tplFormVisible = true
          break
      }

      this.formVisible = formVisible
      this.tabsFormVisible = tabsFormVisible
      this.queryFormVisible = queryFormVisible
      this.mapFormVisible = mapFormVisible
      this.tplFormVisible = tplFormVisible
      this.$emit('updateFormType', val)
    },

    /**
     * 显示脚本编辑器弹框
     */
    showScriptEditor(val) {
      this.scriptEditorVisible = true
      this.currentScriptEditor = val
    },

    /**
     * 将脚本编辑器的值写入到textarea中
     */
    handleScriptEditor(val) {
      if (this.currentScriptEditor === 'paramsIseditablescript') {
        // 表单基本是否可编辑脚本
        this.params.iseditablescript = val
      } else if (this.currentScriptEditor === 'paramsWaterMarkScript') {
        // 表单基本水印脚本
        this.params.waterMarkScript = val
      } else if (this.currentScriptEditor === 'paramsIsopenablescript') {
        // 表单基本是否可打开脚本
        this.params.isopenablescript = val
      } else if (this.currentScriptEditor ==='paramsCommentTitleScript') {
        // 表单基本评论标题脚本
        this.params.commentTitleScript = val
      }else if(this.currentScriptEditor ==='paramsCommentFlagScript'){
        // 表单基本评论标识脚本
        this.params.commentFlagScript = val
      }else if (this.currentScriptEditor === 'summaryScript') {
        // 表单摘要脚本
        this.summarysParams.summaryScript = val
      }
    },

    /**
     * 保存
     */
    save() {
      let flag = false
      this.$refs['formbasic'].validate((valid, errmsg) => {
        if (valid) {
          flag = true
        } else {
          let m = ''
          for (let i in errmsg) {
            errmsg[i].forEach((elm) => {
              m += elm.message
            })
          }
          this.$message.error(m)
          // this.$message.warning('请确保基本页面信息填写完整!')
          flag = false
        }
      })
      if(flag){
        return this.params
      }else{
        return false
      }
    },
  },
  mounted() {
    this.getScollerHeight()
    this.getStyleLibsList()

    if (this.isEdit) {
      this.getFormDetail()
    } else {
      let appId = sessionStorage.getItem('appId')
      let moduleId = this.moduleId
      let params = {
        ...this.params,
        appId: appId,
        moduleId: moduleId,
      }
      this.params = params
      this.params.showType = this.showType
    }
  },

  computed: {
    /**
     * 将 textarea 的值写入 脚本编辑器
     */
    showScritptEditorCode() {
      let code
      if (this.currentScriptEditor === 'paramsIseditablescript') {
        // 表单基本是否可编辑脚本
        code = this.params.iseditablescript
      } else if (this.currentScriptEditor === 'paramsWaterMarkScript') {
        // 表单基本水印脚本
        code = this.params.waterMarkScript
      } else if (this.currentScriptEditor === 'paramsIsopenablescript') {
        // 表单基本是否可打开脚本
        code = this.params.isopenablescript
      } else if (this.currentScriptEditor === 'paramsCommentTitleScript') {
         // 表单基本评论标题脚本
        code = this.params.commentTitleScript
      } else if (this.currentScriptEditor === 'paramsCommentFlagScript') {
         // 表单基本评论标识脚本
        code = this.params.commentFlagScript
      }else if (this.currentScriptEditor === 'summaryScript') {
        // 表单摘要脚本
        code = this.summarysParams.summaryScript
      }
      return code
    },
  },
}
</script>
<style lang='less' scoped>
</style>