<template>
  <div class="flex-header">
    <Seach
      style="margin-top: 20px"
      :list="filterData"
      @seachList="seachList"
    ></Seach>
    <div class="flex-export">
      <el-button class="flex-button" type="primary" @click="clickExport"
        >导出</el-button
      >
    </div>
    <Table
      ref="table"
      :list="firstTable"
      @changeNum="changeNum"
      @changeSize="changeSize"
    >
    </Table>
    <el-dialog
      title="详细信息"
      :visible.sync="dialogStatus"
      width="100%"
      :before-close="handleClose"
      :modal="false"
      :destroy-on-close="true"
    >
      <Table :list="twoTable" class="flex-form" ref="formTable" />
    </el-dialog>
  </div>
</template>

<script>
import FormTable from "../components/formTable.vue";
import Seach from "../components/search.vue";
import Export from "../components/export.vue";
import Tabs from "../components/tabs.vue";
import Table from "../components/form.vue";
import deptTree from "../components/deptThree.vue";
export default {
  components: {
    Tabs,
    Table,
    Export,
    Seach,
    FormTable,
    deptTree,
  },
  data() {
    return {
      seachLists: {},
      firstTable: {
        name: "first",
        height: "700",
        titledata: [
          {
            label: "需求决策编号",
            prop: "needNo",
            width: 200,
          },
          {
            label: "需求名称",
            prop: "needName",
            width: 200,
          },
          {
            label: "提出部门",
            prop: "applyDept",
            width: 200,
          },
          {
            label: "提出人",
            prop: "proposer",
            width: 200,
          },
          {
            label: "提出时间",
            prop: "proposerTime",
            width: 200,
          },
          {
            label: "当前状态",
            prop: "taskName",
            width: 200,
          },
          {
            label: "需求讨论确认时间",
            prop: "tlTime",
            width: 200,
          },
          {
            label: "需求排期开始时间",
            prop: "paiqiBegin",
            width: 200,
          },
          {
            label: "需求排期结束时间",
            prop: "paiqiEnd",
            width: 200,
          },
          {
            label: "上线时间",
            prop: "onlineTime",
            width: 200,
          },
          {
            label: "需求一级目录",
            prop: "firstDirectory",
            width: 200,
          },
          {
            label: "需求二级目录",
            prop: "secondDirectory",
            width: 200,
          },
          {
            label: "需求三级目录",
            prop: "thirdDirectory",
            width: 200,
          },
          {
            label: "需求四级目录",
            prop: "fourthDirectory",
            width: 200,
          },
          {
            label: "需求五级目录",
            prop: "fifthDirectory",
            width: 200,
          },
        ], //表格头
        data: [], //内容数据
        loading: true,
        pageData: {
          total: 100, // 总条数
          pageSize: 10, // 每页数量
          pageNum: 1, // 页码
        },
        isSelection: false, // 表格有多选时设置
        isOperation: false, // 表格有操作列时设置
        isIndex: false, // 列表序号
        operation: {
          // 表格有操作列时设置
          label: "操作", // 列名
          width: "50", // 根据实际情况给宽度
          data: [
            {
              label: "操作", // 操作名称
              type: "", //按钮类型
              handleRow: (e, r, o) => {
                this.getQueryList(r);
              }, // 自定义事件
            },
          ],
        },
      },
      twoTable: {
        name: "first",
        height: "300",
        titledata: [
          {
            label: "需求决策编号",
            prop: "needNo",
            width: 200,
          },
          {
            label: "业支需求编号",
            prop: "reqNum",
            width: 200,
          },
          {
            label: "业支需求名称",
            prop: "needName",
            width: 200,
          },
          {
            label: "需求负责人",
            prop: "createUser",
            width: 200,
          },
          {
            label: "需求讨论确认时间",
            prop: "tlTime",
            width: 200,
          },
          {
            label: "当前状态",
            prop: "taskName",
            width: 200,
          },
          {
            label: "需求开发开始时间",
            prop: "paigiBegin",
            width: 200,
          },
          {
            label: "需求开发结束时间",
            prop: "paigiEnd",
            width: 200,
          },
          {
            label: "需求测试开始时间",
            prop: "startTime",
            width: 200,
          },
          {
            label: "需求测试结束时间",
            prop: "endTime",
            width: 200,
          },
          {
            label: "计划上线时间",
            prop: "paiqiPlanOnlineTime",
            width: 200,
          },
          {
            label: "上线时间",
            prop: "onlineTime",
            width: 200,
          },
          {
            label: "所属系统",
            prop: "sysBelong",
            width: 200,
          },
        ], //表格头
        data: [], //内容数据
        loading: true,
        pageData: {
          total: "", // 总条数
          pageSize: 10, // 每页数量
          pageNum: 1, // 页码
        },
        isSelection: false, // 表格有多选时设置
        isOperation: false, // 表格有操作列时设置
        isIndex: false, // 列表序号
        operation: {
          // 表格有操作列时设置
          label: "操作", // 列名
          width: "50", // 根据实际情况给宽度
          data: [
            {
              label: "操作", // 操作名称
              type: "", //按钮类型
              handleRow: (e, r, o) => {
                console.log(r);
                this.dialogStatus = true;
              }, // 自定义事件
            },
          ],
        },
      },
      filterData: {
        timeSelect: true, //是否显示日期控件
        sreach: true,
        restet: false,
        elinput: [
          {
            name: "需求决策编号", //提示语275
            key: "needNo", //字段名
            width: 120, //宽度
          },
          {
            name: "需求名称", //提示语275
            key: "needName", //字段名
            width: 120, //宽度
          },
        ],
        date: [
          {
            name: "需求提出时间",
            key: "time",
            width: 40,
          },
        ],
      },
      dialogStatus: false,
      page: 1,
      size: 10,
    };
  },
  created() {
    this.getQueryLists();
  },
  methods: {
    //报表导出

    clickExport() {
      this.$http({
        url: "/market/waf/excelExport",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        responseType: "blob",
        data: this.seachLists ? this.seachLists : {},
      }).then((response) => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          let blob = new Blob([response.data.size], {
            type: "application/vnd.ms-excel;",
          });

          // window.navigator.msSaveOrOpenBlob(blob, res + "需求申请单" + ".zip");

          window.navigator.msSaveOrOpenBlob(blob, "需求管理报表" + ".xlsx");

          //window.navigator.msSaveOrOpenBlob(blob, t his.form.needName);
        } else {
          /* 火狐谷歌的文件下载方式 */
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);
          downloadElement.href = href;

          downloadElement.download =  "需求管理报表" + ".xlsx";

          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        }
      });
    },
    //报表首页接口
    getQueryLists(e) {
      this.$http({
        url: "/market/waf/queryReport",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + this.page + '","pageSize":"' + this.size + '"}',
        },
        data: e || {},
      }).then((res) => {
        console.log(res);
        this.firstTable.pageData.total = res.data.totalRecord;
        this.firstTable.data = res.data.data;
      });
    },
    getQueryList(e) {
      if (e.needNo !== null) {
        this.$http({
          url: "/market/relation/getRelation",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            needNo: e.needNo,
          },
        }).then((res) => {
          this.twoTable.data = res.data.cwfInfo;
          this.dialogStatus = true;
        });
      } else {
        this.$message.error("暂无需求决策编号");
      }
    },
    //子需求dialogStatus显示
    handleClose() {
      this.dialogStatus = false;
      this.twoTable.data = [];
    },
    //搜索数据回调
    seachList(e) {
      this.$refs.table.page = 1;
      this.page = 1;
      this.size = 10;
      this.seachLists = e;
      if (e.time) {
        e.stime = e.time[0];
        e.etime = e.time[1];
      } else {
        e.stime = "";
        e.etime = "";
      }
      this.getQueryLists(e);
    },
    changeNum(e) {
      this.page = e;
      this.getQueryLists(this.seachLists);
    },
    changeSize(e) {
      this.size = e;
      this.getQueryLists(this.seachLists);
    },
  },
};
</script>

<style lang="scss" scoped>
.flex-export {
  margin: 10px 0 10px 0;
  text-align: end;
}
.flex-button {
  width: 6%;
}
.flex-header {
  display: flex;
  width: calc(100% - 40px);
  border-radius: 20px;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 20px;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
</style>