<!--<template>-->
<!--  <div v-if="type == 'image'">-->
<!--    <ul v-for="(item,index) in value" :key="index" class="el-upload-list el-upload-list&#45;&#45;picture-card">-->
<!--      <li tabindex="0" class="el-upload-list__item is-ready" :style="'width: '+width+'px;height: '+height+'px'">-->
<!--        <div>-->
<!--          <img :src="item" alt="" class="el-upload-list__item-thumbnail">-->
<!--          <span class="el-upload-list__item-actions">-->
<!--            <span v-if="index != 0" class="el-upload-list__item-preview" @click="moveMaterial(index,'up')">-->
<!--              <i class="el-icon-back" />-->
<!--            </span>-->
<!--            <span class="el-upload-list__item-preview" @click="zoomMaterial(index)">-->
<!--              <i class="el-icon-view" />-->
<!--            </span>-->
<!--            <span class="el-upload-list__item-delete" @click="deleteMaterial(index)">-->
<!--              <i class="el-icon-delete" />-->
<!--            </span>-->
<!--            <span v-if="index != value.length-1" class="el-upload-list__item-preview" @click="moveMaterial(index,'down')">-->
<!--              <i class="el-icon-right" />-->
<!--            </span>-->
<!--          </span>-->
<!--        </div>-->
<!--      </li>-->
<!--    </ul>-->
<!--    <div v-if="num > value.length" tabindex="0" class="el-upload el-upload&#45;&#45;picture-card" :style="'width: '+width+'px;height: '+height+'px;'+'line-height:'+height+'px;'" @click="toSeleteMaterial">-->
<!--      <i class="el-icon-plus" />-->
<!--    </div>-->

<!--    <el-dialog-->
<!--      append-to-body-->
<!--      :visible.sync="dialogVisible"-->
<!--      width="35%"-->
<!--    >-->
<!--      <img :src="url" alt="" style="width: 100%">-->
<!--    </el-dialog>-->

<!--    <el-dialog-->
<!--      title="图片素材库"-->
<!--      append-to-body-->
<!--      :visible.sync="listDialogVisible"-->
<!--      width="70%"-->
<!--    >-->
<!--      <el-container>-->
<!--        <el-aside width="unset">-->
<!--          <div style="margin-bottom: 10px">-->
<!--            <el-button-->
<!--              class="el-icon-plus"-->
<!--              size="small"-->
<!--              @click="materialgroupAdd()"-->
<!--            >-->
<!--              添加分组-->
<!--            </el-button>-->
<!--          </div>-->
<!--          <el-tabs v-model="materialgroupObjId" v-loading="materialgroupLoading" tab-position="left" @tab-click="tabClick">-->
<!--            <el-tab-pane-->
<!--              v-for="(item,index) in materialgroupList"-->
<!--              :key="item.id"-->
<!--              :name="item.id"-->
<!--            >-->
<!--              <span slot="label"> {{ item.name }}</span>-->
<!--            </el-tab-pane>-->
<!--          </el-tabs>-->
<!--        </el-aside>-->
<!--        <el-main>-->
<!--          <el-card>-->
<!--            <div slot="header">-->
<!--              <el-row>-->
<!--                <el-col :span="12">-->
<!--                  <span>{{ materialgroupObj.name }}</span>-->
<!--                  <span v-if="materialgroupObj.id != '-1'">-->
<!--                    <el-button size="small" type="text" class="el-icon-edit" style="margin-left: 10px;" @click="materialgroupEdit(materialgroupObj)">重命名</el-button>-->
<!--                    <el-button size="small" type="text" class="el-icon-delete" style="margin-left: 10px;color: red" @click="materialgroupDelete(materialgroupObj)">删除</el-button>-->
<!--                  </span>-->
<!--                </el-col>-->
<!--                <el-col :span="12" style="text-align: right;">-->
<!--                  <el-upload-->
<!--                    :action="uploadApi"-->
<!--                    :headers="headers"-->
<!--                    :file-list="[]"-->
<!--                    :on-progress="handleProgress"-->
<!--                    :before-upload="beforeUpload"-->
<!--                    :on-success="handleSuccess"-->
<!--                    multiple-->
<!--                  >-->
<!--                    <el-button size="small" type="primary">批量上传</el-button>-->
<!--                  </el-upload>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </div>-->
<!--            <div v-loading="tableLoading">-->
<!--              <el-alert-->
<!--                v-if="tableData.length <= 0"-->
<!--                title="暂无数据"-->
<!--                type="info"-->
<!--                :closable="false"-->
<!--                center-->
<!--                show-icon-->
<!--              />-->
<!--              <el-row :gutter="5">-->
<!--                <el-checkbox-group v-model="urls" :max="num - value.length">-->
<!--                  <el-col v-for="(item,index) in tableData" :key="index" :span="4">-->
<!--                    <el-card :body-style="{ padding: '5px' }">-->
<!--                      <el-image-->
<!--                        style="width: 100%;height: 100px"-->
<!--                        :src="item.url"-->
<!--                        fit="contain"-->
<!--                        :preview-src-list="[item.url]"-->
<!--                        :z-index="999"-->
<!--                      />-->
<!--                      <div>-->
<!--                        <el-checkbox class="material-name" :label="item.url">-->
<!--                          选择-->
<!--                        </el-checkbox>-->
<!--                        <el-row>-->
<!--                          <el-col :span="24" class="col-do">-->
<!--                            <el-button type="text" size="medium" @click="materialDel(item)">删除</el-button>-->
<!--                          </el-col>-->
<!--                        </el-row>-->

