<template>
  <a-drawer
    :visible="AAvisible"
    class="largeDrawerStyle"
    placement="right"
    width="80%"
    @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="centermain">
        <div class="titl">
          <div class="endtime">
            起止时间：2022-07-21 14:00 ～ 2022-7-30 14:00
          </div>
          <div class="endtime" style="margin-left: 64px">签到时间：14:00</div>
          <div class="endtime" style="margin-left: 40px">签退时间：21:00</div>
        </div>

        <div class="search">
          <div class="leftchoose">
            <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="请输入姓名"
                maxlength="20"
              />
            </div>
            <div class="namecon" style="margin-right: 30px">
              <div class="name">考勤：</div>
              <div class="select">
                <a-select
                  v-model:value="projectName"
                  style="width: 160px"
                  placeholder="请选择"
                  :options="projectNameList"
                  @change="selectProjectName"
                  allowClear
                  showSearch
                ></a-select>
              </div>
            </div>
            <div class="namecon">
              <div class="name">签到状态：</div>
              <div class="select">
                <a-select
                  v-model:value="projectName2"
                  style="width: 160px"
                  placeholder="请选择"
                  :options="projectNameList2"
                  @change="selectProjectName2"
                  allowClear
                ></a-select>
              </div>
            </div>
          </div>

          <div class="btns">
            <div class="btn btn1" style="margin-right: 20px">
              <div class="img1"></div>
              <div class="wz">搜索</div>
            </div>
            <div class="btn btn2">
              <div class="img2"></div>
              <div class="wz">重置</div>
            </div>
          </div>
        </div>
        <div class="btnss" style="margin-top: 20px">
          <div class="btn btn1" @click="signQR">
            <div class="wz">签到二维码</div>
          </div>
          <div class="btn btn2" @click="showqdModal">
            <div class="wz">批量签到</div>
          </div>
          <div class="btn btn1">
            <div class="img2"></div>
            <div class="wz">导出数据</div>
          </div>
        </div>
        <div class="line">
          <div class="inline">
            <div class="left">
              <div class="img"></div>
              <div class="text" style="margin-left: 10px">已选择</div>
              <div class="text2">{{ selectedRowKeys.length }}</div>
              <div class="text">项</div>
              <div class="text3">列表选项总计：</div>
              <div class="text4">{{ tableData.length }}条</div>
            </div>
            <div class="right" @click="clearLine">清空</div>
          </div>
        </div>

        <div class="tableBox" style="margin-top: 30px">
          <a-table
            style="border: 1px solid #f2f6fe"
            :columns="tableDataFunc()"
            :data-source="tableData"
            :loading="tableDataTotal === -1 ? true : false"
            :scroll="{ x: 1300 }"
            :pagination="false"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }"
          />
        </div>
      </div>
      <div class="btnn">
        <button class="btn1" @click="closeDrawer">取消</button>
        <button class="btn2" @click="closeDrawer">确定</button>
      </div>
    </div>
  </a-drawer>
  <!-- 批量签到弹窗 -->
  <a-modal
    v-model:visible="qdModal"
    :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="closeqdModal"></div>
        </div>
        <div class="body">
          <span>您确定要批量签到吗</span>
        </div>
        <div class="del_btnbox">
          <div class="del_btn btn1">
            <div class="btnText" @click="closeqdModal">取消</div>
          </div>
          <div class="del_btn btn2">
            <div class="btnText" @click="closeqdModal">确定</div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>

  <!-- 单独签到弹窗 -->
  <a-modal
    v-model:visible="singleqdModal"
    :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="closesingleqdModal"></div>
        </div>
        <div class="body">
          <span>您确定要签到吗</span>
        </div>
        <div class="del_btnbox">
          <div class="del_btn btn1">
            <div class="btnText" @click="closesingleqdModal">取消</div>
          </div>
          <div class="del_btn btn2">
            <div class="btnText" @click="closesingleqdModal">确定</div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
  <!-- 单独签退弹窗 -->
  <a-modal
    v-model:visible="singleqtModal"
    :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="closesingleqtModal"></div>
        </div>
        <div class="body">
          <span>您确定要签退吗</span>
        </div>
        <div class="del_btnbox">
          <div class="del_btn btn1">
            <div class="btnText" @click="closesingleqtModal">取消</div>
          </div>
          <div class="del_btn btn2">
            <div class="btnText" @click="closesingleqtModal">确定</div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
  <!-- 单独请假弹窗 -->
  <a-modal
    v-model:visible="singleqjModal"
    :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="closesingleqjModal"></div>
        </div>
        <div class="body">
          <span>您确定要请假吗</span>
        </div>
        <div class="del_btnbox">
          <div class="del_btn btn1">
            <div class="btnText" @click="closesingleqjModal">取消</div>
          </div>
          <div class="del_btn btn2">
            <div class="btnText" @click="closesingleqjModal">确定</div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
  <!-- 二维码签到弹窗 -->
  <SignQR v-model:signQRvisible="signQRvisible" />
