<template>
  <div style="height: 100%; padding: 0 150px">
    <p class="flow-description">{{ description }}</p>
    <el-descriptions class="margin-top" :column="1">
      <el-descriptions-item label="导入备注" label-class-name="userPro-label" content-class-name="userPro-content">
        {{ list.name }}
      </el-descriptions-item>
      <el-descriptions-item label="清空原有数据" label-class-name="userPro-label" content-class-name="userPro-content">
        <el-tooltip :content="list.truncate ? '是' : '否'" placement="top">
          <el-switch v-model="list.truncate" disabled></el-switch>
        </el-tooltip>
      </el-descriptions-item>
      <el-descriptions-item label="导入附件" label-class-name="userPro-label" content-class-name="userPro-content">
        <p class="flow-file">
          <span @click="downFile()"> <i class="el-icon-document"></i>{{ list.file }} </span>
        </p>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: 'dynamicFile',
  data() {
    return {
      description: '',
      refreshTable: false,
      listLoading: false,
      list: {},
      columnList: [],
      dataForm: {
        id: '',
        data: '',
        flowId: ''
      }
    }
  },
  methods: {
    init(data) {
      console.log(data)
      this.description = data.description
      this.setting = data
      this.dataForm.id = data.id || ''
      this.listLoading = true
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.dataForm = { data: data.formDataJson, id: data.id, flowId: data.flowId }
          if (!this.dataForm.data) return
          this.list = JSON.parse(this.dataForm.data)
          this.$nextTick(() => {
            this.listLoading = false
            this.refreshTable = false
            this.$emit('setPageLoad')
          })
        } else {
          this.$nextTick(() => {
            this.listLoading = false
            this.refreshTable = false
            this.$emit('setPageLoad')
          })
        }
      })
    },
    downFile() {
      // let url = document.location.origin + this.list.file
      window.open(this.define.comUrl + '/' + this.list.file)
    },
    dataFormSubmit(eventType) {
      this.eventType = eventType
      this.dataForm.data = JSON.stringify(this.list)
      this.$emit('eventReciver', this.dataForm, this.eventType)
    }
  }
}
</script>

<style lang="scss" scoped>
.flow-description {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 20px;
}
.tagUserPro {
  font-size: 14px;
  .el-tag {
    margin: 5px;
  }
}
::v-deep .el-tag.el-tag--success {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}
::v-deep .userPro-label {
  font-size: 14px;
  width: 90px;
  padding: 5px 0;
}
::v-deep .userPro-content {
  font-size: 14px;
  padding: 5px 0;
}
.flow-file {
  width: 100%;
  font-size: 22px;
  position: relative;
  box-sizing: border-box;
  span {
    & > i {
      margin-right: 10px;
    }
  }
  span:hover {
    color: #00afff;
    text-decoration: revert;
    cursor: pointer;
  }
}
</style>
