<template>
  <el-form label-width="100px" >
    <el-form-item label="模板类型：" prop="tempType">
      <el-radio-group v-model="tempType">
        <el-radio label="indexTemp">首页模板</el-radio>
        <el-radio label="designatedTemp">列表页模板[指定具体栏目]</el-radio>
        <el-radio label="listTemp">列表页模板</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="指定栏目：" prop="catalog" v-show="tempType!=='listTemp'">
      <tree-select :value.sync="catalog" :clearable="true" :items="catalogTree" @click-change="onTreeClick" width="80%" placeholder="请选择栏目">
      </tree-select>
    </el-form-item>
    <el-form-item label="分页设置：">
      每页行数<el-input-number size="small" controls-position="right" :min='1' v-model="lineCount"></el-input-number>
      每行字数<el-input-number size="small" controls-position="right" :min='1' v-model="charWidth"></el-input-number>
    </el-form-item>
    <el-form-item label="显示层级：">
      <el-select filterable placeholder="" v-model="level" class="form-item">
        <el-option v-for="item in levels" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="排序类型：">
      <el-select filterable placeholder="" v-model="OrderType" class="form-item">
        <el-option v-for="item in OrderTypes" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="布局类型：" prop="layoutType">
      <el-radio-group  v-model="layoutType">
        <el-radio label="li">列表[li]</el-radio>
        <el-radio label="br">换行[br]</el-radio>
        <el-radio label="tr">表格[tr]</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="其他选项：">
      <el-checkbox v-model="dateAdd">在文章标题后添加发布日期，日期格式为</el-checkbox>
      <el-select filterable placeholder="" v-model="dateFormat" :disabled="!dateAdd">
        <el-option v-for="item in dateFormats" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <br/>
      <el-checkbox v-model="imageAdd">如果有图片，则在文章标题后附加</el-checkbox>
      <el-input v-model="imageAddHtml" style="width:20%" :disabled="!imageAdd"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
/* eslint-disable no-template-curly-in-string */
import TreeSelect from '@src/components/TreeSelect.vue'
export default {
  data() {
    return {
      dateAdd: false,
      imageAdd: false,
      tempType: 'indexTemp',
      imageAddHtml: `[<img src='' />]`,
      level: 'Root',
      lineCount: 15,
      charWidth: 30,
      catalogTree: [],
      catalog: 0,
      alias: '',
      types: [],
      layoutType: 'li',
      levels: [
        {
          value: 'Root',
          label: '所有根栏目的文章'
        }, {
          value: 'Current',
          label: '当前栏目下的文章'
        }, {
          value: 'Child',
          label: '当前栏目下子栏目的所有文章(不包含当前栏目)'
        }, {
          value: 'CurrentAndChild',
          label: '当前栏目下子栏目的所有文章(包含当前栏目)'
        }
      ],
      OrderType: 'Recent',
      OrderTypes: [
        {
          value: 'Recent',
          label: '按发布时间'
        }, {
          value: 'Relate',
          label: '按相关新闻'
        }, {
          value: 'Hot',
          label: '按点击率'
        }
      ],
      dateFormat: '',
      dateFormats: [
        {
          value: 'yyyy-MM-dd',
          label: 'yyyy-MM-dd'
        }, {
          value: 'yyyy年MM月dd日',
          label: 'yyyy年MM月dd日'
        }, {
          value: 'yyyy-MM-dd HH:mm:ss',
          label: 'yyyy-MM-dd HH:mm:ss'
        }
      ]
    }
  },
  methods: {
    onTreeClick(data) {
      this.alias = data.alias
    },
    getCode() {
      let curCatalog = `catalogAlias="${this.alias}"`
      if (this.tempType === 'listTemp') {
        curCatalog += ` pagesize="${this.lineCount}" page="true"`
      } else if (this.tempType === 'designatedTemp') {
        curCatalog += ` pagesize="${this.lineCount}" page="true"`
      } else {
        curCatalog += ` count="${this.lineCount}"`
      }
      let str
      if (this.layoutType === 'li') {
        str = '<ul>\n'
        str += `  <cms:special ${curCatalog} type="${this.orderType}" level="${this.level}">\n`
        str += '    <z:list>\n'
        str += '      <li><a href="${Special.Link}" title="${Special.Title}">'
        str += '$' + `{charWidth(Special.Title, ${this.charWidth},"...")}`

        if (this.imageAdd) {
          str += this.imageAddHtml
        }
        str += '</a>'
        if (this.dateAdd) {
          str += '$' + `{format(Special.PublishDate,"${this.dateFormat}")}`
        }
        str += '</li>\n'
        str += '    </z:list>\n'
        str += '  </cms:special>\n'
        str += '</ul>'
      } else if (this.layoutType === 'br') {
        str = `  <cms:special ${curCatalog} type="${this.orderType}" level="${this.level}">\n`
        str += '    <z:list>\n'
        str += '      <a href="${Special.Link}" title="${Special.Title}">'
        str += '$' + `{charWidth(Special.Title, ${this.charWidth},"...")}`

        if (this.imageAdd) {
          str += this.imageAddHtml
        }
        str += '</a>'
        if (this.dateAdd) {
          str += '$' + `{format(Special.PublishDate,"${this.dateFormat}")}`
        }
        str += '    <br/></z:list>\n'
        str += '  </cms:special>\n'
      } else if (this.layoutType === 'tr') {
        str = '<table cellspace="1" border="0">\n'
        str += `  <cms:special ${curCatalog} type="${this.orderType}" level="${this.level}">\n`
        str += '    <z:list>\n'
        str += '      <tr><td><a href="${Special.Link}" title="${Special.Title}">'
        str += '$' + `{charWidth(Special.Title, ${this.charWidth},"...")}`

        if (this.imageAdd) {
          str += this.imageAddHtml
        }
        str += '</a>'
        if (this.dateAdd) {
          str += '$' + `{format(Special.PublishDate,"${this.dateFormat}")}`
        }
        str += '</td></tr>\n'
        str += '    </z:list>\n'
        str += '  </cms:special>\n'
        str += '</table>'
      }
      return str
    },
    async init() {
      let catalogTreeResp = await axios.get('/ui/catalog')
      this.catalogTree = catalogTreeResp.data.data
    }
  },
  watch: {
  },
  async created() {
  },
  mounted() {

  },
  components: {
    'tree-select': TreeSelect
  }
}
</script>
<style scoped>
#catalog-option {
  width: 300px;
  height: 300px;
  background-color: white;
}

.catalog-tree {
  color: black;
}
</style>
