<template>
  <div class="content-box">
    <div class="container">
      <p>导出设置</p>
      <!-- <div class="test-div">
        <i class="el-icon-edit"></i>
        <i class="el-icon-share"></i>
        <i class="el-icon-delete"></i>
      </div> -->
      <el-form label-position="left" label-width="180px">
        <el-form-item label="文件格式：">
          <el-select v-model="value" placeholder="请选择导出文件格式">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="文件保存位置：">
          <input type="file" id="file" hidden @change="fileChange" webkitdirectory>
          <el-input placeholder="请输入内容" v-model="imgSavePath" class="input-with-select">
            <el-button slot="append" icon="el-icon-folder" type="success" @click="btnChange"></el-button>
          </el-input>
        </el-form-item>
      </el-form>

      <el-button class="el-icon-download" type="primary">导出</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: 'zip',
          label: 'zip'
        }, {
          value: '7z',
          label: '7z'
        }
      ],
      value: 'zip',
      imgSavePath: '',
    }
  },
  methods: {
    fileChange(e) {
      try {
        const fu = document.getElementById('file')
        if (fu == null) return
        this.imgSavePath = fu.files[0].path
        console.log(fu.files)
      } catch (error) {
        console.debug('choice file err:', error)
      }
    },
    btnChange() {
      var file = document.getElementById('file')
      file.click()
    }
  }
}
</script>

<style>
.test-div i {
  font-size: 25px;
}
</style>