<template>
  <div class="container">
    <div class="topBox">
      <div>
        <div class="topTitle">当日日志</div>
        <div class="topText">总计填报工时:<span>1</span>天</div>
      </div>
      <div>
        <el-button type="primary" @click="handleAdd">
          <el-icon class="el-icon-plus" />
          添加日志
        </el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      class="tableBox"
    >
      <el-table-column label="序号" width="70" prop="id" />
      <el-table-column label="项目名称" prop="versionNumber">
        <template #default="scope">
          <div>
            <el-dropdown
              trigger="click"
              placement="bottom"
              @command="
                (data) => {
                  changeRow(data, 'demandStatus', scope.row);
                }
              "
            >
              <el-radio
                v-model="scope.row.demandStatus"
                :label="scope.row.demandStatus"
                :class="['status-tag', getStatusClass(scope.row.demandStatus)]"
              >
                {{
                  statusList[scope.row.demandStatus]
                    ? statusList[scope.row.demandStatus].dictLabel
                    : ""
                }}</el-radio
              >
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in statusList"
                  :key="item.dictValue"
                  :command="item.dictValue"
                  :class="{
                    tableSelect1: true,
                    selectedItem1: item.dictValue == scope.row.demandStatus,
                  }"
                  ><el-radio
                    v-model="scope.row.demandStatus"
                    :label="scope.row.demandStatus"
                    :class="['status-tag', getStatusClass(item.dictValue)]"
                  >
                    {{
                      statusList[item.dictValue]
                        ? statusList[item.dictValue].dictLabel
                        : ""
                    }}</el-radio
                  ></el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="版本" prop="title">
        <template #default="scope">
          <div>
            <el-dropdown
              trigger="click"
              placement="bottom"
              @command="
                (data) => {
                  changeRow(data, 'demandStatus', scope.row);
                }
              "
            >
              <el-radio
                v-model="scope.row.demandStatus"
                :label="scope.row.demandStatus"
                :class="['status-tag', getStatusClass(scope.row.demandStatus)]"
              >
                {{
                  statusList[scope.row.demandStatus]
                    ? statusList[scope.row.demandStatus].dictLabel
                    : ""
                }}</el-radio
              >
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in statusList"
                  :key="item.dictValue"
                  :command="item.dictValue"
                  :class="{
                    tableSelect1: true,
                    selectedItem1: item.dictValue == scope.row.demandStatus,
                  }"
                  ><el-radio
                    v-model="scope.row.demandStatus"
                    :label="scope.row.demandStatus"
                    :class="['status-tag', getStatusClass(item.dictValue)]"
                  >
                    {{
                      statusList[item.dictValue]
                        ? statusList[item.dictValue].dictLabel
                        : ""
                    }}</el-radio
                  ></el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="项目需求">
        <template #default="scope">
          <div>
            <el-dropdown
              trigger="click"
              placement="bottom"
              @command="
                (data) => {
                  changeRow(data, 'demandStatus', scope.row);
                }
              "
            >
              <el-radio
                v-model="scope.row.demandStatus"
                :label="scope.row.demandStatus"
                :class="['status-tag', getStatusClass(scope.row.demandStatus)]"
              >
                {{
                  statusList[scope.row.demandStatus]
                    ? statusList[scope.row.demandStatus].dictLabel
                    : ""
                }}</el-radio
              >
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in statusList"
                  :key="item.dictValue"
                  :command="item.dictValue"
                  :class="{
                    tableSelect1: true,
                    selectedItem1: item.dictValue == scope.row.demandStatus,
                  }"
                  ><el-radio
                    v-model="scope.row.demandStatus"
                    :label="scope.row.demandStatus"
                    :class="['status-tag', getStatusClass(item.dictValue)]"
                  >
                    {{
                      statusList[item.dictValue]
                        ? statusList[item.dictValue].dictLabel
                        : ""
                    }}</el-radio
                  ></el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="工作内容" prop="responsiblePersonName">
        <template #default="scope">
          <div @click="openUser('change', scope.row)" style="cursor: pointer">
            {{ scope.row.responsiblePersonName }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="工时分配" prop="estimatedWorkHours" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <div>
            <el-button type="text" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button
              type="text"
              @click="handleDelete(scope.row)"
              style="color: #666"
            >
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "RightTable",
  data() {
    return {
      statusList: [],
    };
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
  background-color: #ffffff;
  min-width: 1200px;
}
.topBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .topTitle {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .topText {
    color: #999999;
    font-weight: 600;
    font-size: 16px;
    span {
      margin: 0 5px;
      color: #333;
    }
  }
}
</style>
