<!-- 评估管理页面 -->
<template>
  <div class="researchmanage">
    <!-- 搜索框及按钮 -->
    <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="projectStateList"
            @change="selectProjectState"
            allowClear
            showSearch
          ></a-select>
        </div>
        <div class="select">
          <!-- <a-date-picker
            v-model="selectTime"
            type="date"
            placeholder="时间"
            style="width: 270px"
          /> -->
          <a-range-picker
            v-model:value="value2"
            separator="至"
            :placeholder="['        开始时间', '        结束时间']"
          />
        </div>
        <div style="display: flex; margin-bottom: 20px">
          <div class="btn btn1">
            <div class="search"></div>
            <div class="btnText">搜索</div>
          </div>
          <div class="btnn btn2">
            <div class="search"></div>
            <div class="btnText">重置</div>
          </div>
        </div>
      </div>
      <div class="btns">       
        <div class="btn btn3" @click="handleOut">
          <div class="search"></div>
          <div class="btnText">创建评估</div>
        </div>
      </div>
    </div>
    <!-- 搜索框及按钮 -->
    <!-- 表格 -->
    <div class="tableBox">
      <a-table
        style="border: 1px solid #f2f6fe"
        :columns="tableDataFunc()"
        :data-source="tableData"
        :loading="tableDataTotal === -1 ? true : false"
        expandRowByClick="true"
        :scroll="{ x: 1500 }"
        @expand="expandTable"
        :pagination="false"
      />
    </div>
    <div class="pa">
      <a-pagination
        showSizeChanger="true"
        showQuickJumper="true"
        hideOnSinglePage="true"
        :pageSize="pageSize"
        :current="currentPage"
        :total="tableDataTotal"
        class="pagination"
      />
    </div>
    <!-- 表格 -->
    <a-modal
      v-model:visible="out"
      :footer="null"
      :closable="false"
      style="margin-top: 250px"
      :centered="center"
    >
      <div class="out">
        <div class="top">
          <img class="topimg" src="../../assets/images/courseManage/add1.png" />
          <div class="topc">创建评估</div>
          <div @click="handleOut" style="margin-left: 500px; cursor: pointer">
            <img
              style="width: 20px; height: 20px"
              src="../../assets/images/basicinfo/close.png"
            />
          </div>
        </div>
        <div class="mid clearfix">
          <div class="name">
            <div class="inname">评估名称</div>
            <div class="in">
              <a-input
                v-model:value="valuen"
                show-count
                :maxlength="15"
                style="border-radius: 8px"
              />
            </div>
          </div>
          <div class="btn">
            <button class="samtn btn1" @click="handleOut">取消</button>
            <button class="samtn btn2" @click="handleOut">确定</button>
          </div>
        </div>
      </div></a-modal
    >
    <!--操作弹窗 -->
    <a-modal
      v-model:visible="delete_hs"
      :footer="null"
      :closable="closableQR"
      wrapClassName="DelModal"
      style="margin-top: 400px"
      @cancel="delete_exit"
    >
      <div class="delete" :style="{ display: delete_hs ? 'block' : 'none' }">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <img src="@/assets/images/coursewareManage/QR.png" alt="">
            <span style="margin-left: 9px">提示</span>
            <div class="close_exit" @click="delete_exit"></div>
          </div>
          <div class="body">
            <div :style="{ display: del_hs ? 'block' : 'none' }">
              <span>您确定要删除此评估吗</span>
            </div>
            <div :style="{ display: over_hs ? 'block' : 'none' }">
              <span>您确定要结束此评估吗</span>
            </div>
            <div :style="{ display: copy_hs ? 'block' : 'none' }">
              <span>您确定要复制此评估吗</span>
            </div>
            <div :style="{ display: back_hs ? 'block' : 'none' }">
              <span>您确定要撤回此评估吗</span>
            </div>
            <div :style="{ display: pub_hs ? 'block' : 'none' }">
              <span>您确定要发布此评估吗</span>
            </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>
    <!--操作弹窗 -->
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, ref } from "vue";
export default {
  name: "learningPath",
  setup() {
    const state = reactive({
      projectNameList: [
        {
          id: 1,
          value: "项目一",
          label: "项目一",
        },
        {
          id: 2,
          value: "项目二",
          label: "项目二",
        },
        {
          id: 3,
          value: "项目三",
          label: "项目三",
        },
        {
          id: 4,
          value: "项目四",
          label: "项目四",
        },
      ],
      projectStateList: [
        {
          id: 1,
          value: "已发布",
          label: "已发布",
        },
        {
          id: 2,
          value: "待发布",
          label: "待发布",
        },
        {
          id: 3,
          value: "已结束",
          label: "已结束",
        },
      ],
      out: false,
      number: null,
      selectTime: null,
      tableData: [
        {
          key: 1,
          number: 1,
          manager: "产品经理评估",
          state: "已发布",
          creater: "管理员",
          pubtime: "2022-07-20 9:03",
          cretime: "2022-07-20 9:03",
          haspub: false,
        },
        {
          key: 2,
          number: 2,
          manager: "高级产品经理评估",
          state: "已发布",
          creater: "管理员",
          pubtime: "2022-07-20 9:03",
          cretime: "2022-07-20 9:03",
          haspub: false,
        },
        {
          key: 3,
          number: 3,
          manager: "管理者进阶腾飞班管理者进阶腾飞班评估",
          state: "待发布",
          creater: "管理员",
          pubtime: "2022-07-20 9:03",
          cretime: "2022-07-20 9:03",
          haspub: true,
        },
        {
          key: 4,
          number: 4,
          manager: "HR评估",
          state: "已结束",
          creater: "管理员",
          pubtime: "2022-07-20 9:03",
          cretime: "2022-07-20 9:03",
          haspub: true,
        },
      ],
      currentPage: 1,
      tableDataTotal: 100,
      pageSize: 10,
      value1: " ",
      valuen: "",
      value2: ref(),
      valueE: ref(" "),
      valueEE: ref(" "),
      valuei: ref(" "),
      delete_hs: false,
      del_hs: false,
      over_hs: false,
      copy_hs: false,
      back_hs: false,
      pub_hs: false,
    });
    const tableDataFunc = () => {
      const columns = [
        {
          title: "序号",
          dataIndex: "number",
          key: "number",
          width: 100,
          align: "center",
          className: "h",
        },
        {
          title: "名称",
          dataIndex: "manager",
          key: "manager",
          width: 100,
          align: "center",
          ellipsis: true,
          className: "h",
        },
        {
          title: "状态",
          dataIndex: "state",
          // width: "30%",
          key: "state",
          width: 100,
          align: "center",
          className: "h",
        },
        {
          title: "创建人",
          dataIndex: "creater",
          // width: "30%",
          key: "creater",
          width: 100,
          align: "center",
          className: "h",
        },
        {
          title: "发布时间",
          dataIndex: "pubtime",
          key: "pubtime",
          width: 180,
          align: "center",
          className: "h",
        },
        {
          title: "创建时间",
          dataIndex: "cretime",
          key: "cretime",
          width: 180,
          align: "center",
          className: "h",
        },
        {
          title: "操作",
          className: "h",
          dataIndex: "opacation",
          key: "opacation",
          width: 200,
          align: "center",
        },
      ];
      return columns;
    };

    const getTableDate = () => {
      let data = state.tableData;
      data.map((value) => {
        {
          //单层项目
          value.opacation = (
            <div class="operation">
              {value.state === "已发布" ? (
                <div class="fb">
                  <router-link to="/managepage" class="jc">
                    管理
                  </router-link>
                  <div class="jc"
                  onClick={()=>{
                      state.delete_hs = true;
                      state.copy_hs = true;
                  }}>复制</div>
                  <div class="jc"
                  onClick={()=>{
                      state.delete_hs = true;
                      state.back_hs = true;
                  }}>撤回</div>
                  <div class="jc"
                  onClick={()=>{
                      state.delete_hs = true;
                      state.over_hs = true;
                  }}>结束</div>
                </div>
              ) : (
                <div></div>
              )}
              {value.state === "待发布" ? (
                <div class="fb">
                <div class="jc"
                  onClick={()=>{
                      state.delete_hs = true;
                      state.pub_hs = true;
                  }}>发布</div>
                  <router-link to="/researchadd" class="jc">
                    基础信息
                  </router-link>
                  <div class="jc"
                  onClick={()=>{
                      state.delete_hs = true;
                      state.copy_hs = true;
                  }}>复制</div>
                  <div class="jc">编辑</div>
                  <div class="jc"
                    onClick={()=>{
                      state.delete_hs = true;
                      state.del_hs = true;
                  }}>删除</div>
                </div>
              ) : (
                <div></div>
              )}
              {value.state === "已结束" ? (
                <div class="fb">
                  <div class="jc"
                  onClick={()=>{
                      state.delete_hs = true;
                      state.copy_hs = true;
                  }}>复制</div>
                  <div class="jc"
                    onClick={()=>{
                      state.delete_hs = true;
                      state.del_hs = true;
                  }}>删除</div>
                </div>
              ) : (
                <div></div>
              )}
            </div>
          );
        }
      });
      state.tableData = data;
    };
    getTableDate();
    onMounted(() => {
      // console.log("执行");
    });
    const selectProjectName = (value, index) => {
      console.log("value", value, index);
    };
    const selectProjectState = (value, index) => {
      console.log("value", value, index);
    };
    const expandTable = (e, a) => {
      // console.log("惦记了");
      console.log("e", e, a);
    };
    const handleOut = () => {
      state.out = !state.out;
    };
    const chooseImg = (id) => {
      console.log(id);
    };
    const delete_exit = () => {
      state.delete_hs = false;
      state.del_hs = false;
      state.over_hs = false;
      state.copy_hs = false;
      state.back_hs = false;
      state.pub_hs = false;
    };
    return {
      ...toRefs(state),
      selectProjectName,
      selectProjectState,
      expandTable,
      handleOut,
      tableDataFunc,
      chooseImg,
      getTableDate,
      delete_exit,
    };
  },
};
</script>
<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}
.out {
  //display: flex;
  display: block;
  position: absolute;
  width: 680px;
  // height: 525px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .top {
    width: 100%;
    height: 68px;

    background: linear-gradient(
      rgba(78, 166, 255, 0.2) 0%,
      rgba(78, 166, 255, 0) 100%
    );
    display: flex;
    align-items: center;
    .topimg {
      width: 18px;
      height: 18px;
      margin-left: 27px;
    }
    .topc {
      color: #000000;
      font-size: 16px;
      margin-left: 8px;
    }
  }
  .mid {
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    .d {
      // margin-top: 8px;
      // color: #ff4e4e;
      margin-left: -5px;
    }
    .name {
      width: 78%;
      // background-color: lightcoral;
      display: flex;
      margin-top: 20px;
      align-items: center;
      height: 40px;
      // border: 1px solid black;

      .inname {
        color: #6f6f6f;
        font-size: 14px;
        margin-left: 7px;
      }
      .in {
        margin-left: 14px;
        width: 81%;
        .ant-input {
          border-radius: 5px;
          // height: 120%;
          width: 100%;
          height: 30px;
        }
        .showcount {
          position: absolute;
          right: 10px;
          color: #c7cbd2;
          bottom: 5px;
        }
      }
    }
    .btn {
      width: 33%;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      .samtn {
        width: 100px;
        height: 40px;
        font-size: 14px;
        border: 1px solid #409eff;
        border-radius: 8px;
        cursor: pointer;
      }
      .btn1 {
        background-color: #fff;
        color: #4ea6ff;
      }
      .btn2 {
        margin-left: 10px;
        background-color: #409eff;
        color: #fff;
      }
    }
  }
}
.researchmanage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  .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;
      }
      .btn {
        padding: 0px 26px 0px 26px;
        height: 38px;
        background: #409eff;
        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;
        cursor: pointer;
        .search {
          background-size: 100%;
        }
        .btnText {
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          line-height: 36px;
          margin-left: 5px;
        }
      }
      .btnn {
        padding: 0px 26px 0px 26px;
        height: 38px;
        background: #ffffff;
        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;
        cursor: pointer;
        .search {
          background-size: 100%;
        }
        .btnText {
          font-size: 14px;
          font-weight: 400;
          color: #409eff;
          line-height: 36px;
          margin-left: 5px;
        }
      }
      .btn1 {
        .search {
          width: 15px;
          height: 17px;
          background-image: url("../../assets/images/courseManage/search0.png");
        }
      }
      .btn2 {
        .search {
          width: 16px;
          height: 18px;
          background-image: url("../../assets/images/courseManage/reset1.png");
        }
      }
      .btn1:hover {
        background: rgba(64, 158, 255, 0.76);
        .search {
          background-image: url("../../assets/images/courseManage/search0.png");
        }
        .btnText {
          color: #ffffff;
        }
      }
      .btn1:active {
        background: #0982ff;
      }
      .btn2:hover {
        background: rgba(64, 158, 255, 0.1);
      }
      .btn2:active {
        background: rgba(64, 158, 255, 0.2);
      }
    }
    .btns {
      display: flex;
      .btn {
        padding: 0px 26px 0px 26px;
        height: 38px;
        background: #409eff;
        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;
        cursor: pointer;
        .search {
          background-size: 100%;
        }
        .btnText {
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          line-height: 36px;
          margin-left: 5px;
        }
      }
      .btn3 {
        margin-right: 0px;
        .search {
          width: 17px;
          height: 18px;
          background-image: url("../../assets/images/courseManage/add0.png");
        }
      }
      .btn3:hover {
        background: rgba(64, 158, 255, 0.76);
        .search {
          background-image: url("../../assets/images/courseManage/add0.png");
        }
        .btnText {
          color: #ffffff;
        }
      }
      .btn3:active {
        background: #0982ff;
      }
    }
  }
  .tableBox {
    margin: 20px 38px 30px;
    display: flex;
    flex: 1;
    flex-direction: column;

    th.ant-table-cell {
        background-color:#EFF4FC !important;
        text-align: center;
        color: #999BA3;
      }
      td.ant-table-cell {
        text-align: center;
      }

    .ant-table-tbody
      > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
      > td {
      background: #f6f9fd;
    }
  }
  .pa {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    .pagination {
      margin-bottom: 20px;
    }
    .ant-pagination-item-link,
    .ant-pagination-item,
    .ant-select-selector,
    .ant-pagination-options-quick-jumper input {
      border-radius: 8px;
    }
  }

  .unout {
    display: none;
  }

  .operation {
    display: flex;
    justify-content: right;
    .fb {
      display: flex;
      margin-right: 20px;
      .jc {
        color: #4ea6ff;
        font-size: 14px;
        margin-left: 20px;
        white-space: nowrap;
        cursor: pointer;
      }
    }
  }
}
.DelModal {
  .ant-modal {
    .ant-modal-content {
      width: 424px !important;
      .ant-modal-body {
        .delete {
          z-index: 9999;
          width: 424px;
          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: 40px;
            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;
              .del-icon {
                  width: 16px;
                  height: 16px;
                  position: relative;
                  margin-right: 10px;
                img{
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top:0px;
                  left:0px;
                  background-size: 100% 100%;
                }
              }
              .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;
            }
            .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;
                margin-right: 14px;
                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;
              }
              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
