<template>
  <basic-container v-loading="loading">
    <div class="btn-wrap">
      <el-button type="primary" icon="el-icon-edit" @click="handleSaveBtn">保存</el-button>
    </div>
    <div class="doc-page">
      <h3 class="page-title" style="margin: 24px 0 16px">{{ pageTitle }}</h3>
      <div style="display: flex; margin: 12px 0;">
        <year-month-select v-model="year" :showMonth="false" style="margin: 0 15px 0 0;"></year-month-select>
        <el-button
          type="primary"
          size="small"
          @click="handleReady"
        >
          读取数据
        </el-button>
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-download"
          @click="handleExport"
        >
          导出
        </el-button>
      </div>
      <table>
        <tbody>
          <tr>
            <td width="70%">一、本年度获得的知识产权数</td>
            <td>
              <div style="display: flex; align-items: center;">
                <div style="width: 100%; text-align: right;">{{ formData.d1 }}</div>
                <span style="padding: 0 5px;">件</span>
              </div>
            </td>
          </tr>
          <tr>
            <td width="70%">当年获得发明专利数</td>
            <td>
              <div style="display: flex; align-items: center;">
                <div style="width: 100%; text-align: right;">{{ formData.d2 }}</div>
                <span style="padding: 0 5px;">件</span>
              </div>
            </td>
          </tr>
          <tr>
            <td width="70%" style="padding-left: 30px;">其中：国防专利</td>
            <td>
              <div style="display: flex; align-items: center;">
                <div style="width: 100%; text-align: right;">{{ formData.d3 }}</div>
                <span style="padding: 0 5px;">件</span>
              </div>
            </td>
          </tr>
          <tr>
            <td width="70%">当年获得植物新品种</td>
            <td>
              <div style="display: flex; align-items: center;">
                <div style="width: 100%; text-align: right;">{{ formData.d4 }}</div>
                <span style="padding: 0 5px;">件</span>
              </div>
            </td>
          </tr>
          <tr>
            <td width="70%">当年获得国家级农作物品种</td>
            <td>
              <div style="display: flex; align-items: center;">
                <div style="width: 100%; text-align: right;">{{ formData.d5 }}</div>
                <span style="padding: 0 5px;">件</span>
              </div>
            </td>
          </tr>
          <tr>
            <td width="70%">当年获得国家新药</td>
            <td>
              <div style="display: flex; align-items: center;">
                <div style="width: 100%; text-align: right;">{{ formData.d6 }}</div>
                <span style="padding: 0 5px;">件</span>
              </div>
            </td>
          </tr>
          <tr>
            <td width="70%">当年获得国家一级中药保护品种</td>
            <td>
              <div style="display: flex; align-items: center;">
                <div style="width: 100%; text-align: right;">{{ formData.d7 }}</div>
                <span style="padding: 0 5px;">件</span>
              </div>
            </td>
          </tr>
          <tr>
            <td width="70%">当年获得集成电路布图设计专有权</td>
            <td>
              <div style="display: flex; align-items: center;">
                <div style="width: 100%; text-align: right;">{{ formData.d8 }}</div>
                <span style="padding: 0 5px;">件</span>
              </div>
            </td>
          </tr>
          <tr>
            <td width="70%">当年获得实用新型专利</td>
            <td>
              <div style="display: flex; align-items: center;">
                <div style="width: 100%; text-align: right;">{{ formData.d9 }}</div>
                <span style="padding: 0 5px;">件</span>
              </div>
            </td>
          </tr>
          <tr>
            <td width="70%">当年获得外观设计专利</td>
            <td>
              <div style="display: flex; align-items: center;">
                <div style="width: 100%; text-align: right;">{{ formData.d10 }}</div>
                <span style="padding: 0 5px;">件</span>
              </div>
            </td>
          </tr>
          <tr>
            <td width="70%">当年获得软件著作权</td>
            <td>
              <div style="display: flex; align-items: center;">
                <div style="width: 100%; text-align: right;">{{ formData.d11 }}</div>
                <span style="padding: 0 5px;">件</span>
              </div>
            </td>
          </tr>
          <tr>
            <td width="70%">二、本年度人员情况</td>
            <td>
            </td>
          </tr>
          <tr>
            <td width="70%">职工总数</td>
            <td>
              <div style="display: flex; align-items: center;">
                <input type="number" v-model="formData.d13" style="width: 100%; text-align: right;" />
                <span style="padding: 0 5px;">人</span>
              </div>
            </td>
          </tr>
          <tr>
            <td width="70%">科技人员数</td>
            <td>
              <div style="display: flex; align-items: center;">
                <div style="width: 100%; text-align: right;">{{ formData.d14 }}</div>
                <span style="padding: 0 5px;">人</span>
              </div>
            </td>
          </tr>
          <tr>
            <td width="70%">新增就业人员数</td>
            <td>
              <div style="display: flex; align-items: center;">
                <input type="number" v-model="formData.d15" style="width: 100%; text-align: right;" />
                <span style="padding: 0 5px;">人</span>
              </div>
            </td>
          </tr>
          <tr>
            <td width="70%" style="padding-left: 30px;">其中：吸纳高校应届毕业生人数</td>
            <td>
              <div style="display: flex; align-items: center;">
                <input type="number" v-model="formData.d16" style="width: 100%; text-align: right;" />
                <span style="padding: 0 5px;">人</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </basic-container>
