<template>
  <a-drawer
    :visible="Wvisible"
    class="drawerStyle WorkManage"
    placement="right"
    width="60%"
    @after-visible-change="afterVisibleChange"
  >
    <div class="drawerMain">
      <div class="header">
        <div class="headerTitle">【{{title}}】管理</div>
        <img
          style="width: 29px; height: 29px; cursor: pointer"
          src="../../assets/images/basicinfo/close.png"
          @click="closeDrawer"
        />
      </div>
      <div class="main" style="padding-right:10px">
        <div class="endtime">起止时间：2022-07-21 14:00 ～ 2022-7-30 14:00</div>
        <div class="search">
          <div class="sealeft">
            <div class="namecon" style="margin-right: 30px">
              <div class="name">姓名：</div>
              <a-input
                v-model:value="name"
                style="width: 270px; height: 40px; border-radius: 8px"
                placeholder="请输入姓名"
              />
            </div>
            <div class="namecon" style="margin-right: 50px">
              <div class="name">任务状态：</div>
              <div class="select">
                <a-select
                  v-model:value="projectName"
                  style="width: 160px"
                  placeholder="请选择"
                  :options="projectNameList"
                  @change="selectProjectName"
                  allowClear
                ></a-select>
              </div>
            </div>
          </div>
          <div class="btns">
            <div
              class="btn btn1"
              style="margin-right: 20px"
              @click="searchTaskList"
            >
              <div class="img1"></div>
              <div class="wz">搜索</div>
            </div>
            <div class="btn btn2" @click="resetTaskList">
              <div class="img2"></div>
              <div class="wz">重置</div>
            </div>
          </div>
        </div>
        <div class="btnss" style="margin-top: 20px">
          <div class="btn btn1" style="margin-right: 20px; cursor: pointer">
            <div class="img1"></div>
            <div class="wz">导出数据</div>
          </div>
          <div class="btn btn2" @click="showEHWorkModal" style="margin-right:20px">
            <div class="wz">导出作业</div>
          </div>
          <div class="btn btn2" @click="showEScoreModal">
            <div class="wz">导入成绩</div>
          </div>
        </div>
        <div class="tab" style="margin-top: 20px; margin-bottom: 100px">
          <a-table
            style="border: 1px solid #f2f6fe"
            :columns="tablecolumns"
            :data-source="tabledata"
            :loading="tableDataTotal === -1 ? true : false"
            expandRowByClick="true"
            :scroll="{ x: 900 }"
            @expand="expandTable"
            :pagination="false"
          />
          <div class="tableBox">
            <div class="pa">
              <a-pagination
                :showSizeChanger="false"
                showQuickJumper="true"
                hideOnSinglePage="true"
                :pageSize="pageSize"
                :current="currentPage"
                :total="tableDataTotal"
                class="pagination"
                @change="onChange"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="btnn">
        <button class="btn1">取消</button>
        <button class="btn2">确定</button>
      </div>

      <!-- 导出作业弹窗 -->
      <EHWork v-model:exportHWorkvisible="exportHWorkvisible"/>
      <!-- 导出成绩抽屉 -->
      <EScore v-model:eScorevisible="eScorevisible"/>
      <!-- 作业详情抽屉 -->
      <work-detail v-model:WDvisible="WDvisible" />
    </div>
  </a-drawer>
</template>

