<template>
  <div>
    <!--编辑include标签弹窗  -->
    <el-dialog title="编辑标签<cms:include>" class="inlineDialog dialog" :visible="isShowModal" @update:visible="closeHandler">
      <el-form :model="form" class="edit-tag-dialog" inline>
        <el-form-item label="文件名：">
          <el-input v-model="form.currentPath"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="select-document" @click="browseTemplatesVisible = true">选择..</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmClickHandler">确 定</el-button>
      </div>
    </el-dialog>

    <!--浏览模板弹窗  -->
    <el-dialog title="浏览模板" size="large" class="inlineDialog dialog" :visible.sync="browseTemplatesVisible">
      <el-table ref="multipleTable" v-loading="dataLoading" :data="templatesData" highlight-current-row tooltip-effect="dark" style="width: 100%" @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="documenturl" label="文件" show-overflow-tooltip>
          <template slot-scope="scope">
            <p @dblclick="docClickHandler">
              <i class="fa fa-file-code-o" aria-hidden="true"></i>
              {{scope.row.documenturl}}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="大小" width="70">
        </el-table-column>
        <el-table-column prop="name" label="名称" show-overflow-tooltip>
        </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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataLoading: true, // 数据加载
      browseTemplatesVisible: false, // 浏览模板弹窗
      templatesData: [], // 浏览模板数据
      selectedRows: [], // 选中行

      form: {
        // <cms:include>
        currentPath: 'template/header.template.html', // 文件名路径
        docUrl: '' // 浏览模板文件名路径
      }
    }
  },
  props: {
    'isShowModal': {
      type: Boolean,
      required: true
    }
  },
  methods: {
    // 关闭弹窗
    closeHandler(val) {
      this.$emit('close', val)
    },
    // 单选框，获取文件路径
    handleSelectionChange(val) {
      let size = val.length
      if (size === 1) {
        this.form.docUrl = val[0].documenturl
      }
      if (size > 1) {
        this.$refs.multipleTable.clearSelection()
        this.$refs.multipleTable.toggleRowSelection(val[size - 1])
        this.form.docUrl = val[size - 1].documenturl
      }
    },

    // 双击进入模板编辑器页面
    docClickHandler() {
      this.$router.push({path: '/settings/template'})
    },

    // 浏览模板确定按钮
    tempClickHandler(val) {
      this.form.currentPath = this.form.docUrl
      this.browseTemplatesVisible = false // 隐藏浏览模板弹窗
    },

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

    // 初始化批量添加include标签弹出框数据
    async includeTableData() {
      let res = await axios.get('/ui/templates', {params: {}})
      this.templatesData = res.data.data
      this.dataLoading = false
    },

    // 数据更新
    async update() {
      let ids = []
      this.selectedRows.forEach(function (row) {
        ids.push(row.id)
      })
      let res = await axios.put(`/ui/templates/${ids.join()}`)
      this.$notify({
        title: '成功',
        message: res.data.message,
        type: 'success',
        duration: 2000
      })
    }
  },
  created() {
    this.includeTableData()
  }
}
</script>

<style>

</style>
