[需求概要]

实现一个基于网页版的 TCO(Total Cost of Ownership)总持有成本计算器，该计算器用于计算购买和租用了某些产品后在某个时间段内的每月成本是多少。

如果你自信可以 1 天内做完，请发你的报价和微信号 /手机号到微信号：Z3JudWxsNjEx (base64)

[举个例子说明需求]

有两大类产品：

一类是一次性购买产品：有产品 X, Y, Z，产品价格分别为 x, y, z （当然可能不止 X,Y,Z 三种产品）

另外一类是租用型产品：有产品 A，B，C，租金分别为 a 元 /个 /天, b 元 /个 /天, c 元 /个 /天

该 TCO 计算器的主要使用者（角色：客户）有计划购买或者租用上面两类产品中的任何一个产品：

比如客户计划在 2018-12-25 购买 100 个产品 X，单价为 x

然后客户计划在 2019-01-01 租用 500 个产品 A，单价为 a 元 /个 /天

然后客户又在 2019-06-10 租用 1000 个产品 B，单价为 b 元 /个 /天

然后客户又各种计划...等等

总之，客户可以根据自身需求计划在任何一天购买或租用任何产品。

[核心需求]

现在客户希望知道，从计划购买和租用的 [第一个月月末] 到 [最后一个月往后一年的年底] ，每个月末的总帐单费用分别是多少（该月发生的总费用）和费用详情（各个产品的费用）

比如说客户第一次购买或租用是 2018-12-25，最后一次是 2019-12-10，那么成本计算器需要显示从 2018 年 12 月底，到 2020 年 12 月底的每个月的帐单

[高级功能]

对于租用型产品，每个产品有个 [服务期] ，以天计，每个产品过了该维护期的天数后，客户可以在之后的任意日期选择停止租用相同数量的该产品（也可以选择部分或者全部保留）

比如客户在 2019-01-01 租用了 500 个产品 A，A 的保修期是 365 天，那么客户则在 2020-01-01 开始，可以选择停止租用 0-500 个中任意数量的产品 A

如果客户同时在 2019-06-01 又租用了 1000 个产品 A，那么客户在 2020-06-01 之后，可以选择停止租用的产品 A 的数量又添加 1000 个（客户可以选择不停止租用）

在这种客户在服务期到后可以选择停止租用的情况下，同 [核心需求] 一样实现每月帐单详情的功能。

[开发要求]

快速开发，功能上能精简则精简。 对技术没有要求（使用开源技术），对前端稍有要求，希望使用一些前端库（如 bootstrap)能让页面显示简洁好看些，页面配色以白色或浅蓝色(#D6E9F4)为主，在页面的显示或是元素的更新如果有平滑的过渡动画最佳，前端要求非必须。

产品的配置直接从数据库的表中读取，或是在本地另外一个文件中读取，或是在页面 js 中写死的值读取都可以，不需要单独的产品管理功能页面。

只有客户的角色作为使用者，整个全部显示内容只有一个网页。不需要登录，密码，会话等功能。

在这一个页面上实现：

1. 显示产品目录区：显示一个表格，包括：

    [产品类型]  - 一次性购买或租用
   
    [产品名]  - 自定义
   
    [型号]  - 自定义
   
    [价格]  - 小数点后 1 位的数字，单位一性购买型直接显示”元“，租用型显示”元 /个 /天“
   
    [服务期]  - 只有产品类型为租用时才显示值,单位显示“天”
   

2. 客户编辑计划区：

   2.1. 区域第一行默认有一个 [添加] 按钮，点击按钮可动态增加一行采购记录，同时 [添加] 按钮消失，该采购记录内可以选择：

     [日期]  - 使用日历选择日期的控件，只能选择当天之后的日期
   
     [产品类型]  - 可选一次购买型或租用型
   
     [产品]  -  在选择产品类型后列出产品的列表
   
     [动作]  - "购买 /租用"或"停用"
   
     [个数]  - 1 个以上的数字，如果动作选择停用，显示该日期下该产品最多可停用的数字
   

   2.2.该行右边有 [确定] 按钮，点击 [确定] 按钮后，检查各项是否已填写并合法（包括可停用数字是不是小于最多可停用数字），如果满足条件，所有选择控件不可再编辑，并且 [确定] 按钮变为 [编辑] 按钮，并且在区域的下方动态显示 [添加] 按钮，允许客户添加新的一行

   2.3. 在区域第一行 [添加] 右侧，有一个 [重置] 按钮，如果点击 [重置] 按钮，则

   2.4. 点击 [编辑] 按钮，控件恢复可编辑状态，按钮切换回 [确定]

   2.6. 每一行采购记录的可选日期不能早于上一行的已选日期 （确保从上至下是时间线往后走）

   2.5. 当有至少一行处于 [确定] 状态时，在区域的最下方显示一个 [生成付款计划] 按钮

3. 付款显示区

   3.1. 客户编辑好计划后，点击编辑计划区中的 [生成付款计划] 按钮，系统自动检查所有购买计划中的最早的日期和最晚的日期，生成最早日期月末到最晚日期的后一年年底月末的付款计划

   3.2. 网页生成一个表格，该表格内容为下

     [月份]  - 月份序号，从第一个月开始到最后一个月下一年的月份
   
     [日期]  - 该月的最后一天自然日，如 1 月显示 1 月 31 号，2 月显示 2 月 28 或 2 月 29 日
   
     [付款金额]  - 当月付款总数
   
     [详情]  - 显示各产品在当月购买或是租用的数量和费用，租用产品显示总天数
   

   3.3. 图表展示，柱状图按月显示每个月付款金额

   3.4. 若客户修改了计划，点击生成付款计划后付款显示区重新刷新并显示更新后的值（整个页面不重新刷新）