<template>
  <el-form label-width="100px">
    <div class="title">
      文章/附件/图片/视频/自定义内容/栏目/站点相关字段
    </div>
    <el-form-item label="模板类型：" prop="tempType">
      <el-select filterable placeholder="" v-model="tempType" class="form-item">
        <el-option v-for="item in templateTypes" :key="item.key" :label="item.name" :value="item.key">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label=" ">
      <el-radio-group v-model="field" class="radio-group">
        <span v-for="(item,index) in currentType" :key="item.value">
          <el-radio :label="item.value">{{item.name}}
            <el-input v-if="item.value === 'Custom'" v-model="custom" style="width:160px;" :disabled="field !== 'Custom'"></el-input>
          </el-radio>
          <br v-if="((index+1)%3===0)" />
        </span>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      tempType: '',
      field: '',
      custom: '',
      currentType: [],
      templateTypes: [
        {
          key: 'Article',
          name: '文章相关字段'
        },
        {
          key: 'ImageGroup',
          name: '图片相关字段'
        },
        {
          key: 'File',
          name: '附件相关字段'
        },
        {
          key: 'Audio',
          name: '音频相关字段'
        },
        {
          key: 'Video',
          name: '视频相关字段'
        },
        {
          key: 'Special',
          name: '专题相关字段'
        },
        {
          key: 'Catalog',
          name: '栏目相关字段'
        },
        {
          key: 'Site',
          name: '站点相关字段'
        }
      ],
      vars: {
        Article: [
          {
            value: 'ID',
            name: '文章ID'
          },
          {
            value: 'Title',
            name: '文章标题'
          },
          {
            value: 'Content',
            name: '文章内容'
          },
          {
            value: 'Summary',
            name: '文章摘要'
          },
          {
            value: 'Link',
            name: '文章链接'
          },
          {
            value: 'Author',
            name: '文章作者'
          },
          {
            value: 'Source',
            name: '文章来源'
          },
          {
            value: 'PublishDate',
            name: '文章发布日期'
          },
          {
            value: 'SubTitle',
            name: '文章副标题'
          },
          {
            value: 'ShortTitle',
            name: '文章短标题'
          },
          {
            value: 'Custom',
            name: '自定义字段：'
          }
        ],
        File: [
          {
            value: 'ID',
            name: '附件ID'
          },
          {
            value: 'Title',
            name: '附件标题'
          },
          {
            value: 'Link',
            name: '附件链接'
          },
          {
            value: 'Author',
            name: '附件作者'
          },
          {
            value: 'Source',
            name: '附件来源'
          },
          {
            value: 'PublishDate',
            name: '附件发布日期'
          },
          {
            value: 'Custom',
            name: '自定义字段：'
          }
        ],
        ImageGroup: [
          {
            value: 'Title',
            name: '图片标题'
          },
          {
            value: 'Link',
            name: '图片链接'
          },
          {
            value: 'Author',
            name: '图片作者'
          },
          {
            value: 'Source',
            name: '图片来源'
          },
          {
            value: 'PublishDate',
            name: '图片发布日期'
          },
          {
            value: 'CoverPath',
            name: '图片路径'
          },
          {
            value: 'Custom',
            name: '自定义字段：'
          }
        ],
        Video: [
          {
            value: 'Title',
            name: '视频标题'
          },
          {
            value: 'Link',
            name: '视频链接'
          },
          {
            value: 'Author',
            name: '视频作者'
          },
          {
            value: 'Source',
            name: '视频来源'
          },
          {
            value: 'PublishDate',
            name: '视频发布日期'
          },
          {
            value: 'HitCount',
            name: '视频点击率'
          },
          {
            value: 'Custom',
            name: '自定义字段：'
          }
        ],
        Audio: [
          {
            value: 'ID',
            name: '音频ID'
          },
          {
            value: 'Title',
            name: '音频名称'
          },
          {
            value: 'Link',
            name: '音频链接'
          },
          {
            value: 'Author',
            name: '音频作者'
          },
          {
            value: 'Duration',
            name: '音频时长'
          },
          {
            value: 'PublishDate',
            name: '音频发布日期'
          },
          {
            value: 'Custom',
            name: '自定义字段：'
          }
        ],
        Special: [
          {
            value: 'ID',
            name: '专题ID'
          },
          {
            value: 'Title',
            name: '专题名称'
          },
          {
            value: 'Link',
            name: '专题链接'
          },
          {
            value: 'Path',
            name: '专题路径'
          },
          {
            value: 'FileName',
            name: '生成文件名'
          },
          {
            value: 'PublishDate',
            name: '专题发布日期'
          },
          {
            value: 'Custom',
            name: '自定义字段：'
          }
        ],
        Catalog: [
          {
            value: 'ID',
            name: '栏目ID'
          },
          {
            value: 'ParentID',
            name: '父级栏目ID'
          },
          {
            value: 'Name',
            name: '栏目名称'
          },
          {
            value: 'Link',
            name: '栏目链接'
          },
          {
            value: 'Custom',
            name: '自定义字段：'
          }
        ],
        Site: [
          {
            value: 'ID',
            name: '站点ID'
          },
          {
            value: 'Name',
            name: '站点名称'
          },
          {
            value: 'Link',
            name: '站点链接'
          }
        ]
      }
    }
  },
  watch: {
    tempType(val) {
      this.field = ''
      this.custom = ''
      this.currentType = this.vars[val]
    }
  },
  methods: {
    getCode() {
      if (this.field === 'Custom') {
        return '$' + `{${this.tempType}.MetaValue_${this.custom}}`
      } else {
        return '$' + `{${this.tempType}.${this.field}}`
      }
    },
    init() {

    }
  }
}
</script>

<style>
  .radio-group .el-radio {
    width: 150px;
    padding-bottom: 10px;
  }
</style>
<style scoped>
.title{
  padding:10px 20px;
  font-weight:bold;
}
</style>
