<template>
  <basic-container>
    <div style="margin-top: 6px;">
      <el-form :inline="true">
        <el-form-item label="研发项目名称">
          <project-select v-model="params.xmId" @change="handleProjectChange"></project-select>
        </el-form-item>
        <el-form-item label="研发项目编号">
          {{ selProject.xmbh }}
        </el-form-item>
      </el-form>
    </div>

    <avue-crud
      ref="crud"
      v-bind="bindVal"
      v-on="onEvent"
      v-model="form"
      :page.sync="page"
      :before-open="handleBeforeOpen"
      :permission="permissionList"
    >
      <template slot="menuLeft">
        <el-button type="primary" size="small" icon="el-icon-position" @click="handleAddChange">
          发起变更
        </el-button>
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-download"
          @click="handleExport"
        >
          导出
        </el-button>
        <print-table-btn @click="printTable" />
      </template>
      
    </avue-crud>

    <WideTablePrinter
      ref="printWideTable"
      :columns="wideTableColumns"
      :data="data"
      :print-title="printTitle"
      :rows-per-page="30"
      :default-landscape="true"
    />

    <el-drawer
      title="发起变更"
      :visible.sync="drawerVisible"
      modal-append-to-body
      append-to-body
      size="960px"
    >
      
      <change-form
        v-if="drawerVisible"
        :projectId="params.xmId"
        :data="changeFormData"
        :disabled="isFormReadonly"
        @success="handleChangeSucc"
      >
      </change-form>
    </el-drawer>
  </basic-container>
</template>

<script>
import {exportBloByPost} from "@/api/common";
import {getToken} from "@/util/auth";
import projectSelect from "@/components/project-select";
import {downloadXls} from "@/util/util";
import changeForm from "./components/change-form.vue";


export default window.$crudCommon({
  props: {
    projectId: [String, Number]
  },
  components: {
    changeForm,
    projectSelect
  },
  data() {
    return {
      params: {
        xmId: ''
      },
      selProject: {},
      drawerVisible: false,

      wideTableColumns: [],
      printTitle: "",

      changeFormData: {},
      isFormReadonly: false,
    };
  },
  watch: {
    "params.xmId"() {
      this.page.currentPage = 1;
      this.getList(this.page);
    }
  },
  created() {
    this.params.xmId = this.projectId;
  },
  methods: {
    handleProjectChange(data) {
      this.selProject = data;
      
    },
    handleExport() {
      exportBloByPost(`/api/kd-scientific/xm-bgrz/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
        downloadXls(res.data, `${this.selProject.xmmc}项目变更列表.xlsx`);
      });
    },
    /**
     * 打印表格
     * @param isLandscape 是否横向打印
     */
    printTable(isLandscape) {
      this.wideTableColumns = this.$refs.crud.columnOption;
      this.printTitle = `${this.selProject.xmmc}项目变更列表`;
      this.$nextTick(() => {
        this.$refs.printWideTable.printTable(isLandscape);
      })
    },
    handleAddChange() {
      this.drawerVisible = true;
      this.isFormReadonly = false;
      this.changeFormData = {};
    },
    handleRowDbClick(data) {
      this.drawerVisible = true;
      this.isFormReadonly = true;
      this.changeFormData = data;
    },
    handleChangeSucc() {
      this.drawerVisible = false;
      this.getList();
    }
  },
}, {
  // 模块路径
  name: 'projectManage/change',
});
</script>
