<template>
  <div>
    <div class="panel-fieldset">
      <h4 class="panel-legend">会员菜单设置</h4>
      <el-form-item label="是否作为会员菜单：" prop="memberMenu">
        <el-switch :disabled="disabled" v-model="extend.memberMenu" active-value="Y" inactive-value="N"></el-switch>
      </el-form-item>
      <el-form-item label="所属菜单组ID：" prop="menuGroupID">
        <el-input class="form-item" :disabled="extend.memberMenu === 'N' || disabled" v-model="extend.menuGroupID"></el-input>
      </el-form-item>
      <el-form-item label="菜单名称：" prop="menuName">
        <el-input class="form-item" :disabled="extend.memberMenu === 'N' || disabled" v-model="extend.menuName"></el-input>
      </el-form-item>
      <el-form-item label="表单列表页模板：" prop="menuListTemplate">
        <el-input class="form-item" :disabled="extend.memberMenu === 'N' || disabled" v-model="extend.menuListTemplate" :readonly="true">
          <el-button :disabled="extend.memberMenu === 'N' || disabled" @click="browseTemplate('list',extend.menuListTemplate)"
            slot="append">浏览...</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="表单详细页模板：" prop="menuEditorTemplate">
        <el-input class="form-item" :disabled="extend.memberMenu === 'N' || disabled" v-model="extend.menuEditorTemplate" :readonly="true">
          <el-button :disabled="extend.memberMenu === 'N' || disabled" @click="browseTemplate('editor',extend.menuEditorTemplate)"
            slot="append">浏览...</el-button>
        </el-input>
      </el-form-item>
    </div>
    <templateSelect-dialog :show.sync="templateSelectModal" title="选择模板文件" type="Member" :value="templateValue" @callback="templateSelectCallback"></templateSelect-dialog>
  </div>
</template>

<script>
import templateSelectDialog from '../contentcore/templateSelectDialog.vue'
export default {
  data() {
    return {
      templateSelectModal: false,
      templateValue: '',
      templateType: ''
    }
  },
  methods: {
    browseTemplate(type, value) {
      this.templateType = type
      this.templateValue = value
      this.templateSelectModal = true
    },
    templateSelectCallback(val) {
      if (this.templateType === 'list') {
        this.extend.menuListTemplate = val
        return
      }
      if (this.templateType === 'editor') {
        this.extend.menuEditorTemplate = val
      }
    }
  },
  components: {
    'templateSelect-dialog': templateSelectDialog
  },
  computed: {
    extend: {
      get() {
        return this.extends
      },
      set(val) {
        this.$emit('update:extends', val)
      }
    }
  },
  props: {
    extends: {
      type: Object,
      default: function () {
        return {
          memberMenu: 'N',
          menuGroupID: '',
          menuName: '',
          menuListTemplate: '',
          menuEditorTemplate: ''
        }
      }
    },
    disabled: {
      type: Boolean
    }
  }
}
</script>