<script>
import { toRefs, reactive } from "vue";
import { message } from 'ant-design-vue';
import EHWork from "./ExportHWork.vue"
import EScore from "./ExportScore.vue"
import WorkDetail from "../drawers/WorkDetail.vue";
import * as api from "../../api/index";
export default {
  name: "WorkManage",
  components: { 
    WorkDetail,
    EHWork,
    EScore,
    },
  props: {
    Wvisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    projectTaskId: {
      type: Number,
      default: null,
    },
  },

  setup(props, ctx) {
    const state = reactive({
      name: null,
      exportHWorkvisible:false, //导出作业弹窗
      eScorevisible:false, //导入成绩抽屉
      WDvisible: false, //作业详情
      pageNo: 1,
      pageSize: 10,
      currentPage: 1,
      tableDataTotal: 0,
      projectName: "",
      projectNameList: [
        {
          id: 1,
          value: "-1",
          label: "未开始",
        },
        {
          id: 2,
          value: "0",
          label: "进行中",
        },
        {
          id: 3,
          value: "1",
          label: "已完成",
        },
      ],
      tabledata: [
        {
          workNum:1,
          status:"已完成",
          operation:"",
        },
        {
          workNum:2,
          status:"未完成",
          operation:"",
        },
      ],
      tablecolumns: [
        {
          title: "工号",
          dataIndex: "workNum",
          key: "workNum",
          width: 50,
          align: "left",
          className: "h head",
        },
        {
          title: "姓名",
          dataIndex: "userName",
          key: "userName",
          width: 50,
          align: "left",
          className: "h head",
        },
        {
          title: "所在部门",
          dataIndex: "deptName",
          key: "userName",
          width: 60,
          align: "center",
          className: "h",
        },
        {
          title: "所在岗位",
          dataIndex: "jobName",
          key: "jobName",
          width: 60,
          align: "center",
          className: "h",
        },
        {
          title: "作业成绩",
          dataIndex: "score",
          key: "score",
          width: 60,
          align: "center",
          className: "h",
        },
        {
          title: "评分",
          dataIndex: "testscore",
          key: "testscore",
          width: 60,
          align: "center",
          className: "h",
        },
        {
          title: "任务状态",
          dataIndex: "status",
          key: "status",
          width: 60,
          align: "center",
          className: "h",
        },
        {
          title: "操作",
          dataIndex: "operation",
          key: "operation",
          width: 100,
          align: "center",
          className: "h",
        },
      ],
    });
    //作业管理列表操作
    const ListOpera = () => {
      let arr = state.tabledata;
      arr.map((value) => {
        if(value.status == '已完成'){
            value.operation = (
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
                <a-button 
                    type="link"
                    class="operation"
                    style="cursor:pointer;margin-right:10px;"
                    onClick={() => {
                      state.WDvisible = true;
                    }}
                >
                    查看
                </a-button>
            </div>
          );
        } else {
          value.operation = (
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
                <a-button 
                    type="link"
                    class="operation"
                    style="cursor:pointer;margin-right:10px;"
                    disabled
                >
                    查看
                </a-button>
            </div>
          );
        }
      });
      state.tabledata = arr;
    };
    ListOpera();
    const closeDrawer = () => {
      ctx.emit("update:Wvisible", false);
      state.name = ""
      state.currentPage = 1
      state.projectName = ""
    };
    const afterVisibleChange = (bol) => {
      if ( bol == true ) {
        getManageList();
      }
    };
    const selectProjectName = (value) => {
      state.projectName = value;
    };
    const showEHWorkModal = () => {
      state.exportHWorkvisible = true;
    };
    const showWorkDetail = () => {
      state.WDvisible = true;
    };
    const showEScoreModal = ()=> {
      state.eScorevisible = true;
    } 
    const onChange = (pageNumber) => {
      console.log("Page: ", pageNumber);
    };
    //渲染到列表中
    const getTableDate = (tableData) => {
      let data = tableData;
      let array = [];
        data.map((value, index) => {
          if(props.itemsType ==12 ){
            let obj = {
              key: index+1,
              workNum:"",
              userName:value.useInfoBo.userName,
              deptName:value.useInfoBo.deptName,
              jobName:value.useInfoBo.jobName,
              time:"",
              status:"",
              operation:"",
            };
            array.push(obj);
          }else{
            let obj = {
              key: index+1,
              workNum:"",
              userName:value.userName,
              deptName:value.deptName,
              jobName:value.jobName,
              time:"",
              status:"",
            };
            array.push(obj);
          }
        });
        state.tabledata = array;
    };
    //获取任务管理列表
    const getManageList = () => {
      let obj = {
        // name: "",
        pageNo: state.pageNo,
        pageSize: state.pageSize,
        // projectId: 27,
        projectTaskId: props.projectTaskId,
        status: 0,
      };
      api
        .taskStudentList(obj)
        .then((res) => {
          state.pageNo = res.data.data.pageNo;
          state.pageSize = res.data.data.pageSize;
          // for (let i = 0; i < res.data.data.rows.length; i++) {
          //   state.tabledata.push(res.data.data.rows[i].userInfoBo);
          // }
          getTableDate(res.data.data.rows)
        })
        .catch(() => {
        });
    };

    //搜索任务列表
    const searchTaskList = () => {
      let objser = {
        // name: "",
        pageNo: state.pageNo,
        pageSize: state.pageSize,
        // projectId: 27,
        projectTaskId: props.projectTaskId,
        status: 0,
      };
      if (state.name !== "" || state.projectName !== "") {
        api
          .taskStudentList(objser)
          .then((res) => {
            state.pageNo = res.data.data.pageNo;
            state.pageSize = res.data.data.pageSize;
            state.pageSize = res.data.data.pageSize;
            let newArr = [];
            for (let i = 0; i < res.data.data.rows.length; i++) {
              if (res.data.data.rows[i].userInfoBo.userName == state.name)
                newArr.push(res.data.data.rows[i].userInfoBo);
            }
            state.tabledata = newArr;
          })
          .catch(() => {
            message.destroy()
            message.error("搜索任务列表失败")
          });
      }
    };

    //重置任务列表
    const resetTaskList = () => {
      state.name = ""
      state.currentPage = 1
      state.projectName = ""
      getManageList();
    };

    return {
      ...toRefs(state),
      selectProjectName,
      closeDrawer,
      afterVisibleChange,
      showEHWorkModal,
      showEScoreModal,
      showWorkDetail,
      onChange,
      getManageList,
      searchTaskList,
      resetTaskList,
    };
  },
};
</script>