<!--                      </div>-->
<!--                    </el-card>-->
<!--                  </el-col>-->
<!--                </el-checkbox-group>-->
<!--              </el-row>-->
<!--              <el-pagination-->
<!--                :current-page.sync="page.currentPage"-->
<!--                :page-sizes="[12, 24]"-->
<!--                :page-size="page.pageSize"-->
<!--                layout="total, sizes, prev, pager, next, jumper"-->
<!--                :total="page.total"-->
<!--                class="pagination"-->
<!--                @size-change="sizeChange"-->
<!--                @current-change="pageChange"-->
<!--              />-->
<!--            </div>-->
<!--          </el-card>-->
<!--        </el-main>-->
<!--      </el-container>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button @click="listDialogVisible = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="sureUrls">确 定</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->
<!--  </div>-->

<!--</template>-->

<!--<script>-->
<!--import { getPage as materialgroupPage, addObj as materialgroupAdd, delObj as materialgroupDel, putObj as materialgroupEdit } from '@/api/tools/materialgroup'-->
<!--import { getPage, addObj, delObj, putObj } from '@/api/tools/material'-->
<!--import { getToken } from '@/utils/auth'-->
<!--import { mapGetters } from 'vuex'-->

<!--export default {-->
<!--  name: 'MaterialList',-->
<!--  props: {-->
<!--    // 素材数据-->
<!--    value: {-->
<!--      type: Array,-->
<!--      default() {-->
<!--        return []-->
<!--      }-->
<!--    },-->
<!--    // 素材类型-->
<!--    type: {-->
<!--      type: String-->
<!--    },-->
<!--    // 素材限制数量，默认5个-->
<!--    num: {-->
<!--      type: Number,-->
<!--      default() {-->
<!--        return 5-->
<!--      }-->
<!--    },-->
<!--    // 宽度-->
<!--    width: {-->
<!--      type: Number,-->
<!--      default() {-->
<!--        return 150-->
<!--      }-->
<!--    },-->
<!--    // 宽度-->
<!--    height: {-->
<!--      type: Number,-->
<!--      default() {-->
<!--        return 150-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      headers: {-->
<!--        Authorization: getToken()-->
<!--      },-->
<!--      dialogVisible: false,-->
<!--      url: '',-->
<!--      listDialogVisible: false,-->
<!--      materialgroupList: [],-->
<!--      materialgroupObjId: '',-->
<!--      materialgroupObj: {},-->
<!--      materialgroupLoading: false,-->
<!--      tableData: [],-->
<!--      resultNumber: 0,-->
<!--      page: {-->
<!--        total: 0, // 总页数-->
<!--        currentPage: 1, // 当前页数-->
<!--        pageSize: 12, // 每页显示多少条-->
<!--        ascs: [], // 升序字段-->
<!--        descs: 'create_time'// 降序字段-->
<!--      },-->
<!--      tableLoading: false,-->
<!--      groupId: null,-->
<!--      urls: []-->
<!--    }-->
<!--  },-->
<!--  computed: {-->
<!--    ...mapGetters([-->
<!--      'uploadApi'-->
<!--    ])-->
<!--  },-->
<!--  methods: {-->
<!--    moveMaterial(index, type) {-->
<!--      if (type == 'up') {-->
<!--        const tempOption = this.value[index - 1]-->
<!--        this.$set(this.value, index - 1, this.value[index])-->
<!--        this.$set(this.value, index, tempOption)-->
<!--      }-->
<!--      if (type == 'down') {-->
<!--        const tempOption = this.value[index + 1]-->
<!--        this.$set(this.value, index + 1, this.value[index])-->
<!--        this.$set(this.value, index, tempOption)-->
<!--      }-->
<!--    },-->
<!--    zoomMaterial(index) {-->
<!--      this.dialogVisible = true-->
<!--      this.url = this.value[index]-->
<!--    },-->
<!--    deleteMaterial(index) {-->
<!--      const that = this-->
<!--      this.$confirm('是否确认删除？', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消',-->
<!--        type: 'warning'-->
<!--      }).then(function() {-->
<!--        that.value.splice(index, 1)-->
<!--        that.urls = []-->
<!--      })-->
<!--    },-->
<!--    toSeleteMaterial() {-->
<!--      this.listDialogVisible = true-->
<!--      if (this.tableData.length <= 0) {-->
<!--        this.materialgroupPage()-->
<!--      }-->
<!--    },-->
<!--    materialgroupPage() {-->
<!--      this.materialgroupLoading = true-->
<!--      materialgroupPage({-->
<!--        total: 0, // 总页数-->
<!--        currentPage: 1, // 当前页数-->
<!--        pageSize: 100, // 每页显示多少条-->
<!--        ascs: [], // 升序字段-->
<!--        descs: 'create_time'// 降序字段-->
<!--      }).then(response => {-->
<!--        this.materialgroupLoading = false-->
<!--        const materialgroupList = response.content-->
<!--        materialgroupList.unshift({-->
<!--          id: '-1',-->
<!--          name: '全部分组'-->
<!--        })-->
<!--        this.materialgroupList = materialgroupList-->
<!--        this.tabClick({-->
<!--          index: 0-->
<!--        })-->
<!--      })-->
<!--    },-->
<!--    materialgroupDelete(materialgroupObj) {-->
<!--      const that = this-->
<!--      this.$confirm('是否确认删除该分组？', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消',-->
<!--        type: 'warning'-->
<!--      }).then(function() {-->
<!--        materialgroupDel(materialgroupObj.id)-->
<!--          .then(function() {-->
<!--            that.$delete(that.materialgroupList, materialgroupObj.index)-->
<!--          })-->
<!--      })-->
<!--    },-->
<!--    materialgroupEdit(materialgroupObj) {-->
<!--      const that = this-->
<!--      this.$prompt('请输入分组名', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消',-->
<!--        inputValue: materialgroupObj.name-->
<!--      }).then(({ value }) => {-->
<!--        materialgroupEdit({-->
<!--          id: materialgroupObj.id,-->
<!--          name: value-->
<!--        }).then(function() {-->
<!--          materialgroupObj.name = value-->
<!--          that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj)-->
<!--        })-->
<!--      }).catch(() => {-->

<!--      })-->
<!--    },-->
<!--    materialgroupAdd() {-->
<!--      const that = this-->
<!--      this.$prompt('请输入分组名', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消'-->
<!--      }).then(({ value }) => {-->
<!--        materialgroupAdd({-->
<!--          name: value-->
<!--        }).then(function() {-->
<!--          that.materialgroupPage()-->
<!--        })-->
<!--      }).catch(() => {-->

<!--      })-->
<!--    },-->
<!--    tabClick(tab, event) {-->
<!--      this.urls = []-->
<!--      const index = Number(tab.index)-->
<!--      const materialgroupObj = this.materialgroupList[index]-->
<!--      materialgroupObj.index = index-->
<!--      this.materialgroupObj = materialgroupObj-->
<!--      this.materialgroupObjId = materialgroupObj.id-->
<!--      this.page.currentPage = 1-->
<!--      this.page.total = 0-->
<!--      if (materialgroupObj.id != '-1') {-->
<!--        this.groupId = materialgroupObj.id-->
<!--      } else {-->
<!--        this.groupId = null-->
<!--      }-->
<!--      this.getPage(this.page)-->
<!--    },-->
<!--    getPage(page, params) {-->
<!--      this.tableLoading = true-->
<!--      getPage(Object.assign({-->
<!--        page: page.currentPage - 1,-->
<!--        size: page.pageSize,-->
<!--        descs: this.page.descs,-->
<!--        ascs: this.page.ascs,-->
<!--        sort: 'create_time,desc'-->
<!--      }, {-->
<!--        groupId: this.groupId-->
<!--      })).then(response => {-->
<!--        const tableData = response.content-->
<!--        this.page.total = response.totalElements-->
<!--        this.page.currentPage = page.currentPage-->
<!--        this.page.pageSize = page.pageSize-->
<!--        this.tableData = tableData-->
<!--        this.tableLoading = false-->
<!--      }).catch(() => {-->
<!--        this.tableLoading = false-->
<!--      })-->
<!--    },-->
<!--    sizeChange(val) {-->
<!--      console.log(val)-->
<!--      this.page.currentPage = 1-->
<!--      this.page.pageSize = val-->
<!--      this.getPage(this.page)-->
<!--    },-->
<!--    pageChange(val) {-->
<!--      console.log(val)-->
<!--      this.page.currentPage = val-->
<!--      // this.page.pageSize = val-->
<!--      this.getPage(this.page)-->
<!--    },-->
<!--    materialRename(item) {-->
<!--      const that = this-->
<!--      this.$prompt('请输入素材名', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消',-->
<!--        inputValue: item.name-->
<!--      }).then(({ value }) => {-->
<!--        putObj({-->
<!--          id: item.id,-->
<!--          name: value-->
<!--        }).then(function() {-->
<!--          that.getPage(that.page)-->
<!--        })-->
<!--      }).catch(() => {-->

<!--      })-->
<!--    },-->
<!--    materialUrl(item) {-->
<!--      const that = this-->
<!--      this.$prompt('素材链接', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消',-->
<!--        inputValue: item.url-->
<!--      }).then(({ value }) => {-->

<!--      }).catch(() => {-->

<!--      })-->
<!--    },-->
<!--    materialDel(item) {-->
<!--      const that = this-->
<!--      this.$confirm('是否确认删除该素材？', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消',-->
<!--        type: 'warning'-->
<!--      }).then(function() {-->
<!--        delObj(item.id)-->
<!--          .then(function() {-->
<!--            that.getPage(that.page)-->
<!--          })-->
<!--      })-->
<!--    },-->
<!--    handleCommand(command) {-->
<!--      const that = this-->
<!--      const s = command.split('-')-->
<!--      putObj({-->
<!--        id: s[0],-->
<!--        groupId: s[1]-->
<!--      }).then(function() {-->
<!--        that.getPage(that.page)-->
<!--      })-->
<!--    },-->
<!--    handleProgress(event, file, fileList) {-->
<!--      console.log(event)-->
<!--      // let uploadProgress = file.percentage.toFixed(0)-->
<!--      // this.uploadProgress = uploadProgress-->
<!--    },-->
<!--    handleSuccess(response, file, fileList) {-->
<!--      const that = this-->
<!--      this.uploadProgress = 0-->
<!--      addObj({-->
<!--        type: '1',-->
<!--        groupId: this.groupId != '-1' ? this.groupId : null,-->
<!--        name: file.name,-->
<!--        url: response.link-->
<!--      }).then(() => {-->
<!--        this.resultNumber++-->
<!--        if (fileList.length === this.resultNumber) {-->
<!--          that.getPage(that.page)-->
<!--          this.resultNumber = 0-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    beforeUpload(file) {-->
<!--      const isPic =-->
<!--        file.type === 'image/jpeg' ||-->
<!--        file.type === 'image/png' ||-->
<!--        file.type === 'image/gif' ||-->
<!--        file.type === 'image/jpg'-->
<!--      const isLt2M = file.size / 1024 / 1024 < 2-->
<!--      if (!isPic) {-->
<!--        this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')-->
<!--        return false-->
<!--      }-->
<!--      if (!isLt2M) {-->
<!--        this.$message.error('上传头像图片大小不能超过 2MB!')-->
<!--      }-->
<!--      return isPic && isLt2M-->
<!--    },-->
<!--    sureUrls() {-->
<!--      this.urls.forEach(item => {-->
<!--        this.$set(this.value, this.value.length, item)-->
<!--      })-->
<!--      this.listDialogVisible = false-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--  /deep/ .el-icon-circle-close{-->
<!--    color: red;-->
<!--  }-->
<!--  .material-name{-->
<!--    padding: 8px 0px;-->
<!--  }-->
<!--  .col-do{-->
<!--    text-align: center;-->
<!--  }-->
<!--  .button-do{-->
<!--    padding: unset!important;-->
<!--    font-size: 12px;-->
<!--  }-->
<!--</style>-->

