<template>
  <fullscreen :fullscreen.sync="fullscreen" class="container">
    <div class="container-box">
      <toolList @iconCli="iconCli" :tooltit="tooltit"></toolList>
      <div class="search">
        <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
        <div>
            <el-button class="btn-check"  size="medium" type="primary"  @click="outlist">导出
            </el-button>
            <myUpload style="display:inline-block;" :fileInfo="fileInfo" @onSuccess="onSuccess"
                      :fileList="fileInfo.fileList"></myUpload>
        </div>
        </div>
        <div class="tabbox">
        <el-table
            height="calc(100% - 40px)" class="com-table" ref="multipleTable" :data="tableData"
            tooltip-effect="dark" size="small" border style="width: 100%" v-loading="loading" :key= Math.random()
        >
          <el-table-column width="150" v-for="item in tableHead"  :prop=item.prop :label=item.label>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageBox"
          @current-change="currchange"
          layout="prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </fullscreen>
</template>
<script>
import mySearch from "../../../components/search.vue";
import toolList from "../../../components/toolList.vue";
import myUpload from '../../../components/upload';


export default {
  components: {
      mySearch,
      toolList,
      myUpload
  },
  data() {
    return {
        // tableHead: [{prop: 'demandNo', label: '需求编号'},{prop: 'groupName', label: '提出部门'}],
        fileInfo: {
            type: 'btn',
            typename: '导入',
            btntype: 'primary',
            limit: 1,
            url: '/market/mkOnlineChannel/importLedgerList',
            fileList: [],
            typexz:"xlsx"
        },
        loading:false,
        tableHead:[],
        searchList: [
            // {
            //   type: "input",
        //   tit: "需求名称",
        //   value: "",
        //   width: "23%",
        // },
        // {
        //   type: "input",
        //   tit: "部门或地市",
        //   value: "",
        //   width: "23%",
        // },
        {
          type: "date",
          tit: "开始时间",
          value: "",
          width: "46%",
        },
        {
          type: "date",
          tit: "结束时间",
          value: "",
          width: "46%",
        },
      ],
      tooltit: "线上业务需求台账",
      fullscreen: false,
      total: 0,
      page: 1,
      pageSize: 10,
      tableData: [],
      dialogStatus: false,
      disableStatus: false,
      titname: "终端",
      infolist: {},
      typeOptions: [
        {
          dataCode: 1,
          dataName: 111,
        },
      ],
      userInfo: {},
      params: {},
      infoApply: [],
    };
  },
  methods: {
      headerStyleFun({rowIndex}){
          if (rowIndex === 0){
              return "font-size:14px;font-weight:bold;color:black;"
          }
      },
      onSuccess(file){
          this.searchInfo([this.searchList[0].value], 1);
      },
    //搜索数据
    searchInfo(v) {
      this.params = {};
      // v[0] ? (this.params.demandName = v[0]) : "";
      // v[1] ? (this.params.deptOrCity = v[1]) : "";
      v[0]
        ? (this.params.startTime = this.$formatDate(v[0], "YYYY-MM-DD"))
        : "";
      v[1] ? (this.params.endTime = this.$formatDate(v[1], "YYYY-MM-DD")) : "";
        if ((new Date(this.params.startTime)).getTime() > (new Date(this.params.endTime)).getTime()){
            this.$message.error(
                "开始时间不能大于结束时间"
            );
            return
        }
        this.getTableHeadlist();
        this.handleInit();
    },
    // 初始化列表
    handleInit() {
        this.loading=true;
        this.$http({
        url: "/market/mkOnlineChannel/ledgerList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          ...this.params,
          page: this.page,
          pageSize: this.pageSize,
        },
      }).then(
        ({
          data: {
            body: { data, count },
          },
        }) => {
            this.loading = false;
            this.total = count;
            this.tableData = data;
            this.total = count;
        }
      );
    },
      //获取表头数据
      getTableHeadlist() {
          this.$http({
              url: "/market/mkOnlineChannel/getTableHeadlist",
              method: "post",
              headers: {
                  "Content-Type": "application/json",
              },
              data: {
                  ...this.params,
                  page: this.page,
                  pageSize: this.pageSize,
              },
          }).then(({ data: { body } }) => {
              this.tableHead = body;
          });
      },
    outlist() {
        var date = new Date()
        var year = date.getFullYear()
        var month = date.getMonth() + 1 < 10 ?
            '0' + (date.getMonth() + 1) : date.getMonth()+ 1
        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        let hh = new Date().getHours();
        let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
        let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
        var nowDate=year+month+day+hh+mf+ss

      this.$http({
        url: "/market/mkOnlineChannel/exportLedger",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        responseType: "blob",
          data: {
              ...this.params,
              page: this.page,
              pageSize: this.pageSize,
          }
      }).then((response) => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          let blob = new Blob([response.data], {
            type: "application/vnd.ms-excel",
          });
          window.navigator.msSaveOrOpenBlob(
            blob,
            "线上业务需求台账-"+nowDate + ".xlsx"
          );
        } else {
          /* 火狐谷歌的文件下载方式 */
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = "线上业务需求台账-"+nowDate + ".xlsx";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        }
      });
    },
      inlist(){
          this.$http({
              url: "/market/mkOnlineChannel/importLedger",
              method: "post",
              headers: {
                  "Content-Type": "application/json",
              },
              data: this.params,
          }).then((res) => {
              res.data;
          });
      },
    // 分页
    currchange(v) {
        this.page = v;
        this.getTableHeadlist();
        this.handleInit();
    },

    //获取列表
    // getList(v, n) {
    //   v.sts = 1;
    //   this.pageSize = n;
    //   let _this = this;
    //   this.$http({
    //     url: "/market/cChannelDemand/queryPage",
    //     method: "post",
    //     headers: {
    //       "Content-Type": "application/json",
    //       page: '{"pageNo":"' + n + '","pageSize":"10"}',
    //     },
    //     data: v,
    //   }).then((res) => {
    //     this.tableData = res.data.data;
    //     this.total = res.data.totalRecord;
    //   });
    // },

    //功能栏
    iconCli(v) {
      if (v === 1) {
          this.getTableHeadlist();
          this.handleInit();
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
      }
    },

    getUser() {
      this.userInfo = JSON.parse(window.sessionStorage.userInfo);
      this.infolist = {
        opNo: "",
        opName: "",
      };
      this.infolist.opNo = this.userInfo.loginNo;
      this.infolist.opName = this.userInfo.loginName;
    },
  },
  mounted() {
      // this.getList({}, 1);
      this.getTableHeadlist();
      this.handleInit();
      this.getUser();
  },
  created() {},
};
</script>
<style scoped lang="scss">
.onetab {
  margin-bottom: 20px;
  padding: 0 20px;
}

.titbox {
  div {
    float: right;

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

.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}

.info-line {
  width: 100%;
  display: block;
  padding-left: 20px;

  div {
    width: 50%;
    display: inline-block;
  }

  span {
    width: 80px;
    display: inline-block;
    text-align: left;

    i {
      color: red;
      display: inline-block;
      padding-right: 5px;
    }
  }

  .el-select,
  .el-input {
    width: calc(100% - 100px);
  }
}

.online {
  width: 100%;

  .el-select {
    width: calc(100% - 100px);
  }

  span {
    vertical-align: top;
  }

  .el-textarea {
    width: calc(100% - 100px);
  }
}
</style>
