<template>
	<div>
		<div class="g_bg_f g_br_4">
			<div class="g_pt_18 g_pl_24 g_pb_12 g_pr_24 g_fw_600 g_flex_row_between">
				<div class="g_fw_600">基本信息</div>
				<div>
					<a-button type="primary" @click="editStatus = true">编辑</a-button>
				</div>
			</div>
			<a-divider class="g_mt_0 g_mb_24" />
			<div class="g_pl_24 g_pr_24 g_fs_14 g_pb_32" style="width: 630px">
				<div class="g_flex_row_start flex_nr g_mb_20 g_w_all">
					<div class="g_w_400">
						<span class="g_c_6">主体：</span>
						<span>{{ showBaseInfo.name || "-" }}</span>
					</div>
					<div>
						<span class="g_c_6">当前估值：</span>
						<span>{{ showBaseInfo.appraisement || "-" }}</span>
					</div>
				</div>
				<div class="g_flex_row_start flex_nr g_w_all">
					<div class="g_w_400">
						<span class="g_c_6">当前总股本：</span>
						<span>{{ showBaseInfo.capitalStock || "-" }}</span>
					</div>
					<div>
						<span class="g_c_6">每股价格：</span>
						<span>{{ showBaseInfo.unitPrice || "-" }}</span>
					</div>
				</div>
			</div>
		</div>

		<a-modal v-model:open="editStatus" title="编辑信息" width="640px" centered :destroyOnClose="true" :forceRender="true">
			<div class="g_pt_30 g_pb_10">
				<a-form :model="baseInfo" ref="baseInfoForm" name="basic" autocomplete="off" @finish="submitBaseInfo" @change="showInfo" @validate="validateForm" :label-col="{ style: { width: '150px' } }" lab :wrapper-col="{ span: 15 }">
					<a-form-item name="name" class="" :rules="[{ required: true, message: '请输入主体' }]">
						<template #label>
							<div class="g_c_6">主体</div>
						</template>
						<a-input placeholder="请输入主体" v-model:value="baseInfo.name" class="" />
					</a-form-item>
					<a-form-item name="appraisement" class=" " :rules="[{ required: true, message: '请输入当前估值' }]">
						<template #label>
							<div class="g_c_6">当前估值</div>
						</template>
						<a-input placeholder="请输入当前估值" v-model:value="baseInfo.appraisement" class="" />
					</a-form-item>
					<a-form-item name="capitalStock" class="" :rules="[{ required: true, message: '请输入当前总股本' }]">
						<template #label>
							<div class="g_c_6">当前总股本</div>
						</template>
						<a-input placeholder="请输入当前总股本" v-model:value="baseInfo.capitalStock" class="" />
					</a-form-item>
					<a-form-item name="unitPrice" class=" " :rules="[{ required: true, message: '请输入每股价格' }]">
						<template #label>
							<div class="g_c_6">每股价格</div>
						</template>
						<a-input placeholder="请输入每股价格" v-model:value="baseInfo.unitPrice" class="" />
					</a-form-item>
				</a-form>
			</div>
			<template #footer>
				<a-button @click="noEdit">取消</a-button>
				<a-button @click="singleSubmit" type="primary">确定</a-button>
			</template>
		</a-modal>
		<div class="g_bg_f g_br_4 g_mt_16">
			<div class="g_pt_18 g_pl_24 g_pr_24 g_pb_12 g_flex_row_between">
				<div class="g_fw_600">股权结构</div>
				<div>
					<a href="//a.matripe.com.cn/api_stock/admin/stock/structure/download">
						<a-button> <DownloadOutlined class="" />导出模版</a-button>
					</a>
					<a-upload :action="baseUrl + '/admin/stock/structure/import'" accept=".xlsx, .xls, .xlsm, .xltx, .xltm" @change="getFileInfo">
						<a-button type="primary" class="g_ml_10"><PlusOutlined />导入文件</a-button>
					</a-upload>
				</div>
			</div>
			<a-divider class="g_mt_0 g_mb_20" />
			<div class="g_flex_row_between g_pl_24 g_pr_24 g_pb_20">
				<a-table :columns="columns" :data-source="stockInfoList" size="middle" :pagination="false" class="g_clear_scroll" :scroll="{ x: '' }">
					<template #headerCell="{ column }">
						<template v-if="column.key === 'name'">
							<div class="g_fw_600">姓名</div>
						</template>
					</template>
				</a-table>
			</div>
		</div>
		<div class="g_bg_f g_br_4 g_mt_16">
			<div class="g_pt_18 g_pl_24 g_pr_24 g_pb_12 g_flex_row_between">
				<div class="g_fw_600">增资扩股变化</div>
				<div>
					<a href="//a.matripe.com.cn/api_stock/admin/stock/change/download">
						<a-button> <DownloadOutlined class="" />导出模版</a-button>
					</a>
					<a-upload :action="baseUrl + '/admin/stock/change/import'" accept=".xlsx, .xls, .xlsm, .xltx, .xltm" @change="getMoreInfo">
						<a-button type="primary" class="g_ml_10"><PlusOutlined />导入文件</a-button>
					</a-upload>
				</div>
			</div>
			<a-divider class="g_mt_0 g_mb_20" />
			<div class="g_flex_row_between g_pl_24 g_pr_24 g_pb_20">
				<a-table :columns="columns1" :data-source="stockMoreList" size="middle" :pagination="false" class="g_clear_scroll" :scroll="{ x: '' }">
				
					<template #bodyCell="{ column, record }">
						<template v-if="column.key === 'state'">
							<div class="g_c_main">删除</div>
						</template>
					</template>
				</a-table>
			</div>
		</div>
	</div>