<style lang="scss">
.WorkManage {
  .ant-modal {
    width: 473px;
    height: 308px;

    .ant-modal-content {
      width: 473px;
      height: 308px;

      .ant-modal-body {
        width: 473px;
        height: 308px;
        padding: 0px;

        .header {
          width: 473px;
          height: 68px;
          background: linear-gradient(
            180deg,
            rgba(78, 166, 255, 0.2) 0%,
            rgba(78, 166, 255, 0) 100%
          );
          display: flex;
          justify-content: center;

          .inheader {
            width: 90%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left {
              font-size: 16px;
              font-weight: 600;
              color: #333333;
            }

            .right {
              width: 22px;
              height: 22px;
              background-image: url(../../assets/images/basicinfo/close.png);
              background-size: 100% 100%;
              cursor: pointer;
            }
          }
        }

        .main {
          width: 100%;
          margin-top: 32px;
          display: flex;
          flex-direction: column;
          align-items: center;
          overflow-y: auto;
          padding-right: 10px;
          .check {
            width: 40px;
            height: 40px;
            background-image: url(../../assets/images/basicinfo/check.png);
            background-size: 100%;
          }

          .text {
            margin-top: 16px;
            font-size: 14px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
          }

          .btn {
            display: flex;
            margin-top: 40px;

            .sabtn {
              width: 100px;
              height: 40px;
              border-radius: 4px;
              cursor: pointer;
            }

            .btn1 {
              border: 1px solid #387df7;
              background-color: #fff;
              color: #387df7;
            }

            .btn2 {
              background-color: #4ea6ff;
              color: #fff;
              border: 0;
              margin-left: 16px;
            }
          }
        }
      }
    }
  }
}
</style>

