{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="breadcrumb"}
<span class="layui-breadcrumb">
  <a href="http://www.meteteme.com/" target="_blank">江苏美天科技</a>
  <a><cite>年度计划</cite></a>
</span>
{/block} {block name="body"}
<div class="table-content p-3">
  <div class="table_bar sticky-bar">
    <div class="layui-form-bar border-t border-x">
      <button class="layui-btn layui-btn-sm add-new">+ 新建计划</button>
      <button class="layui-btn layui-btn-sm" id="refresh-btn">刷新</button>
      <button class="layui-btn layui-btn-sm" id="batch_delete">批量删除</button>
    </div>
    <div class="cateselect layui-form-bar border-x">
      <form class="layui-form" action="" id="filter-form">
        <div class="layui-form-item">
          <label class="layui-form-label">计划年份</label>
          <div class="layui-input-inline">
            <select name="year" lay-verify=""></select>
          </div>
          <label class="layui-form-label">重要程度</label>
          <div class="layui-input-inline">
            <select name="important" lay-verify="">
              <option value="">请选择</option>
              <option value="1">★</option>
              <option value="2">★★</option>
              <option value="3">★★★</option>
              <option value="4">★★★★</option>
              <option value="5">★★★★★</option>
            </select>
          </div>
          <label class="layui-form-label">项目类型</label>
          <div class="layui-input-inline">
            <select name="cate" lay-verify=""></select>
          </div>
          <label class="layui-form-label">负责人</label>
          <div class="layui-input-inline">
            <input class="layui-input search-input" id="search-responsible" type="text" placeholder="请输入负责人">
          </div>

        </div>
        <div class="layui-form-item">
          <div style="width: 100%;height: 10px;"></div>
          <label class="layui-form-label">项目名称</label>
          <div class="layui-input-inline">
            <input class="layui-input search-input" id="search-name" type="text" placeholder="请输入项目名称">
          </div>
          <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="filterSearch" id="search-btn">筛选</button>
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="filterSearch"
              id="search-reload">清除</button>
          </div>

        </div>
      </form>
    </div>
  </div>
  <table class="layui-hide" id="plan" lay-filter="plan"></table>
  <span id="total-price"></span>
</div>
{/block}

<!-- 脚本 -->
{block name="script"}


