 <template>
  <div>
    <!-- 选择区块生成路径弹窗  -->
    <el-dialog title="选择区块生成路径" class="blockDocDialog dialog" :visible="isShowModal"  @update:visible="closeHandler">
      <!--工具栏  -->
      <el-toolbar>
        <el-button @click="refreshClickHandler">
          <i class="fa fa-refresh" aria-hidden="true"></i>刷新
        </el-button>
        <el-button @click="returnLastCatalog">
          <i class="fa fa-arrow-up" aria-hidden="true"></i>上级目录
        </el-button>
        <el-button @click="addCatalog">
          <i class="fa fa-folder" aria-hidden="true"></i>新建目录
        </el-button>
        <el-button :disabled="selectedRows.length === 0 || selectedRows.length > 1" @click="renameClickHandler">
          <i class="fa fa-pencil" aria-hidden="true"></i>重命名
        </el-button>
        <el-button @click="versionVisble = true">
          <i class="fa fa-eye" aria-hidden="true"></i>分页浏览
        </el-button>
      </el-toolbar>

      <!-- 搜索框 -->
      <el-form :inline="true" :model="searchForm">
        <el-form-item class="formBox">
          <div class="documentUrl">
            <a href="javascript:;" class="rootUrl">
              <i class="fa fa-folder-open-o" aria-hidden="true"></i>
            </a>
            <a href="javascript:;" class="subUrl" v-for="(path, index) in currentPath" :key="path.name" @click="returnClickHandler(index)">
              <i class="fa fa-caret-down" aria-hidden="true"></i>
              <span v-text="path"></span>
            </a>
          </div>
        </el-form-item>
        <el-form-item label="名称：" class="formNameBox">
          <el-input v-model="searchForm.name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">搜索</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="multipleTable" v-loading="dataLoading" :data="blockUrlData" highlight-current-row tooltip-effect="dark" @row-dblclick="docUrlClickHandler" @selection-change="handleSelectionChange">
        <el-table-column type="index" label="" width="55">
        </el-table-column>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="名称" show-overflow-tooltip>
          <template slot-scope="props">
            <div>
              <i class="fa fa-folder-open-o" aria-hidden="true"></i>
              <span :render-content="renderContent">{{props.row.name}}</span>
              <!-- <div v-for="con in props.row.children" :key="con.children">
                  {{con.name}}
                </div> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="大小" width="80">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="80">
        </el-table-column>
        <el-table-column prop="lastmodifytime" label="最后修改时间" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tempClickHandler">确 定</el-button>
      </div>
    </el-dialog>

    <!--新建目录弹窗  -->
    <el-dialog title="新建目录" class="dialog rename-dialog" :visible.sync="addVisible">
      <el-form :label-position="labelPosition" label-width="120px">
        <el-form-item label="上级目录：">
          <a href="javascript:;" :disabled="disabled === 1 ? true : false" v-for="lastPath in lastCatalog" :key="lastPath.name">
            <span class="line">/</span>
            <span v-text="lastPath"></span>
          </a>
        </el-form-item>
        <el-form-item label="目录名：">
          <el-input v-model="newCatalogName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addDialogHandler">确 定</el-button>
      </div>
    </el-dialog>

    <!--重命名弹窗  -->
    <el-dialog title="重命名" class="dialog rename-dialog" :visible.sync="renameVisible">
      <el-form :label-position="labelPosition" label-width="120px">
        <el-form-item label="上级目录：">
          <el-input v-model="lastCatalog" :disabled="disabled === 1 ? true : false"></el-input>
          <!-- <a href="javascript:;" :disabled="disabled === 1 ? true : false" v-for="(lastPath, index) in lastCatalog" :key="lastPath.name"><span class="line">/</span><span v-text="lastPath"></span></a> -->
        </el-form-item>
        <el-form-item label="目录名：">
          <el-input v-model="catalogName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataLoading: true, // 数据加载
      labelPosition: 'right', // 表单标签右对齐

      // form: {
      //    blockType: '手工选择' //类型
      //    blockTagName: '首页区块' //名称
      //    blockTagCode: 'index_top' //代码
      //    blockWidth: 400 //宽度
      //    blockTagPath: 'include/' //路径
      //    minWeightRange: 0 // 最小权重
      //    maxWeightRange: 100 // 最大权重
      //    recommend: 'draft' // 接受推荐
      //  }
      //  editBlockTagVisble: false // 编辑block标签弹窗
      versionVisble: false, // 版本弹窗
      //  toggleShow: true // 基本信息显示
      //  upDown: false // 基本信息隐藏
      //  blockTagData: [] // block标签内容数据
      // rules: {
      //   name: [
      //      { required: true message: '名称不能为空', trigger: 'blur' },
      //    ]
      //   code: [
      //      { required: true message: '代码不能为空', trigger: 'blur' },
      //    ]
      //   path: [
      //      { required: true message: '生成文件不能为空', trigger: 'blur' },
      //    ]
      //  }
      searchForm: {
        name: '', // 搜索名字
        URL: '' // 文件路径
      },

      // 选择区块生成路径
      blockSelectVisible: true, // 区块生成路径弹窗
      blockUrlData: [], // 选择区块生成路径数据
      selectedRows: [], // 已选择项数组
      docUrl: '', // 区块生成路径文件名路径
      currentPath: ['/'], // 当前文件路径

      // 重命名
      renameVisible: false, // 重命名弹窗
      lastCatalog: '', // 上级目录
      catalogName: '', // 目录名
      disabled: 1, // 重命名禁用上级目录

      // 新建目录
      addVisible: false, // 新建目录弹窗
      newCatalogName: '' // 新建目录名称

      // 添加文档
      //  blockAddDocVisible: false // 添加文档弹窗
      //  docTitle: '内容' // 添加文档标题
      //  docAddress: '' // 添加文档地址
      //  docAbstract: '' // 添加文档摘要
      //  docDate: '' // 添加文档日期
      //  docImageUrl: '' // 添加文件图片
      //  titleColor: '#333' // 颜色选择器
      //  blockUploadImgVisible: false // 上传图片弹窗
      // 日期快捷键
      // pickerOptions: {
      //   shortcuts: [{
      //      text: '今天'
      //     onClick(picker) {
      //        picker.$emit('pick' new Date());
      //     }
      //    } {
      //      text: '昨天'
      //     onClick(picker) {
      //       const date = new Date();
      //       date.setTime(date.getTime() - 3600 * 1000 * 24);
      //        picker.$emit('pick' date);
      //     }
      //    } {
      //      text: '一周前'
      //     onClick(picker) {
      //       const date = new Date();
      //       date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      //        picker.$emit('pick' date);
      //     }
      //   }]
      //  }
    }
  },
  methods: {
    // 生成路径确定按钮
    tempClickHandler(val) {
      this.form.blockTagPath = this.currentPath.concat(this.docUrl)
      this.blockSelectVisible = false // 隐藏选择区块生成路径弹窗
    },
    // 重命名
    async renameClickHandler() {
      try {
        await this.$confirm('重命名可能会影响到网站页面显示, 确定要重命名吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      this.renameVisible = true
      this.lastCatalog = this.currentPath
      this.catalogName = this.docUrl
    },

    // 双击进入子目录
    docUrlClickHandler(row, event) {
      this.currentPath.push(row.name)
      this.blockPathTableData()
    },

    // 跳转至指定路径
    returnClickHandler(index) {
      this.currentPath = this.currentPath.slice(0, index + 1)
      this.blockPathTableData()
    },

    // 返回上级目录
    returnLastCatalog() {
      this.currentPath.pop()
      this.blockPathTableData()
    },

    // 刷新
    refreshClickHandler() {
      this.blockPathTableData()
    },

    // 新建目录
    addCatalog() {
      this.addVisible = true
    },

    // 新建目录确定按钮
    addDialogHandler(val) {
      this.addVisible = false
    },

    // 生成路径选中文件
    handleSelectionChange(val) {
      this.selectedRows = val

      let size = val.length
      if (size === 1) {
        this.docUrl = val[0].name
      }
      if (size > 1) {
        this.$refs.multipleTable.clearSelection()
        this.$refs.multipleTable.toggleRowSelection(val[size - 1])
        this.docUrl = val[size - 1].name
      }
    },

    // 拖拽表格
    // 取消默认行为
    allowDrop(e) {
      e.preventDefault()
    },
    // 开始拖动
    dragStart(e, index) {
      let tar = e.target
      e.dataTransfer.setData('Text', index)
      // console.log(index)
      if (tar.tagName.toLowerCase() === 'tr') {
      }
    },
    // 放置
    drop(e, index) {
      this.allowDrop(e)
      // 使用一个新数组重新排序后赋给原变量
      let arr = this.blockTagData.concat([])

      let dragIndex = e.dataTransfer.getData('Text')

      let temp = arr.splice(dragIndex, 1)
      arr.splice(index, 0, temp[0])
      // console.log('sort');
      this.blockTagData = arr
    },

    // 基本信息显示
    toggleInfo() {
      this.toggleShow = !this.toggleShow
      this.upDown = !this.upDown
    },
    handleEdit(index, rows) {
      alert('Qwe')
    },
    // 选择文档
    docSelect() {},
    inputTextHandler(val) {
    // console.log(val)
    },
    headleChangeColor(titleColor) {
    // console.log(titleColor)
      return titleColor
    },
    // 上传图片
    uploadImg() {
      this.blockUploadImgVisible = true
    },

    // 添加文档图片上传
    handleAvatarSuccess(res, file) {
      this.docImageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    // 添加文档
    addDocument() {
      this.blockAddDocVisible = true
    },

    // 添加行数据
    addRow(index, rows) {
      rows.push({})
    },

    // 删除行数据
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },

    // 发布
    publishClickHandler() {
      this.update()
    },
    // 保存
    saveClickHandler() {
      this.update()
    },

    // 关闭弹窗
    closeHandler(val) {
      this.$emit('close', val)
    },

    // 编辑block标签确认按钮
    confirmClickHandler() {
      this.isShowModal = false // 隐藏弹窗
      this.update()
    },

    // 初始化批量添加内容表格数据
    async blockTableData() {
      // let res = await axios.get(`/ui/blocktag`)
      // this.blockTagData = res.data.data;
      // this.dataLoading = false;
    },
    // 初始化批量添加生成路径表格数据
    async blockPathTableData() {
      //  let res = axios.get(`/ui/blockurl` { params:{SearchFormName: this.condition} })
      // this.blockUrlData = res.data.data
      // this.dataLoading = false
    },

    // 数据更新
    update() {
      // let ids = [];
      // this.selectedRows.forEach(function (row) {
      //   ids.push(row.id);
      // });
      // let res = await axios.put(`/ui/templates/${ids.join()}`)
      // console.log(res)
      this.$notify({
        title: '成功',
        message: `操作成功`,
        type: 'success',
        duration: 2000
      })
    }
  },
  props: {
    isShowModal: {
      type: Boolean,
      required: true
    }
  },
  created() {
    this.blockTableData()
    this.blockPathTableData()
  }
}
</script>

<style>
/* 选择区块生成路径 */

/* 搜索框 */

.blockDocDialog .el-dialog__body {
  padding: 0;
}

.blockDocDialog .el-form--inline {
  margin: 10px;
  text-align: left;
}

.blockDocDialog .el-form-item {
  margin-bottom: 0;
}

.blockDocDialog .el-form--inline .el-form-item__content {
  width: 100%;
}

.blockDocDialog .formBox {
  padding: 0 10px;
  border-radius: 4px;
  width: 60%;
  border: 1px solid #bfcbd9;
}

.blockDocDialog .formBox:hover {
  border: 1px solid #8391a5;
}

.blockDocDialog .formBox a {
  color: #495060;
}

.blockDocDialog .formBox .subUrl {
  padding: 0 5px;
}

.blockDocDialog .formBox .subUrl:first-child {
  padding: 0;
}

.rootUrl i {
  padding: 0;
}

.blockDocDialog .formNameBox {
  width: 25%;
}

.blockDocDialog .formNameBox .el-form-item__content {
  width: 65%;
}

/* 重命名 */

.rename-dialog .el-dialog .line {
  padding: 0 5px;
}

/* block标签 */

.block-dialog .el-form--inline {
  text-align: left;
}

.block-dialog .dialog-footer {
  float: right;
  margin: 20px 0;
}

.base-info-box,
.con-table-box {
  margin-left: -20px;
  margin-right: -20px;
}

.base-info {
  margin-bottom: 10px;
  padding: 0 20px;
  height: 50px;
  line-height: 50px;
  background: #eef1f6;
}

.block-dialog i {
  cursor: pointer;
}

.table-con {
  margin-top: 20px;
  width: 100%;
}

.table-con {
  overflow: auto;
}

.title-box {
  min-width: 100px;
  overflow: auto;
}

.con-form {
  text-align: left;
  white-space: nowrap;
}

.con {
  margin: 5px;
  padding: 0 40px 0 10px;
  position: relative;
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #eee;
  line-height: 20px;
}

/* icon */

.circle {
  padding-left: 4px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #eee;
  background: transparent;
  line-height: 19px;
}

.icon-box {
  position: absolute;
  right: 0;
}

.row-item .fa {
  display: none;
}

.row-item:hover .icon-add,
.row-item:hover .icon-plus {
  display: inline-block;
}

.con-item:hover .icon-edit,
.con-item:hover .icon-remove {
  display: inline-block;
}

.icon-l-add {
  float: left;
  line-height: 35px;
}

.icon-add {
  position: absolute;
  right: -15px;
  top: -5px;
  color: #637283;
}

.icon-edit {
  color: #637283;
}

.icon-remove {
  color: #d6a87b;
}

.icon-plus {
  color: #9facad;
}

.icon-minus {
  color: #ff6966;
}

/* 图片上传 */

.icon-img {
  color: #ccc;
}

.icon-crop {
  color: #637283;
}
</style>