</template>

<script setup>
import request from "../../utils/request"; // 引入基础路径

import { DownloadOutlined, PlusOutlined } from "@ant-design/icons-vue";
import { ref, onMounted, getCurrentInstance, watch, onBeforeUnmount } from "vue";
import { message } from "ant-design-vue";
import { getProjectInfoApi, updateProjectInfoApi, importStockModelApi, getStockInfoListApi, getStockMoreListApi } from "../../api/userList/porjectInfo";
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G;
import { useRouter, useRoute } from "vue-router";
const router = useRouter(); // 应用路由
const route = useRoute();
import { useStore } from "@/stores/counter";
const storeJS = useStore();
onMounted(() => {
	getProjectInfo();
	getStockInfoList();
	getStockMoreList();
});
const baseInfo = ref({});
const showBaseInfo = ref({});
const baseInfoForm = ref(null);

const editStatus = ref(false);
const stockInfoList = ref([]);
const stockMoreList = ref([]);

const submitBaseInfo = (e) => {
	console.log(e);
};
const validateForm = (e) => {
	console.log(e);
	console.log(showBaseInfo.value);
};
const noEdit = (e) => {
	editStatus.value = false;
	baseInfo.value = JSON.parse(JSON.stringify(showBaseInfo.value));
};

let columns = ref([
	{
		title: "序号",
		key: "rank",
		dataIndex: "rank",
		width: "50px",
		ellipsis: true,
		fixed: "left",
	},
	{
		title: "姓名",
		key: "name",
		dataIndex: "name",
		// width: "220px",
		ellipsis: true,
		fixed: "left",
	},

	{
		title: "股数",
		key: "num",
		dataIndex: "num",
		width: "300px",
		// minWidth: 100,
		ellipsis: true,
	},
	{
		title: "百分比",
		key: "percent",
		dataIndex: "percent",
		width: "300px",
		// minWidth: 100,
		ellipsis: true,
	},
]);

let columns1 = ref([
	{
		title: "序号",
		key: "rank",
		dataIndex: "rank",
		width: "50px",
		ellipsis: true,
		// fixed: "left",
	},
	{
		title: "融资轮次",
		key: "name",
		dataIndex: "name",
		// width: "220px",
		ellipsis: true,
		customRender: (record) => {
			return record.record.name || "-";
		},
		// fixed: "left",
	},

	{
		title: "股本数",
		key: "capitalStock",
		dataIndex: "capitalStock",
		width: "100px",
		customRender: (record) => {
			return record.record.capitalStock || "-";
		},
		// minWidth: 100,
		ellipsis: true,
	},
	{
		title: "估值",
		key: "appraisement",
		dataIndex: "appraisement",
		width: "100px",
		customRender: (record) => {
			return record.record.appraisement || "-";
		},
		// minWidth: 100,
		ellipsis: true,
	},
	{
		title: "股价",
		key: "price",
		dataIndex: "price",
		width: "100px",
		// minWidth: 100,
		customRender: (record) => {
			return record.record.price || "-";
		},
		ellipsis: true,
	},
	{
		title: "增资金额",
		key: "additionalShare",
		dataIndex: "additionalShare",
		width: "100px",
		customRender: (record) => {
			return record.record.additionalShare || "-";
		},
		// minWidth: 100,
		ellipsis: true,
	},
	// {
	// 	title: "操作",
	// 	key: "state",
	// 	dataIndex: "state",
	// 	width: "60px",
	// 	// minWidth: 100,
	// 	ellipsis: true,
	// },
]);
/**
 * 获取股权结构列表
 */
const getStockInfoList = () => {
	getStockInfoListApi().then((res) => {
		console.log(res);
		stockInfoList.value = res.data;
		stockInfoList.value.forEach((item, index) => {
			item.rank = index + 1;
		});
	});
};
/**
 * 获取增资扩股列表
 */
const getStockMoreList = () => {
	getStockMoreListApi().then((res) => {
		console.log(res);
		stockMoreList.value = res.data;
		stockMoreList.value.forEach((item, index) => {
			item.rank = index + 1;
		});
	});
};

const getProjectInfo = () => {
	getProjectInfoApi().then((res) => {
		console.log(res);
		showBaseInfo.value = JSON.parse(JSON.stringify(res.data));
		baseInfo.value = res.data;
	});
};

const showInfo = (e) => {
	console.log(e);
};
/**
 * 表单提交事件
 */
const singleSubmit = () => {
	baseInfoForm.value
		.validate()
		.then((value) => {
			// console.log(value);
			value.id = showBaseInfo.value.id;
			updateProjectInfoApi(value).then((res) => {
				// console.log(res);
				message.success("修改成功");
				editStatus.value = false;
				getProjectInfo();
			});
		})
		.catch((err) => {
			console.log(err);
		});
};
// 股权结构excel
let stockList = ref([]);
let baseUrl = ref(request.userCustom);
/**
 * 上传股权结构文件
 */
const getFileInfo = (info) => {
	console.log(info);
	if (info.file.response) {
		if (info.file.response.code == 200) {
			getStockInfoList();
			message.success("导入成功");
		}
	}
};
/**
 * 上传增资扩股文件
 */
const getMoreInfo = (info) => {
	console.log(info);
	if (info.file.response) {
		if (info.file.response.code == 200) {
			getStockMoreList();
			message.success("导入成功");
		}
	}
};
</script>

<style lang="less" scoped>
/deep/ .ant-upload-list-text {
	display: none !important;
}
</style>