<script>
  const moduleInit = ["tool", "gouguEdit", "gouguComment"];

  function gouguInit() {
    var table = layui.table;
    var tool = layui.tool;
    var dropdown = layui.dropdown;
    var $ = layui.jquery;
    var layer = layui.layer;

    // 刷新按钮
    $("#refresh-btn").on("click", function () {
      location.reload();
    });

    //新增计划按钮
    $(".add-new").on("click", function () {
      tool.open("/plan/index/add");
    });

    layui.table.on('checkbox(plan)', function (obj) {
      var checkStatus = layui.table.checkStatus('plan');
      var data = checkStatus.data;
      // 修改开始：计算合计金额并显示
      var totalPrice = data.reduce((acc, curr) => acc + parseFloat(curr.price || 0), 0).toFixed(2); // 确保结果为两位小数
      document.getElementById('total-price').innerText = '合计金额：￥' + totalPrice;
      // 修改结束
    });

    //获取计划年份
    function getPlanYear() {
      $.get("/plan/index/getplanyear", function (data) {
        var selectYear = $("select[name='year']");
        selectYear.empty(); // 清空下拉框
        selectYear.append('<option value=""></option>'); // 添加空选项
        data.data.forEach(function (year) {
          selectYear.append('<option value="' + year + '">' + year + '</option>'); // 添加年份选项
        });
        layui.form.render('select'); // 重新渲染下拉框
      });
    }

    // 调用计划年份
    getPlanYear();

    //获取项目类型
    function getprojectcate() {
      $.get("/plan/index/getprojectcate", function (data) {
        var selectCate = $("select[name='cate']");
        selectCate.empty(); // 清空下拉框
        selectCate.append('<option value=""></option>'); // 添加空选项
        data.data.forEach(function (cate) {
          selectCate.append('<option value="' + cate.id + '">' + cate.cate + '</option>'); // 修改为 cate.id
        });
        layui.form.render('select'); // 重新渲染下拉框
      });
    }

    // 调用项目类型
    getprojectcate();


    // 删除单条数据
    table.on("tool(plan)", function (obj) {
      var data = obj.data;
      if (obj.event === "delete") {
        layui.layer.confirm(
          "确定删除该计划吗？",
          { icon: 3, title: "提示" },
          function (index) {
            $.post(
              "/plan/index/delete",
              { id: data.id },
              function (res) {
                if (res.code === 0) {
                  // layui.layer.msg("删除成功");
                  layui.layer.msg(res.msg);
                  obj.del(); // 删除表格中的对应行数据
                } else {
                  // layui.layer.msg("删除失败");
                  layui.layer.msg(res.msg);
                }
              }
            );
            layui.layer.close(index);
          }
        );
      }
    });

    //批量删除数据
    $("#batch_delete").on("click", function () {
      var checkStatus = table.checkStatus('plan');
      var data = checkStatus.data;
      var ids = data.map(item => item.id);

      if (ids.length === 0) {
        layui.layer.msg("请选择要删除的数据");
        return;
      }

      layui.layer.confirm(
        "确定删除选中的计划吗？",
        { icon: 3, title: "提示" },
        function (index) {
          $.post(
            "/plan/index/batch_delete",
            { ids: ids },
            function (res) {
              if (res.code === 0) {
                layui.layer.msg("批量删除成功");
                loadTableData(); // 重新加载表格数据
              } else {
                layui.layer.msg(res.msg);
              }
            }
          );
          layui.layer.close(index);
        }
      );
    });

    //查看详情唤醒view界面
    table.on('tool(plan)', function (obj) {
      var data = obj.data; // 获取当前行的数据
      if (obj.event === 'view') {
        var id = data.id; // 获取当前行数据的id
        // 使用layer弹出层来显示详情页面
        layui.layer.open({
          type: 2, // iframe层
          title: '计划详情',
          shadeClose: true,
          shade: 0.8,
          area: ['70%', '90%'], // 宽高
          content: '/plan/index/view/id/' + id  // 
        });
      }
    });

    //重载表格
    function loadTableData() {
      layui.pageTable.reload();
    }

    //渲染表格
    layui.pageTable = layui.table.render({
      elem: "#plan",
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '计划列表',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      cellMinWidth: 80,
      url: "/plan/index/index", // 数据接口
      page: true, 
      limit: 50,
      totalRow: true,
      cols: [
        [
          { type: 'checkbox' },
          { field: 'id', width: 80, title: '编号', sort: true, align: "center", totalRowText: '合计：' },
          {
            field: "year",
            title: "计划年份",
            align: "center",
            width: 80,
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span class="a1-' + d.year + '">' + d.year + "</span>";
              return html;
            },
          },
          {
            field: "name",
            title: "项目名称",
            width: 240,
            align: "center",
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span class="a1-' + d.name + '">' + d.name + "</span>";
              return html;
            },
          },
          {
            field: "cate",
            title: "项目类型",
            align: "center",
            width: 80,
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span class="a1-' + d.cate + '">' + d.cate + "</span>";
              return html;
            },
          },
          {
            field: "important",
            title: "重要程度",
            width: 80,
            align: "center",
            rowspan: 2,
            templet: function (d) {
              var stars = "";
              for (var i = 0; i < d.important; i++) {
                stars += "★";
              }
              return '<span class="important-' + d.important + '">' + stars + "</span>";
            },
          },
          {
            field: "status",
            title: "项目状态",
            width: 80,
            align: "center",
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span class="layui-btn layui-btn-xs a1-' + d.status_id + '">' + d.status + "</span>";
              return html;
            },
          },
          {
            field: "price",
            title: "项目金额",
            width: 120,
            align: "center",
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span class="a1-' + d.price + '">' + d.price + "</span>";
              return html;
            },
          },
          {
            field: "responsible",
            title: "负责人",
            align: "center",
            width: 120,
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span class="a1-' + d.responsible + '">' + d.responsible + "</span>";
              return html;
            },
          },
          {
            field: "start_time",
            title: "开始时间",
            align: "center",
            width: 120,
            rowspan: 2,
            templet: function (d) {
              if (d.start_time) {
                var date = new Date(d.start_time * 1000); // 转换时间
                var year = date.getFullYear();
                var month = ("0" + (date.getMonth() + 1)).slice(-2);
                var day = ("0" + date.getDate()).slice(-2);
                var formattedDate = year + "-" + month + "-" + day;
                var html = '<span class="a1-' + d.start_time + '">' + formattedDate + "</span>";
                return html;
              } else {
                return "待定";
              }
            },
          },
          {
            field: "end_time",
            title: "结束时间",
            align: "center",
            width: 120,
            rowspan: 2,
            templet: function (d) {
              if (d.end_time) {
                var date = new Date(d.end_time * 1000); // 转换时间
                var year = date.getFullYear();
                var month = ("0" + (date.getMonth() + 1)).slice(-2);
                var day = ("0" + date.getDate()).slice(-2);
                var formattedDate = year + "-" + month + "-" + day;
                var html = '<span class="a1-' + d.end_time + '">' + formattedDate + "</span>";
                return html;
              } else {
                return "待定";
              }
            },
          },
          {
            field: "schedule",
            title: "计划进度",
            align: "center",
            width: 180,
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span class="a1-' + d.schedule + '">' + d.schedule + "</span>";
              return html;
            },
          },
          {
            field: "remark",
            title: "备注",
            align: "center",
            rowspan: 2,
            templet: function (d) {
              if (d.remark) {
                var html = '<span class="a1-' + d.remark + '">' + d.remark + "</span>";
                return html;
              } else {
                return "";
              }
            },
          },
          {
            field: "create_time",
            title: "创建时间",
            align: "center",
            width: 180,
            rowspan: 2,
          },
          {
            fixed: 'right',
            title: "操作",
            align: "center",
            width: 220,
            minWidth: 220,
            toolbar: "#barDemo",
          },
        ],
      ],
    });
  }

</script>


<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs " id="view" lay-event="view">查看详情</a>
  <a class="layui-btn layui-btn-xs " lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="delete">删除</a>
</script>
{/block}