<!-- 项目页面 -->
<template>
  <div class="projectManage">
    <!-- 搜索框及按钮 -->
    <div class="filter">
      <div class="filterItems">
        <div class="select">
          <a-select
            v-model:value="projectName"
            style="width: 270px"
            placeholder="请输入项目名称"
            :options="projectNameList"
            @change="selectProjectName"
            allowClear
            showSearch
          ></a-select>
        </div>
        <div class="select">
          <a-select
            v-model:value="projectName"
            style="width: 270px"
            placeholder="请输入项目经理"
            :options="projectNameList"
            @change="selectProjectName"
            allowClear
            showSearch
          ></a-select>
        </div>
        <div class="select">
          <a-select
            v-model:value="projectName"
            style="width: 270px"
            placeholder="请选择状态"
            :options="projectNameList"
            @change="selectProjectName"
            allowClear
            showSearch
          ></a-select>
        </div>
        <div class="select">
          <a-date-picker
            v-model="selectTime"
            type="date"
            placeholder="创建时间"
            style="width: 270px"
          />
        </div>
      </div>
      <div class="btns">
        <div class="btn btn1">
          <div class="search"></div>
          <div class="btnText">搜索</div>
        </div>
        <div class="btn btn2">
          <div class="search"></div>
          <div class="btnText">重置</div>
        </div>
        <router-link to="/projectadd">
          <div class="btn btn3">
            <div class="search"></div>
            <div class="btnText">创建项目</div>
          </div>
        </router-link>
      </div>
    </div>
    <!-- 搜索框及按钮 -->
    <!-- 表格 -->
    <div class="tableBox">
      <a-table
        :columns="columns"
        :data-source="tableData"
        :loading="tableDataTotal === -1 ? true : false"
        :scroll="{ x: 700 }"
        @expand="expandTable"
        :pagination="{
          showSizeChanger: true,
          showQuickJumper: true,
          hideOnSinglePage: true,
          pageSizeOptions: [],
          pageSize: pageSize,
          current: currentPage,
          total: tableDataTotal,
          onChange: (page, pageSize) => {
            currentPage = page;
            // console.log('page', page)
            // 加翻页查找代码
            // 	this.setState({
            // 		currentPage: page,
            // 	}, () => {
            // 		this.getMilitaryDeployment()
            // 	})
          },
        }"
      >
        <!-- <template #bodyCell="{ column }">
          <template v-if="column.key === 'operation'">
            <div class="operation">
              <span>编辑</span>
              <span style="margin-left: 21px">授权</span>
              <span style="margin-left: 21px">创建子项目</span>
              <span style="margin-left: 21px" class="more">
                <span>更多</span>
                <div class="moreArrow"></div>
                <div class="moreItems"></div>
              </span>
            </div>
          </template>
        </template> -->
      </a-table>
    </div>
    <!-- 表格 -->
  </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
const columns = [
  {
    title: "项目名称",
    dataIndex: "projectName",
    key: "projectName",
    width: 280,
    // align: "center",
    ellipsis: true,
    // scopedSlots: { customRender: "action" }, //引入的插槽
    // customRender: (text, record) => {
    //   console.log(text, record);
    //   return <span>{text.text}</span>;
    // },
  },
  {
    title: "项目经理",
    dataIndex: "manager",
    key: "manager",
    width: 100,
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "state",
    // width: "30%",
    key: "state",
    width: 100,
    align: "center",
  },
  {
    title: "创建人",
    dataIndex: "creater",
    // width: "30%",
    key: "creater",
    width: 100,
    align: "center",
  },
  {
    title: "创建时间",
    dataIndex: "time",
    key: "time",
    width: 180,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    width: 300,
    align: "center",
  },
];

