<template>
  <div class="obpm-dataSource">
    <div class="obpm-title">
      <div class="d-inline-block">
        <i class="el-icon-folder title-icon"></i>
        <div class="title-name d-inline-block ml-2">{{$t('library.stylelibs')}}</div>
      </div>
      <div class="bar d-inline-block float-right">
        <el-button type="primary" size="small" @click="save('formName')" :loading="btnLoading">{{$t('btns.save')}}</el-button>
        <el-button size="small" @click="close">{{$t('btns.exit')}}</el-button>
      </div>
    </div>
    <div class="obpm-main mt-3">
      <el-form :model="formData" class="demo-form-inline" size="small" label-width="100px" label-position="top" :rules="rules" ref="formName">
        <el-row>
          <el-col :span="8">
            <el-form-item :label="$t('library.name')" class="padding0Label" prop="name">
              <el-input v-model="formData.name" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4">
            <el-form-item :label="$t('library.description')" class="padding0Label">
              <el-input v-model="formData.description" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="21">
            <el-form-item :label="$t('library.content')" class="padding0Label" prop="content">
              <el-input
                style="width: 95%"
                type="textarea"
                :rows="8"
                v-model="formData.content">
              </el-input>
              <i class="el-icon-edit-outline" @click="showScriptEditor"></i>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 脚本选择器弹窗 -->
    <!-- scriptEditorVisible:弹窗显示   showScritptEditorCode：将文本框的值传给编译器  handleScriptEditor：将编译器的值传给textarea-->
    <ScriptEditorSelect
      v-if="scriptEditorVisible"
      :scriptEditorVisible="scriptEditorVisible"
      :editorCode="showScritptEditorCode"
      @closeScriptEditorDialog="scriptEditorVisible = false"
      @saveScriptEditor="handleScriptEditor"
    />
  </div>
</template>
<script>
import { saveStyleLibs,editgetStyleLibs,saveEditStyleLibs } from "@/service/LibraryAPI.js";
import ScriptEditorSelect from "@/components/Common/scriptEditor";
import { nameCheck } from "@/utils/utils.js";

export default {
  name: "StyleLibs",
  components:{
    ScriptEditorSelect
  },
  data() {
    return {
      formData: {
        name: "",
        content: "",
      },
      rules: {
        name: [
          { required: true, message: this.$t('placeholder.name'), trigger: 'blur' },
          { validator: nameCheck, trigger: "blur" },
        ],
        content:[
          { required: true, message: this.$t('placeholder.script'), trigger: 'blur' }
        ],
      },

      scriptEditorVisible: false, // 脚本编辑器弹窗
      btnLoading: false, // 按钮的加载图标
    }
  },
  mounted(){
    let edit = this.$route.query.edit;
    if(edit && edit!='false'){
      this.getStyleLibs();
    }
  },
  methods: {
    /**
     * 保存表单
     */
    save(formName){
      this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let appId = sessionStorage.getItem("appId");
            let styleId = this.$route.query.styleId || this.formData.id;
            if(styleId){
              this.formData.lastmodifytime = new Date();
              this.btnLoading = true;
              const response = await saveEditStyleLibs(appId,styleId,this.formData)
              this.btnLoading = false;
              if (response.data.errcode == 0) {
                this.$message.success(this.$t('msg.ss'));
              }
            }else{
              this.btnLoading = true;
              const response = await saveStyleLibs(appId,this.formData)
              this.btnLoading = false;
              if (response.data.errcode == 0) {
                this.$message.success(this.$t('msg.ss'));
                this.formData.id = response.data.data.id
              }
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    /**
     * 获取样式库详情
     */
    async getStyleLibs(){
      let appId = sessionStorage.getItem("appId");
      let styleId = this.$route.query.styleId;
      const response = await editgetStyleLibs(appId,styleId)
      if (response.data.errcode == 0) {
        this.formData = response.data.data;
      }
    },
    /**
     * 退出
     */
    close(){
      this.$store.dispatch("rightHelpPageParams", { title: this.$t('msg.style_list'), url: "application/application_info_libraries_styleLibs_list_help.html" });
      this.$router.push({path: '/home/softwaresdetails/Library/StyleLibsList',query:{edit: true}});
    },

    /**
     * 显示脚本编辑器弹框
     */
    showScriptEditor () {
      this.scriptEditorVisible = true;
    },
    /**
     * 将脚本编辑器的值写入到textarea中
     */
    handleScriptEditor (val) {
      this.formData.content = val
    },
  },
  computed:{
    /**
     * textarea 传给 脚本编辑器的值
     */
    showScritptEditorCode () {
      return this.formData.content
    },
  },
  watch: {
    "$store.state.rightHelpPageParams": {
      handler() {
        if (this.$store.state.rightHelpFrame) {
          this.$store.state.rightHelpFrame.contentWindow.showHelpContentHtml(this.$store.state.rightHelpPageParams.title, this.$store.state.rightHelpPageParams.url);
        }
      },
      deep: true,
    },
  },
}
</script>