<h3>{{ labels.Title }}
  <el-input
    v-model="search"
    :placeholder="labels.TypeSomething"
    prefix-icon="IconSearch"
    size="small"
    style="width: 300px; margin-left: 10px">
  </el-input>
</h3>

<el-table
  :data="assignments.filter(function(row){ return checkMatch(row);})"
  :default-sort="{prop: 'DateCreation', order: 'descending'}"
  :row-style="tableRowStyle"
  fit
  height="calc(100% - 100px)"
  style="width: 100%">
  <el-table-column type="expand">
    <template #default="props">
      <div style="padding-left: 10px;padding-right: 10px">
        <el-row v-if="props.row.Description != null" style="margin-bottom: 15px">
          <el-col>
            <span class="CustomLabel">{{ labels.Description }}</span>
            <div>{{ props.row.Description }}</div>
          </el-col>
        </el-row>
        <el-row style="width: 100%; margin-bottom: 15px">
          <el-col :span="6">
            <span class="CustomLabel">{{ labels.DateStart }}</span>
            <div>{{ props.row.DateStart != null ? getDate(props.row.DateStart) : '-' }}</div>
          </el-col>
          <el-col :span="6">
            <span class="CustomLabel">{{ labels.DateFinish }}</span>
            <div>{{ props.row.DateFinish != null ? getDate(props.row.DateFinish) : '-' }}</div>
          </el-col>
          <el-col v-if="props.row.DeadlineToStart != null" :span="6">
            <span class="CustomLabel">{{ labels.DeadlineToStart }}</span>
            <div>{{ getDate(props.row.DeadlineToStart) }}</div>
          </el-col>
          <el-col v-if="props.row.DeadlineToComplete != null" :span="6">
            <span class="CustomLabel">{{ labels.DeadlineToFinish }}</span>
            <div>{{ getDate(props.row.DeadlineToComplete) }}</div>
          </el-col>
        </el-row>
        <el-row v-if="props.row.Observers != null && props.row.Observers.length > 0" style="width: 100%; margin-bottom: 15px">
          <el-col>
            <span class="CustomLabel">{{ labels.Observers }}:</span>
            <el-tag v-for="(observer, i) in props.row.Observers" :key="i" size="small" style="margin-left:5px;">
              <el-popover
                :title="labels.ObserverId"
                placement="bottom"
                trigger="hover"
                width="200">
                {{ observer.Identity }}
                <div slot="reference" style="white-space:nowrap">
                  {{ observer.UserName }}
                  <el-icon>
                    <icon-info-filled />
                  </el-icon>
                </div>
              </el-popover>
            </el-tag>
          </el-col>
        </el-row>
        <el-row v-if="props.row.Tags != null && props.row.Tags.length > 0" style="width: 100%; margin-bottom: 15px">
          <el-col>
            <span class="CustomLabel">{{ labels.Tags }}:</span>
            <el-tag v-for="(tag, i) in props.row.Tags" :key="i" size="small" style="margin-left:5px;">{{ tag }}</el-tag>
          </el-col>
        </el-row>
        <el-row style="width: 100%;text-align: center">
          <el-col>
            <el-tag v-if="!props.row.IsActive" size="small" type="warning">{{ labels.ProhibitedForExecution }}</el-tag>
            <el-tag v-if="props.row.IsDeleted" size="small" type="danger">{{ labels.AssignmentDeleted }}</el-tag>
          </el-col>
        </el-row>
      </div>
    </template>
  </el-table-column>

  <el-table-column
    :label="labels.Code"
    prop="AssignmentCode">
    <template #default="scope">
      <div slot="reference" style="white-space:nowrap">
        <el-icon v-if="!scope.row.IsActive"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="M224 448a32 32 0 0 0-32 32v384a32 32 0 0 0 32 32h576a32 32 0 0 0 32-32V480a32 32 0 0 0-32-32zm0-64h576a96 96 0 0 1 96 96v384a96 96 0 0 1-96 96H224a96 96 0 0 1-96-96V480a96 96 0 0 1 96-96"></path><path fill="currentColor" d="M512 544a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V576a32 32 0 0 1 32-32m192-160v-64a192 192 0 1 0-384 0v64zM512 64a256 256 0 0 1 256 256v128H256V320A256 256 0 0 1 512 64"></path></svg></el-icon>
        {{ scope.row.AssignmentCode }}
      </div>
    </template>
  </el-table-column>

  <el-table-column
    :label="labels.Name"
    min-width="300"
    prop="Name">
  </el-table-column>

  <el-table-column
    :label="labels.Executor"
    min-width="150"
    prop="Executor">
    <template #default="scope">
      <div style="white-space:nowrap">
        <el-popover
          :title="labels.ExecutorId"
          placement="bottom"
          trigger="hover"
          width="200">
          {{ scope.row.Executor.Identity }}
          <template #reference>
                {{ scope.row.Executor.UserName }}
          </template>
        </el-popover>
        <el-icon>
          <icon-info-filled />
        </el-icon>
      </div>
    </template>
  </el-table-column>

  <el-table-column
    :filter-method="filterTag"
    :filters="getStatuses()"
    :label="labels.Status"
    filter-placement="bottom-end"
    min-width="120"
    prop="StatusState">
  </el-table-column>

  <el-table-column
    :formatter="getFormatDate"
    :label="labels.DateCreation"
    column-key="DateCreation"
    prop="DateCreation"
    sortable
    width="145">
  </el-table-column>
</el-table>

<div class="WorkflowDesignerButtons">
  <el-button @click="onClose">{{ ButtonTextCancel }}</el-button>
</div>
<script type="application/javascript">
  function assignments_Data(me) {
    return {
      readonly: false,
      assignments: [],
      statuses: [],
      search: '',
    }
  }

  function assignments_Init(me) {
    const {VueConfig} = me;
    const {state: data, methods} = VueConfig;

    methods.UpdateLanguage = function () {
      Object.assign(data, {
        labels: WorkflowDesignerConstants.AssignmentFormLabel,
        ButtonTextCancel: WorkflowDesignerConstants.ButtonTextCancel,
      });
    };

    methods.UpdateLanguage();

    me.VueConfig.created = function () {
      const dataAssignments = me.graph.designer.getprocessassignments();
      data.assignments = dataAssignments.Assignments;
      data.statuses = dataAssignments.Statuses;
    };

    methods.checkMatch = function (row) {
      const search = data.search.toLowerCase();
      return !search
        || search.length == 0
        || row.Name.toLowerCase().includes(search)
        || row.Executor.UserName.toLowerCase().includes(search)
        || row.Executor.Identity.toLowerCase().includes(search)
        || methods.getDate(row.DateCreation).toLowerCase().includes(search)
    };

    methods.getStatuses = function () {
      const statuses = [];
      data.statuses.forEach(function (st) {
        statuses.push({text: st, value: st});
      });
      return statuses;
    };

    methods.onUpdate = function () {
    };

    methods.filterTag = function (value, row) {
      return row.StatusState === value;
    };

    methods.getFormatDate = function (a, b, stringDate, d) {
      return methods.getDate(stringDate);
    };

    methods.getDate = function (stringDate) {
      let date = new Date(stringDate);
      let options = {
        hour12: false,
        month: '2-digit',
        day: '2-digit',
        year: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
      };

      return date.toLocaleString('en-US', options);
    };

    methods.tableRowStyle = function (data) {
      let row = data.row;
      let rowStyle = {};

      if (row['IsDeleted']) {
        rowStyle.background = 'rgba(245,108,108,0.1)';
      }
      return rowStyle;
    };

    methods.onClose = function () {
      me.onClose(true);
    };
  }
</script>
