<template>
  <basic-container>
    <avue-crud
      v-bind="bindVal"
      v-on="onEvent"
      v-model="form"
      :page.sync="page"
      :before-open="handleBeforeOpen"
      @row-dblclick="handleRowDbClick"
    >
      <template slot="menuLeft">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="handleCreateClick"
        >
          创建立项项目
        </el-button>
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-download"
          @click="handleExport"
        >
          导出
        </el-button>
        <print-table-btn @click="printTable" />
        
      </template>

      <template slot="body">
        <h3 class="page-title">{{ pageTitle }}</h3>
        <year-month-select v-model="params.yearAndMonth" :showAllYear="false"></year-month-select>
      </template>

      <template slot="lxbg" slot-scope="{ row }">
        <span v-if="row.lxbg === '未提交'" style="color: red;">未提交</span>
        <span v-if="row.lxbg === '已提交'">已提交</span>
      </template>

      <template slot="jdxbg" slot-scope="{ row }">
        <span v-if="row.jdxbg === '未提交'" style="color: red;">未提交</span>
        <span v-if="row.jdxbg === '已提交'">已提交</span>
      </template>

      <template slot="ysbg" slot-scope="{ row }">
        <span v-if="row.ysbg === '未提交'" style="color: red;">未提交</span>
        <span v-if="row.ysbg === '已提交'">已提交</span>
      </template>
      
    </avue-crud>

    <WideTablePrinter
      v-if="!drawerVisible"
      ref="printWideTable"
      :columns="wideTableColumns"
      :data="data"
      :print-title="printTitle"
      :rows-per-page="30"
      :default-landscape="true"
      :zoom="60"
    />

    <el-drawer
      :visible.sync="drawerVisible"
      title="项目信息"
      modal-append-to-body
      append-to-body
      size="1280px"
      destroy-on-close
    >
      <el-tabs type="border-card" v-model="tabActive">
        <el-tab-pane label="1、项目立项" name="apply" lazy>
          <apply-form :projectId="currProjectId" :operateType="operateType" @success="handleApplySuccess"></apply-form>
        </el-tab-pane>
        <el-tab-pane label="2、科研预算" name="budget" lazy :disabled="currProjectData.status === 0">
          <project-budget :projectId="currProjectId" :hidePrintTable="tabActive != 'budget' ? true : false"></project-budget>
        </el-tab-pane>
        <el-tab-pane label="3、项目实施" name="implement" lazy :disabled="currProjectData.status === 0">
          <implement :projectId="currProjectId" :hidePrintTable="tabActive != 'implement' ? true : false"></implement>
        </el-tab-pane>
        <el-tab-pane label="4、项目变更" name="change" lazy :disabled="currProjectData.status === 0">
          <change :projectId="currProjectId" :hidePrintTable="tabActive != 'change' ? true : false"></change>
        </el-tab-pane>
        <el-tab-pane label="5、项目结题" name="accept" lazy :disabled="currProjectData.status === 0">
          <accept-form :projectId="currProjectId"></accept-form>
        </el-tab-pane>
        <el-tab-pane label="6、项目成果" name="result" lazy :disabled="currProjectData.status === 0">
          <result-table :projectId="currProjectId" :hidePrintTable="tabActive != 'result' ? true : false"></result-table>
        </el-tab-pane>
        <el-tab-pane label="7、委外材料" name="outsourcing" lazy :disabled="currProjectData.status === 0">
          <outsourcing-doc :projectId="currProjectId"></outsourcing-doc>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </basic-container>
</template>

<script>
import {exportBloByPost} from "@/api/common";
import YearMonthSelect from "@/components/year-month-select";
import moment from "moment";
import {getToken} from "@/util/auth";
import {downloadXls} from "@/util/util";
import applyForm from "./components/apply-form.vue";
import projectBudget from "./components/project-budget.vue";
import implement from './implement.vue';
import change from "./change.vue";
import acceptForm from "./components/accept-form.vue";
import resultTable from "./result-table.vue";
import outsourcingDoc from "./components/outsourcing-doc.vue";
import { mapGetters } from "vuex";


export default window.$crudCommon({
  components: {
    YearMonthSelect,
    applyForm,
    projectBudget,
    implement,
    change,
    acceptForm,
    resultTable,
    outsourcingDoc,
  },
  data() {
    return {
      params: {
        yearAndMonth: "",
      },
      tabActive: 'apply',

      wideTableColumns: [],
      printTitle: "",

      drawerVisible: false,

      applyType: '', // add || edit
      currProjectId: '',
      currProjectData: {},
    };
  },
  watch: {
    'params.yearAndMonth'(newVal) {
      this.page.currentPage = 1;
      this.loadData(this.page);
    }
  },
  computed: {
    ...mapGetters(['tag']),
    pageTitle() {
      let yearAndMonthCN = this.params.yearAndMonth ? moment(this.params.yearAndMonth).format("yyyy年MM月") : '';
      return `${yearAndMonthCN}${this.tag.label}`
    },
  },
  activated() {
    const queryParams = this.$route.query;
    if (queryParams.refresh) {
      this.page.currentPage = 1;
      this.loadData(this.page);
    }
  },
  methods: {
    handleCreateClick() {
      this.tabActive = 'apply';
      this.operateType = 'add',
      this.currProjectId = '';
      this.currProjectData = {};
      this.drawerVisible = true;
    },
    handleRowDbClick(data) {
      this.tabActive = 'apply';
      this.operateType = 'edit';
      this.currProjectId = data.id;
      this.currProjectData = { ...data, status: Number(data.status) };
      this.drawerVisible = true;
    },
    handleApplySuccess() {
      this.drawerVisible = false;
      this.loadData();
    },
    handleExport() {
      exportBloByPost(`/api/kd-scientific/xm/summary-export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
        downloadXls(res.data, `${this.pageTitle}.xlsx`);
      });
    },
    /**
     * 打印表格
     * @param isLandscape 是否横向打印
     */
    printTable(isLandscape) {
      this.wideTableColumns = this.printOption.column;

      this.printTitle = `${this.pageTitle}`;
      this.$nextTick(() => {
        this.$refs.printWideTable.printTable(isLandscape);
      })
    },
  },
}, {
  // 模块路径
  name: 'projectManage/projectList',
  res: ({ data }) => {
    data.records = data.records.map(item => {
      item.lxbg = item.lxbgCount > 0 ? '已提交' : '未提交';
      item.jdxbg = item.jdxbgCount > 0 ? '已提交' : '未提交';
      item.ysbg = item.ysbgCount > 0 ? '已提交' : '未提交';
      item.status = String(item.status);
      item.xmysze = Number(item.xmysze || 0).toFixed(2);
      item.qzqygj = Number(item.qzqygj || 0).toFixed(2)
      item.xmyszeCurrentYear = Number(item.xmyszeCurrentYear || 0).toFixed(2)
      item.ndygjyffy = Number(item.ndygjyffy || 0).toFixed(2)
      item.wwAmount = Number(item.wwAmount || 0).toFixed(2)
      return item;
    });
    return data;
  },
});
</script>
