<template>
  <div>
    <el-dialog :title="'设置模板参数'" :visible.sync="isShow" size="tiny" :width="dialogWidth">
      <el-form :model="cTemplateParams" label-width="100px" ref="templateParamsform">
        <el-form-item prop="logoHeight" label="Logo高度：" :verify="['NotNull','Number']">
          <el-input type="text" v-model="cTemplateParams.logoHeight"></el-input>
        </el-form-item>
        <el-form-item prop="titleFontSize" label="标题字号：" :verify="['NotNull','Number']">
          <el-input type="text" v-model="cTemplateParams.titleFontSize"></el-input>
        </el-form-item>
        <el-form-item prop="fontSize" label="摘要字号：" :verify="['NotNull','Number']">
          <el-input type="text" v-model="cTemplateParams.fontSize"></el-input>
        </el-form-item>
        <el-form-item prop="titleCharWidth" label="标题长度：" :verify="['NotNull','Number']">
          <el-input type="text" v-model="cTemplateParams.titleCharWidth"></el-input>
        </el-form-item>
        <el-form-item prop="summaryCharWidth" label="摘要长度：" :verify="['NotNull','Number']">
          <el-input type="text" v-model="cTemplateParams.summaryCharWidth"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" :loading="submitLoading" @click="okHandler">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
</style>

<script>
import util from '@src/common/util.js'
export default {
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    },
    cTemplateParams: {
      get() {
        if (!this.templateParams) {
          return this.formModel
        }
        return this.templateParams
      }
    }
  },

  data() {
    return {
      submitLoading: false,
      dialogWidth: '',
      formModel: {
        logoHeight: '75',
        titleFontSize: '12',
        fontSize: '12',
        titleCharWidth: '36',
        summaryCharWidth: '36',
        templateEditorUrl: 'twoColumnLogoSummaryStyle'
      }
    }
  },

  methods: {
    closeHandler(val) {
      this.$emit('close', val)
    },
    async okHandler() {
      this.submitLoading = true
      try {
        await util.validateForm(this.$refs['templateParamsform'])
      } catch (e) {
        util.showErrorMessageBox(e)
        this.submitLoading = false
        return
      }
      this.$emit('clickOK', this.cTemplateParams)
      this.submitLoading = false
      this.isShow = false
    }
  },
  created() {
    if (document.documentElement.clientWidth >= 1920) {
      this.dialogWidth = '25%'
    } else {
      this.dialogWidth = '35%'
    }
  },
  props: {
    show: Boolean,
    templateParams: Object
  }
}
</script>
