{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-normal 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">
    </div>
  </div>
  <table class="layui-hide" id="workorder" lay-filter="workorder"></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("/workorder/index/add");
    });

    //获取项目类型
    // function getprojectcate() {
    //   $.get("/workorder/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();

    //批量删除数据
    $("#batch_delete").on("click", function () {
      var checkStatus = table.checkStatus('workorder');
      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(
            "/workorder/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);
        }
      );
    });

    //查看详情、编辑、删除工单
    table.on('tool(workorder)', function (obj) {
      var data = obj.data; // 获取当前行的数据
      if (obj.event === 'view') {
        var id = data.id; // 获取当前行数据的id
        tool.open('/workorder/index/view/id/' + id, '工单详情');
      } else if (obj.event === 'edit') {
        var id = data.id;
        var status = data.status; // 获取当前行的status
        // 处理工单时带上status参数
        tool.open('/workorder/index/edit/id/' + id + '/status/' + status, '处理工单');
      } else if (obj.event === 'delete') {
        var id = data.id;
        layui.layer.confirm('确定要删除该工单吗？', {icon: 3, title: '提示'}, function(index){
          $.post(
            "/workorder/index/delete",
            { id: id },
            function (res) {
              if (res.code === 0) {
                layui.layer.msg('删除成功');
                obj.del(); // 删除表格中的对应行数据
              } else {
                layui.layer.msg(res.msg);
              }
            }
          );
          layui.layer.close(index);
        });
      }
    });

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

    //渲染表格
    layui.pageTable = layui.table.render({
      elem: "#workorder",
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '工单列表',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      cellMinWidth: 80,
      url: "/workorder/index/index", // 数据接口
      page: true, 
      limit: 50,
      totalRow: true,
      cols: [
        [
          { type: 'checkbox' },
          { field: 'id', width: 80, title: '编号', sort: true, align: "center", totalRowText: '合计：' },
          {
            field: "project_id",
            title: "隶属项目",
            align: "center",
            width: 180,
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span>' + d.project_id + "</span>";
              return html;
            },
          },
          {
            field: "content",
            title: "项目问题",
            align: "center",
            minWidth: 180,
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span>' + d.content + "</span>";
              return html;
            },
          },
          {
            field: "status",
            title: "工单状态",
            width: 120,
            align: "center",
            rowspan: 2,
            templet: function (d) {
              var statusMap = {
                0: "未解决",
                1: "解决中",
                2: "已解决",
                3: "已关闭"
              };
              var statusText = statusMap[d.status] !== undefined ? statusMap[d.status] : d.status;
              var html = '<span class="gdzt gd-' + d.status + '">' + statusText + "</span>";
              return html;
            },
          },
          {
            field: "solve",
            title: "分派处理人",
            align: "center",
            width: 120,
            rowspan: 2,
            templet: function (d) {
              if (d.solve) {
                var html = '<span>' + d.solve + "</span>";
                return html;
              } else {
                return "-";
              }
            },
          },
          {
            field: "creater",
            title: "提交人",
            align: "center",
            width: 120,
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span>' + d.creater + "</span>";
              return html;
            },
          },
          {
            field: "contact",
            title: "联系方式",
            align: "center",
            width: 140,
            rowspan: 2,
            templet: function (d) {
              if (d.contact) {
                var html = '<span>' + d.contact + "</span>";
                return html;
              } else {
                return "-";
              }
            },
          },
          {
            field: "remark",
            title: "备注",
            align: "center",
            minWidth: 180,
            rowspan: 2,
            templet: function (d) {
              if (d.remark) {
                var html = '<span>' + d.remark + "</span>";
                return html;
              } else {
                return "-";
              }
            },
          },
          {
            field: "sub_time",
            title: "提交时间",
            align: "center",
            width: 180,
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span>' + d.sub_time + "</span>";
              return html;
            },
          },
          {
            fixed: 'right',
            title: "操作",
            align: "center",
            width: 280,
            minWidth: 220,
            toolbar: "#barDemo",
          },
        ],
      ],
    });
  }

</script>


<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-sm " id="view" lay-event="view">查看详情</a>
  <!-- <button class="layui-btn layui-btn-sm" lay-event="view">查看详情</button> -->
  <!-- <a class="layui-btn layui-btn-sm " data-href="/workorder/index/view/id/' + d.id + '" style="display: flex;justify-content: center;align-items: center;">查看详情</a> -->
  <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm" lay-event="edit">处理工单</a>
  <!-- <a class="layui-btn layui-btn-primary layui-border layui-btn-sm" lay-event="delete">删除</a> -->
</script>

<style>
    .gdzt{
        padding: 3px 5px;
        border-radius: 4px;
    }

    .gd-0{
        color:#555 ;
        background-color: #eee;
    }

    .gd-1{
        color:#fff ;
        background-color: #1e9fff;
    }

    .gd-2{
        color:#fff ;
        background-color: #16b777;
    }

    .gd-3{
        color:#fff ;
        background-color: #a233c6 ;
    }
</style>
{/block}