<template>
  <div>
    <!-- 上传 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="80%"
    >
      <div class="boxDiv">
        <div :style="`color:${WordColor}`">
          事务名称:{{ thsSupervise.name }}　　　　 创建时间:{{
            thsSupervise.createTime
          }}
        </div>
        <div>
          <el-button
            type="primary"
            @click="
              showBatchUpload = true;
              limit = 999;
            "
            size="mini"
            icon="el-icon-upload2"
            >批量上传</el-button
          >
        </div>
      </div>
      <el-table
        stripe
        :data="tableList"
        header-cell-class-name="table_header"
        height="25rem"
        style="width: 100%"
        class="mt10"
        border
      >
        <template v-for="(item, index) in warningList">
          <el-table-column
            :prop="item.prop"
            show-overflow-tooltip
            :label="item.label"
            :min-width="item.width"
            :key="index"
          >
          </el-table-column>
        </template>
        <el-table-column label="文件" show-overflow-tooltip min-width="180">
          <template slot-scope="scope">
            <a
              class="formatterButton"
              :href="
                title == '反馈单上传'
                  ? scope.row.feedback
                  : title == '报告上传'
                  ? scope.row.testReport
                  : title == '通知反馈单上传'
                  ? scope.row.reviseFeedback
                  : ''
              "
              >{{
                title == "反馈单上传"
                  ? scope.row.feedback
                  : title == "报告上传"
                  ? scope.row.testReport
                  : title == "通知反馈单上传"
                  ? scope.row.reviseFeedback
                  : ""
              }}</a
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="130">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="
                showBatchUpload = true;
                limit = 1;
                id = scope.row.id;
              "
              type="primary"
              icon="el-icon-top"
              >上传</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        background
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[20, 30, 40, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="mt10"
      >
      </el-pagination> -->
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </span> -->
      <!-- 批量上传 -->
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="上传"
      :visible.sync="showBatchUpload"
      width="30%"
      :before-close="handleCloseP"
    >
      <el-upload
        multiple
        action="#"
        :http-request="TerminalUpload"
        :limit="limit"
        accept="doc"
        :before-remove="beforeRemove"
        :on-error="handleUploadError"
        :file-list="fileList"
        :headers="headers"
        :on-exceed="handleExceed"
        class="upload-file-uploader"
        ref="upload"
      >
        <el-button type="primary" icon="el-icon-upload2">选择文件</el-button>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseP">取 消</el-button>
        <el-button type="primary" @click="BatchUpload">上 传</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  superviseDetail,
  uploadSuperviseTicket,
} from "@/api/Processsupervision/technology.js";
export default {
  components: {},
  props: {
    title: {
      type: String,
    },
    rowList: {
      type: [Array, Object],
    },
  },
  data() {
    return {
      limit: 1,
      id: "",
      headers: {
        Authorization: window.sessionStorage.getItem("cntoken"),
      }, // 设置上传的请求头部
      showBatchUpload: false,
      WordColor: JSON.parse(window.localStorage.echartsColor).WordColor,
      dialogVisible: true,
      pageNum: 1,
      pageSize: 20,
      total: 1,
      tableList: [],
      warningList: [
        { prop: "companyName", label: "供电公司", width: 100 },
        { prop: "name", label: "变电站", width: 100 },
        { prop: "lineIndexName", label: "监测点", width: 100 },
        { prop: "description", label: "描述", width: 200 },
         { prop: "feedback", label: "文件名", width: 200 },
      ],
      thsSupervise: {},
      fileList: [],
    };
  },
  created() {},
  mounted() {
    this.onSubmit();
  },
  methods: {
    onSubmit() {
      superviseDetail({ supIndex: this.rowList.supIndex }).then((res) => {
        this.tableList = res.data.overRunLog;
        this.thsSupervise = res.data.thsSupervise;
      });
    },
    handleClose() {
      this.$emit("handleClose");
    },
    handleSizeChange(e) {
      this.pageSize = e;
    },
    handleCurrentChange(e) {
      this.pageNum = e;
    },
    // 批量上传
    BatchUpload() {
      this.$message("上传中...");
      let form = new FormData();
      form.append("supIndex", this.rowList.supIndex);
      form.append(
        "ticketType",
        this.title == "反馈单上传"
          ? "1"
          : this.title == "报告上传"
          ? "2"
          : this.title == "整改通知反馈单上传"
          ? "4"
          : ""
      );
      if (this.limit == 1) {
        form.append("id", this.id);
      }
      this.fileList.forEach((item) => {
        form.append("files", item);
      });
      uploadSuperviseTicket(form)
        .then((res) => {
          if (res.type == "application/json") {
            this.$message({
              message: "上传成功!",
              type: "success",
            });
            this.handleCloseP();
            this.onSubmit();
          } else {
            this.$message({
              message: "上传失败!",
              type: "error",
            });
          }
        })
        .catch((response) => {
          // console.log(response);
        });
    },
    // 批量上传报告
    TerminalUpload(params) {
      this.fileList.push(params.file);

      // form.append("files", params.file);
    },
    beforeRemove(file, fileList) {
      this.fileList = fileList;
    },
    // 上传失败
    handleUploadError(err) {
      this.$message.error(err);
    },

    // 关闭上传弹框
    handleCloseP() {
      this.fileList = [];
      this.showBatchUpload = false;
    },
    handleExceed(files, fileList) {
      this.$message.warning("不是批量上传只能上传1个文件!");
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../../../styles/comStyle.less");
.boxDiv {
  display: flex;
  justify-content: space-between;
  line-height: 1.75rem;
}
.formatterButton {
  color: #0cf;
  text-decoration: underline;
}
</style>
