<style scoped>
  .wrapper {
    display: inline-block;
    line-height: 30px;
    vertical-align: middle;
  }
  .group,
  .path-input {
    vertical-align: top;
  }
  .through-btn {
    width: 60px;
  }
</style>

<template>
  <div class="wrapper">
    <slot></slot>
    <el-input class="path-input" :style="{width: inputWidth}" v-model="templatePath" :disabled="disabled"></el-input><el-button-group class="group">
      <el-button type="primary" icon="edit" v-if="isEdit" :disabled="!templatePath" @click="editTemplate" priv="ContentCore.TemplateMenu.Edit" title="编辑模板"></el-button>
      <el-button class="through-btn" :disabled="disabled" @click="browseTemplate">浏览</el-button>
      <!--<el-button v-if="isApplyChildren" :disabled="disabled" @click="applyTemplateToChildren">应用到子栏目</el-button>-->
    </el-button-group>

    <template-select-dialog :show.sync="showSelectDialog"
                            title="选择模板"
                            :siteID="siteId"
                            :type="type"
                            :value="templatePath"
                            :platformID="targetPlatform"
                            @callback="templateSelectDialogCallback">
    </template-select-dialog>
  </div>
</template>

<script>
import TemplateSelectDialog from './templateSelectDialog.vue'

export default {
  name: 'TemplatePicker',
  data () {
    return {
      showSelectDialog: false
    }
  },
  props: {
    value: { // 模板路径
      type: String,
      required: false
    },
    type: { // 模板类型
      type: String,
      default: ''
    },
    siteId: { //  站点ID
      type: Number,
      default () {
        return this.$root.siteID
      }
    },
    targetPlatform: { // 目标发布平台
      type: String,
      default: 'pc'
    },
    catalogId: { // 栏目ID
      type: [String, Number],
      default: ''
    },
    isEdit: { // 是否允许编辑
      type: Boolean,
      default: true
    },
    // isApplyChildren: { // 是否允许应用到子栏目
    //    type: Boolean
    //   default: true
    //  }
    inputWidth: {
      type: String,
      default: '200px'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    contentType: String
  },
  computed: {
    templatePath: {
      get () {
        return this.value ? this.value : ''
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    editTemplate () {
      if (!this.value || !this.targetPlatform) {
        return
      }
      window.open(`./templateEditor.html?ID=${this.catalogId}&fileName=${this.value}&platformID=${this.targetPlatform}&siteID=${this.siteId}`)
    },
    browseTemplate () {
      this.showSelectDialog = true
    },
    // applyTemplateToChildren () {
    //   this.$emit('apply-template-children')
    //  }
    templateSelectDialogCallback (val) {
      if (this.contentType === 'Mix') {
        this.$emit('callback', this.type, val)
        return
      }
      this.templatePath = val
    }
  },
  created () {},
  components: {
    'template-select-dialog': TemplateSelectDialog
  }
}
</script>
