<template>
  <div class="container mc-box">
    <fullscreen :fullscreen.sync="fullscreen" class="container-box">
      <div class="titbox">
        <h2>满意度历史</h2>
        <div>
          <i class="el-icon-refresh" @click="iconCli(1)"></i>
          <i class="el-icon-full-screen" @click="iconCli(2)"></i>
          <!--                    <i class="el-icon-folder-opened"></i>-->
          <!--                    <i class="el-icon-view"></i>-->
          <!--                    <i class="el-icon-more"></i>-->
        </div>
      </div>
      <div style="overflow: hidden">
        <div class="search" style="float: left; width: 50%">
          <mySearch
            :searchList="searchList"
            @searchInfo="searchInfo"
          ></mySearch>
        </div>
        <el-upload
          style="float: left; width: 50%; margin-top: 20px"
          class="upload-demo"
          action="http://114.215.71.182:29600/spfm/satisfy/sati/inputMobileSatisfys"
          :headers="headers"
          :before-remove="beforeRemove"
          :before-upload="beforeUploadForm"
          :http-request="fileChange"
          :show-file-list="false"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
      <div class="tabbox">
        <el-table
          height="calc(100% - 40px)"
          v-loading="loading"
          class="com-table"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="time"
            label="序号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="status"
            show-overflow-tooltip
            label="上传人"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="calculate"
            show-overflow-tooltip
            label="上传部门"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="insertt"
            show-overflow-tooltip
            label="上传时间"
          >
          </el-table-column>

          <el-table-column align="center" prop="hotline" label="操作">
            <template slot-scope="scope">
              <!-- <el-button
                size="mini"
                @click="exportExcel(scope.row)"
                plain
                type="success"
              >
                导出
              </el-button> -->
              <el-button
                size="mini"
                @click="detailes(scope.row)"
                plain
                type="success"
              >
                查看
              </el-button>
              <el-button
                size="mini"
                @click="deleteOne(scope.row)"
                plain
                type="danger"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageBox"
          @current-change="currchange"
          layout="prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
      <el-dialog
        title="满意度详情"
        :visible.sync="dialogStatus"
        width="50%"
        :close-on-press-escape="false"
        :show-close="true"
        :fullscreen="true"
        :destroy-on-close="true"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        v-loading="loading"
      >
        <p-table
          v-if="JSON.stringify(dataBody) != '{}'"
          :dataBody="dataBody"
          :isUpdate="false"
        ></p-table>
        <div class="dialog-footer myfooter">
          <el-button
            @click="
              () => {
                dialogStatus = false;
              }
            "
            >关闭</el-button
          >
        </div>
      </el-dialog>
      <myMessage
        :messTit="messTit"
        @closeMessage="closeMessage"
        :centerDialogVisible="centerDialogVisible"
        v-if="centerDialogVisible"
      ></myMessage>
    </fullscreen>
  </div>
</template>
<script>
import mySearch from "../../../components/search";
import pTable from "../../../components/p-table";
import myMessage from "../../../components/myMessage.vue";
export default {
  components: {
    mySearch,
    pTable,
    myMessage
  },
  data() {
    return {
      centerDialogVisible: false,
      messTit: "",
      dataId: "",
      dataBody: {},
      dialogStatus: false,
      headers: {
        agileauthtoken: sessionStorage.agileauthtoken.replace(/"/g, ""),
      },
      json_fields: {
        期数: "time",
        状态: "status",
        导入时间: "insertt",
        计算时间: "calculate",
      },
      fullscreen: false,
      total: 0,
      pageSize: 1,
      tableData: [],
      searchList: [
        {
          type: "input",
          tit: "期数",
          value: "",
          width: "100%",
          options: [],
        },
      ],
      params: {
        time: "",
      },
      loading: false,
      fileList: [],
      fileName: "",
    };
  },
  methods: {
    deleteOne(val) {
      this.centerDialogVisible = true;
      this.messTit = "即将删除当前数据, 是否确定?";
      this.dataId = val.id;
    },
    closeMessage(v) {
      this.centerDialogVisible = false;
      if (v === 1) {
        // this.$http({
        //   url: "/market/kpitemps/delKpiTemp",
        //   method: "post",
        //   headers: {
        //     "Content-Type": "application/json",
        //   },
        //   data: { id: this.dataId },
        // }).then((res) => {
        //   if (res.data.result == "0") {
        //     this.$message({
        //       message: "删除成功",
        //       type: "success",
        //     });
        //   }
        //   this.getList(this.params, this.pageSize);
        // });
      }
    },
    detailes(val) {
      this.dialogStatus = true;
      this.loading = true;
      this.$http({
        url: "/market/kpitemps/load",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { tabCode: "202104070728142117" },
      }).then((res) => {
        if (res.data.result == 0) {
          this.dataBody = res.data.body;
        }
        this.loading = false;
      });
    },
    exportExcel(val) {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require("../vendor/Export2Excel");
        const tHeader = ["期数", "状态", "导入时间", "计算时间"]; // 导出的表头名
        const filterVal = ["time", "status", "insertt", "calculate"]; // 导出的表头字段名
        const list = [val];
        const data = that.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, `手机客户满意度Excel`); // 导出的表格名称，根据需要自己命名
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    beforeUploadForm(file) {
      // 验证文件类型
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "xlsx";
      if (!extension) {
        this.$message({
          message: "上传文件只能是excel格式!",
          duration: 1000,
          showClose: true,
          type: "warning",
        });
      }
      return extension;
    },

    // 提交文件
    fileChange(param, type) {
      let formData = new FormData();
      formData.append("file", param.file);
      this.loading = true;
      this.$http({
        url: "/satisfy/cknowledgeatt/upload",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: formData,
      })
        .then((res) => {
          if (res.data.result == 0) {
            this.$message({
              message: "上传成功",
              type: "success",
            });
          }
          this.loading = false;
          this.getList(this.params, this.pageSize);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    computedScoures(val) {
      this.loading = true;
      this.$http({
        url: "/satisfy/sati/satisfyCalculate",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { time: val.time },
      }).then((res) => {
        this.loading = false;
        if (res.data.result == 0) {
          this.$message({
            message: res.data.desc,
            type: "success",
          });
          this.getList(this.params, this.pageSize);
        }
      });
    },
    //搜索数据
    searchInfo(v) {
      this.params = {};
      v[0] ? (this.params.time = v[0]) : "";
      this.getList(this.params, this.pageSize);
    },
    //获取列表
    getList(v, n) {
      this.loading = true;
      this.pageSize = n;
      this.$http({
        url: "/satisfy/sati/getSatisfyHisAll",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: v,
      }).then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.totalRecord;
      });
    },
    //功能栏
    iconCli(v) {
      if (v === 1) {
        this.getList(this.params, this.pageSize);
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
      }
    },
    // 分页
    currchange(v) {
      this.pageSize = v;
      this.getList(this.params, this.pageSize);
    },
  },
  mounted() {
    this.getList(this.params, this.pageSize);
  },
};
</script>
<style>
.el-upload-list {
  float: right;
}
.el-input__suffix {
  cursor: pointer;
}
.mc-box .el-upload {
  text-align: right;
}
</style>
<style scoped lang="scss">
.btn-default {
  display: inline;
  margin-left: 10px;
}
.titbox {
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}
</style>
