<template>
  <div>
    <el-form
      :model="formData"
      label-position="top"
      size="small"
      class="demo-form-inline"
      label-width="100px"
      :rules="formDataRules"
      ref="formData"
      v-loading="loading"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item
            :label="$t('view.name')"
            class="padding0Label"
            prop="name"
          >
            <el-input v-model="formData.name" class="width-360"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="4">
          <el-form-item :label="$t('view.description')" class="padding0Label">
            <el-input
              v-model="formData.description"
              class="width-360"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('view.view_type')" class="padding0Label">
            <el-select
              v-model="formData.intValue"
              class="width-360"
              @change="setDefaultValue"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="4">
          <el-form-item :label="$t('view.style_lib')" class="padding0Label">
            <el-select v-model="formData.styleId" class="width-360">
              <el-option value="" label=""></el-option>
              <el-option
                v-for="item in styleOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.intValue == 18">
        <el-col :span="8">
          <el-form-item
            :label="$t('view.Map_plug')"
            class="padding0Label"
            prop="mapType"
          >
            <el-row>
              <el-select v-model="formData.mapType" class="width-360">
                <el-option
                  v-for="item in mapTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-row>
            <el-row>
              <span :style="{ color: 'red' }"
                >{{$t('view.just_pc')}}</span
              >
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('view.open_type')" class="padding0Label">
            <el-select v-model="formData.openType" class="width-360" @change="changeOpenType">
              <el-option
                v-for="item in openTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <p style="color: green; margin: 0" v-if="formData.openType == 288">
              {{$t('view.grid')}}
            </p>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="4">
          <el-form-item
            :label="$t('view.permission')"
            class="padding0InlineLabel"
          >
            <el-radio v-model="formData.permissionType" label="public">{{
              $t('view.public')
            }}</el-radio>
            <el-radio v-model="formData.permissionType" label="private">{{
              $t('view.private')
            }}</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="showformDataIntValue">
        <el-col :span="8" v-if="formData.openType != 288">
          <el-form-item
            :label="$t('view.data_present_mode')"
            class="padding0Label"
          >
            <el-select
              v-model="formData.displayType"
              class="width-360"
              @change="changeDisplayType"
            >
              <el-option
                :label="$t('view.show_related_form')"
                value="relatedForm"
              ></el-option>
              <el-option
                :label="$t('view.show_template_form')"
                value="templateForm"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="8"
          :offset="4"
          v-if="formData.displayType == 'templateForm'"
        >
          <el-form-item
            :label="$t('view.template_form')"
            class="padding0Label"
            prop="templateForm"
          >
            <el-select v-model="formData.templateForm" class="width-360">
              <el-option
                v-for="item in templateFormList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 弹窗宽高 -->
      <el-row v-if="formData.openType == 277">
        <el-col :span="8">
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('label.width')" class="padding0Label">
                <el-input
                  size="mini"
                  v-model="formData.width"
                  class="halfInput"
                />px
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('label.height')" class="padding0Label">
                <el-input
                  size="mini"
                  v-model="formData.height"
                  class="halfInput"
                />px
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" v-if="formData.openType==1">
          <el-form-item
            :label="$t('view.window_open')"
            class="padding0InlineLabel"
          >
            <el-radio v-model="formData.newPage" :label="true">{{
              $t('view.yes')
            }}</el-radio>
            <el-radio v-model="formData.newPage" :label="false">{{
              $t('view.no')
            }}</el-radio>
          </el-form-item>
        </el-col>
        <el-col
          :span="8"
          :offset="(formData.openType!=288&&formData.openType!=1)?0:4"
          class="padding0InlineLabel"
          v-if="formData.openType!=288"
        >
          <el-form-item :label="$t('label.set_type')">
            <el-radio v-model="formData.autoCompose" :label="true">{{
              $t('view.yes')
            }}</el-radio>
            <el-radio v-model="formData.autoCompose" :label="false">{{
              $t('view.no')
            }}</el-radio>
          </el-form-item>
        </el-col>
        <el-col
          :span="8"
          :offset="4"
          class="padding0InlineLabel"
          v-if="showCollapsibleShowMode"
        >
          <el-form-item :label="$t('label.play_type')">
            <el-radio-group v-model="formData.collapsibleShowMode">
              <el-radio label="normal">{{$t('view.normal')}}</el-radio>
              <el-radio label="card">{{$t('view.card')}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" v-if="!showcalendar && !showgantt">
          <el-form-item
            :label="$t('view.total_rows')"
            class="padding0InlineLabel"
          >
            <el-radio v-model="formData.showTotalRow" :label="true">{{
              $t('view.yes')
            }}</el-radio>
            <el-radio v-model="formData.showTotalRow" :label="false">{{
              $t('view.no')
            }}</el-radio>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8" :offset="!showcalendar && !showgantt ? 4 : 0">
          <el-form-item :label="$t('view.refresh')" class="padding0InlineLabel">
            <el-radio v-model="formData.refresh" :label="true">{{
              $t('view.yes')
            }}</el-radio>
            <el-radio v-model="formData.refresh" :label="false">{{
              $t('view.no')
            }}</el-radio>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-row v-if="formData.openType != 288">
        <el-col :span="9" v-if="showPagination">
          <el-form-item
            :label="$t('view.pagination')"
            class="padding0InlineLabel"
          >
            <el-radio v-model="formData.pagination" :label="true">{{
              $t('view.yes')
            }}</el-radio>
            <el-radio v-model="formData.pagination" :label="false">{{
              $t('view.no')
            }}</el-radio>
            <el-select
              v-model="formData.pageLines"
              v-if="formData.pagination == true"
              style="width: 150px"
            >
              <el-option label="5" value="5"></el-option>
              <el-option label="10" value="10"></el-option>
              <el-option label="15" value="15"></el-option>
              <el-option label="30" value="30"></el-option>
            </el-select>
            <span v-if="formData.pagination == true">{{$t('view.record')}}/{{$t('view.page')}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="showPagination ? 3 : 0" v-if="showReadOnly">
          <el-form-item
            :label="$t('view.read_only')"
            class="padding0InlineLabel"
          >
            <el-radio v-model="formData.readonly" :label="true">{{
              $t('view.yes')
            }}</el-radio>
            <el-radio v-model="formData.readonly" :label="false">{{
              $t('view.no')
            }}</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="showFormDataWaterMark">
        <el-col :span="8">
          <el-form-item
            :label="$t('view.watermask')"
            class="padding0InlineLabel"
          >
            <el-radio v-model="formData.showWaterMark" :label="true">{{
              $t('view.yes')
            }}</el-radio>
            <el-radio v-model="formData.showWaterMark" :label="false">{{
              $t('view.no')
            }}</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="4" v-if="showActivityColumn">
          <el-form-item :label="$t('label.list_mode')" class="padding0InlineLabel">
            <el-radio v-model="formData.showActivityColumnType" :label="0"
              >{{$t('radio.all')}}</el-radio
            >
            <el-radio v-model="formData.showActivityColumnType" :label="1"
              >{{$t('radio.comfirm')}}</el-radio
            >
            <el-radio v-model="formData.showActivityColumnType" :label="2"
              >{{$t('radio.move')}}</el-radio
            >
            <el-radio v-model="formData.showActivityColumnType" :label="3"
              >{{$t('radio.no')}}</el-radio
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" v-if="showFormDataWaterMark">
          <el-form-item
            :label="$t('view.watermask_script')"
            class="padding0Label"
          >
            <el-input
              v-model="formData.waterMarkScript"
              type="textarea"
              style="width: 95%"
            ></el-input>
            <i
              class="el-icon-edit-outline"
              style="width: 5%"
              @click="showScriptEditor('formDataWaterMarkScript')"
            ></i>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="4" v-if="showConfirmScript">
          <el-form-item :label="$t('label.comfirm_script')" class="padding0Label">
            <el-input
              v-model="formData.confirmActivityScript"
              type="textarea"
              style="width: 95%"
            ></el-input>
            <i
              class="el-icon-edit-outline"
              style="width: 5%"
              @click="showScriptEditor('formDataConfirmActivityScript')"
            ></i>
          </el-form-item>
        </el-col>
        <el-col
          :span="4"
          :offset="showConfirmScript ? 1 : 4"
          v-if="showRemoveScript"
        >
          <el-form-item :label="$t('label.move_script')" class="padding0Label">
            <el-input
              v-model="formData.removeActivityScript"
              type="textarea"
              style="width: 95%"
            ></el-input>
            <i
              class="el-icon-edit-outline"
              style="width: 5%"
              @click="showScriptEditor('formDataRemoveActivityScript')"
            ></i>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="formData.intValue === '17'">
        <el-col :span="8">
          <el-form-item :label="$t('view.inner_type')" class="padding0Label">
            <el-select v-model="formData.innerType" @change="changeInnerType">
              <el-option :label="$t('view.form')" value="FORM"></el-option>
              <el-option :label="$t('view.view')" value="VIEW"></el-option>
              <el-option :label="$t('view.link')" value="LINK"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="4" v-show="formData.innerType === 'LINK'">
          <el-row>
            <el-form-item :label="$t('view.node_link')" class="padding0Label">
              <el-input
                v-model="formData.linkName"
                size="mini"
                readonly
                class="width-360"
              ></el-input>
              <el-button
                plain
                type="primary"
                @click="openNodeLink"
                size="small"
                >{{ $t('btns.choose') }}</el-button
              >
              <el-button
                plain
                type="danger"
                @click="clearLinkName"
                size="small"
                >{{ $t('btns.clean') }}</el-button
              >
            </el-form-item>
          </el-row>
        </el-col>
      </el-row>
    </el-form>

    <!-- 脚本选择器弹窗 -->
    <!-- scriptEditorVisible:弹窗显示   showScritptEditorCode：将文本框的值传给编译器  handleScriptEditor：将编译器的值传给textarea-->
    <ScriptEditorSelect
      v-if="scriptEditorVisible"
      :scriptEditorVisible="scriptEditorVisible"
      :editorCode="showScritptEditorCode"
      @closeScriptEditorDialog="scriptEditorVisible = false"
      @saveScriptEditor="handleScriptEditor"
    />
    <!-- 节点链接弹窗 -->
    <!-- nodeLinkVisiable: 弹窗显示  closeNodeLink: 关闭前回调  selectNodeLinkValue: 选中的值-->
    <NodeLinkSelect
      v-if="nodeLinkVisiable"
      ref="nodeLink"
      :nodeLinkVisiable="nodeLinkVisiable"
      @closeNodeLink="nodeLinkVisiable = false"
      @selectNodeLinkValue="selectNodeLinkValue"
    />
  </div>
</template>

<script>
import { nameCheck } from '@/utils/utils.js'
import { getStyleLibsList } from '@/service/LibraryAPI.js'
import ScriptEditorSelect from '@/components/Common/scriptEditor'
import NodeLinkSelect from '@/components/Common/nodeLink_select'
import { getFormList } from '@/service/CommontoolsAPI.js'
import config from '@/assets/json/config.json'
import { getModuleViewData } from '@/service/ViewApi.js'
export default {
  name: 'ViewBasic',
  components: {
    ScriptEditorSelect,
    NodeLinkSelect,
  },
  data() {
    return {
      loading: false,
      ajaxNum: 0, // 请求的次数
      formData: {
        name: '', //名称
        description: '', //描述
        intValue: '1', //视图类型
        styleId: '', //样式库
        mapType: 'baidumap', // 地图插件类型
        openType: '1', //打开类型
        permissionType: 'public', //权限
        displayType: 'relatedForm', //数据呈现类型
        refresh: false, // 刷新
        newPage: false, //新窗口打开
        showTotalRow: false, //是否显示总计数
        pagination: true, //分页
        pageLines: '5', //分页条数
        readonly: false, //只读
        autoCompose: false, // 是否自动排版
        collapsibleShowMode: 'normal', // 显示模式
        showWaterMark: false, //水印
        showActivityColumnType: 0, // 操作列显示模式
        waterMarkScript: '', //水印脚本
        confirmActivityScript: '', // 确认脚本
        removeActivityScript: '', // 移除脚本
        templateForm: '', //模板表单
        innerType: 'FORM', // 节点点击打开类型
        linkName: '', // 节点链接
        nodeLinkId: '', // 节点链接id
        width: '', // 弹窗宽
        height: '', // 弹窗高
      },
      options: config.options,
      mapTypeOptions: config.mapTypeOptions,
      openTypeOptions: config.openTypeOptions,

      styleOptions: [], //样式库
      templateFormList: [], // 模板表单
      formDataRules: {
        name: [
          { required: true, message: this.$t('placeholder.name'), trigger: 'blur' },
          // { validator: nameCheck, trigger: 'blur' },//555视图名称字段不要限制
        ],
        mapType: [
          { required: true, message: this.$t('placeholder.map'), trigger: 'change' },
        ],
        templateForm: [
          { required: true, message: this.$t('placeholder.form_model'), trigger: 'blur' },
        ],
      },

      scriptEditorVisible: false, // 脚本编辑器弹窗
      currentScriptEditor: '', // 当前点击的是哪一个脚本编辑器
      nodeLinkVisiable: false, // 节点链接弹窗
    }
  },
  methods: {
    changeInnerType(val){
      this.formData.innerType=val
      this.$forceUpdate()
    },
    /**
     * 切换数据呈现方式
     */
    changeDisplayType() {
      if (this.formData.displayType == 'templateForm') {
        this.getTemplateFormList()
      }
    },

    /**
     * 切换视图类型
     */
    setDefaultValue() {
      // 默认选中第一条数据
      if (this.formData.intValue == 18) {
        this.formData.mapType = 'baidumap'
      }
      if (this.formData.intValue == 17) {
        this.formData.innerType = this.formData.innerType?this.formData.innerType:'FORM'
      }
      // 重置打开类型
      this.formData.openType = '1'
      // 实时修改传给视图列的intValue的值
      this.$store.commit('setCurrentDataSources', this.formData) // 当前的数据【传给列的批量创建】
    },

    /**
     * 切换打开类型
     */
    changeOpenType(){
       this.$store.commit('setCurrentDataSources', this.formData) // 当前的数据【传给视图数据组件】
    },

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

    /**
     * 将脚本编辑器的值写入到textarea中
     */
    handleScriptEditor(val) {
      if (this.currentScriptEditor === 'formDataWaterMarkScript') {
        this.formData.waterMarkScript = val
      } else if (this.currentScriptEditor === 'formDataConfirmActivityScript') {
        this.formData.confirmActivityScript = val
      } else if (this.currentScriptEditor === 'formDataRemoveActivityScript') {
        this.formData.removeActivityScript = val
      }
    },

    /**
     * 将节点链接的值写入input中
     */
    selectNodeLinkValue(val) {
      this.formData.linkName = val.name
      this.formData.nodeLinkId = val.id
    },

    /**
     * 打开节点链接弹窗
     */
    openNodeLink() {
      this.nodeLinkVisiable = true
    },
    /**
     * 清空基本节点【提供给子组件的方法】
     */
    clearLinkName() {
      this.formData.linkName = ''
      this.formData.nodeLinkId = ''
      this.$forceUpdate()
    },

    /**
     * 获取视图的数据
     */
    getViewData() {
      this.ajaxNum++
      getModuleViewData(this.viewId, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            this.ajaxNum--

            let data = response.data.data
            data.openType = data.openType + ''
            data.intValue = data.intValue + ''
            data.autoCompose = data.autoCompose ? data.autoCompose : false
            data.collapsibleShowMode = data.collapsibleShowMode
              ? data.collapsibleShowMode
              : 'normal'

            data.mapType ? data.mapType : 'baidumap'

            this.formData = data
            this.formData.linkName=data.linkVoJson?JSON.parse(data.linkVoJson).name:""
            setTimeout(()=>{
              this.$store.commit('setCurrentDataSources', data) // 当前的数据【传给列的批量创建】
            })
            this.initData = {
              // 初始化的数据来源表单用于视图列做对比
              relatedForm: data.relatedForm,
              viewtype: data.intValue,
            }

            // 根据数据呈现方式判断是否请求模板表单
            if (data.displayType == 'templateForm') {
              this.getTemplateFormList()
            }
            this.$emit("viewModuleData",data)
          }
        },
      })
    },

    /**
     * 模板表单
     */
    getTemplateFormList() {
      this.ajaxNum++
      getFormList(
        {
          moduleId: this.moduleId,
          name: '',
          description: '',
          pageNo: 1,
          linesPerPage: 1000000,
          type: 1048576,
        },
        {
          onSucess: (response) => {
            this.ajaxNum--
            if (response.data.errcode == 0) {
              if (response.data.data) {
                this.templateFormList = response.data.data
              } else {
                this.formData.templateForm = ''
              }
              // 视图数据的模板表单
              if (
                this.formData.templateForm != '' &&
                this.formData.templateForm
              ) {
                let have = false
                for (let i = 0; i < this.templateFormList.length; i++) {
                  if (
                    this.templateFormList[i].id == this.formData.templateForm
                  ) {
                    have = true
                    break
                  }
                }
                if (!have) {
                  this.formData.templateForm = ''
                }
              }
            }
          },
        }
      )
    },

    /**
     * 获取样式库数据
     */
    async getStyleData() {
      let appId = sessionStorage.getItem('appId')
      let params = {
        appId: sessionStorage.getItem('appId'),
        searchword: '',
        currpage: 1,
        pagelines: 1000000,
      }
      const response = await getStyleLibsList(params, appId)
      if (response.data.errcode == 0) {
        this.styleOptions = response.data.data.datas
      }
    },

    save() {
      let flag = false
      this.$refs['formData'].validate((valid) => {
        if (!valid) {
          flag = true
        }
      })
      if (flag) {
        return false
      } else {
        if(this.formData.linkVoJson){this.formData.linkVoJson=""}
        return {
          ...this.formData,
          openType: parseInt(this.formData.openType), //打开类型
          intValue: parseInt(this.formData.intValue), //视图类型
          width: parseInt(this.formData.width), // 弹窗宽
          height: parseInt(this.formData.height), // 弹窗高
        }
      }
    },
  },
  props: {
    isEdit: Boolean,
    viewId: String,
    moduleId: String,
  },
  mounted() {
    if (this.isEdit) {
      this.getViewData()
    }
    // 获取样式库数据
    this.getStyleData()
  },
  computed: {
    /**
     * textarea 传给 脚本编辑器的值
     */
    showScritptEditorCode() {
      let code
      if (this.currentScriptEditor === 'formDataWaterMarkScript') {
        code = this.formData.waterMarkScript
      } else if (this.currentScriptEditor === 'formDataConfirmActivityScript') {
        code = this.formData.confirmActivityScript
      } else if (this.currentScriptEditor === 'formDataRemoveActivityScript') {
        code = this.formData.removeActivityScript
      }
      return code
    },
    // 显示日历视图
    showcalendar() {
      return this.formData.intValue == 16
    },
    // 显示甘特视图
    showgantt() {
      return this.formData.intValue == 19
    },
    // 数据类型呈现方式
    showformDataIntValue() {
      let flag
      if (
        this.formData.intValue != 17 &&
        this.formData.intValue != 19 &&
        this.formData.intValue != 18
      ) {
        flag = true
      } else {
        flag = false
      }
      return flag
    },
    // 显示水印脚本
    showFormDataWaterMark() {
      let flag
      if (
        this.formData.intValue != 18 &&
        this.formData.intValue != 20 &&
        this.formData.intValue != 19
      ) {
        flag = true
      } else {
        flag = false
      }
      return flag
    },
    // 显示只读
    showReadOnly() {
      let flag = true
      if (
        this.formData.intValue == 20 ||
        this.formData.intValue == 16 ||
        this.formData.intValue == 17
      ) {
        flag = false
      }
      return flag
    },
    // 显示确认脚本
    showConfirmScript() {
      let flag = false
      if (
        (this.formData.intValue == 1 &&
          this.formData.openType == 288 &&
          this.formData.showActivityColumnType == 0) ||
        this.formData.showActivityColumnType == 1
      ) {
        flag = true
      }
      return flag
    },
    // 显示移除脚本
    showRemoveScript() {
      let flag = false
      if (
        (this.formData.intValue == 1 &&
          this.formData.openType == 288 &&
          this.formData.showActivityColumnType == 0) ||
        this.formData.showActivityColumnType == 2
      ) {
        flag = true
      }
      return flag
    },

    // 显示分页
    showPagination() {
      let flag = false
      if (
        this.formData.intValue != 16 &&
        this.formData.intValue != 17 &&
        this.formData.intValue != 20 &&
        this.formData.intValue != 18 &&
        this.formData.intValue != 19
      ) {
        flag = true
      }
      return flag
    },

    // 显示是否自动排版
  /*  showCompose() {
      let flag = false
      if (this.formData.intValue == 1) {
        flag = true
      }
      return flag
    },*/
    // 是否显示模式
    showCollapsibleShowMode() {
      let flag = false
      if (this.formData.intValue == 20) {
        flag = true
      }
      return flag
    },

    // 操作列显示模式及确认删除脚本
    showActivityColumn() {
      let flag = false
      if (this.formData.intValue == 1 && this.formData.openType == 288) {
        flag = true
      }
      return flag
    },
  },
}
</script>
<style lang='less' scoped>
</style>