(function($) {
  'use strict';

  //予めカスタマイズビューを作っておき、viewIdを確認して入れます。
  const viewId = 0000000

  kintone.events.on('app.record.index.show', function(event) {
    //対象の一覧んビューでなければスキップします
    if(event.viewId !== viewId){
      return event;
    }

    //各レコードから当日分のサブテーブルを抜き出す
    let filteredRows = []

    //なんとなくluxonを使ってみたかっただけです
    const today = luxon.DateTime.now().toFormat("yyyy-MM-dd")

    //自分のタスクを強調表示するために使います
    const loginusercode = kintone.getLoginUser().code;

    //表示している案件レコードを回していきます
    event.records.forEach(record=>{
      const rows = record.タスクテーブル?.value;
      rows.forEach(row => {

        //テーブル内の開始日/予定日の範囲内に当日が含まれている行を抽出します。
        if(row.value.タスク開始予定日?.value <= today && row.value.タスク終了予定日?.value >= today){
          const body = {
            //担当者欄はユーザー選択フィールドの想定で、複数設定されている場合は/区切りで表示します
            担当者: row.value.作業担当者?.value.map(x=>x.name).join(" / "),

            //サブテーブルから値をとってきます
            開始日: row.value.タスク開始予定日?.value,
            終了日: row.value.タスク終了予定日?.value,
            タスク項目: row.value.タスク項目?.value,
            作業名: row.value.作業名?.value,
            タスク概要: row.value.タスク概要?.value,

            //親タスクとなるレコードから値をとってきます
            企業名: record.企業名?.value,
            案件名: record.案件名?.value,

            //行をクリックした時に案件レコードに遷移できるよう仕込みます
            url:`https://${document.domain}/k/${kintone.app.getId()}/show#record=${record.$id.value}&`,

            //自身のタスクを強調表示する為にフラグを仕込みます
            own: row.value.task_resource.value.find(user=>user.code == loginusercode) ? true : false
          };
          filteredRows.push(body);
        }
      });
    });

    //カスタマイズビューで以下のidを持つdiv等を用意しておきます。
    let $div = $("#taskList");

    //Datatablesのスタイル調整用のクラスを指定しておきます。
    $div.attr("class", "compact hover row-border cell-border");

    //というわけでDatatablesを使ってテーブルを描画します。
    $div.DataTable({
      data: filteredRows,
      columns: [
        { data: '担当者', title: '担当者' },
        { data: '開始日', title: '開始日' },
        { data: '終了日', title: '終了日' },
        { data: '企業名', title: '企業名' },
        { data: '案件名', title: '案件名' },
        { data: 'タスク項目', title: 'タスク項目' },
        { data: '作業名', title: '作業名' },
        { data: 'タスク概要', title: 'タスク概要' },
      ],
      displayLength: 100,
      'createdRow': function( row, data, dataIndex ) {

        //自分のタスクは黄色くします
        if(data.own){
          $(row).css({"backgroundColor":"#ffeaa5"});
        }

        //行をクリックした時に案件レコードを遷移させます
        $(row)
          // カーソールオーバー時の見た目を変化
          .css("cursor", "pointer")
          .click(function(e) {
            window.open(data.url)
        });
      },
    });
    return event;
  });

})(jQuery);