</template>

<script>
import { getList, update } from "@/api/externalReports/highCompAnnualReport";
import moment from "moment";
import yearMonthSelect from "@/components/year-month-select";
import { exportBlob } from "@/api/common";
import { getToken } from "@/util/auth";
import { downloadXls } from "@/util/util";
import { mapGetters } from "vuex";

export default {
  components: {
    yearMonthSelect,
  },
  data() {
    return {
      loading: false,
      isLoad: false,
      confirmLoading: false,
      year: "",
      formData: {},
    };
  },
  computed: {
    ...mapGetters(['tag']),
    pageTitle() {
      let yearCN = this.year ? moment(this.year).format('yyyy年') : '';
      return `${yearCN}${this.tag.label}`
    }
  },
  methods: {
    handleReady() {
      this.getData();
    },
    getData() {
      this.loading = true;
      getList({ year: this.year }).then(({ data }) => {
        this.loading = false;
        if (data.code == 200) {
          this.isLoad = true;
          this.formData = data.data;
        }
      }).catch(() => {
        this.loading = false;
      });
    },
    handleSaveBtn() {
      if (!this.isLoad) {
        this.$message.error("请读取页面数据，再保存!");
        return;
      }
      this.confirmLoading = true;
      let params = {
        yearAndMonth: this.year,
        d13: this.formData.d13,
        d15: this.formData.d15,
        d16: this.formData.d16,
      };
      update(params).then(({ data }) => {
        this.confirmLoading = false;
        if (data.code == 200) {
          this.$message.success('保存成功!');
          this.getData();
        }
      }).catch(err => {
        this.confirmLoading = false;
      });
    },
    handleExport() {
      this.$message.warning('功能建设中...');
      // exportBlob(
      //   `/api/kd-scientific/gxjsqyyhqkjmxb/export?${
      //     this.website.tokenHeader
      //   }=${getToken()}`,
      //   { year: this.year }
      // ).then((res) => {
      //   downloadXls(
      //     res.data,
      //     `${this.pageTitle}.xlsx`
      //   );
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.btn-wrap {
  position: fixed;
  right: 90px;
  bottom: 60px;
  ::v-deep .el-button {
    width: 86px;
    height: 86px;
    text-align: left;
    border-radius: 100%;
    font-weight: 600;
    box-shadow: 0 0 12px #888;
    box-sizing: border-box;
  }
}

.page-title {
  text-align: center;
  font-size: 24px;
}

.doc-page {
  width: 800px;
  margin: 30px auto;
}
table {
  width: 100%;
  border: 1px solid #333;
}
.doc-label {
  text-align: center;
  padding: 6px;
  color: #777;
  font-size: 14px;
  width: 15%;
}
.doc-input {
  text-align: center;
  color: #333;
  width: 35%;
}

.el-input__inner {
  border: none;
}
tr td {
  border: 1px solid #333;
  padding: 9px 3px;
  font-size: 14px;
  color: #666;
}
</style>
