<template>
  <div class="add-project-container">
    <div class="add-project-content" v-loading="loading">
      <routerBack />

      <div class="tabs-content">
        <div class="project-tab-content">
          <div class="tab-content">
            <el-form :model="formData" :label-width="120" :disabled="isPreview">
              <el-collapse v-model="activeCollapse">
                <el-collapse-item title="基本信息" name="基本信息">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="项目信息" required>
                        <el-select
                          v-model="formData.projectId"
                          placeholder="请选择"
                          no-data-text="暂无数据"
                        >
                          <el-option
                            v-for="item in projectList"
                            :key="item.id"
                            :label="item.projectName"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="项目名称">
                        <el-input v-model="formData.projectName" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="直属企业">
                        <el-input v-model="formData.zsqy" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="项目公司全称">
                        <el-input v-model="formData.xmgsqc" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="境内/外">
                        <el-select
                          v-model="formData.jnw"
                          placeholder="请选择"
                          no-data-text="暂无数据"
                          @change="changeJnw"
                        >
                          <el-option
                            v-for="item in jnwList"
                            :key="item.key"
                            :label="item.name"
                            :value="item.key"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item
                        label="省（境内）/洲际（境外）"
                        :label-width="180"
                      >
                        <el-select
                          v-model="formData.sjnzjjw"
                          placeholder="请选择"
                          no-data-text="暂无数据"
                          @change="changeSzj"
                        >
                          <el-option
                            v-for="item in szjList"
                            :key="item.key"
                            :label="item.name"
                            :value="item.key"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item
                        label="地市（境内）/国家（境外）"
                        :label-width="190"
                      >
                        <el-select
                          v-model="formData.dsjngjjw"
                          placeholder="请选择"
                          no-data-text="暂无数据"
                        >
                          <el-option
                            v-for="item in dsgjList"
                            :key="item.key"
                            :label="item.name"
                            :value="item.key"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="投资板块">
                        <el-tree-select
                          v-model="formData.tzbk"
                          :data="tzbkList"
                          node-key="id"
                          :props="tzbkProps"
                          placeholder="请选择"
                          render-after-expand
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="项目类型" label-width="180">
                        <el-select
                          v-model="formData.xmlx"
                          placeholder="请选择"
                          no-data-text="暂无数据"
                        >
                          <el-option
                            v-for="item in xmlxList"
                            :key="item.key"
                            :label="item.name"
                            :value="item.key"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="本集团股比（%）" label-width="190">
                        <el-input-number
                          v-model="formData.bjtgb"
                          :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="24">
                      <el-form-item
                        label="风险处置情况"
                        :label-width="100"
                      ></el-form-item>
                      <div class="tab-handle">
                        <el-button
                          type="primary"
                          size="small"
                          @click="exportTemplate"
                          style="margin-left: 12px"
                          >模版导出</el-button
                        >
                        <el-button
                          type="primary"
                          size="small"
                          @click="exportTableData"
                          :disabled="!fxczqkData.length"
                          >导出</el-button
                        >

                        <el-upload
                          ref="uploadRef"
                          class="upload-demo"
                          action=""
                          :auto-upload="false"
                          :on-change="importTableData"
                          :show-file-list="false"
                          accept=".xls, .xlsx"
                        >
                          <template #trigger>
                            <el-button
                              type="primary"
                              size="small"
                              style="margin: 0 12px"
                              >导入</el-button
                            >
                          </template>
                        </el-upload>
                        <el-button
                          type="primary"
                          size="small"
                          @click="addFxczqk"
                          >新增</el-button
                        >
                      </div>
                      <el-table
                        :data="fxczqkData"
                        style="width: 100%"
                        empty-text="暂无数据"
                        border
                      >
                        <el-table-column type="index" width="60" />
                        <el-table-column prop="nd" label="年度" width="260">
                          <template #default="scope">
                            <el-date-picker
                              v-model="scope.row.nd"
                              type="month"
                              placeholder="请选择"
                              value-format="YYYY-MM"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="mbfj"
                          label="目标分解"
                          width="240"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.mbfj"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="jzqk"
                          label="进展情况"
                          width="240"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.jzqk"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="fxdj"
                          label="风险等级"
                          width="240"
                        >
                          <template #default="scope">
                            <el-input v-model="scope.row.fxdj" />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="fxfl"
                          label="风险分类"
                          width="240"
                        >
                          <template #default="scope">
                            <el-input v-model="scope.row.fxfl" />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="fxgk"
                          label="风险概况"
                          width="240"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.fxgk"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="kzcs"
                          label="控制措施"
                          width="240"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.kzcs"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="czjz"
                          label="处置进展"
                          width="240"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.czjz"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="yjzgwcsj"
                          label="预计整改完成时间"
                          width="260"
                        >
                          <template #default="scope">
                            <el-date-picker
                              v-model="scope.row.yjzgwcsj"
                              type="datetime"
                              placeholder="请选择"
                              value-format="YYYY-MM-DD HH:mm:ss"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="fxsjje"
                          label="风险涉及金额"
                          width="260"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.fxsjje"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="cxgl"
                          label="出险概率"
                          width="240"
                        >
                          <template #default="scope">
                            <el-input v-model="scope.row.cxgl" />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="fxfxfs"
                          label="风险发现方式"
                          width="240"
                        >
                          <template #default="scope">
                            <el-input v-model="scope.row.fxfxfs" />
                          </template>
                        </el-table-column>
                        <el-table-column label="操作" width="60" fixed="right">
                          <template #default="scope">
                            <el-button
                              link
                              type="danger"
                              size="small"
                              @click="deleteFxczqk(scope.$index)"
                              >删除</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item
                        label="可能发生的潜在风险"
                        label-width="140"
                      >
                        <el-input v-model="formData.knfsqzfx" type="textarea" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="是否当期新增">
                        <el-radio-group v-model="formData.sfdqxz">
                          <el-radio value="1">是</el-radio>
                          <el-radio value="2">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="责任人" label-width="140">
                        <el-input v-model="formData.zrr" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="联系方式">
                        <el-input v-model="formData.lxfs" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>
              </el-collapse>
            </el-form>
          </div>
        </div>
      </div>
      <div class="add-project-header">
        <div class="header-left"></div>
        <div class="header-right">
          <el-button type="default" @click="backClick">返回</el-button>
          <template v-if="!loading && !isPreview">
            <el-button type="primary" @click="saveClick">保存</el-button>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, getCurrentInstance, h } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/stores/user.js";
