<!-- 项目页面 -->
<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>
        <div class="btn btn3" @click="showModal1">
          <div class="search"></div>
          <div class="btnText">创建项目</div>
        </div>
      </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;
          },
        }"
      >
        <!-- <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 class="tableBox" style="display: none">
      <div
        class="taskbox"
        @click="showModal1"
        style="background: linear-gradient(180deg, #ddeaff, #f0f8fe)"
      >
        <div class="leftt">
          <img src="../../assets/images/taskpage/left2.png" />
        </div>
        <div class="photo">
          <img src="../../assets/images/projectadd/nopro.png" />
        </div>
        <div class="rightt">
          <img src="../../assets/images/taskpage/right2.png" />
        </div>
        <div class="centerbox" style="color: rgba(78, 166, 255, 1)">
          创建项目
        </div>
        <div class="centermain">点击创建项目任务</div>
      </div>
    </div>
    <!-- 创建子项目弹窗 -->
    <div>
      <a-modal
        v-model:visible="sonproject"
        :title="null"
        @ok="closeModal"
        :footer="null"
        :closable="false"
        wrapClassName="sonproject"
        width="764px"
        height="356px"
      >
        <div
          class="modalHeader"
          style="
            width: 100%;
            height: 68px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="headerLeft" style="margin-left: 32px">
            <span class="headerLeftText" style="font-size: 16px"
              >请选择项目类别</span
            >
          </div>
          <div style="cursor: pointer; margin-right: 32px" @click="closeModal">
            <img
              style="width: 22px; height: 22px"
              src="../../assets/images/basicinfo/close22.png"
            />
          </div>
        </div>
        <div class="modalMain">
          <router-link
            to="/sonproject"
            class="taskbox"
            style="
              margin-right: 24px;
              background: linear-gradient(180deg, #ddeaff 0%, #f0f8fe 100%);
            "
          >
            <div class="leftt">
              <img src="../../assets/images/taskpage/left2.png" />
            </div>
            <div class="photo">
              <img src="../../assets/images/taskpage/picture4.png" />
            </div>
            <div class="rightt">
              <img src="../../assets/images/taskpage/right2.png" />
            </div>
            <div class="centerbox" style="color: rgba(78, 166, 255, 1)">
              单层子项目
            </div>
          </router-link>
          <div
            class="taskbox"
            @click="showModal3"
            style="
              background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
            "
          >
            <div class="leftt">
              <img src="../../assets/images/taskpage/left1.png" />
            </div>
            <div class="photo">
              <img src="../../assets/images/taskpage/picture5.png" />
            </div>
            <div class="rightt">
              <img src="../../assets/images/taskpage/right1.png" />
            </div>
            <div class="centerbox" style="color: rgba(255, 182, 78, 1)">
              多层子项目
            </div>
          </div>
        </div>
      </a-modal>
    </div>
    <!-- 创建子项目弹窗 -->
    <!-- 创建项目弹窗 -->
    <div>
      <div>
        <a-modal
          v-model:visible="estabish"
          :title="null"
          @ok="closeModal1"
          :footer="null"
          :closable="false"
          wrapClassName="estabish"
          width="638px"
          height="468px"
        >
          <div
            class="modalHeader"
            style="
              width: 100%;
              height: 68px;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div class="headerLeft" style="margin-left: 32px">
              <span class="headerLeftText" style="font-size: 16px"
                >请选择项目类别</span
              >
            </div>
            <div
              style="cursor: pointer; margin-right: 32px"
              @click="closeModal1"
            >
              <img
                style="width: 22px; height: 22px"
                src="../../assets/images/basicinfo/close22.png"
              />
            </div>
          </div>
          <div class="modalMain">
            <router-link to="/projectadd">
              <div
                class="taskbox"
                style="
                  background: linear-gradient(180deg, #ddeaff 0%, #f0f8fe 100%);
                "
              >
                <div class="leftt">
                  <img src="../../assets/images/taskpage/left2.png" />
                </div>
                <div class="photo">
                  <img src="../../assets/images/taskpage/picture6.png" />
                </div>
                <div class="rightt">
                  <img src="../../assets/images/taskpage/right2.png" />
                </div>
                <div class="centerbox" style="color: rgba(78, 166, 255, 1)">
                  单层项目
                </div>
                <div class="centermain">
                  不包含子项目，直接填写项目基础信息后创建任务
                </div>
              </div>
            </router-link>
            <div
              class="taskbox"
              @click="showModal2"
              style="
                margin-bottom: 40px;
                background: linear-gradient(180deg, #e5f6ec 0%, #eef9f3 100%);
              "
            >
              <div class="leftt">
                <img src="../../assets/images/taskpage/left3.png" />
              </div>
              <div class="photo">
                <img src="../../assets/images/taskpage/picture7.png" />
              </div>
              <div class="rightt">
                <img src="../../assets/images/taskpage/right3.png" />
              </div>
              <div class="centerbox1" style="color: rgba(93, 201, 136, 1)">
                多层项目
              </div>
              <div class="centermain1">
                包含子项目，分为多层子项目和单层子项目，多层子项目可创建班级，通过班级填写基础信息并创建任务
              </div>
            </div>
          </div>
        </a-modal>
      </div>
    </div>
    <!-- 创建项目弹窗 -->
    <!-- 创建多层项目弹窗 -->
    <div>
      <a-modal
        v-model:visible="doublepro"
        :title="null"
        @ok="closeModal2"
        :footer="null"
        :closable="false"
        wrapClassName="doublepro"
        width="624px"
        height="476px"
      >
        <div
          class="modalHeader"
          style="
            width: 100%;
            height: 68px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="headerLeft" style="margin-left: 32px">
            <span class="headerLeftText" style="font-size: 16px"
              >创建多层项目</span
            >
          </div>
          <div style="cursor: pointer; margin-right: 32px" @click="closeModal2">
            <img
              style="width: 22px; height: 22px"
              src="../../assets/images/basicinfo/close22.png"
            />
          </div>
        </div>
        <div class="modalMain">
          <div class="name">
            <div class="star" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">项目名称:</div>
            <div class="in">
              <a-input
                v-model:value="value"
                show-count
                :maxlength="30"
                placeholder="请输入项目名称"
                style="border-radius: 8px"
              />
            </div>
          </div>
          <div class="name">
            <div class="star" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">分类:</div>
            <div class="in">
              <a-select
                v-model:value="value"
                placeholder="四个养成"
                style="border-radius: 8px; height: 40px"
              />
            </div>
          </div>
          <div class="name">
            <div class="star" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">项目经理:</div>
            <div class="in">
              <a-input
                v-model:value="value"
                placeholder="请选择项目经理"
                style="border-radius: 8px; height: 40px"
              />
            </div>
          </div>
          <div class="name">
            <div class="star" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">资源归属:</div>
            <div class="in">
              <a-input
                v-model:value="value"
                style="border-radius: 8px; height: 40px"
              />
            </div>
          </div>
          <div class="pubtn">
            <a-button class="pubtn1" @click="closeModal2">取消</a-button>
            <a-button class="pubtn2" @click="closeModal2">确定</a-button>
          </div>
        </div>
      </a-modal>
    </div>
    <!-- 创建多层项目弹窗 -->
    <!-- 创建多层子项目弹窗 -->
    <div>
      <a-modal
        v-model:visible="doublesonpro"
        :title="null"
        @ok="closeModal3"
        :footer="null"
        :closable="false"
        wrapClassName="doublesonpro"
        width="624px"
        height="476px"
      >
        <div
          class="modalHeader"
          style="
            width: 100%;
            height: 68px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="headerLeft" style="margin-left: 32px">
            <span class="headerLeftText" style="font-size: 16px"
              >创建多层子项目</span
            >
          </div>
          <div style="cursor: pointer; margin-right: 32px" @click="closeModal3">
            <img
              style="width: 22px; height: 22px"
              src="../../assets/images/basicinfo/close22.png"
            />
          </div>
        </div>
        <div class="modalMain">
          <div style="margin-left: 40px; margin-top: 40px">
            <span style="color: #000000; font-size: 14px">项目归属：</span>
            <span style="color: #999999; font-size: 14px; margin-left: 10px"
              >管理者进阶</span
            >
          </div>
          <div class="name">
            <div class="star" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">子项目名称:</div>
            <div class="in">
              <a-input
                v-model:value="value"
                placeholder="请输入项目名称"
                style="border-radius: 8px; height: 40px"
              />
            </div>
          </div>
          <div class="name">
            <div class="star" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">分类:</div>
            <div class="in">
              <a-select
                v-model:value="value"
                placeholder="四个养成"
                style="border-radius: 8px; height: 40px"
              />
            </div>
          </div>
          <div class="name">
            <div class="star" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">子项目经理:</div>
            <div class="in">
              <a-input
                v-model:value="value"
                placeholder="自动带出 可编辑"
                style="border-radius: 8px; height: 40px"
              />
            </div>
          </div>
          <div class="name">
            <div class="star" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">资源归属:</div>
            <div class="in">
              <a-input
                v-model:value="value"
                style="border-radius: 8px; height: 40px"
              />
            </div>
          </div>
          <div class="pubtn">
            <a-button class="pubtn1" @click="closeModal3">取消</a-button>
            <a-button class="pubtn2" @click="closeModal3">确定</a-button>
          </div>
        </div>
      </a-modal>
    </div>
    <!-- 创建多层子项目弹窗 -->
    <!-- 复制路径弹窗 -->
    <a-modal
      v-model:visible="copyModal"
      :footer="null"
      :closable="closeCopy"
      wrapClassName="CopyModal"
      centered="true"
    >
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeCopyModal"></div>
          </div>
          <div class="body">
            <span>您确定要复制此路径吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1">
              <div class="btnText" @click="delete_exit">取消</div>
            </div>
            <div class="del_btn btn2">
              <div class="btnText" @click="delete_exit">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 结束项目弹窗 -->
    <a-modal
      v-model:visible="stopModal"
      :footer="null"
      :closable="closeStop"
      wrapClassName="CopyModal"
      centered="true"
    >
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeStopModal"></div>
          </div>
          <div class="body">
            <span>是否结束项目</span>
            <div class="back">
              （项目结束后学员将无法继续学习，此操作不可逆）
            </div>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1">
              <div class="btnText" @click="delete_exit">取消</div>
            </div>
            <div class="del_btn btn2">
              <div class="btnText" @click="delete_exit">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 删除项目弹窗 -->
    <a-modal
      v-model:visible="deleteModal"
      :footer="null"
      :closable="closeDelete"
      wrapClassName="CopyModal"
      centered="true"
    >
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeDeleteModal"></div>
          </div>
          <div class="body">
            <span>您确定要删除此项目吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1">
              <div class="btnText" @click="delete_exit">取消</div>
            </div>
            <div class="del_btn btn2">
              <div class="btnText" @click="delete_exit">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 存为模板弹窗 -->
    <a-modal
      v-model:visible="startModal"
      :footer="null"
      :closable="closeStart"
      wrapClassName="CopyModal"
      centered="true"
    >
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeStartModal"></div>
          </div>
          <div class="body">
            <span>您确定要存为模板吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1">
              <div class="btnText" @click="delete_exit">取消</div>
            </div>
            <div class="del_btn btn2">
              <div class="btnText" @click="delete_exit">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 撤回路径弹窗 -->
    <a-modal
      v-model:visible="backModal"
      :footer="null"
      :closable="closeBack"
      wrapClassName="CopyModal"
      centered="true"
    >
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeBackModal"></div>
          </div>
          <div class="body">
            <span>是否撤回项目</span>
            <div class="back">（项目撤回后学员进度保留，发布后可继续学习）</div>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1">
              <div class="btnText" @click="delete_exit">取消</div>
            </div>
            <div class="del_btn btn2">
              <div class="btnText" @click="delete_exit">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 归属权抽屉 -->
    <proj-owner-ship v-model:ProjOwnervisible="ProjOwnervisible" />
    <!-- 授权名单抽屉 -->
    <proj-power-list v-model:ProjPvisible="ProjPvisible" />
  </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
import ProjOwnerShip from "../../components/drawers/ProjectOwn";
import ProjPowerList from "../../components/drawers/ProjPowerList";
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",
    fixed: "right",
  },
];

export default {
  name: "projectManage",
  components: { ProjOwnerShip, ProjPowerList },
  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,
      sonproject: false,
      estabish: false,
      doublepro: false,
      doublesonpro: false,
      copyModal: false, //复制弹窗
      closeCopy: false, //复制弹窗关闭图标
      stopModal: false, //停用弹窗
      closeStop: false, //停用弹窗关闭图标
      deleteModal: false, //删除弹窗
      closeDelete: false, //删除弹窗关闭图标
      startModal: false, //启用弹窗
      closeStart: false, //启用弹窗关闭图标
      backModal: false, //撤回弹窗
      closeBack: false, //撤回弹窗关闭图标
      ProjOwnervisible: false,
      ProjPvisible: false,
    });

    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) {
          //多层项目
          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
                        onClick={() => {
                          showProjPrower();
                        }}
                      >
                        权限名单
                      </div>
                    </a-select-option>
                    <a-select-option value="归属权" label="归属权">
                      <div
                        onClick={() => {
                          console.log("点击了111");
                          showProjOwner();
                        }}
                      >
                        归属权
                      </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"
                  style="cursor: pointer"
                  onClick={() => {
                    state.sonproject = true;
                  }}
                >
                  创建子项目
                </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
                        onClick={() => {
                          showStartModal();
                        }}
                      >
                        存为模板
                      </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
                        onClick={() => {
                          showProjPrower();
                        }}
                      >
                        权限名单
                      </div>
                    </a-select-option>
                    <a-select-option value="归属权" label="归属权">
                      <div
                        onClick={() => {
                          console.log("点击了111");
                          showProjOwner();
                        }}
                      >
                        归属权
                      </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"
                  onClick={() => {
                    showCopyModal();
                  }}
                >
                  复制
                </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
                        onClick={() => {
                          showProjPrower();
                        }}
                      >
                        权限名单
                      </div>
                    </a-select-option>
                    <a-select-option value="归属权" label="归属权">
                      <div
                        onClick={() => {
                          console.log("点击了111");
                          showProjOwner();
                        }}
                      >
                        归属权
                      </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"
                  onClick={() => {
                    showCopyModal();
                  }}
                >
                  复制
                </span>
                <span
                  class="more"
                  onClick={() => {
                    showDeleteModal();
                  }}
                >
                  删除
                </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
                            onClick={() => {
                              showProjPrower();
                            }}
                          >
                            权限名单
                          </div>
                        </a-select-option>
                        <a-select-option value="归属权" label="归属权">
                          <div
                            onClick={() => {
                              console.log("点击了111");
                              showProjOwner();
                            }}
                          >
                            归属权
                          </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>
                    <router-link to="/classadd" class="operation3">
                      创建班级
                    </router-link>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="更多"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="复制" label="复制">
                          <div
                            onClick={() => {
                              showCopyModal();
                            }}
                          >
                            复制
                          </div>
                        </a-select-option>
                        <a-select-option value="删除" label="删除">
                          <div
                            onClick={() => {
                              showDeleteModal();
                            }}
                          >
                            删除
                          </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
                            onClick={() => {
                              showProjPrower();
                            }}
                          >
                            权限名单
                          </div>
                        </a-select-option>
                        <a-select-option value="归属权" label="归属权">
                          <div
                            onClick={() => {
                              console.log("点击了111");
                              showProjOwner();
                            }}
                          >
                            归属权
                          </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>

                    <router-link to="/classadd" class="operation3">
                      创建班级
                    </router-link>
                    <span
                      class="more"
                      onClick={() => {
                        showCopyModal();
                      }}
                    >
                      复制
                    </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
                            onClick={() => {
                              showProjPrower();
                            }}
                          >
                            权限名单
                          </div>
                        </a-select-option>
                        <a-select-option value="归属权" label="归属权">
                          <div
                            onClick={() => {
                              console.log("点击了111");
                              showProjOwner();
                            }}
                          >
                            归属权
                          </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"
                      onClick={() => {
                        showCopyModal();
                      }}
                    >
                      复制
                    </span>
                    <span
                      class="more"
                      onClick={() => {
                        showDeleteModal();
                      }}
                    >
                      删除
                    </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
                              onClick={() => {
                                showProjPrower();
                              }}
                            >
                              权限名单
                            </div>
                          </a-select-option>
                          <a-select-option value="归属权" label="归属权">
                            <div
                              onClick={() => {
                                console.log("点击了111");
                                showProjOwner();
                              }}
                            >
                              归属权
                            </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
                              onClick={() => {
                                showCopyModal();
                              }}
                            >
                              复制
                            </div>
                          </a-select-option>
                          <a-select-option value="删除" label="删除">
                            <div
                              onClick={() => {
                                showDeleteModal();
                              }}
                            >
                              删除
                            </div>
                          </a-select-option>
                          <a-select-option value="存为模板" label="存为模板">
                            <div
                              onClick={() => {
                                showStartModal();
                              }}
                            >
                              存为模板
                            </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
                              onClick={() => {
                                showProjPrower();
                              }}
                            >
                              权限名单
                            </div>
                          </a-select-option>
                          <a-select-option value="归属权" label="归属权">
                            <div
                              onClick={() => {
                                console.log("点击了111");
                                showProjOwner();
                              }}
                            >
                              归属权
                            </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"
                        onClick={() => {
                          showCopyModal();
                        }}
                      >
                        复制
                      </span>
                      <div class="tableSelect">
                        <a-select
                          style="width: 50px"
                          value="更多"
                          // options={state.projectNameList}
                          dropdownClassName="tabledropdown"
                        >
                          <a-select-option value="撤回" label="撤回">
                            <div
                              onClick={() => {
                                showBackModal();
                              }}
                            >
                              撤回
                            </div>
                          </a-select-option>
                          <a-select-option value="结束" label="结束">
                            <div
                              onClick={() => {
                                showStopModal();
                              }}
                            >
                              结束
                            </div>
                          </a-select-option>
                          <a-select-option value="存为模板" label="存为模板">
                            <div
                              onClick={() => {
                                showStartModal();
                              }}
                            >
                              存为模板
                            </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
                              onClick={() => {
                                showProjPrower();
                              }}
                            >
                              权限名单
                            </div>
                          </a-select-option>
                          <a-select-option value="归属权" label="归属权">
                            <div
                              onClick={() => {
                                console.log("点击了111");
                                showProjOwner();
                              }}
                            >
                              归属权
                            </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"
                        onClick={() => {
                          showCopyModal();
                        }}
                      >
                        复制
                      </span>
                      <span
                        class="operation3"
                        onClick={() => {
                          showCopyModal();
                        }}
                      >
                        复制
                      </span>
                      <div class="tableSelect">
                        <a-select
                          style="width: 50px"
                          value="更多"
                          // options={state.projectNameList}
                          dropdownClassName="tabledropdown"
                        >
                          <a-select-option value="删除" label="删除">
                            <div
                              onClick={() => {
                                showDeleteModal();
                              }}
                            >
                              删除
                            </div>
                          </a-select-option>
                          <a-select-option value="存为模板" label="存为模板">
                            <div
                              onClick={() => {
                                showStartModal();
                              }}
                            >
                              存为模板
                            </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
                              onClick={() => {
                                showProjPrower();
                              }}
                            >
                              权限名单
                            </div>
                          </a-select-option>
                          <a-select-option value="归属权" label="归属权">
                            <div
                              onClick={() => {
                                console.log("点击了111");
                                showProjOwner();
                              }}
                            >
                              归属权
                            </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"
                        onClick={() => {
                          showCopyModal();
                        }}
                      >
                        复制
                      </span>
                      <div class="tableSelect">
                        <a-select
                          style="width: 50px"
                          value="更多"
                          // options={state.projectNameList}
                          dropdownClassName="tabledropdown"
                        >
                          <a-select-option value="结束" label="结束">
                            <div
                              onClick={() => {
                                showStopModal();
                              }}
                            >
                              结束
                            </div>
                          </a-select-option>
                          <a-select-option value="撤回" label="撤回">
                            <div
                              onClick={() => {
                                showBackModal();
                              }}
                            >
                              撤回
                            </div>
                          </a-select-option>
                          <a-select-option value="存为模板" label="存为模板">
                            <div
                              onClick={() => {
                                showStartModal();
                              }}
                            >
                              存为模板
                            </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
                            onClick={() => {
                              showProjPrower();
                            }}
                          >
                            权限名单
                          </div>
                        </a-select-option>
                        <a-select-option value="归属权" label="归属权">
                          <div
                            onClick={() => {
                              console.log("点击了111");
                              showProjOwner();
                            }}
                          >
                            归属权
                          </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
                            onClick={() => {
                              showCopyModal();
                            }}
                          >
                            复制
                          </div>
                        </a-select-option>
                        <a-select-option value="删除" label="删除">
                          <div
                            onClick={() => {
                              showDeleteModal();
                            }}
                          >
                            删除
                          </div>
                        </a-select-option>
                        <a-select-option value="存为模板" label="存为模板">
                          <div
                            onClick={() => {
                              showStartModal();
                            }}
                          >
                            存为模板
                          </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
                            onClick={() => {
                              showProjPrower();
                            }}
                          >
                            权限名单
                          </div>
                        </a-select-option>
                        <a-select-option value="归属权" label="归属权">
                          <div
                            onClick={() => {
                              console.log("点击了111");
                              showProjOwner();
                            }}
                          >
                            归属权
                          </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"
                      onClick={() => {
                        showCopyModal();
                      }}
                    >
                      复制
                    </span>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="更多"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="撤回" label="撤回">
                          <div
                            onClick={() => {
                              showBackModal();
                            }}
                          >
                            撤回
                          </div>
                        </a-select-option>
                        <a-select-option value="结束" label="结束">
                          <div
                            onClick={() => {
                              showStopModal();
                            }}
                          >
                            结束
                          </div>
                        </a-select-option>
                        <a-select-option value="存为模板" label="存为模板">
                          <div
                            onClick={() => {
                              showStartModal();
                            }}
                          >
                            存为模板
                          </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
                            onClick={() => {
                              showProjPrower();
                            }}
                          >
                            权限名单
                          </div>
                        </a-select-option>
                        <a-select-option value="归属权" label="归属权">
                          <div
                            onClick={() => {
                              console.log("点击了111");
                              showProjOwner();
                            }}
                          >
                            归属权
                          </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"
                      onClick={() => {
                        showCopyModal();
                      }}
                    >
                      复制
                    </span>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="更多"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="删除" label="删除">
                          <div
                            onClick={() => {
                              showDeleteModal();
                            }}
                          >
                            删除
                          </div>
                        </a-select-option>
                        <a-select-option value="结束" label="结束">
                          <div
                            onClick={() => {
                              showStopModal();
                            }}
                          >
                            结束
                          </div>
                        </a-select-option>
                        <a-select-option value="存为模板" label="存为模板">
                          <div
                            onClick={() => {
                              showStartModal();
                            }}
                          >
                            存为模板
                          </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
                            onClick={() => {
                              showProjPrower();
                            }}
                          >
                            权限名单
                          </div>
                        </a-select-option>
                        <a-select-option value="归属权" label="归属权">
                          <div
                            onClick={() => {
                              console.log("点击了111");
                              showProjOwner();
                            }}
                          >
                            归属权
                          </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"
                      onClick={() => {
                        showCopyModal();
                      }}
                    >
                      复制
                    </span>
                    <div class="tableSelect">
                      <a-select
                        style="width: 50px"
                        value="更多"
                        // options={state.projectNameList}
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option value="撤回" label="撤回">
                          <div
                            onClick={() => {
                              showBackModal();
                            }}
                          >
                            撤回
                          </div>
                        </a-select-option>
                        <a-select-option value="结束" label="结束">
                          <div
                            onClick={() => {
                              showStopModal();
                            }}
                          >
                            结束
                          </div>
                        </a-select-option>
                        <a-select-option value="存为模板" label="存为模板">
                          <div
                            onClick={() => {
                              showStartModal();
                            }}
                          >
                            存为模板
                          </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">
              {value.state === "草稿" ? (
                <span class="operation1">编辑</span>
              ) : (
                <span class="operation1"></span>
              )}
              <div class="tableSelect">
                <a-select
                  style="width: 50px"
                  value="授权"
                  // options={state.projectNameList}
                  dropdownClassName="tabledropdown"
                >
                  <a-select-option value="权限名单" label="权限名单">
                    <div
                      onClick={() => {
                        showProjPrower();
                      }}
                    >
                      权限名单
                    </div>
                  </a-select-option>
                  <a-select-option value="归属权" label="归属权">
                    <div
                      onClick={() => {
                        console.log("点击了111");
                        showProjOwner();
                      }}
                    >
                      归属权
                    </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"
                  onClick={() => {
                    showCopyModal();
                  }}
                >
                  复制
                </span>
              )}
              <div class="tableSelect">
                {value.state === "草稿" ? (
                  <a-select
                    style="width: 50px"
                    value="更多"
                    // options={state.projectNameList}
                    dropdownClassName="tabledropdown"
                  >
                    <a-select-option value="复制" label="复制">
                      <div
                        onClick={() => {
                          showCopyModal();
                        }}
                      >
                        复制
                      </div>
                    </a-select-option>
                    <a-select-option value="删除" label="删除">
                      <div
                        onClick={() => {
                          showDeleteModal();
                        }}
                      >
                        删除
                      </div>
                    </a-select-option>
                    <a-select-option value="存为模板" label="存为模板">
                      <div
                        onClick={() => {
                          showStartModal();
                        }}
                      >
                        存为模板
                      </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
                        onClick={() => {
                          showStartModal();
                        }}
                      >
                        存为模板
                      </div>
                    </a-select-option>
                    <a-select-option value="结束" label="结束">
                      <div
                        onClick={() => {
                          showStopModal();
                        }}
                      >
                        结束
                      </div>
                    </a-select-option>
                    <a-select-option value="撤回" label="撤回">
                      <div
                        onClick={() => {
                          showBackModal();
                        }}
                      >
                        撤回
                      </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
                        onClick={() => {
                          showStartModal();
                        }}
                      >
                        存为模板
                      </div>
                    </a-select-option>
                    <a-select-option value="删除" label="删除">
                      <div
                        onClick={() => {
                          showDeleteModal();
                        }}
                      >
                        删除
                      </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;
      console.log("tableData", state.tableData);
    };
    getTableDate();

    const showModal = () => {
      state.sonproject = true;
    };
    const closeModal = () => {
      state.sonproject = false;
    };

    const showModal1 = () => {
      state.estabish = true;
    };
    const closeModal1 = () => {
      state.estabish = false;
    };

    const showModal2 = () => {
      state.doublepro = true;
      state.estabish = false;
    };
    const closeModal2 = () => {
      state.doublepro = false;
    };

    const showModal3 = () => {
      state.doublesonpro = true;
      state.sonproject = false;
    };
    const closeModal3 = () => {
      state.doublesonpro = false;
    };
    const showCopyModal = () => {
      state.copyModal = true;
    };
    const closeCopyModal = () => {
      state.copyModal = false;
    };
    const showStopModal = () => {
      state.stopModal = true;
    };
    const closeStopModal = () => {
      state.stopModal = false;
    };
    const showDeleteModal = () => {
      state.deleteModal = true;
    };
    const closeDeleteModal = () => {
      state.deleteModal = false;
    };
    const showStartModal = () => {
      state.startModal = true;
    };
    const closeStartModal = () => {
      state.startModal = false;
    };
    const showBackModal = () => {
      state.backModal = true;
    };
    const closeBackModal = () => {
      state.backModal = false;
    };
    const showProjOwner = () => {
      state.ProjOwnervisible = true;
    };
    const showProjPrower = () => {
      state.ProjPvisible = true;
    };
    return {
      ...toRefs(state),
      columns,
      selectProjectName,
      expandTable,
      showModal,
      closeModal,
      showModal1,
      closeModal1,
      showModal2,
      closeModal2,
      showModal3,
      closeModal3,
      showCopyModal,
      closeCopyModal,
      showStopModal,
      closeStopModal,
      showDeleteModal,
      closeDeleteModal,
      showStartModal,
      closeStartModal,
      showBackModal,
      closeBackModal,
      getTableDate,
      showProjOwner,
      showProjPrower,
    };
  },
};
</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;
    }
  }
}
.doublesonpro {
  .ant-modal {
    .ant-modal-body {
      .modalHeader {
        background: linear-gradient(
              0deg,
              rgba(78, 166, 255, 0) 0%,
              rgba(78, 166, 255, 0.2) 100%
            );
      }
      padding: 0;
      .modalMain {
        display: flex;
        flex-direction: column;
        //align-items: center;
        margin-left: 60px;
        .name {
          //width: 90%;
          // background-color: lightcoral;
          display: flex;
          justify-content: right;
          margin-top: 32px;
          align-items: center;
          height: 40px;
          // border: 1px solid black;

          .inname {
            color: #000000;
            font-size: 14px;
            margin-left: 7px;
          }
          .in {
            margin-left: 14px;
            width: 80%;
            .ant-input {
              border-radius: 5px;
              // height: 120%;
              width: 80%;
              height: 30px;
            }
            .ant-select {
              border-radius: 5px;
              // height: 120%;
              width: 80%;
              height: 40px;
              .ant-select-selector {
                border-radius: 8px;
                // height: 120%;
                width: 100%;
                height: 40px;
              }
            }
          }
        }
        .pubtn {
          display: flex;
          justify-content: center;
          margin-top: 25px;
          //margin-bottom: 29px;
          .pubtn1 {
            width: 100px;
            height: 40px;
            margin-right: 16px;
            margin-bottom: 29px;
            border: 1px solid #409eff;
            border-radius: 4px;
            color: rgba(78, 166, 255, 1);
            font-size: 14px;
            //line-height: 36px;
            align-items: center;
            background: rgba(255, 255, 255, 1);
          }
          .pubtn2 {
            width: 100px;
            height: 40px;
            margin-bottom: 29px;
            border: 1px solid #409eff;
            border-radius: 4px;
            color: #ffffff;
            font-size: 14px;
            align-items: center;
            //line-height: 36px;
            background: #409eff;
          }
        }
      }
    }
  }
}
.doublepro {
  .ant-modal {
    .ant-modal-body {
      .modalHeader {
        background: linear-gradient(
              0deg,
              rgba(78, 166, 255, 0) 0%,
              rgba(78, 166, 255, 0.2) 100%
            );
      }
      padding: 0;
      .modalMain {
        display: flex;
        flex-direction: column;
        align-items: center;
        .name {
          width: 78%;
          // background-color: lightcoral;
          display: flex;
          justify-content: right;
          margin-top: 32px;
          align-items: center;
          height: 40px;
          // border: 1px solid black;

          .inname {
            color: #000000;
            font-size: 14px;
            margin-left: 7px;
          }
          .in {
            margin-left: 14px;
            width: 81%;
            .ant-input {
              border-radius: 5px;
              // height: 120%;
              width: 100%;
              height: 30px;
            }
            .ant-select {
              border-radius: 5px;
              // height: 120%;
              width: 100%;
              height: 40px;
              .ant-select-selector {
                border-radius: 8px;
                // height: 120%;
                width: 100%;
                height: 40px;
              }
            }
          }
        }
        .pubtn {
          display: flex;
          justify-content: center;
          margin-top: 25px;
          //margin-bottom: 29px;
          .pubtn1 {
            width: 100px;
            height: 40px;
            margin-right: 16px;
            margin-bottom: 29px;
            border: 1px solid #409eff;
            border-radius: 4px;
            color: rgba(78, 166, 255, 1);
            font-size: 14px;
            //line-height: 36px;
            align-items: center;
            background: rgba(255, 255, 255, 1);
          }
          .pubtn2 {
            width: 100px;
            height: 40px;
            margin-bottom: 29px;
            border: 1px solid #409eff;
            border-radius: 4px;
            color: #ffffff;
            font-size: 14px;
            align-items: center;
            //line-height: 36px;
            background: #409eff;
          }
        }
      }
    }
  }
}
.sonproject {
  .ant-modal {
    .ant-modal-body {
      padding: 0 !important;
      .modalHeader {
        background: linear-gradient(
              0deg,
              rgba(78, 166, 255, 0) 0%,
              rgba(78, 166, 255, 0.2) 100%
            );
      }
      .modalMain {
        display: flex;
        justify-content: center;
        margin-top: 48px;
        //margin-bottom: 40px;
        .taskbox {
          width: 310px;
          height: 160px;
          border-radius: 10px;
          position: relative;
          margin-bottom: 80px;
          cursor: pointer;
          .leftt {
            position: absolute;
            top: 18px;
            left: 0;
          }
          .photo {
            position: absolute;
            top: 44px;
            left: 40px;
          }
          .rightt {
            position: absolute;
            top: 69px;
            right: 26px;
          }
          .centerbox {
            position: absolute;
            top: 66px;
            left: 136px;
            font-size: 20px;
            font-weight: 700;
            //line-height: 36px;
          }
          .centermain {
            color: rgba(135, 139, 146, 1);
            font-size: 14px;
            position: absolute;
            left: 144px;
            bottom: 49px;
          }
        }
      }
    }
  }
}
.estabish {
  .ant-modal {
    .ant-modal-body {
      padding: 0 !important;
      .modalHeader {
        background: linear-gradient(
                0deg,
                rgba(78, 166, 255, 0) 0%,
                rgba(78, 166, 255, 0.2) 100%
              );
      }
      .modalMain {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 48px;
        //margin-bottom: 40px;
        .taskbox {
          width: 438px;
          height: 160px;
          border-radius: 10px;
          position: relative;
          margin-bottom: 24px;
          cursor: pointer;
          .leftt {
            position: absolute;
            top: 18px;
            left: 0;
          }
          .photo {
            position: absolute;
            top: 44px;
            left: 40px;
          }
          .rightt {
            position: absolute;
            top: 69px;
            right: 26px;
          }
          .centerbox {
            position: absolute;
            top: 42px;
            left: 120px;
            font-size: 20px;
            font-weight: 500;
            //line-height: 36px;
          }
          .centerbox1 {
            position: absolute;
            top: 32px;
            left: 120px;
            font-size: 20px;
            font-weight: 500;
            //line-height: 36px;
          }
          .centermain {
            color: rgba(135, 139, 146, 1);
            font-size: 14px;
            line-height: 20px;
            position: absolute;
            width: 252px;
            left: 120px;
            top: 78px;
          }
          .centermain1 {
            color: rgba(135, 139, 146, 1);
            font-size: 14px;
            line-height: 20px;
            position: absolute;
            width: 252px;
            left: 120px;
            top: 68px;
          }
        }
      }
    }
  }
}
.CopyModal {
  .ant-modal {
    width: 424px !important;
    height: 258px !important;
    .ant-modal-content {
      width: 424px !important;
      height: 258px !important;
      .ant-modal-body {
        width: 424px !important;
        height: 258px !important;
        padding: 0 !important;
        .delete {
          z-index: 999;
          width: 424px;
          height: 258px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          border-radius: 4px;
          // position: absolute;
          // left: 50%;
          // top: 10%;
          // transform: translate(-50%, -50%);
          .del_header {
            position: absolute;
            width: calc(100%);
            height: 68px;
            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
          }
          .del_main {
            width: 100%;
            position: relative;
            .header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;
              .icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/coursewareManage/QR.png);
                background-size: 100% 100%;
              }
              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }
            .body {
              width: 100%;
              margin: 34px auto 56px auto;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              // background-color: red;
              position: relative;
              .back {
                position: absolute;
                top: 30px;
                font-size: 12px;
                font-weight: 400;
                color: #666666;
              }
            }
            .del_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;
              .del_btn {
                width: 100px;
                height: 40px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;

                flex-shrink: 0;
                cursor: pointer;
                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }
              .btn1 {
                border: 1px solid rgba(64, 158, 255, 1);
                color: #4ea6ff;
                margin-right: 14px;
              }
              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
