<template>
  <div class="tab-content">
    <div class="tab-content">
      <el-form
        ref="lxBasicFormRef"
        :model="formData"
        :rules="formRules"
        :validate-on-rule-change="false"
        label-width="180px"
        :disabled="
          !isBulu && (isPreview || Number(formData.projectLzType) >= 5)
        "
      >
        <el-collapse v-model="activeCollapse">
          <el-collapse-item title="项目基本信息" name="项目基本信息">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="项目名称" prop="projectName">
                  <el-input v-model="formData.projectName" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="项目编号" prop="projectCode">
                  <el-input v-model="formData.projectCode" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否再决策" prop="sfzjc">
                  <CommonSelector
                    :radio="true"
                    v-model="formData.sfzjc"
                    dictName="sf"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="项目外文名称">
                  <el-input v-model="formData.projectForeignName" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否能建联合体项目" prop="sfnjlhtxm">
                  <CommonSelector
                    :radio="true"
                    v-model="formData.sfnjlhtxm"
                    dictName="sf"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="能建是否牵头方" prop="njsfqtf">
                  <CommonSelector
                    :radio="true"
                    v-model="formData.njsfqtf"
                    dictName="sf"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="投资主体" prop="tzzt">
                  <el-input v-model="formData.tzzt" />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="主业/非主业" prop="zyfzy">
                  <CommonSelector v-model="formData.zyfzy" dictName="zyfzy" />
                </el-form-item>
              </el-col>

              <el-col :span="8"> </el-col>
              <el-col :span="8">
                <el-form-item label="直属企业" prop="zsqy">
                  <el-input v-model="formData.zsqy" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="是否能建重大或重要投资项目"
                  prop="sfnjzdhzytz"
                >
                  <CommonSelector
                    :radio="true"
                    v-model="formData.sfnjzdhzytz"
                    dictName="sf"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否自主决策" prop="sfzzjc">
                  <CommonSelector
                    :radio="true"
                    v-model="formData.sfzzjc"
                    dictName="sf"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="立项审批单位" prop="lxspdw">
                  <el-input v-model="formData.lxspdw" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="财务报表类型" prop="cwbblx">
                  <CommonSelector v-model="formData.cwbblx" dictName="cwbblx" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="政府审批（核准、备案）级别"
                  prop="zfsphzbajb"
                >
                  <CommonSelector
                    v-model="formData.zfsphzbajb"
                    dictName="spjb"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否履行标前预审程序" prop="sflxbqyscx">
                  <CommonSelector
                    :radio="true"
                    v-model="formData.sflxbqyscx"
                    dictName="sf"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>

          <el-collapse-item title="项目所在地" name="项目所在地">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="境内/外" prop="jnw">
                  <CommonSelector
                    v-model="formData.jnw"
                    dictName="dqlx"
                    @change="changeJnw"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="省（境内）/洲际（境外）" prop="sjnzjjw">
                  <CommonSelector
                    v-model="formData.sjnzjjw"
                    :options="szjList"
                    @change="changeSzj"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="地市（境内）/国家（境外）" prop="dsjngjjw">
                  <CommonSelector
                    v-model="formData.dsjngjjw"
                    :options="dsgjList"
                    @change="changeDsgj"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="区县(境内)/国家(境外)" prop="qxjngjjw">
                  <CommonSelector
                    v-model="formData.qxjngjjw"
                    :options="qxgjList"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="项目区域" prop="xmqy">
                  <CommonSelector v-model="formData.xmqy" dictName="xmqy" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否一带一路沿线国家" prop="sfydylyxgj">
                  <CommonSelector
                    :radio="true"
                    v-model="formData.sfydylyxgj"
                    dictName="sf"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="计量币种" name="计量币种">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="币种" prop="bizhong">
                  <CommonSelector
                    v-model="formData.bizhong"
                    dictName="bizhong"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="汇率" prop="huilv">
                  <!-- 999.99 [20,4]-->
                  <el-input
                    v-model="formData.huilv"
                    :min="0"
                    :max="99999999999.99999999"
                    controls-position="right"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="实施时间" name="实施时间">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="项目建设期" prop="xmjsqy">
                  <el-input-number
                    v-model="formData.xmjsqy"
                    :min="0"
                    :max="99999999999.99999999"
                    controls-position="right"
                  >
                    <template #suffix>
                      <span>月</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="运营年限" prop="yynxn">
                  <el-input-number
                    v-model="formData.yynxn"
                    :min="0"
                    :max="99999999999.99999999"
                    controls-position="right"
                  >
                    <template #suffix>
                      <span>年</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="项目合作期" prop="xmhzqn">
                  <el-input-number
                    v-model="formData.xmhzqn"
                    :min="0"
                    :max="99999999999.99999999"
                    controls-position="right"
                  >
                    <template #suffix>
                      <span>月</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="项目开工时间（预计）" prop="xmkgsjyj">
                  <el-date-picker
                    v-model="formData.xmkgsjyj"
                    type="date"
                    placeholder="请选择"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="项目交工时间（预计）" prop="xmjgsjyj">
                  <el-date-picker
                    v-model="formData.xmjgsjyj"
                    type="date"
                    placeholder="请选择"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="投资分类" name="投资分类">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="col-title">投资属性分类</div>
                <el-form-item label="一级分类" prop="tzsxyjfl">
                  <CommonSelector
                    v-model="formData.tzsxyjfl"
                    dictName="tzsx"
                    @change="changeTzsxyjfl"
                  />
                </el-form-item>
                <el-form-item label="二级分类" prop="tzsxejfl">
                  <CommonSelector
                    v-model="formData.tzsxejfl"
                    :options="tzsxejflList"
                  />
                </el-form-item>
                <el-form-item label="投资板块" prop="tzbk">
                  <CommonSelector
                    v-model="formData.tzbk"
                    dictName="tzbk"
                    @change="changeTzsxtzbk"
                  />
                </el-form-item>
                <el-form-item label="细分板块" prop="subsector">
                  <CommonSelector
                    v-model="formData.subsector"
                    :options="tzsxxfbkList"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <div class="col-title">投资目的分类</div>
                <el-form-item label="一级分类" prop="tzmdyjfl">
                  <CommonSelector
                    v-model="formData.tzmdyjfl"
                    dictName="tzmd"
                    @change="changeTzmdyjfl"
                  />
                </el-form-item>
                <el-form-item label="二级分类" prop="tzmdejfl">
                  <CommonSelector
                    v-model="formData.tzmdejfl"
                    :options="tzmdejflList"
                  />
                </el-form-item>
                <el-form-item label="四新分类" prop="sxfl">
                  <CommonSelector v-model="formData.sxfl" dictName="sxfl" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <div class="col-title">投资指南分类</div>

                <el-form-item label="2+9布局分类" prop="bjfl">
                  <CommonSelector
                    v-model="formData.bjfl"
                    dictName="layoutType"
                    @change="changeJcTzznyjfl"
                  />
                </el-form-item>

                <el-form-item label="国民经济行业" prop="gmjjhy">
                  <el-tree-select
                    v-model="formData.gmjjhy"
                    :data="gmjjhyList"
                    node-key="id"
                    :props="gmjjhyProps"
                    placeholder="请选择"
                    render-after-expand
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item
            title="特别关注、特别监管类等信息"
            name="特别关注、特别监管类等信息"
          >
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item
                  label="是否须报国家发展改革委和商务部核准"
                  prop="sfxbgjfzggwhswbhz"
                >
                  <CommonSelector
                    :radio="true"
                    v-model="formData.sfxbgjfzggwhswbhz"
                    dictName="sf"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否国家领导见签" prop="sfgjldjq">
                  <CommonSelector
                    :radio="true"
                    v-model="formData.sfgjldjq"
                    dictName="sf"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否境内特别监管类" prop="sfjntbjgl">
                  <CommonSelector
                    :radio="true"
                    v-model="formData.sfjntbjgl"
                    dictName="sf"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item
            title="建设规模（实物量指标）"
            name="建设规模（实物量指标）"
          >
            <div class="tab-handle">
              <el-button type="primary" size="small" @click="addSwlzb"
                >新增</el-button
              >
            </div>
            <el-table
              :data="swlzbData"
              style="width: 100%"
              empty-text="暂无数据"
              border
            >
              <el-table-column type="index" width="50" />
              <el-table-column prop="name" label="指标名称">
                <template #default="scope">
                  <el-input v-model="scope.row.name" />
                </template>
              </el-table-column>
              <el-table-column prop="num" label="数量" width="180">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.num"
                    :min="0"
                    :max="99999999999.999"
                    :precision="3"
                    controls-position="right"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="unit" label="单位">
                <template #default="scope">
                  <el-input v-model="scope.row.unit" />
                </template>
              </el-table-column>
              <el-table-column prop="bcsm" label="补充说明">
                <template #default="scope">
                  <el-input v-model="scope.row.bcsm" type="textarea" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="60">
                <template #default="scope">
                  <el-button
                    link
                    type="danger"
                    size="small"
                    @click="deleteSwlzb(scope.$index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="股东信息" name="股东信息">
            <div class="tab-handle">
              <el-button type="primary" size="small" @click="addGdxx"
                >新增</el-button
              >
            </div>
            <el-table
              :data="gdxxData"
              style="width: 100%"
              empty-text="暂无数据"
              border
            >
              <el-table-column
                type="index"
                width="50"
                :index="gdxxIndexMethod"
              />
              <el-table-column prop="gdlx" label="股东类型" width="130">
                <template #default="scope">
                  <CommonSelector
                    v-if="scope.$index < gdxxData.length - 1"
                    v-model="scope.row.gdlx"
                    dictName="gdlx"
                    @change="changeGdxxSums"
                  />
                  <div v-else class="sums-column">
                    <div class="" v-for="(value, key) in gdxxSums" :key="key">
                      {{ value.name }}
                    </div>
                    <div>合计</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="gdmc" label="股东名称">
                <template #default="scope">
                  <el-input
                    v-if="scope.$index < gdxxData.length - 1"
                    v-model="scope.row.gdmc"
                  />
                  <div v-else></div>
                </template>
              </el-table-column>
              <el-table-column prop="cgbl" label="持股比例（%）" width="180">
                <template #default="scope">
                  <el-input
                    v-if="scope.$index < gdxxData.length - 1"
                    v-model="scope.row.cgbl"
                    :min="0"
                    :max="99999.99"
                    controls-position="right"
                    @blur="changeGdxxSums"
                  />
                  <div v-else class="sums-column">
                    <div class="" v-for="(value, key) in gdxxSums" :key="key">
                      {{ value.cgbl }}%
                    </div>
                    <div>{{ getObjSums(gdxxSums, "cgbl") }}%</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="cze" label="出资额（万元）" width="180">
                <template #default="scope">
                  <el-input
                    v-if="scope.$index < gdxxData.length - 1"
                    v-model="scope.row.cze"
                    :min="0"
                    :max="99999999999.99999999"
                    controls-position="right"
                    @blur="changeGdxxSums"
                  />
                  <div v-else class="sums-column">
                    <div class="" v-for="(value, key) in gdxxSums" :key="key">
                      {{ value.cze }}万元
                    </div>
                    <div>{{ getObjSums(gdxxSums, "cze") }}万元</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="yjzczb"
                label="应缴注册资本（万元）"
                width="180"
              >
                <template #default="scope">
                  <el-input
                    v-if="scope.$index < gdxxData.length - 1"
                    v-model="scope.row.yjzczb"
                    :min="0"
                    :max="99999999999.99999999"
                    controls-position="right"
                    @blur="changeGdxxSums"
                  />
                  <div v-else class="sums-column">
                    <div class="" v-for="(value, key) in gdxxSums" :key="key">
                      {{ value.yjzczb }}万元
                    </div>
                    <div>{{ getObjSums(gdxxSums, "yjzczb") }}万元</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="ycxmzbj"
                label="应出项目资本金（万元）"
                width="180"
              >
                <template #default="scope">
                  <el-input
                    v-if="scope.$index < gdxxData.length - 1"
                    v-model="scope.row.ycxmzbj"
                    :min="0"
                    :max="99999999999.99999999"
                    controls-position="right"
                    @blur="changeGdxxSums"
                  />
                  <div v-else class="sums-column">
                    <div class="" v-for="(value, key) in gdxxSums" :key="key">
                      {{ value.ycxmzbj }}万元
                    </div>
                    <div>{{ getObjSums(gdxxSums, "ycxmzbj") }}万元</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="hzfqk" label="合作方情况">
                <template #default="scope">
                  <el-input
                    v-if="scope.$index < gdxxData.length - 1"
                    v-model="scope.row.hzfqk"
                  />
                  <div v-else></div>
                </template>
              </el-table-column>
              <el-table-column prop="bz" label="备注">
                <template #default="scope">
                  <el-input
                    v-if="scope.$index < gdxxData.length - 1"
                    v-model="scope.row.bz"
                  />
                  <div v-else></div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="60">
                <template #default="scope">
                  <el-button
                    v-if="scope.$index < gdxxData.length - 1"
                    link
                    type="danger"
                    size="small"
                    @click="deleteGdxx(scope.$index)"
                    >删除</el-button
                  >
                  <div v-else></div>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
          <el-collapse-item
            title="项目必要性及可行性"
            name="项目必要性及可行性"
          >
            <el-form-item label="建设内容及规模" prop="jsnrjgm">
              <el-input
                v-model="formData.jsnrjgm"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 5 }"
              />
            </el-form-item>
            <el-form-item label="项目必要性" prop="xmbyx">
              <el-input
                v-model="formData.xmbyx"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 5 }"
              />
            </el-form-item>
            <el-form-item label="项目可行性" prop="xmkxx">
              <el-input
                v-model="formData.xmkxx"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 5 }"
              />
            </el-form-item>
          </el-collapse-item>
          <el-collapse-item title="立项资料" name="立项资料">
            <el-form-item label="相关支撑材料" :label-width="100">
              <FileUploader v-model="zcclData" />
            </el-form-item>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { inject, ref } from "vue";