export default {
  name: "projectManage",

  setup() {
    const state = reactive({
      projectNameList: [
        {
          id: 1,
          value: "项目一",
          label: "项目一",
        },
        {
          id: 2,
          value: "项目二",
          label: "项目二",
        },
        {
          id: 3,
          value: "项目三",
          label: "项目三",
        },
        {
          id: 4,
          value: "项目四",
          label: "项目四",
        },
      ],
      projectName: null,
      selectTime: null,

      tableData: [
        {
          key: 1,
          projectName:
            "管理者进阶1管理者进阶1管理者进阶1管理者进阶1管理者进阶1管理者进阶1管理者进阶1",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
          children: [
            {
              key: "1-1",
              projectName: "管理者进阶5",
              manager: "黄华  刘俊",
              state: "草稿",
              creater: "毛继禹",
              time: "2022-07-20 14:00:03",
              children: [
                {
                  key: "1-1-1",
                  projectName:
                    "管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7",
                  manager: "黄华  刘俊",
                  state: "草稿",
                  creater: "毛继禹",
                  time: "2022-07-20 14:00:03",
                },
              ],
            },
          ],
        },
        {
          key: 2,
          projectName: "管理者进阶2",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
          hasChildren: true,
        },
        {
          key: 3,
          projectName: "管理者进阶3",
          manager: "黄华  刘俊",
          state: "进行中",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
          hasChildren: true,
          children: [
            {
              key: "3-1",
              projectName: "管理者进阶35",
              manager: "黄华  刘俊",
              state: "已结束",
              creater: "毛继禹",
              time: "2022-07-20 14:00:03",
            },
            {
              key: "3-2",
              projectName: "管理者进阶36",
              manager: "黄华  刘俊",
              state: "草稿",
              creater: "毛继禹",
              time: "2022-07-20 14:00:03",
            },
          ],
        },
        {
          key: 4,
          projectName: "管理者进阶4",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶5",
          manager: "黄华  刘俊",
          state: "已结束",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
          children: [
            {
              key: "4-1",
              projectName: "管理者进阶5",
              manager: "黄华  刘俊",
              state: "进行中",
              creater: "毛继禹",
              time: "2022-07-20 14:00:03",
              children: [
                {
                  key: "4-1-1",
                  projectName:
                    "管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7",
                  manager: "黄华  刘俊",
                  state: "草稿",
                  creater: "毛继禹",
                  time: "2022-07-20 14:00:03",
                },
              ],
            },
          ],
        },
        {
          key: 5,
          projectName: "管理者进阶5",
          manager: "黄华  刘俊",
          state: "已结束",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
          children: [
            {
              key: "5-1",
              projectName: "管理者进阶5",
              manager: "黄华  刘俊",
              state: "已结束",
              creater: "毛继禹",
              time: "2022-07-20 14:00:03",
              children: [
                {
                  key: "5-1-1",
                  projectName:
                    "管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7",
                  manager: "黄华  刘俊",
                  state: "进行中",
                  creater: "毛继禹",
                  time: "2022-07-20 14:00:03",
                },
              ],
            },
          ],
        },
        {
          key: 4,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          state: "草稿",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
      ],
      currentPage: 1,
      tableDataTotal: 20,
      pageSize: 10,
    });

    onMounted(() => {
      // console.log("执行");
    });
    const selectProjectName = (value, index) => {
      console.log("value", value, index);
    };
    const expandTable = (e, a) => {
      // console.log("惦记了");
      console.log("e", e, a);
    };

    const getTableDate = () => {
      let data = state.tableData;
      data.map((value) => {
        if (value.children) {
          //多层项目
          console.log("11");
          value.operation =
            value.state === "草稿" ? (
              <div class="operation">
                <span class="operation1">编辑</span>
                <div class="tableSelect">
                  <a-select
                    style="width: 50px"
                    value="授权"
                    // options={state.projectNameList}
                    dropdownClassName="tabledropdown"
                  >
                    <a-select-option value="权限名单" label="权限名单">
                      <div>权限名单</div>
                    </a-select-option>
                    <a-select-option value="归属权" label="归属权">
                      <div
                        onClick={() => {
                          console.log("点击了");
                        }}
                      >
                        归属权
                      </div>
                    </a-select-option>
                    <a-select-option value="查看权" label="查看权">
                      <div>查看权</div>
                    </a-select-option>
                    <a-select-option value="管理权" label="管理权">
                      <div>管理权</div>
                    </a-select-option>
                  </a-select>
                </div>
                <span class="operation3">创建子项目</span>
                <div class="tableSelect">
                  <a-select
                    style="width: 50px"
                    value="更多"
                    // options={state.projectNameList}
                    dropdownClassName="tabledropdown"
                  >
                    <a-select-option value="基础信息" label="基础信息">
                      <router-link to="/taskpage">基础信息</router-link>
                    </a-select-option>
                    <a-select-option value="存为模板" label="存为模板">
                      <div>存为模板</div>
                    </a-select-option>
                  </a-select>
                </div>
              </div>
            ) : value.state === "进行中" ? (
              <div class="operation">
                <span class="operation1">查看</span>
                <div class="tableSelect">
                  <a-select
                    style="width: 50px"
                    value="授权"
                    // options={state.projectNameList}
                    dropdownClassName="tabledropdown"
                  >
                    <a-select-option value="权限名单" label="权限名单">
                      <div>权限名单</div>
                    </a-select-option>
                    <a-select-option value="归属权" label="归属权">
                      <div
                        onClick={() => {
                          console.log("点击了");
                        }}
                      >
                        归属权
                      </div>
                    </a-select-option>
                    <a-select-option value="查看权" label="查看权">
                      <div>查看权</div>
                    </a-select-option>
                    <a-select-option value="管理权" label="管理权">
                      <div>管理权</div>
                    </a-select-option>
                  </a-select>
                </div>
                <span class="operation3">复制</span>
                <span class="more"></span>
              </div>
            ) : value.state === "已结束" ? (
              <div class="operation">
                <span class="operation1">查看</span>
                <div class="tableSelect">
                  <a-select
                    style="width: 50px"
                    value="授权"
                    // options={state.projectNameList}
                    dropdownClassName="tabledropdown"
                  >
                    <a-select-option value="权限名单" label="权限名单">
                      <div>权限名单</div>
                    </a-select-option>
                    <a-select-option value="归属权" label="归属权">
                      <div
                        onClick={() => {
                          console.log("点击了");
                        }}
                      >
                        归属权
                      </div>
                    </a-select-option>
                    <a-select-option value="查看权" label="查看权">
                      <div>查看权</div>
                    </a-select-option>
                    <a-select-option value="管理权" label="管理权">
                      <div>管理权</div>
                    </a-select-option>
                  </a-select>
                </div>
                <span class="operation3">复制</span>
                <span class="more">删除</span>
              </div>
            ) : (
              <div></div>
            );

          value.children.map((item) => {
            if (item.children) {
              //多层子项目
              item.operation =
                item.state === "草稿" ? (
                  <div class="operation">
                    <span class="operation1">编辑</span>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="授权"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="权限名单" label="权限名单">
                          <div>权限名单</div>
                        </a-select-option>
                        <a-select-option value="归属权" label="归属权">
                          <div
                            onClick={() => {
                              console.log("点击了");
                            }}
                          >
                            归属权
                          </div>
                        </a-select-option>
                        <a-select-option value="查看权" label="查看权">
                          <div>查看权</div>
                        </a-select-option>
                        <a-select-option value="管理权" label="管理权">
                          <div>管理权</div>
                        </a-select-option>
                      </a-select>
                    </div>
                    <span class="operation3">创建班级</span>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="更多"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="复制" label="复制">
                          <div>复制</div>
                        </a-select-option>
                        <a-select-option value="删除" label="删除">
                          <div>删除</div>
                        </a-select-option>
                      </a-select>
                    </div>
                  </div>
                ) : item.state === "进行中" ? (
                  <div class="operation">
                    <span class="operation1">查看</span>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="授权"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="权限名单" label="权限名单">
                          <div>权限名单</div>
                        </a-select-option>
                        <a-select-option value="归属权" label="归属权">
                          <div
                            onClick={() => {
                              console.log("点击了");
                            }}
                          >
                            归属权
                          </div>
                        </a-select-option>
                        <a-select-option value="查看权" label="查看权">
                          <div>查看权</div>
                        </a-select-option>
                        <a-select-option value="管理权" label="管理权">
                          <div>管理权</div>
                        </a-select-option>
                      </a-select>
                    </div>

                    <span class="operation3">创建班级</span>
                    <span class="more">复制</span>
                  </div>
                ) : item.state === "已结束" ? (
                  <div class="operation">
                    <span class="operation1">查看</span>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="授权"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="权限名单" label="权限名单">
                          <div>权限名单</div>
                        </a-select-option>
                        <a-select-option value="归属权" label="归属权">
                          <div
                            onClick={() => {
                              console.log("点击了");
                            }}
                          >
                            归属权
                          </div>
                        </a-select-option>
                        <a-select-option value="查看权" label="查看权">
                          <div>查看权</div>
                        </a-select-option>
                        <a-select-option value="管理权" label="管理权">
                          <div>管理权</div>
                        </a-select-option>
                      </a-select>
                    </div>
                    <span class="operation3">复制</span>
                    <span class="more">删除</span>
                  </div>
                ) : (
                  <div></div>
                );

              item.children.map((a) => {
                //班级
                a.operation =
                  a.state === "草稿" ? (
                    <div class="operation">
                      <span class="operation1"></span>
                      <div class="tableSelect">
                        <a-select
                          style="width: 50px"
                          value="授权"
                          // options={state.projectNameList}
                          dropdownClassName="tabledropdown"
                        >
                          <a-select-option value="权限名单" label="权限名单">
                            <div>权限名单</div>
                          </a-select-option>
                          <a-select-option value="归属权" label="归属权">
                            <div
                              onClick={() => {
                                console.log("点击了");
                              }}
                            >
                              归属权
                            </div>
                          </a-select-option>
                          <a-select-option value="查看权" label="查看权">
                            <div>查看权</div>
                          </a-select-option>
                          <a-select-option value="管理权" label="管理权">
                            <div>管理权</div>
                          </a-select-option>
                        </a-select>
                      </div>
                      <span class="operation3">发布</span>
                      <div class="tableSelect">
                        <a-select
                          style="width: 50px"
                          value="更多"
                          // options={state.projectNameList}
                          dropdownClassName="tabledropdown"
                        >
                          <a-select-option value="复制" label="复制">
                            <div>复制</div>
                          </a-select-option>
                          <a-select-option value="删除" label="删除">
                            <div>删除</div>
                          </a-select-option>
                          <a-select-option value="存为模板" label="存为模板">
                            <div>存为模板</div>
                          </a-select-option>
                          <a-select-option value="基础信息" label="基础信息">
                            <router-link to="/taskpage">基础信息</router-link>
                          </a-select-option>
                        </a-select>
                      </div>
                    </div>
                  ) : a.state === "进行中" ? (
                    <div class="operation">
                      <span class="operation1"></span>
                      <div class="tableSelect">
                        <a-select
                          style="width: 50px"
                          value="授权"
                          // options={state.projectNameList}
                          dropdownClassName="tabledropdown"
                        >
                          <a-select-option value="权限名单" label="权限名单">
                            <div>权限名单</div>
                          </a-select-option>
                          <a-select-option value="归属权" label="归属权">
                            <div
                              onClick={() => {
                                console.log("点击了");
                              }}
                            >
                              归属权
                            </div>
                          </a-select-option>
                          <a-select-option value="查看权" label="查看权">
                            <div>查看权</div>
                          </a-select-option>
                          <a-select-option value="管理权" label="管理权">
                            <div>管理权</div>
                          </a-select-option>
                        </a-select>
                      </div>
                      <span class="operation3">复制</span>
                      <div class="tableSelect">
                        <a-select
                          style="width: 50px"
                          value="更多"
                          // options={state.projectNameList}
                          dropdownClassName="tabledropdown"
                        >
                          <a-select-option value="撤回" label="撤回">
                            <div>撤回</div>
                          </a-select-option>
                          <a-select-option value="结束" label="结束">
                            <div>结束</div>
                          </a-select-option>
                          <a-select-option value="存为模板" label="存为模板">
                            <div>存为模板</div>
                          </a-select-option>
                          <a-select-option value="基础信息" label="基础信息">
                            <router-link to="/taskpage">基础信息</router-link>
                          </a-select-option>
                        </a-select>
                      </div>
                    </div>
                  ) : a.state === "已结束" ? (
                    <div class="operation">
                      <span class="operation1"></span>
                      <div class="tableSelect">
                        <a-select
                          style="width: 50px"
                          value="授权"
                          // options={state.projectNameList}
                          dropdownClassName="tabledropdown"
                        >
                          <a-select-option value="权限名单" label="权限名单">
                            <div>权限名单</div>
                          </a-select-option>
                          <a-select-option value="归属权" label="归属权">
                            <div
                              onClick={() => {
                                console.log("点击了");
                              }}
                            >
                              归属权
                            </div>
                          </a-select-option>
                          <a-select-option value="查看权" label="查看权">
                            <div>查看权</div>
                          </a-select-option>
                          <a-select-option value="管理权" label="管理权">
                            <div>管理权</div>
                          </a-select-option>
                        </a-select>
                      </div>
                      <span class="operation3">复制</span>
                      <span class="operation3">复制</span>
                      <div class="tableSelect">
                        <a-select
                          style="width: 50px"
                          value="更多"
                          // options={state.projectNameList}
                          dropdownClassName="tabledropdown"
                        >
                          <a-select-option value="删除" label="删除">
                            <div>删除</div>
                          </a-select-option>
                          <a-select-option value="存为模板" label="存为模板">
                            <div>存为模板</div>
                          </a-select-option>
                          <a-select-option value="基础信息" label="基础信息">
                            <router-link to="/taskpage">基础信息</router-link>
                          </a-select-option>
                        </a-select>
                      </div>
                    </div>
                  ) : a.state === "未开始" ? (
                    <div class="operation">
                      <span class="operation1"></span>
                      <div class="tableSelect">
                        <a-select
                          style="width: 50px"
                          value="授权"
                          // options={state.projectNameList}
                          dropdownClassName="tabledropdown"
                        >
                          <a-select-option value="权限名单" label="权限名单">
                            <div>权限名单</div>
                          </a-select-option>
                          <a-select-option value="归属权" label="归属权">
                            <div
                              onClick={() => {
                                console.log("点击了");
                              }}
                            >
                              归属权
                            </div>
                          </a-select-option>
                          <a-select-option value="查看权" label="查看权">
                            <div>查看权</div>
                          </a-select-option>
                          <a-select-option value="管理权" label="管理权">
                            <div>管理权</div>
                          </a-select-option>
                        </a-select>
                      </div>
                      <span class="operation3">复制</span>
                      <div class="tableSelect">
                        <a-select
                          style="width: 50px"
                          value="更多"
                          // options={state.projectNameList}
                          dropdownClassName="tabledropdown"
                        >
                          <a-select-option value="结束" label="结束">
                            <div>结束</div>
                          </a-select-option>
                          <a-select-option value="撤回" label="撤回">
                            <div>撤回</div>
                          </a-select-option>
                          <a-select-option value="存为模板" label="存为模板">
                            <div>存为模板</div>
                          </a-select-option>
                          <a-select-option value="基础信息" label="基础信息">
                            <router-link to="/taskpage">基础信息</router-link>
                          </a-select-option>
                        </a-select>
                      </div>
                    </div>
                  ) : (
                    <div></div>
                  );
              });
            } else {
              //单层子项目
              item.operation =
                item.state === "草稿" ? (
                  <div class="operation">
                    <span class="operation1"></span>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="授权"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="权限名单" label="权限名单">
                          <div>权限名单</div>
                        </a-select-option>
                        <a-select-option value="归属权" label="归属权">
                          <div
                            onClick={() => {
                              console.log("点击了");
                            }}
                          >
                            归属权
                          </div>
                        </a-select-option>
                        <a-select-option value="查看权" label="查看权">
                          <div>查看权</div>
                        </a-select-option>
                        <a-select-option value="管理权" label="管理权">
                          <div>管理权</div>
                        </a-select-option>
                      </a-select>
                    </div>
                    <span class="operation3">发布</span>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="更多"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="复制" label="复制">
                          <div>复制</div>
                        </a-select-option>
                        <a-select-option value="删除" label="删除">
                          <div>删除</div>
                        </a-select-option>
                        <a-select-option value="存为模板" label="存为模板">
                          <div>存为模板</div>
                        </a-select-option>
                        <a-select-option value="基础信息" label="基础信息">
                          <router-link to="/taskpage">基础信息</router-link>
                        </a-select-option>
                      </a-select>
                    </div>
                  </div>
                ) : item.state === "进行中" ? (
                  <div class="operation">
                    <span class="operation1"></span>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="授权"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="权限名单" label="权限名单">
                          <div>权限名单</div>
                        </a-select-option>
                        <a-select-option value="归属权" label="归属权">
                          <div
                            onClick={() => {
                              console.log("点击了");
                            }}
                          >
                            归属权
                          </div>
                        </a-select-option>
                        <a-select-option value="查看权" label="查看权">
                          <div>查看权</div>
                        </a-select-option>
                        <a-select-option value="管理权" label="管理权">
                          <div>管理权</div>
                        </a-select-option>
                      </a-select>
                    </div>
                    <span class="operation3">复制</span>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="更多"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="撤回" label="撤回">
                          <div>撤回</div>
                        </a-select-option>
                        <a-select-option value="结束" label="结束">
                          <div>结束</div>
                        </a-select-option>
                        <a-select-option value="存为模板" label="存为模板">
                          <div>存为模板</div>
                        </a-select-option>
                        <a-select-option value="基础信息" label="基础信息">
                          <router-link to="/taskpage">基础信息</router-link>
                        </a-select-option>
                      </a-select>
                    </div>
                  </div>
                ) : item.state === "已结束" ? (
                  <div class="operation">
                    <span class="operation1"></span>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="授权"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="权限名单" label="权限名单">
                          <div>权限名单</div>
                        </a-select-option>
                        <a-select-option value="归属权" label="归属权">
                          <div
                            onClick={() => {
                              console.log("点击了");
                            }}
                          >
                            归属权
                          </div>
                        </a-select-option>
                        <a-select-option value="查看权" label="查看权">
                          <div>查看权</div>
                        </a-select-option>
                        <a-select-option value="管理权" label="管理权">
                          <div>管理权</div>
                        </a-select-option>
                      </a-select>
                    </div>
                    <span class="operation3">复制</span>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="更多"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="删除" label="删除">
                          <div>删除</div>
                        </a-select-option>
                        <a-select-option value="结束" label="结束">
                          <div>结束</div>
                        </a-select-option>
                        <a-select-option value="存为模板" label="存为模板">
                          <div>存为模板</div>
                        </a-select-option>
                        <a-select-option value="基础信息" label="基础信息">
                          <router-link to="/taskpage">基础信息</router-link>
                        </a-select-option>
                      </a-select>
                    </div>
                  </div>
                ) : item.state === "未开始" ? (
                  <div class="operation">
                    <span class="operation1"></span>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="授权"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="权限名单" label="权限名单">
                          <div>权限名单</div>
                        </a-select-option>
                        <a-select-option value="归属权" label="归属权">
                          <div
                            onClick={() => {
                              console.log("点击了");
                            }}
                          >
                            归属权
                          </div>
                        </a-select-option>
                        <a-select-option value="查看权" label="查看权">
                          <div>查看权</div>
                        </a-select-option>
                        <a-select-option value="管理权" label="管理权">
                          <div>管理权</div>
                        </a-select-option>
                      </a-select>
                    </div>
                    <span class="operation3">复制</span>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="更多"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="撤回" label="撤回">
                          <div>撤回</div>
                        </a-select-option>
                        <a-select-option value="结束" label="结束">
                          <div>结束</div>
                        </a-select-option>
                        <a-select-option value="存为模板" label="存为模板">
                          <div>存为模板</div>
                        </a-select-option>
                        <a-select-option value="基础信息" label="基础信息">
                          <router-link to="/taskpage">基础信息</router-link>
                        </a-select-option>
                      </a-select>
                    </div>
                  </div>
                ) : (
                  <div></div>
                );
            }
          });
        } else {
          //单层项目
          value.operation = (
            <div class="operation">
              <span class="operation1"></span>
              <div class="tableSelect">
                <a-select
                  style="width: 50px"
                  value="授权"
                  // options={state.projectNameList}
                  dropdownClassName="tabledropdown"
                >
                  <a-select-option value="权限名单" label="权限名单">
                    <div>权限名单</div>
                  </a-select-option>
                  <a-select-option value="归属权" label="归属权">
                    <div
                      onClick={() => {
                        console.log("点击了");
                      }}
                    >
                      归属权
                    </div>
                  </a-select-option>
                  <a-select-option value="查看权" label="查看权">
                    <div>查看权</div>
                  </a-select-option>
                  <a-select-option value="管理权" label="管理权">
                    <div>管理权</div>
                  </a-select-option>
                </a-select>
              </div>

              {value.state === "草稿" ? (
                <span class="operation3">发布</span>
              ) : (
                <span class="operation3">复制</span>
              )}
              <div class="tableSelect">
                {value.state === "草稿" ? (
                  <a-select
                    style="width: 50px"
                    value="更多"
                    // options={state.projectNameList}
                    dropdownClassName="tabledropdown"
                  >
                    <a-select-option value="复制" label="复制">
                      <div>复制</div>
                    </a-select-option>
                    <a-select-option value="删除" label="删除">
                      <div
                        onClick={() => {
                          console.log("点击了");
                        }}
                      >
                        删除
                      </div>
                    </a-select-option>
                    <a-select-option value="存为模板" label="存为模板">
                      <div>存为模板</div>
                    </a-select-option>
                    <a-select-option value="基础信息" label="基础信息">
                      <router-link to="/taskpage">基础信息</router-link>
                    </a-select-option>
                  </a-select>
                ) : value.state === "进行中" ? (
                  <a-select
                    style="width: 50px"
                    value="更多"
                    // options={state.projectNameList}
                    dropdownClassName="tabledropdown"
                  >
                    <a-select-option value="存为模板" label="存为模板">
                      <div>存为模板</div>
                    </a-select-option>
                    <a-select-option value="结束" label="结束">
                      <div
                        onClick={() => {
                          console.log("点击了");
                        }}
                      >
                        结束
                      </div>
                    </a-select-option>
                    <a-select-option value="撤回" label="撤回">
                      <div>撤回</div>
                    </a-select-option>
                    <a-select-option value="基础信息" label="基础信息">
                      <router-link to="/taskpage">基础信息</router-link>
                    </a-select-option>
                  </a-select>
                ) : value.state === "已结束" || value.state === "未开始" ? (
                  <a-select
                    style="width: 50px"
                    value="更多"
                    // options={state.projectNameList}
                    dropdownClassName="tabledropdown"
                  >
                    <a-select-option value="存为模板" label="存为模板">
                      <div>存为模板</div>
                    </a-select-option>
                    <a-select-option value="删除" label="删除">
                      <div
                        onClick={() => {
                          console.log("点击了");
                        }}
                      >
                        删除
                      </div>
                    </a-select-option>
                    <a-select-option value="基础信息" label="基础信息">
                      <router-link to="/taskpage">基础信息</router-link>
                    </a-select-option>
                  </a-select>
                ) : (
                  <div></div>
                )}
              </div>
            </div>
          );
        }
      });
      state.tableData = data;
    };
    getTableDate();

    return {
      ...toRefs(state),
      columns,
      selectProjectName,
      expandTable,
      getTableDate,
    };
  },
};
</script>
<style lang="scss">
.projectManage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .filter {
    margin-left: 38px;
    margin-right: 38px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .filterItems {
      display: flex;
      flex-wrap: wrap;
      .select {
        margin-right: 20px;
        margin-bottom: 20px;
      }
    }
    .btns {
      display: flex;
      // flex-wrap: wrap;
      .btn {
        padding: 0px 26px 0px 26px;
        height: 38px;
        background: rgba(64, 158, 255, 0);
        border-radius: 8px;
        border: 1px solid rgba(64, 158, 255, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
        flex-shrink: 0;
        .search {
          background-size: 100%;
        }
        .btnText {
          font-size: 14px;
          font-weight: 400;
          color: rgba(64, 158, 255, 1);
          line-height: 36px;
          margin-left: 5px;
        }
      }
      .btn1 {
        .search {
          width: 15px;
          height: 17px;
          background-image: url("../../assets/images/courseManage/search1.png");
        }
      }
      .btn2 {
        .search {
          width: 16px;
          height: 18px;
          background-image: url("../../assets/images/courseManage/reset1.png");
        }
      }
      .btn3 {
        margin-right: 0px;
        .search {
          width: 17px;
          height: 18px;
          background-image: url("../../assets/images/courseManage/add1.png");
        }
      }
      .btn1:hover {
        background: rgba(64, 158, 255, 1);
        .search {
          background-image: url("../../assets/images/courseManage/search0.png");
        }
        .btnText {
          color: #ffffff;
        }
      }
      .btn2:hover {
        background: rgba(64, 158, 255, 1);
        .search {
          background-image: url("../../assets/images/courseManage/reset0.png");
        }
        .btnText {
          color: #ffffff;
        }
      }
      .btn3:hover {
        background: rgba(64, 158, 255, 1);
        .search {
          background-image: url("../../assets/images/courseManage/add0.png");
        }
        .btnText {
          color: #ffffff;
        }
      }
    }
  }
  .tableBox {
    margin: 20px 38px 30px;
    .ant-table-thead > tr > th {
      font-size: 14px;
      font-weight: 400;
      color: #999ba3;
      line-height: 36px;
      padding: 5px 16px;
      background-color: #eff4fc;
    }
  }
  .operation {
    font-size: 14px;
    font-weight: 400;
    color: #4ea6ff;
    // line-height: 36px;
    .operation1 {
      margin-left: 21px;
      width: 28px;
      display: inline-block;
    }
    .operation3 {
      margin-left: 21px;
      width: 70px;
      display: inline-block;
      text-align: center;
    }
    .more {
      width: 50px;
      display: inline-block;
      margin-left: 21px;
      position: relative;
      text-align: left;
      // z-index: 99999;
      .moreArrow {
        width: 13px;
        height: 7px;
        display: inline-block;
        background-image: url("../../assets/images/navtop/down.png");
        background-size: 100%;
        margin: 2px;
        margin-left: 7px;
      }
      .moreItems {
        width: 80px;
        padding: 5px;
        display: none;
        background: #ffffff;
        box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
        border-radius: 3px;
        border: 0px solid #dcdcdc;
        position: absolute;
        left: 0px;
        top: 28px;
        z-index: 100;
        text-align: center;
      }
    }
    .more:hover .moreArrow {
      background-image: url("../../assets/images/navtop/up.png");
    }
    .more:hover .moreItems {
      display: block;
    }
  }
}
</style>
