{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="style"}
<style>
  .layui-unselect dl {
    max-height: 188px;
  }
</style>
{/block} {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 id="taskList" class="table-content p-3">
  <input type="hidden" id="currentUserId" value="" />
  <div class="gougu-tab-bar border-t border-x">
    <div class="layui-row">
      <div class="layui-col-md6 gougu-tab">
        <!-- <ul class="gougu-tab-title" id="taskTab">
					<li class="tab-this" data-type="0">全部</li>
				</ul> -->
      </div>
      <div class="py-2 px-3" style="text-align: right">
        <div class="layui-btn-group mr-4" style="display: none">
          <button type="button" data-event="show" class="layui-btn layui-btn-sm layui-btn-normal">
            <i class="layui-icon">&#xe62d;</i>列表
          </button>
          <button type="button" data-event="show" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe630;</i>看板
          </button>
          <button type="button" data-event="show" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe637;</i>日历
          </button>
        </div>
        <button class="layui-btn layui-btn-sm add-new">+ 新建任务</button>
      </div>
    </div>
  </div>
  <div class="layui-form-bar border-t border-x">
    <form id="taskForm" class="layui-form">
      <div class="layui-input-inline" style="width: 120px">
        <select name="flow_status" lay-filter="status">
          <option value="">任务状态</option>
          <option value="1">未开始</option>
          <option value="2">进行中</option>
          <option value="3">已完成</option>
          <option value="4">已拒绝</option>
          <option value="5">已关闭</option>
          <option value="6">未解决</option>
        </select>
      </div>
      <div class="layui-input-inline" style="width: 100px">
        <select name="priority" lay-filter="priority">
          <option value="">优先级</option>
          <option value="1">低</option>
          <option value="2">中</option>
          <option value="3">高</option>
          <option value="4">紧急</option>
        </select>
      </div>
      <div class="layui-input-inline" style="width: 140px">
        <select name="type" lay-filter="type">
          <option value="">任务类型</option>
          {volist name="type" id="vo"}
          <option value="{$vo.id}">{$vo.title}</option>
          {/volist}
        </select>
      </div>
      <div class="layui-input-inline" style="width: 200px">
        <select name="project_id" lay-filter="project">
          <option value="">所属项目</option>
          {volist name="project" id="vo"}
          <option value="{$vo.id}">{$vo.name}</option>
          {/volist}
        </select>
      </div>
      <div class="layui-input-inline" style="width: 100px">
        <input type="hidden" name="type" />
        <input name="director_uid" style="display: none" value="" />
        <input type="text" name="director" placeholder="负责人" readonly class="layui-input employeepicker"
          autocomplete="off" />
      </div>
      <div class="layui-input-inline" style="width: 200px">
        <input type="text" name="keywords" placeholder="主题/描述内容" class="layui-input" autocomplete="off" />
      </div>
      <div class="layui-input-inline" style="width: 200px">
        <select name="creater_id" lay-filter="creater">
          <option value="">创建人</option>
          {volist name="creater" id="vo"}
          <option value="{$vo.id}">{$vo.name}</option>
          {/volist}
        </select>
      </div>
      <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">
        搜索
      </button>
      <button type="reset" class="layui-btn layui-btn-primary layui-border-blue" lay-filter="clear">
        重置
      </button>
      <button type="reset" class="layui-btn" lay-filter="onlyme">只看我</button>
      <input id="loginusers" type="hidden" value="{$user_info.id}" />
    </form>
  </div>
  <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
  const moduleInit = [
    "tool",
    "gouguEdit",
    "gouguComment",
    "gouguSchedule",
    "employeepicker",
    "editormd",
  ];
  function gouguInit() {
    var table = layui.table,
      form = layui.form,
      tool = layui.tool,
      employeepicker = layui.employeepicker;

    layui.taskTable = table.render({
      elem: "#test",
      title: "任务列表",
      cellMinWidth: 80,
      url: "/task/index/index", //数据接口
      page: true, //开启分页
      limit: 20,
      height: "full-186",
      cols: [
        [
          {
            field: "id",
            title: "ID",
            width: 80,
            align: "center",
            templet: function (d) {
              return "T" + d.id;
            },
          },
          {
            field: "type_name",
            title: "优先级",
            width: 80,
            templet: function (d) {
              var html =
                '<span class="layui-badge bg-priority-' +
                d.priority +
                '">' +
                d.priority_name +
                "</span>";
              return html;
            },
          },
          {
            field: "flow_name",
            title: "状态",
            width: 80,
            templet: function (d) {
              var html =
                '<span class="layui-badge bg-flow-' +
                d.flow_status +
                '">' +
                d.flow_name +
                "</span>";
              return html;
            },
          },
          {
            field: "project_id",
            title: "所属项目",
            width: 200,
            templet: function (d) {
              var html =
                '<a class="link-a"' +
                ' data-href="/project/index/view/id/' +
                d.project_id +
                '">' +
                d.belong_project +
                "</a>";
              return html;
            },
          },
          {
            field: "title",
            title: "任务主题",
            rowspan: 2,
            templet: function (d) {
              var html = "";
              if (d.is_new == 1) {
                html += '<span class="new-label">新回复</span>';
              }
              html +=
                '<a class="open-a" data-href="/task/index/view/id/' +
                d.id +
                '" style="padding-left:10px;">' +
                d.title +
                "</a>";
              return html;
            },
          },
          {
            field: "type_name",
            title: "任务类型",
            width: 100,
            templet: function (d) {
              var html =
                '<span class="color-status-' +
                d.type +
                '">' +
                d.type_name +
                "</span>";
              return html;
            },
          },
          {
            field: "type_name",
            title: "任务性质",
            width: 220,
            templet: function (d) {
              var html = '';
              if (d.is_bug === 0) {
                html = '<span class="color-status-2">普通任务(TASK)</span>';
              } else if (d.is_bug === 1) {
                html = '<span class="color-status-1">问题缺陷(BUG)</span>';
              } else if (d.is_bug === 2) {
                html = '<span class="color-status-4">优化建议(OPTIMIZATION)</span>';
              }
              return html;
            },
          },
          {
            field: "flow_name",
            title: "完成进度",
            width: 150,
            templet: function (d) {
              var progress =
                '<div class="layui-progress layui-progress-big" lay-showpercent="true">';
              if (d.flow_status == 1) {
                progress +=
                  '<div class="layui-progress-bar layui-bg-red" lay-percent="0%" style="width:0%;text-align:center;">未开始</div>';
              } else if (d.flow_status == 2) {
                progress +=
                  '<div class="layui-progress-bar layui-bg-orange" lay-percent="50%" style="width:50%;text-align:center;">进行中</div>';
              } else if (d.flow_status == 3) {
                progress +=
                  '<div class="layui-progress-bar layui-bg-green" lay-percent="100%" style="width:100%;text-align:center;">已完成</div>';
              } else if (d.flow_status == 4) {
                progress +=
                  '<div class="layui-progress-bar bg-flow-4" lay-percent="100%" style="width:100%;text-align:center;color:#fff">已拒绝</div>';
              } else if (d.flow_status == 5) {
                progress +=
                  '<div class="layui-progress-bar bg-flow-5" lay-percent="100%" style="width:100%;text-align:center;color:#fff">已关闭</div>';
              } else if (d.flow_status == 6) {
                progress +=
                  '<div class="layui-progress-bar layui-bg-darkred" lay-percent="0%" style="width:100%;text-align:center;">未解决</div>';
              } else {
                progress +=
                  '<div class="layui-progress-bar bg-flow-5" lay-percent="0%" style="width:0%;text-align:center;">0%</div>';
              }
              progress += "</div>";
              return progress;
            },
          },
          {
            field: "creater_name",
            title: "创建人",
            width: 80,
          },
          {
            field: "director_name",
            title: "指派负责人",
            width: 140,
          },
          // { field: "assist_admin_names", title: "协作人", width: 200 },
          // { field: "cate_name", title: "工作类型", width: 90, align: "center" },
          // {
          //   field: "plan_hours",
          //   title: "预估工时",
          //   align: "center",
          //   width: 80,
          // },
          {
            field: "end_time",
            title: "预计结束日期",
            width: 180,
            templet: function (d) {
              var html = d.end_time;
              if (d.delay > 0) {
                html +=
                  '<span class="color-status-0 ml-1" style="font-size:12px;text-align:center;">逾期' +
                  d.delay +
                  "天</span>";
              }
              return html;
            },
          },
        ],
      ],
    });

    //选择人弹窗
    $("#taskList").on("click", ".employeepicker", function () {
      let that = $(this);
      let ids_name = that.attr("name") + "_uid";
      var ids = $('[name="' + ids_name + '"]').val(),
        names = that.val(),
        id_array = [],
        name_array = [];
      if (ids.length > 0) {
        id_array = ids.split(",");
        name_array = names.split(",");
      }
      employeepicker.init({
        ids: id_array,
        names: name_array,
        department_url: "/api/index/get_department_tree",
        employee_url: "/api/index/get_employee",
        callback: function (ids, names, dids, departments) {
          $('[name="' + ids_name + '"]').val(ids);
          that.val(names);
          tableReload();
        },
      });
    });

    //新增
    $("#taskList").on("click", ".add-new", function () {
      tool.open("/task/index/add");
    });

    //查看模式
    $("#taskList").on("click", '[data-event="show"]', function () {
      layer.msg("开源版只支持列表模式");
    });

    //任务类型
    $("#taskTab").on("click", "li", function () {
      $(this).addClass("tab-this").siblings().removeClass("tab-this");
      let type = $(this).data("type");
      $("#taskForm").find('[name="type"]').val(type);
      tableReload();
    });
    form.on("select(creater)", function (data) {
      tableReload();
    });
    form.on("select(status)", function (data) {
      tableReload();
    });
    form.on("select(priority)", function (data) {
      tableReload();
    });
    form.on("select(type)", function (data) {
      tableReload();
    });
    form.on("select(belong_project)", function (data) {
      tableReload();
    });
    form.on("select(project)", function (data) {
      tableReload();
    });

    //监听搜索提交
    form.on("submit(webform)", function (data) {
      if (data.field.keywords == "") {
        return false;
      }
      tableReload();
      return false;
    });
    $("#taskForm").on("click", '[lay-filter="clear"]', function () {
      setTimeout(function () {
        tableReload();
      }, 10);
    });

    //只看我按钮代码
    $("#taskForm").on("click", '[lay-filter="onlyme"]', function () {

      let loginuser = $("#loginusers").val(); 

      $("#taskForm").find('[name="director_uid"]').val(loginuser); 

      let postData = {
        type: $("#taskForm").find('[name="type"]').val(),
        flow_status: $("#taskForm").find('[name="flow_status"]').val(),
        priority: $("#taskForm").find('[name="priority"]').val(),
        cate: $("#taskForm").find('[name="cate"]').val(),
        delay: $("#taskForm").find('[name="delay"]').val(),
        director_uid: $("#taskForm").find('[name="director_uid"]').val(),
        project_id: $("#taskForm").find('[name="project_id"]').val(),
        keywords: $("#taskForm").find('[name="keywords"]').val(),
        belong_project: $("#taskForm").find('[name="belong_project"]').val(),
        creater_name: $("#taskForm").find('[name="creater_name"]').val(),
        admin_id: $("#taskForm").find('[name="creater_id"]').val(),
      };
      layui.taskTable.reload({ where: postData });
    });


    //重新加载表格
    function tableReload() {
      let postData = {
        type: $("#taskForm").find('[name="type"]').val(),
        flow_status: $("#taskForm").find('[name="flow_status"]').val(),
        priority: $("#taskForm").find('[name="priority"]').val(),
        cate: $("#taskForm").find('[name="cate"]').val(),
        delay: $("#taskForm").find('[name="delay"]').val(),
        director_uid: $("#taskForm").find('[name="director_uid"]').val(),
        project_id: $("#taskForm").find('[name="project_id"]').val(),
        keywords: $("#taskForm").find('[name="keywords"]').val(),
        belong_project: $("#taskForm").find('[name="belong_project"]').val(),
        creater_name: $("#taskForm").find('[name="creater_name"]').val(),
        admin_id: $("#taskForm").find('[name="creater_id"]').val(),
      };
      layui.taskTable.reload({ where: postData });
    }
  }
</script>
{/block}
<!-- /脚本 -->