import {
  getTableFileData,
  exportTableFile,
} from "../../common/tableFileHandle";
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
let token = ref("");
token.value = userStore.authToken || sessionStorage.getItem("authToken") || "";
import routerBack from "@/components/common/routerBack.vue";

const activeCollapse = reactive(["基本信息", "已发现或暴露的风险"]);
let formData = reactive({});
let loading = ref(false);
let isPreview = !!route.query.isPreview;
let riskId = route.query.riskId;
const getRiskInfo = () => {
  loading.value = true;
  proxy.$post({
    url: "/api/project/getZdfxInfo",
    data: {
      id: riskId,
    },
    callback: (res) => {
      loading.value = false;
      Object.assign(formData, {
        ...res,
        jnw: res.jnw ? res.jnw.toString() : undefined,
        sjnzjjw: res.sjnzjjw ? res.sjnzjjw.toString() : undefined,
        dsjngjjw: res.dsjngjjw ? res.dsjngjjw.toString() : undefined,
        xmlx: res.xmlx ? res.xmlx.toString() : undefined,
      });
      szjList.value =
        jnwList.filter((item) => item.key == res.jnw)[0]?.children || [];
      dsgjList.value =
        szjList.value.filter((item) => item.key == res.sjnzjjw)[0]?.children ||
        [];
      Object.assign(fxczqkData.value, res.zdfxczs);
    },
  });
};
// 项目列表
let projectList = ref([]);
const getProjectData = (params = {}) => {
  proxy.$post({
    url: "/api/project/listProject",
    data: {
      page: 1,
      pagesize: 1000,
      attributes: [],
      menuType: "xmjc",
      ...params,
    },
    callback: (data) => {
      projectList.value = data.rows;
    },
  });
};
let jnwList = reactive([]); // 境内/外 // 级联
let szjList = ref([]); // 省（境内）/洲际（境外） // 级联
let dsgjList = ref([]); // 地市（境内）/国家（境外） // 级联
let tzbkList = ref([]); // 投资板块
let tzbkProps = {
  label: "name",
};
let xmlxList = ref([]); //项目类型
onMounted(() => {
  getProjectData();
  let resourceData = JSON.parse(sessionStorage.getItem("resourceData"));
  jnwList = resourceData.dqlx;
  tzbkList = resourceData.tzbk;
  xmlxList = resourceData["zdfx-type"];
  if (riskId) {
    getRiskInfo();
  }
});
const changeJnw = (val) => {
  if (val || val === 0) {
    let selectData = jnwList.filter((item) => item.key == val);
    szjList.value = (selectData[0] && selectData[0].children) || [];
    dsgjList.value = [];
    delete formData.sjnzjjw;
    delete formData.dsjngjjw;
  }
};
const changeSzj = (val) => {
  if (val || val === 0) {
    let selectData = szjList.value.filter((item) => item.key == val);
    dsgjList.value = (selectData[0] && selectData[0].children) || [];
    delete formData.dsjngjjw;
  }
};
// 风险处置情况
let fxczqkData = ref([]);
const addFxczqk = () => {
  fxczqkData.value.push({});
};
const deleteFxczqk = (index) => {
  ElMessageBox.confirm("确认删除该项？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    fxczqkData.value.splice(index, 1);
  });
};
const tableColumns = [
  {
    prop: "nd",
    label: "年度",
  },
  {
    prop: "mbfj",
    label: "目标分解",
  },
  {
    prop: "jzqk",
    label: "进展情况",
  },
  {
    prop: "fxdj",
    label: "风险等级",
  },
  {
    prop: "fxfl",
    label: "风险分类",
  },
  {
    prop: "fxgk",
    label: "风险概况",
  },
  {
    prop: "kzcs",
    label: "控制措施",
  },
  {
    prop: "czjz",
    label: "处置进展",
  },
  {
    prop: "yjzgwcsj",
    label: "预计整改完成时间",
  },
  {
    prop: "fxsjje",
    label: "风险涉及金额",
    type: "number",
  },
  {
    prop: "cxgl",
    label: "出险概率",
  },
  {
    prop: "fxfxfs",
    label: "风险发现方式",
  },
];

const importTableData = (file) => {
  getTableFileData(file, tableColumns).then((res) => {
    fxczqkData.value = fxczqkData.value.concat(res);
  });
};
const exportTableData = () => {
  exportTableFile(fxczqkData.value, tableColumns, "", "风险处置情况");
};
const exportTemplate = () => {
  exportTableFile([], tableColumns, "", "风险处置情况模版");
};

const backClick = () => {
  router.back(-1);
};
const saveClick = () => {
  if (!formData.projectId) {
    return ElMessage.warning("请选择项目信息");
  }
  let url = formData.id ? "updateZdfx" : "createZdfx";
  proxy.$post({
    url: "/api/project/" + url,
    data: {
      ...formData,
      zdfxczs: fxczqkData.value,
    },
    callback: (data) => {
      router.back(-1);
    },
  });
};
</script>
<style lang="less">
.add-project-header {
  margin-bottom: 10px;
}
</style>