</template>

<script>
import { toRefs, reactive } from "vue";
import SignQR from "./SignQR.vue";
export default {
  name: "ActiveAttendance",
  components: {
    SignQR,
  },
  props: {
    AAvisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
  },

  setup(props, ctx) {
    const state = reactive({
      Evisible: false, //录入成绩抽屉
      name: null,
      showmodal: false, //勾选提示框
      closable: false, //modal右上角的关闭按钮
      pageSize: 10,
      currentPage: 1,
      tableDataTotal: 100,
      signQRvisible: false, //二维码弹窗
      qdModal: false, //批量签到
      singleqjModal: false, //单独请假
      singleqdModal: false, //单独签到
      singleqtModal: false, //单独签退
      closeCopy: false,
      projectNameList: [
        {
          id: 1,
          value: "项目一",
          label: "项目一",
        },
        {
          id: 2,
          value: "项目二",
          label: "项目二",
        },
        {
          id: 3,
          value: "项目三",
          label: "项目三",
        },
        {
          id: 4,
          value: "项目四",
          label: "项目四",
        },
      ],
      projectNameList2: [
        {
          id: 1,
          value: "项目一",
          label: "项目一",
        },
        {
          id: 2,
          value: "项目二",
          label: "项目二",
        },
        {
          id: 3,
          value: "项目三",
          label: "项目三",
        },
        {
          id: 4,
          value: "项目四",
          label: "项目四",
        },
      ],
      selectedRowKeys: [],
      tableData: [
        {
          key: 1,
          name: "张三",
          com: "产研部",
          gang: "产品经理",
          cur: "-",
          jin: "-",
          time: "缺勤",
          state: "异常",
          signIn: false, //签到
          signOut: false, //签退
          leave: false, //请假
        },
        {
          key: 2,
          name: "张三",
          com: "产研部",
          gang: "产品经理",
          cur: "2022-10-31  23:12",
          jin: "-",
          time: "签到/签退",
          state: "正常",
          signIn: true, //签到
          signOut: true, //签退
          leave: false, //请假
        },
        {
          key: 3,
          name: "张三",
          com: "产研部",
          gang: "产品经理",
          cur: "2022-10-31  23:12",
          jin: "2022-10-31  23:12",
          time: "迟到",
          state: "异常",
          signIn: false, //签到
          signOut: true, //签退
          leave: false, //请假
        },
        {
          key: 4,
          name: "张三",
          com: "产研部",
          gang: "产品经理",
          cur: "2022-10-31  23:12",
          jin: "2022-10-31  23:12",
          time: "早退",
          state: "异常",
          signIn: true, //签到
          signOut: false, //签退
          leave: false, //请假
        },
        {
          key: 5,
          name: "张三",
          com: "产研部",
          gang: "产品经理",
          cur: "2022-10-31  23:12",
          jin: "2022-10-31  23:12",
          time: "签到/签退",
          state: "正常",
          signIn: true, //签到
          signOut: true, //签退
          leave: false, //请假
        },
        {
          key: 6,
          name: "张三",
          com: "产研部",
          gang: "产品经理",
          cur: "2022-10-31  23:12",
          jin: "2022-10-31  23:12",
          time: "签到/签退",
          state: "正常",
          signIn: true, //签到
          signOut: true, //签退
          leave: false, //请假
        },
      ],
      options: [
        {
          label: "Apple",
          value: "Apple",
        },
        {
          label: "Pear",
          value: "Pear",
        },
        {
          label: "Orange",
          value: "Orange",
        },
      ],
    });
    const selectProjectName = (value, index) => {
      console.log("value", value, index);
    };
    const selectProjectName2 = (value, index) => {
      console.log("value", value, index);
    };
    const closeDrawer = () => {
      ctx.emit("update:AAvisible", false);
    };

    const showEntryScore = () => {
      state.Evisible = true;
    };
    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const getTableData = () => {
      let arr = state.tableData;
      arr.map((value) => {
        // console.log("value", value);
        value.opacation = (
          <div class="opa">
            <a-checkbox
              checked={value.signIn}
              onChange={(e) => {
                console.log("点击签到", e);
                showsingleqdModal();
              }}
            >
              签到
            </a-checkbox>
            <a-checkbox
              checked={value.signOut}
              onChange={(e) => {
                console.log("点击签退", e);
                showsingleqtModal();
              }}
            >
              签退
            </a-checkbox>
            <a-checkbox
              checked={value.leave}
              onChange={(e) => {
                console.log("点击请假", e);
                showsingleqjModal();
              }}
            >
              请假
            </a-checkbox>
          </div>
        );
      });
      state.tableData = arr;
    };
    getTableData();

    const tableDataFunc = () => {
      const columns = [
        {
          title: "工号",
          dataIndex: "workNum",
          key: "workNum",
          width: 50,
          align: "center",
          className: "h",
        },
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          width: 50,
          align: "center",
          className: "classify",
          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: (text) => {
            return (
              <div class="racona">
                <span> {text.record.name}</span>
              </div>
            );
          },
        },
        {
          title: "所在部门",
          dataIndex: "com",
          key: "com",
          width: 50,
          align: "center",
          className: "h",
        },
        {
          title: "所在岗位",
          dataIndex: "gang",
          key: "gang",
          width: 50,
          align: "center",
          className: "h",
        },
        {
          title: "签到时间",
          dataIndex: "cur",
          key: "cur",
          width: 110,
          align: "center",
          className: "h",
        },
        {
          title: "签退时间",
          dataIndex: "jin",
          key: "jin",
          width: 110,
          align: "center",
          className: "h",
        },
        {
          title: "考勤",
          dataIndex: "time",
          key: "time",
          width: 50,
          align: "center",
          className: "h",
        },
        {
          title: "签到状态",
          dataIndex: "state",
          key: "state",
          width: 50,
          align: "center",
          className: "h",
        },
        {
          title: "考勤情况",
          className: "h",
          dataIndex: "opacation",
          key: "opacation",
          width: 130,
          align: "center",
        },
      ];
      return columns;
    };
    //清空所选
    const clearLine = () => {
      state.selectedRowKeys = [];
    };
    const showqdModal = () => {
      state.qdModal = true;
    };
    const closeqdModal = () => {
      state.qdModal = false;
    };
    const showsingleqdModal = () => {
      state.singleqdModal = true;
    };
    const showsingleqtModal = () => {
      state.singleqtModal = true;
    };
    const showsingleqjModal = () => {
      state.singleqjModal = true;
    };
    const closesingleqdModal = () => {
      state.singleqdModal = false;
    };
    const closesingleqtModal = () => {
      state.singleqtModal = false;
    };
    const closesingleqjModal = () => {
      state.singleqjModal = false;
    };
    const signQR = () => {
      state.signQRvisible = true;
    };
    return {
      ...toRefs(state),
      selectProjectName,
      selectProjectName2,
      closeDrawer,
      onSelectChange,
      showEntryScore,
      tableDataFunc,
      clearLine,
      showqdModal,
      closeqdModal,
      showsingleqdModal,
      showsingleqtModal,
      showsingleqjModal,
      closesingleqdModal,
      closesingleqtModal,
      closesingleqjModal,
      signQR,
    };
  },
};
</script>

