<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 colspan="7" align="center">
              <h4 style="margin: 6px 0;">税收优惠基本信息</h4>
            </td>
          </tr>
          <tr>
            <td width="30px" align="center">1</td>
            <td width="23%" align="center" rowspan="3">企业主要产品（服务）及特殊收入支持作用的技术所属范围</td>
            <td rowspan="3" width="30%" align="center">国家重点支持的高新技术领域</td>
            <td colspan="3">一级领域</td>
            <td width="12%" align="center">{{ formData.d1 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">2</td>
            <td colspan="3">二级领域</td>
            <td align="center">{{ formData.d2 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">3</td>
            <td colspan="3">三级领域</td>
            <td align="center">{{ formData.d3 }}</td>
          </tr>

          <tr>
            <td colspan="7" align="center">
              <h4 style="margin: 3px 0;">税收优惠有关情况</h4>
            </td>
          </tr>

          <tr>
            <td width="30px" align="center">4</td>
            <td rowspan="7" align="center">收入指标</td>
            <td colspan="4">一、本年高新技术产品（服务）收入</td>
            <td align="center">{{ formData.d4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">5</td>
            <td colspan="4" style="padding-left: 30px;">其中：产品（服务）收入</td>
            <td>
              <input placeholder="请输入" type="number" v-model="formData.d5" />
            </td>
          </tr>

          <tr>
            <td width="30px" align="center">6</td>
            <td colspan="4" style="padding-left: 60px;">技术性收入</td>
            <td>
              <input placeholder="请输入" type="number" v-model="formData.d6" />
            </td>
          </tr>

          <tr>
            <td width="30px" align="center">7</td>
            <td colspan="4">二、本年企业总收入</td>
            <td align="center">{{ formData.d7 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">8</td>
            <td colspan="4" style="padding-left: 30px;">其中：收入总额</td>
            <td align="center">
              <input placeholder="请输入" type="number" v-model="formData.d8" />
            </td>
          </tr>

          <tr>
            <td width="30px" align="center">9</td>
            <td colspan="4" style="padding-left: 60px;">不征税收入</td>
            <td>
              <input placeholder="请输入" type="number" v-model="formData.d9" />
            </td>
          </tr>

          <tr>
            <td width="30px" align="center">10</td>
            <td colspan="4">三、本年高新技术产品（服务）收入占企业总收入的比例</td>
            <td align="center">{{ formData.d10 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">11</td>
            <td rowspan="3" align="center">人员指标</td>
            <td colspan="4">四、本年科技人员数</td>
            <td align="center">{{ formData.d11 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">12</td>
            <td colspan="4">五、本年职工总数</td>
            <td>
              <input placeholder="请输入" type="number" v-model="formData.d12" />
            </td>
          </tr>

          <tr>
            <td width="30px" align="center">13</td>
            <td colspan="4">六、本年科技人员占企业当年职工总数的比例</td>
            <td align="center">{{ formData.d13 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center" rowspan="2">14</td>
            <td rowspan="17" align="center">研发费用指标</td>
            <td rowspan="2" style="padding-left: 30px;">高新研发费用归集年度</td>
            <td align="center">本年度</td>
            <td align="center">前一年度</td>
            <td align="center">前二年度</td>
            <td align="center">合计</td>
          </tr>

          <tr>
            <td align="center">1</td>
            <td align="center">2</td>
            <td align="center">3</td>
            <td align="center">4</td>
          </tr>

          <tr>
            <td width="30px" align="center">15</td>
            <td>七、归集的高新研发费用金额</td>
            <td align="center">{{ formData.d15_1 }}</td>
            <td align="center">{{ formData.d15_2 }}</td>
            <td align="center">{{ formData.d15_3 }}</td>
            <td align="center">{{ formData.d15_4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">16</td>
            <td>（一）内部研究开发投入</td>
            <td align="center">{{ formData.d16_1 }}</td>
            <td align="center">{{ formData.d16_2 }}</td>
            <td align="center">{{ formData.d16_3 }}</td>
            <td align="center">{{ formData.d16_4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">17</td>
            <td style="padding-left: 60px;">1.人员人工费用</td>
            <td align="center">{{ formData.d17_1 }}</td>
            <td align="center">{{ formData.d17_2 }}</td>
            <td align="center">{{ formData.d17_3 }}</td>
            <td align="center">{{ formData.d17_4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">18</td>
            <td style="padding-left: 60px;">2.直接投入费用</td>
            <td align="center">{{ formData.d18_1 }}</td>
            <td align="center">{{ formData.d18_2 }}</td>
            <td align="center">{{ formData.d18_3 }}</td>
            <td align="center">{{ formData.d18_4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">19</td>
            <td style="padding-left: 60px;">3.折旧费用与长期待摊费用</td>
            <td align="center">{{ formData.d19_1 }}</td>
            <td align="center">{{ formData.d19_2 }}</td>
            <td align="center">{{ formData.d19_3 }}</td>
            <td align="center">{{ formData.d19_4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">20</td>
            <td style="padding-left: 60px;">4.无形资产摊销费用</td>
            <td align="center">{{ formData.d20_1 }}</td>
            <td align="center">{{ formData.d20_2 }}</td>
            <td align="center">{{ formData.d20_3 }}</td>
            <td align="center">{{ formData.d20_4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">21</td>
            <td style="padding-left: 60px;">5.设计费用</td>
            <td align="center">{{ formData.d21_1 }}</td>
            <td align="center">{{ formData.d21_2 }}</td>
            <td align="center">{{ formData.d21_3 }}</td>
            <td align="center">{{ formData.d21_4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">22</td>
            <td style="padding-left: 60px;">6.设备调试费与实验费用</td>
            <td align="center">{{ formData.d22_1 }}</td>
            <td align="center">{{ formData.d22_2 }}</td>
            <td align="center">{{ formData.d22_3 }}</td>
            <td align="center">{{ formData.d22_4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">23</td>
            <td style="padding-left: 60px;">7.其他费用</td>
            <td align="center">{{ formData.d23_1 }}</td>
            <td align="center">{{ formData.d23_2 }}</td>
            <td align="center">{{ formData.d23_3 }}</td>
            <td align="center">{{ formData.d23_4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">24</td>
            <td style="padding-left: 60px;">其中：可计入研发费用的其他费用</td>
            <td align="center">{{ formData.d24_1 }}</td>
            <td align="center">{{ formData.d24_2 }}</td>
            <td align="center">{{ formData.d24_3 }}</td>
            <td align="center">{{ formData.d24_4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">25</td>
            <td>（二）委托外部研发费用</td>
            <td align="center">{{ formData.d25_1 }}</td>
            <td align="center">{{ formData.d25_2 }}</td>
            <td align="center">{{ formData.d25_3 }}</td>
            <td align="center">{{ formData.d25_4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">26</td>
            <td style="padding-left: 60px;">1.境内的外部研发费</td>
            <td align="center">{{ formData.d26_1 }}</td>
            <td align="center">{{ formData.d26_2 }}</td>
            <td align="center">{{ formData.d26_3 }}</td>
            <td align="center">{{ formData.d26_4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">27</td>
            <td style="padding-left: 60px;">2.境外的外部研发费</td>
            <td align="center">{{ formData.d27_1 }}</td>
            <td align="center">{{ formData.d27_2 }}</td>
            <td align="center">{{ formData.d27_3 }}</td>
            <td align="center">{{ formData.d27_4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">28</td>
            <td style="padding-left: 60px;">其中：可计入研发费用的境外的外部研发费</td>
            <td align="center">{{ formData.d28_1 }}</td>
            <td align="center">{{ formData.d28_2 }}</td>
            <td align="center">{{ formData.d28_3 }}</td>
            <td align="center">{{ formData.d28_4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">29</td>
            <td>八、销售（营业）收入</td>
            <td align="center"><input placeholder="请输入" type="number" v-model="formData.d29_1" /></td>
            <td align="center"><input placeholder="请输入" type="number" v-model="formData.d29_2" /></td>
            <td align="center"><input placeholder="请输入" type="number" v-model="formData.d29_3" /></td>
            <td align="center">{{ formData.d29_4 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">30</td>
            <td rowspan="3" align="center">税收优惠</td>
            <td colspan="4">九、三年研发费用占销售（营业）收入的比例</td>
            <td align="center">{{ formData.d30 }}</td>
          </tr>

          <tr>
            <td width="30px" align="center">31</td>
            <td colspan="4">十、国家需要重点扶持的高新技术企业减征企业所得税</td>
            <td align="center"><input placeholder="请输入" type="number" v-model="formData.d31" /></td>
          </tr>

          <tr>
            <td width="30px" align="center">32</td>
            <td colspan="4">十一、经济特区和上海浦东新区新设立的高新技术企业定期减免税额</td>
            <td align="center"><input placeholder="请输入" type="number" v-model="formData.d32" /></td>
          </tr>
        </tbody>
      </table>
    </div>
  </basic-container>
</template>

<script>
import { getList, update } from "@/api/externalReports/highCompDiscountDetails";
import moment from "moment";
import yearMonthSelect from "@/components/year-month-select";
import { HIGH_TECH_FIELDS } from "@/config/dict";
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 {
      isLoad: false,
      loading: 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();
    },
    // 转译高新领域
    formatHighTechField(id) {
      return this.findLabelById(HIGH_TECH_FIELDS, id);
    },
    findLabelById(tree, targetId) {
      // 遍历当前层级的节点
      for (const node of tree) {
        // 如果找到目标ID，返回对应的label
        if (node.value == targetId) {
          return node.label;
        }
        
        // 如果有子节点，递归查找
        if (node.children && node.children.length > 0) {
          const result = this.findLabelById(node.children, targetId);
          if (result) {
            return result;
          }
        }
      }
      
      // 如果没有找到，返回null或undefined
      return null;
    },
    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,
        d5: this.formData.d5,
        d6: this.formData.d6,
        d8: this.formData.d8,
        d9: this.formData.d9,
        d12: this.formData.d12,
        d29_1: this.formData.d29_1,
        d29_2: this.formData.d29_2,
        d29_3: this.formData.d29_3,
        d31: this.formData.d31,
        d32: this.formData.d32,
      };
      update(params).then(({ data }) => {
        this.confirmLoading = false;
        if (data.code == 200) {
          this.$message.success('保存成功!');
          this.getData();
        }
      }).catch(err => {
        this.confirmLoading = false;
      });
    },
    handleExport() {      
      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: 900px;
  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;
  input {
    border: none;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color: blue;
    padding-left: 17px;
  }
}
</style>
