<template>
          <el-form label-width="160px" style="margin-top:140px;">
          <el-form-item label="属性选项：">
            图片标题
            <el-input v-model="imageName" style="width:50%" disabled></el-input><br/>
            <el-checkbox v-model="imageCharWidth">图片名称字数</el-checkbox>
            <el-input v-model="charWidth" style="width:50%" :disabled="!imageCharWidth"></el-input><br/>
            <el-checkbox v-model="imageAddUser">添加用户</el-checkbox>
            <el-input v-model="addUser" style="width:50%" :disabled="!imageAddUser"></el-input><br/>
          </el-form-item>
        </el-form>
</template>
<script>
/* eslint-disable no-template-curly-in-string */
export default {
  data() {
    return {
      imageName: '${Image.Name}',
      charWidth: 5,
      imageCharWidth: false,
      imageAddUser: false,
      addUser: '${Image.AddUser}'
    }
  },
  methods: {
    getCode() {
      let str = '<cms:image>\n'
      str += '  <ul>\n'
      str += '    <z:list>\n'
      str += '      <li><a href="${Image.Link}"><img src="${Prefix}${Image.ImagePath}"onerror="this.src=' + "'assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';" + '" /></a>'
      if (this.imageCharWidth) {
        str += '$' + `{charWidth(Image.Name, '${this.charWidth}',"...")}`
      }
      if (this.imageAddUser) {
        str += `--<z:lang id="Contentcore.Template.AddUser">添加用户</z:lang>: ${this.addUser}`
      }
      str += '</li>\n'
      str += '    </z:list>\n'
      str += '  </ul>\n'
      str += '</cms:image>'
      return str
    },
    init() {

    }
  },
  computed: {
  },
  async created() {
  }
}
</script>