<style lang="scss">
.me {
  .ant-modal-body {
    padding: 0px;
  }
}

.largeDrawerStyle {
  .ant-drawer-content-wrapper {
    .ant-drawer-header {
      display: none !important;
    }
    .ant-drawer-body {
      padding: 0;
      .drawerMain {
        min-width: 600px;
        margin: 0px 32px 0px 32px;
        display: flex;
        flex-direction: column;
        height: 100%;
        .header {
          height: 73px;
          border-bottom: 1px solid #e8e8e8;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          flex-shrink: 0;
          .headerTitle {
            font-size: 18px;
            font-weight: 600;
            color: #333333;
            line-height: 25px;
          }
        }
        .centermain {
          flex: 1;
          overflow-y: auto;
          margin-bottom: 75px;
          padding-right: 10px;
          .titl {
            display: flex;
            .endtime {
              font-size: 16px;
              font-weight: 500;
              color: #333333;
              white-space: nowrap;
            }
          }
          .search {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;
            justify-content: space-between;
            .leftchoose {
              display: flex;
              margin-right: 20px;
              flex-wrap: wrap;
              .namecon {
                display: flex;
                flex-wrap: nowrap;
                margin-bottom: 10px;
                .name {
                  margin-top: 8px;
                  white-space: nowrap;
                }
              }
            }

            .btns {
              display: flex;
              flex-wrap: nowrap;

              .btn {
                cursor: pointer;
                width: 100px;
                height: 40px;
                border-radius: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
                .img1 {
                  width: 15px;
                  height: 17px;
                  background-image: url(../../assets/images/courseManage/search0.png);
                  background-size: 100% 100%;
                  margin-right: 7px;
                }
                .img2 {
                  width: 16px;
                  height: 18px;
                  background-image: url(../../assets/images/courseManage/reset1.png);
                  background-size: 100% 100%;
                  margin-right: 7px;
                }
              }

              .btn1 {
                background: #4ea6ff;

                color: #ffffff;
              }
              .btn2 {
                background: #ffffff;

                color: #4ea6ff;
                border: 1px solid #4ea6ff;
              }
            }
          }
          .btnss {
            display: flex;
            flex-wrap: nowrap;

            .btn {
              cursor: pointer;
              width: 130px;
              height: 40px;
              border-radius: 8px;
              display: flex;
              justify-content: center;
              align-items: center;
              .img1 {
                width: 15px;
                height: 17px;
                background-image: url(../../assets/images/courseManage/search0.png);
                background-size: 100% 100%;
                margin-right: 7px;
              }
              .img2 {
                width: 17px;
                height: 16px;
                background-image: url(../../assets/images/coursewareManage/export1.png);
                background-size: 100% 100%;
                margin-right: 7px;
              }
            }

            .btn1 {
              background: #4ea6ff;
              margin-right: 20px;
              color: #ffffff;
            }
            .btn2 {
              background: #ffffff;
              margin-right: 20px;
              color: #4ea6ff;
              border: 1px solid #4ea6ff;
            }
          }
          .line {
            width: 100%;
            height: 40px;
            background-color: #e9f6fe;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            border: 1px solid #c3e6fc;
            .inline {
              width: 95%;
              height: 100%;
              display: flex;
              justify-content: space-between;
              .left {
                height: 100%;
                display: flex;
                align-items: center;
                .img {
                  width: 15px;
                  height: 15px;
                  background-image: url(../../assets/images/leveladd/gan.png);
                  background-size: 100% 100%;
                }
                .text {
                  color: #999ba3;
                }
                .text2 {
                  color: #4ea6ff;
                  margin-left: 5px;
                  margin-right: 5px;
                }
                .text3 {
                  color: #999ba3;
                  margin-left: 20px;
                }
              }
              .right {
                font-size: 14px;
                font-weight: 400;
                color: #387df7;
                height: 100%;
                display: flex;
                align-items: center;
                cursor: pointer;
              }
            }
          }
          .tableBox {
            .classify {
              padding-left: 0px !important;
            }
            .ant-checkbox-wrapper {
              align-items: center;
              margin-top: -2px;
            }
            .ant-table-selection-column {
              padding: 0px !important;
            }
            .ant-table-thead > tr > th {
              background-color: rgba(239, 244, 252, 1);
            }
            th.h {
              background-color: #eff4fc !important;
            }

            .ant-table-tbody
              > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
              > td {
              background: #f6f9fd;
            }
          }
        }
        .btnn {
          height: 72px;
          width: 100%;
          background-color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
          .btn1 {
            width: 100px;
            height: 40px;
            border: 1px solid #4ea6ff;
            border-radius: 8px;
            color: #4ea6ff;
            background-color: #fff;
            cursor: pointer;
          }
          .btn2 {
            cursor: pointer;
            width: 100px;
            height: 40px;
            background: #4ea6ff;
            border-radius: 8px;
            border: 0;
            margin-left: 15px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
