<template>
  <div
    :class="className"
    :style="{ height: '100%', width: width, padding: '15px' }"
  >
    <!-- 招商评估 -->
    <div class="select-container">
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm"
        style="
          display: grid;
          grid-template-columns: 1fr 1fr;
          align-items: center;
          grid-gap: 5px;
        "
      >
        <el-form-item
          label="新增企业年产值"
          label-width="200px"
          prop="annualOutputValue"
        >
          <div style="display: flex; align-items: center">
            <el-input
              v-model.number="form.annualOutputValue"
              placeholder="请输入企业年产值"
              clearable
            />
            <p
              style="
                flex: 0 0 auto;
                margin: 0 10px;
                width: 30px;
                text-align: center;
              "
            >
              万元
            </p>
          </div>
        </el-form-item>
        <el-form-item
          label="新增企业年实缴税金"
          label-width="200px"
          prop="taxPaid"
        >
          <div style="display: flex; align-items: center">
            <el-input
              v-model.number="form.taxPaid"
              placeholder="请输入企业年实缴税金"
              clearable
            />
            <p
              style="
                flex: 0 0 auto;
                margin: 0 10px;
                width: 30px;
                text-align: center;
              "
            >
              万元
            </p>
          </div>
        </el-form-item>
        <el-form-item
          label="新增企业用地面积"
          label-width="200px"
          prop="landArea"
        >
          <div style="display: flex; align-items: center">
            <el-input
              v-model.number="form.landArea"
              placeholder="请输入企业用地面积"
              clearable
            />
            <p
              style="
                flex: 0 0 auto;
                margin: 0 10px;
                width: 30px;
                text-align: center;
              "
            >
              亩
            </p>
          </div>
        </el-form-item>
        <el-form-item
          label="新增企业近三年亩均产值"
          label-width="200px"
          prop="averageOutputValuePerMuInRecentThreeYears"
        >
          <span slot="label">
            新增企业近三年亩均产值
            <el-tooltip class="item" effect="light" placement="bottom">
              <span slot="content">
                ①亩均产值=产值/用地面积<br/>
                ②近三年：去年往前推三年，例如2025年时，计算年份为2024年、2023年、2022年<br/>
                ③近三年平均亩均产值=（2022年亩均产值+2023年+2024年）/3
              </span>
              <i class="el-icon-question" /><!--小问号提示-->
            </el-tooltip>
          </span>
          <div style="display: flex; align-items: center">
            <el-input
              v-model.number="form.averageOutputValuePerMuInRecentThreeYears"
              placeholder="请输入企业近三年亩均产值"
              clearable
            />
          </div>
        </el-form-item>
        <el-form-item
          label="新增企业近三年亩均税收"
          label-width="200px"
          prop="averageTaxPerMuInRecentThreeYears"
        >
          <span slot="label">
            新增企业近三年亩均税收
            <el-tooltip class="item" effect="light" placement="bottom">
              <span slot="content">
                ①亩均税收=实缴税金/用地面积<br/>
                ②近三年：去年往前推三年，例如2025年时，计算年份为2024年、2023年、2022年<br/>
                ③近三年平均亩均税收=（2022年亩均税收+2023年+2024年）/3
              </span>
              <i class="el-icon-question" /><!--小问号提示-->
            </el-tooltip>
          </span>
          <div style="display: flex; align-items: center">
            <el-input
              v-model.number="form.averageTaxPerMuInRecentThreeYears"
              placeholder="请输入企业近三年亩均税收"
              clearable
            />
          </div>
        </el-form-item>
        <el-form-item label="行业代码" label-width="200px" prop="code">
          <el-select
            v-model="form.code"
            style="width: 100%"
            filterable
          >
            <el-option
              v-for="item in industryData"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
          <!-- <el-select v-model="form.selectedCode" style="width: 100%" filterable>
            <el-option
              v-for="item in selectedIndustryArray"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option> </el-select> -->
        </el-form-item>
        <el-form-item
          label="企业分类"
          label-width="200px"
          prop="typeNum"
        >
          <el-select
            v-model="form.typeNum"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in enterTypeList"
              :key="item.number"
              :value="item.number"
              :label="keyToChineseEtype(item.number)"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="年度"
          style="margin-bottom: 0"
          label-width="200px"
          prop="year"
        >
          <span slot="label">
            年度
            <el-tooltip class="item" effect="light" placement="bottom">
              <span slot="content">
                填写年度，例如填写2025年时，计算年份为2024年、2023年、2022年
              </span>
              <i class="el-icon-question" /><!--小问号提示-->
            </el-tooltip>
          </span>
          <div style="display: flex; align-items: center">
            <el-input
              v-model.number="form.year"
              placeholder="请输入年度"
              clearable
            />
          </div>
        <!-- <el-select
            v-model="form.year"
            style="width: 100%"
            filterable
          >
            <el-option
              v-for="key in yearsOptions"
              :key="key"
              :label="key"
              :value="key"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label-width="100px">
          <el-button type="primary" size="mini" @click="submitForm">计算</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetForm"
            >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getYearData } from "@/api/home";
import { listEtypeAll } from "@/api/etype/etype";
import { listAllIndustry } from "@/api/industry/industry"; // 导入行业数据的接口
import { analysisInvestment } from "@/api/analysis/analysis";
export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "400px",
    },
  },
  data() {
    return {
      selectedDataKey: "totalIndustrialValueScore", // 默认选择的字段
      form: {
        annualOutputValue: null, // 年产值
        taxPaid: null, // 年缴税额
        landArea: null, // 占地面积
        typeNum: null, // 企业类型
        code: null, // 行业代码
        year: null, // 年份
        averageOutputValuePerMuInRecentThreeYears: null, // 近三年亩均产值
        averageTaxPerMuInRecentThreeYears: null, // 近三年亩均税收
      },
      rules: {},
      industryData:[],
      yearsOptions: [],
      enterTypeList: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.fetchData();
    });
  },
  methods: {
    fetchData() {
      Promise.all([
        this.getYearData(),
        this.getAllIndustry(),
        this.getEtypeAll(),
      ])
      .then(() => {
        console.log("All data fetched successfully");
        // this.initChart();
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
    },
    getYearData() {
      return getYearData().then((res) => {
        this.yearsOptions = res.rows[0].years;
      });
    },

    getAllIndustry() {
      return listAllIndustry().then((response) => {
        if (response?.rows) {
          this.industryData = response.rows.map((item) => ({
            key: item.code,
            value: item.code + item.industryName,
          }));
        }
      });
    },
    getEtypeAll() {
      return listEtypeAll().then((res) => {
        this.enterTypeList = res;
        // console.log(this.enterTypeList);
      });
    },
    keyToChineseEtype(num) {
      const item = this.enterTypeList.find((element) => element.number === num);
      return item ? item.name : null;
    },
    submitForm(){
      analysisInvestment(this.form).then(res=>{
        console.log("提交",res)
      })
      // console.log("提交",this.form)
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
      // this.calShow = "init";
    },
  }
};
</script>
