<template>
  <div>
    <el-dialog title="导入站点" :visible.sync="isShow" @open="dialogOpen" class="site-import-dialog">
      <el-form ref="importSiteForm" :model="importSiteForm" :rules="importSiteRules" label-width="160px" label-suffix="：">
          <el-form-item label="上级站点" prop="parentID">
            <tree-select :value.sync="importSiteForm.parentID" :items="sites" placeholder="请选择上级站点" width="80%" clearable></tree-select>
          </el-form-item>
        <el-form-item label="站点名称" prop="siteName">
          <el-input auto-complete="off" v-model="importSiteForm.siteName" @blur="setPath" style="width:80%;"></el-input>
        </el-form-item>
        <el-form-item label="站点目录名" prop="sitePath">
          <el-input auto-complete="off" v-model="importSiteForm.sitePath" style="width:80%;"></el-input>
        </el-form-item>
        <el-form-item label="选择要导入的.zip文件">
          <el-upload ref="upload" action="" :multiple="false" :file-list="tmpFileList" :auto-upload="false" :on-change="selectFileChangeHandler"
            accept=".zip">
            <el-button slot="trigger" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
        <div>
          <font color="red">注：</font>
          <font>请检查文件名称,如果文件名称中包含中文,将会导致文件在UNIX,LINX系统中显示异常.</font>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="infoDialogModal" title="提示" :close-on-click-modal="false" class="import-info-dialog">
      <div class="info">
        正在提交导入请求...
      </div>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import TreeSelect from '@src/components/TreeSelect.vue'
export default {
  components: {
    'tree-select': TreeSelect
  },
  props: {
    show: {
      type: Boolean,
      required: true
    },
    siteID: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      importSiteRules: {
        siteName: [{ required: true, message: '不能为空', trugger: 'blur,change' }],
        sitePath: [
          { required: true, message: '不能为空', trigger: 'blur,change' },
          {
            pattern: /^[-._\w]+$/,
            message: '只允许大小写字母、数字、英文句号、下划线及英文破折线',
            trigger: 'blur,change'
          }
        ]
      },
      importSiteForm: {},
      tmpFileList: [], // 文件待上传列表
      uploadFile: {},
      sites: [],
      infoDialogModal: false
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    async dialogOpen() {
      this.importSiteForm = {
        parentID: 0,
        sitePath: '',
        siteName: ''
      }
      this.tmpFileList = []
      let res = await axios.get('/ui/sites')
      this.sites = res.data.data
    },
    // 根据站点名称设置路径
    setPath() {
      this.importSiteForm.sitePath = window.util.getSpell(
        this.importSiteForm.siteName,
        true
      )
    },
    async confirm() {
      if (this.tmpFileList.length < 1) {
        this.$alert('请先选择你要上传ZIP文件！', '提示', {
          type: 'info'
        })
        return
      }
      Vue.set(this.importSiteForm, 'file', this.uploadFile)
      try {
        await util.validateForm(this.$refs['importSiteForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        return
      }
      if (this.importSiteForm.siteName.length > 100) {
        this.$alert('站点名称长度不能超过100', '提示', {
          type: 'info'
        })
        return
      }
      if (this.importSiteForm.sitePath.length > 100) {
        this.$alert('站点路径长度不能超过100', '提示', {
          type: 'info'
        })
        return
      }
      const formData = new FormData()
      for (let i in this.importSiteForm) {
        formData.append(i, this.importSiteForm[i])
      }
      this.infoDialogModal = true
      this.isShow = false
      let res = await axios.post(
        `/ui/sites/${this.importSiteForm.parentID}/importsite`,
        formData,
        {
          timeout: 6000000000,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
      )
      this.infoDialogModal = false
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.$emit('callback', res.data.taskID)
      }
    },
    // 改变选中文件触发事件
    selectFileChangeHandler(file, files) {
      this.tmpFileList = [JSON.parse(JSON.stringify(files[0]))]
      this.uploadFile = files[0].raw
      if (files.length > 1) {
        this.$message.info('文件总数量限制为1')
      }
    }
  }
}
</script>

<style>
.site-import-dialog .el-dialog {
  width: 550px;
}

@media (max-width: 480px) {
  .site-import-dialog .el-dialog {
    width: 90%;
  }
}
.import-info-dialog .el-dialog {
  width: 400px;
}

@media (max-width: 480px) {
  .import-info-dialog .el-dialog {
    width: 90%;
  }
}
</style>

<style scoped>
.info{
  padding: 10px 10px 30px 10px;
  font-size: 16px;
  text-align: center;
}
</style>
