<template>
  <el-dialog
    :visible.sync="dialogVisible"
    @close="open"
    title="添加"
    width="600px"
    :before-close="cancelConfirm"
    v-if="dialogVisible"
    destroy-on-close
    top='8vh'
  >
    <el-form
      ref="form"
      :model="form"
      label-width="150px"
    >
      <ht-form-item
        label="选择项目"
        ref="project"
        class="rulesStyle"
      >
        <project-info-selector
          v-model="form.projectId"
          style="width:260px"
          @select="select"
        ></project-info-selector>
      </ht-form-item>
      <ht-form-item label="选择文件">
        <el-button
          type="primary"
          @click="handleAddFile"
        >打开文件</el-button>
        <span style='color: red; font-size:18px;margin-left:20px'>上传经济资料相关文件</span>
      </ht-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="cancelConfirm">取 消</el-button>
      <el-button
        type="primary"
        @click="submitImport"
        element-loading-text="拼命导入中"
        v-loading.fullscreen.lock="fullscreenLoading"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import req from '@/request.js'
import {time} from 'echarts'
export default {
  name: 'economicData',
  data() {
    return {
      disabled: false,
      form: {},
      importDataParams: {},
      dialogVisible: false,
      fullscreenLoading: false
    }
  },
  mounted() {
    // 文件选择后的回调
    this.$bus.$on('fileAdded', () => {
      console.log('文件已选择')
    })
    // 文件上传成功的回调
    this.$bus.$on('fileSuccess', file => {
      this.form = {...this.form, ...file}
    })
  },
  methods: {
    select(val, obj) {
      this.form.projectId = obj.id
      this.form.projectName = obj.projectName
    },
    //打开文件窗口
    handleAddFile() {
      this.$bus.$emit('openUploader')
    },
    //确定保存
    submitImport() {
      if (this.form.projectId == '') {
        this.$message.warning('请选择一条项目')
      } else if (this.form.projectId == '' && !this.form.name) {
        this.$message.warning('请选择一条项目')
      } else if (!this.form.name) {
        this.$message.warning('请至少选择一个文件')
      } else {
        let params = [
          {
            sourceId: 'economicData',
            ...this.form,
            group: 'economicData'
          }
        ]
        this.$http
          .post('${cqxy}/biz/universal/accessory/v1/save', params)
          .then(res => {
            if (res.data.state) {
              this.$message.success(res.data.message)
              this.dialogVisible = false
              this.$parent.$parent.load()
            } else {
              this.$message.error(res.data.message)
            }
          })
      }
    },
    //打开
    open(data) {
      this.dialogVisible = true
      if (data) {
        this.form = {
          projectId: data.id,
          projectName: data.projectName
        }
      } else {
        this.form = {
          projectId: '',
          projectName: ''
        }
      }
    },
    //关闭或取消
    cancelConfirm() {
      this.dialogVisible = false
    }
  },
  destroyed() {
    this.$bus.$off('fileAdded')
    this.$bus.$off('fileSuccess')
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.download-btn {
  color: #fff;
  background-color: $--color-primary;
  border-color: $--color-primary;
  padding: 10px 15px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}
.export {
  margin-right: 10px;
}
.rulesStyle /deep/ .el-form-item__label::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>
