<template>
  <div>
    <div v-if="typeHead == 'inputNumber'" class="text-xs-center">
      <el-input
        ref="inpNum"
        v-model="inputText"
        oninput="value=value.replace(/[^\d]/g, '')"
        :disabled="couldNotEdit || name == ''"
        size="small"
        @input="changeValue"
        class="table_in_input"
      ></el-input>
    </div>
    <div
      v-else-if="typeHead == 'input' || type == '' || (typeHead == 'upload' && type == 'text')"
      class="text-xs-center"
    >
      <el-input
        ref="inp"
        v-model="inputText"
        :disabled="couldNotEdit || name == ''"
        size="small"
        @input="changeValue"
        class="table_in_input"
      ></el-input>
    </div>
    <div v-else-if="typeHead == 'upload' && type == 'file'" class="table_upload">
      <el-input
        ref="inpUp"
        v-model="inputTextUp"
        size="small"
        :disabled="true"
        clearable
        class="table_in_input"
      >
        <el-upload
          slot="append"
          action="/apaas/static/image/upload"
          :file-list="fileArray"
          :limit="1"
          :multiple="false"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :on-error="handleError"
          :before-upload="beforeUpload"
          :data="anotherData"
          :disabled="couldNotEdit"
        >
          <el-button size="small" type="primary">上传文件</el-button>
        </el-upload>
      </el-input>
    </div>
  </div>
</template>

<script>
import helper from "@/services/helper";
export default {
  props: {
    item: {
      type: String,
      default: ""
    },
    header: {
      type: String,
      default: ""
    },
    id: {
      type: [String, Number],
      default: ""
    },
    name: {
      type: String
    },
    rowId: {
      type: Number,
      default: 0
    },
    couldNotEdit: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ""
    },
    typeHead: {
      type: String,
      default: ""
    }
  },
  data: () => ({
    inputText: "",
    fileArray: [],
    anotherData: {
      directory: "file"
    },
    inputTextUp: ""
  }),
  mounted() {
    this.inputText = this.item;
  },
  methods: {
    // input
    changeValue() {
      this.$emit("changeInputValue", {
        rowId: this.rowId,
        header: this.header,
        inputValue: this.inputText,
        id: this.id
      });
    },
    // upload
    beforeUpload(file) {},
    handleSuccess(response, file, fileList) {
      if (response.success == 1) {
        this.fileArray.push({
          url: response.data,
          name: response.data
        });
        this.inputTextUp = file.name;
        this.$emit("changeUpFile", {
          rowId: this.rowId,
          header: this.header,
          inputValue: this.inputTextUp,
          id: this.id,
          fileUrl: response.data
        });
      } else {
        this.$message.error("上传文件失败，请重试");
      }
    },
    handleError(err, file, fileList) {
      this.$message.error("上传文件失败，请重试");
    },
    handleRemove(file, fileList) {}
  }
};
</script>
<style scoped>
.text-xs-center {
  height: 32px;
}
.table_upload {
  height: 32px;
}
.table_in_input {
  text-align: center;
  font-size: 14px;
}
</style>
<style>
.text-xs-center input {
  width: 100%;
  background-color: #f7f8f9;
  border-radius: 4px;
}
.text-xs-center .el-input.is-disabled .el-input__inner {
  color: #70747c;
}
.table_upload input {
  width: 100%;
  background-color: #f7f8f9;
  border-radius: 4px;
}
.table_upload .el-input.is-disabled .el-input__inner {
  color: #70747c;
}
.table_upload .el-button {
  background-color: #0f2683 !important;
  color: #ffffff !important;
  border-radius: 0 4px 4px 0;
}
.table_upload .el-input-group__append ul {
  display: none;
}
</style>