<template>
  <div>
    <el-form-item v-for="(value, key) in templates" :label="key" prop="name" :key="key" v-show="content.templateFlag === 'Y'">
      <el-input :value="value" class="form-item" @change="val => handleInput(key, val)">
        <el-button @click="browseTemplate(key)" slot="append">浏览</el-button>
      </el-input>
    </el-form-item>

    <template-select-dialog :show.sync="open" title="选择模板" :siteID="siteId" :type="templateType" :value="templatePath" :platformID="currentPlatform" @callback="templateCallback">
    </template-select-dialog>
  </div>
</template>
<script>
import templateSelectDialog from '../templateSelectDialog.vue'

export default {
  components: {
    templateSelectDialog
  },
  props: {
    content: {
      type: Object
    },
    templateType: {
      type: String
    },
    siteId: {
      type: [String, Number]
    }
  },
  data() {
    return {
      currentPlatform: '',
      templatePath: '',
      open: false,
      templates: {}
    }
  },

  watch: {
    content() {
      this.loadTemplates()
    }
  },

  methods: {
    handleInput(key, val) {
      this.templates[key] = val
      this.content.template = this.templates
    },
    templateCallback(val) {
      this.handleInput(this.currentPlatform, val)
      this.currentPlatform = ''
    },
    browseTemplate(val) {
      this.currentPlatform = val
      this.open = true
    },

    async loadTemplates() {
      let res = await axios.get(`/ui/contentcore/contents/gettemplates?siteID=${this.siteId}&template=${this.content.template}`)
      if (res.data.status === 1) {
        this.templates = res.data.data
      }
    }
  }
}
</script>

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