import CommonSelector from "@/components/CommonSelector.vue";
import FileUploader from "@/components/FileUploader/index.vue";

const lxBasicFormRef = ref();

const requiredInput = (msg) => ({
  required: true,
  message: `请输入${msg}`,
  trigger: "blur",
});
const requiredSelect = (msg) => ({
  required: true,
  message: `请选择${msg}`,
  trigger: [],
});

const formRules = {
  projectName: [requiredInput("项目名称")],
  projectCode: [requiredInput("项目编号")],
  sfzjc: [requiredSelect("是否再决策")],
  sfnjlhtxm: [requiredSelect("是否能建联合体项目")],
  njsfqtf: [requiredSelect("能建是否牵头方")],
  tzzt: [requiredInput("投资主体")],
  zyfzy: [requiredSelect("主业/非主业")],
  zsqy: [requiredInput("直属企业")],
  sfnjzdhzytz: [requiredSelect("是否能建重大或重要投资项目")],
  sfzzjc: [requiredSelect("是否自主决策")],
  lxspdw: [requiredInput("立项审批单位")],
  cwbblx: [requiredSelect("财务报表类型")],
  zfsphzbajb: [requiredSelect("政府审批（核准、备案）级别")],
  sflxbqyscx: [requiredSelect("是否履行标前预审程序")],
  jnw: [requiredSelect("境内/外")],
  sjnzjjw: [requiredSelect("省（境内）/洲际（境外）")],
  dsjngjjw: [requiredSelect("地市（境内）/国家（境外）")],
  qxjngjjw: [requiredSelect("区县(境内)/国家(境外)")],
  xmqy: [requiredSelect("项目区域")],
  sfydylyxgj: [requiredSelect("是否一带一路沿线国家")],
  bizhong: [requiredSelect("币种")],
  huilv: [requiredInput("汇率")],
  xmjsqy: [requiredSelect("项目建设期")],
  yynxn: [requiredSelect("运营年限")],
  xmhzqn: [requiredSelect("项目合作期")],
  xmkgsjyj: [requiredSelect("项目开工时间（预计）")],
  xmjgsjyj: [requiredSelect("项目交工时间（预计）")],
  tzsxyjfl: [requiredSelect("投资属性一级分类")],
  tzsxejfl: [requiredSelect("投资属性二级分类")],
  tzbk: [requiredSelect("投资板块")],
  subsector: [requiredSelect("细分板块")],
  tzmdyjfl: [requiredSelect("投资目的一级分类")],
  tzmdejfl: [requiredSelect("投资目的二级分类")],
  sxfl: [requiredSelect("四新分类")],
  bjfl: [requiredSelect("2+9布局分类")],
  gmjjhy: [requiredSelect("国民经济行业")],
  sfxbgjfzggwhswbhz: [requiredSelect("是否须报国家发展改革委和商务部核准")],
  sfgjldjq: [requiredSelect("是否国家领导见签")],
  sfjntbjgl: [requiredSelect("是否境内特别监管类")],
  jsnrjgm: [requiredInput("建设内容及规模")],
  xmbyx: [requiredInput("项目必要性")],
  xmkxx: [requiredInput("项目可行性")],
};

const validate = () => {
  return lxBasicFormRef.value?.validate();
};

defineExpose({ validate });

const {
  formData,
  isPreview,
  isBulu,
  formDisabled,
  activeCollapse,
  swlzbData,
  gdxxData,
  gdxxSums,
  zcclData,
  zcclSelectIds,
  downloadFile,
  ElMessageBox,
  changeJnw,
  changeSzj,
  changeDsgj,
  changeTzsxyjfl,
  changeTzsxtzbk,
  changeTzmdyjfl,
  changeTzznyjfl,
  addSwlzb,
  deleteSwlzb,
  addGdxx,
  deleteGdxx,
  changeGdxxSums,
  getObjSums,
  gdxxIndexMethod,
  addZcclFile,
  deleteZccl,
  zcclSelectionChange,
  multiDeleteZccl,
  szjList,
  dsgjList,
  qxgjList,
  tzsxejflList,
  tzsxxfbkList,
  tzmdejflList,
  tzznejflList,
  gmjjhyList,
  gmjjhyProps,
  windowConfig,
  token,
  uploadDialogVisible,
} = inject("lxShared");
</script>

<style scoped>
.tab-content :deep(.el-form-item__error) {
  display: none;
}
</style>
