<template>
  <a-drawer :visible="ProjAuditvisible" class="drawerStyle ProjectAudit" placement="right" width="60%"
    @after-visible-change="afterVisibleChange">
    <div class="drawerMain">
      <div class="header">
        <div class="headerTitle">审核项目</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">
        <a-tabs v-model:activeKey="activeSetKey">
          <a-tab-pane key="1" tab="基本信息">
            <div class="content7" v-if="showDetail">
              <div class="set_body">
                <div class="set_content">
                  <div class="setc_name"><span>项目名称：</span></div>
                  <div class="setc_main">
                    <span style="color: #999999">{{ name }}</span>
                  </div>
                </div>
                <div class="set_content">
                  <div class="setc_name"><span>封面图：</span></div>
                  <div class="setc_main">
                    <img style="width: 151px; height: 84px" :src="picUrl" alt="" />
                  </div>
                </div>
                <div class="set_content">
                  <div class="setc_name"><span>项目时间：</span></div>
                  <div class="setc_main">
                    <span style="color: #999999">{{ startTime }} ～ {{ endTime }}</span>
                  </div>
                </div>
                <div class="set_content">
                  <div class="setc_name"><span>项目经理：</span></div>
                  <div class="setc_main">
                    <span style="color: #999999">{{ manager }}</span>
                  </div>
                </div>
                <div class="set_content">
                  <div class="setc_name"><span>资源归属：</span></div>
                  <div class="setc_main">
                    <span style="color: #999999">{{ sourceBelong }}</span>
                  </div>
                </div>
                <div class="set_content">
                  <div class="setc_name"><span>项目说明：</span></div>
                  <div class="setc_main">
                    <span style="color: #999999">{{ remark }}</span>
                  </div>
                </div>
                <div class="set_content">
                  <div class="setc_name"><span>同步学习记录：</span></div>
                  <div class="setc_main">
                    <a-radio v-model:checked="checkedSty"><span
                        style="color: #333333">同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span></a-radio>
                  </div>
                </div>
                <div class="set_content">
                  <div class="setc_name"><span>项目级别：</span></div>
                  <div class="setc_main">
                    <span style="color: #999999">{{ level }}</span>
                  </div>
                </div>
                <div class="set_content">
                  <div class="setc_name"><span>培训体系：</span></div>
                  <div class="setc_main">
                    <span style="color: #999999">{{ systemId }}</span>
                  </div>
                </div>
                <div class="set_content">
                  <div class="setc_name"><span>是否BOEU实施：</span></div>
                  <div class="setc_main">
                    <a-radio v-model:checked="checkedBOEU"><span style="color: #333333">BOEU实施</span></a-radio>
                  </div>
                </div>
              </div>
            </div>

            <div class="detaile">
              <button class="debtn" @click="changeDe">
                详情{{ showDetail ? "折叠" : "展开" }}
              </button>
            </div>
          </a-tab-pane>
          <!-- <a-tab-pane key="2" tab="修改记录"></a-tab-pane> -->
        </a-tabs>
        <div class="audit">
          <div class="set_content">
            <div class="setc_name"><span>审核：</span></div>
            <div class="setc_main">
              <a-radio-group v-model:value="valuePass">
                <a-radio value="1">通过</a-radio>
                <a-radio value="2">不通过</a-radio>
              </a-radio-group>
            </div>
          </div>
          <div class="set_content">
            <div class="setc_name"><span>审核意见：</span></div>
            <div class="setc_main">
              <a-textarea v-model:value="valueSuggest" :rows="4" />
            </div>
          </div>
        </div>
        <div class="detaile">
          <button class="can" @click="closeDrawer">取消</button>
          <button class="debtn" @click="subMit">提交</button>
        </div>
      </div>
    </div>
  </a-drawer>
</template>

<script>
import { toRefs, reactive } from "vue";
import { getTask } from "../../api/indexTaskadd";
import { toDate } from "../../api/method";
import { auditView } from "../../api/indexAudit";
import { message } from "ant-design-vue";

export default {
  name: "ProjectAudit",
  components: {},
  props: {
    ProjAuditvisible: {
      type: Boolean,
      default: false,
    },
    chooseProject: {
      type: Number,
      default: null,
    },
    chooseCreateId: {
      type: Number,
      default: null,
    },
    chooseCreater: {
      type: String,
      default: null,
    },
    finishdFun: {
      type: Function,
      default: null
    }
  },

  setup(props, ctx) {
    const state = reactive({
      activeSetKey: "1",
      checkedBOEU: false, //是否BOEU实施
      checkedSty: false, //同步学习记录
      showDetail: false,
      valuePass: "1",
      valueSuggest: null,
      //基本信息
      name: null, //项目名称 未改
      startTime: null, //开始时间 已改
      tstartTime: null, //开始事件 未改
      endTime: null, //结束时间 已改
      tendTime: null, //结束时间 未改
      manager: null, //项目经理 未改
      sourceBelong: null, //资源归属 已改
      tsourceBelong: null, //资源归属 未改
      remark: null, //项目说明 未改
      level: null, //项目级别  已改
      tlevel: null, //项目级别 未改
      systemId: null, //培训分类
      tsystemId: null, //培训分类 未改
      picUrl: null, //未改
      parentId: null, //未改
      courseSyncFlag: null, //未改
      boeFlag: null, //未改
      managerId: null, //未改
      notice: null, //未改
      status: null, //未改
      type: null, //未改
      category: null, //未改
      noticeFlag: null, //未改
      templateId: null, //未改
      attach: null,
    });

    const closeDrawer = () => {
      ctx.emit("update:ProjAuditvisible", false);
      console.log(props.finishdFun)
      props.finishdFun && props.finishdFun()
      state.valueSuggest = null;
      state.valuePass = "1";
    };

    //获取项目信息
    const getTaskInfo = () => {
      getTask({
        projectId: props.chooseProject,
      }).then((res) => {
        console.log("get task", res.data.data);
        let info = res.data.data.projectInfo;
        let start = toDate(info.beginTime / 1000, "Y-M-D h:m");
        let end = toDate(info.endTime / 1000, "Y-M-D h:m");
        state.tstartTime = info.beginTime;
        state.tendTime = info.endTime;
        state.tsourceBelong = info.sourceBelongId;
        state.parentId = info.parentId;
        state.name = info.name;
        state.startTime = start;
        state.endTime = end;
        state.manager = info.manager;
        state.remark = info.remark;
        state.level =
          info.level == 1
            ? "集团级"
            : info.level == 2
              ? "组织级"
              : info.level == 3
                ? "现地级"
                : info.level == 4
                  ? "部门级"
                  : "-";
        state.tlevel = info.level;
        state.systemId =
          info.systemId == 1
            ? "集团级"
            : info.systemId == 2
              ? "组织级"
              : info.systemId == 3
                ? "现地级"
                : info.systemId == 4
                  ? "部门级"
                  : "-";
        state.tsystemId = info.systemId;
        state.checkedSty = info.courseSyncFlag == 1 ? true : false;
        state.courseSyncFlag = info.courseSyncFlag;
        state.checkedBOEU = info.boeFlag == 1 ? true : false;
        state.boeFlag = info.boeFlag;
        state.picUrl = info.picUrl;
        state.managerId = info.managerId;
        state.notice = info.notice;
        state.status = info.status;
        state.type = info.type;
        state.category = info.category;
        state.noticeFlag = info.noticeFlag;
        // state.attach = info.attach;
        // state.templateId = info.templateId;
        state.sourceBelong =
          info.sourceBelongId == 1
            ? "项目一"
            : info.sourceBelongId == 2
              ? "项目二"
              : info.sourceBelongId == 3
                ? "项目三"
                : "-";
      });
    };

    const afterVisibleChange = () => {
      getTaskInfo();
    };
    const changeDe = () => {
      state.showDetail = !state.showDetail;
    };
    const subMit = () => {
      auditView({
        createId: props.chooseCreateId,
        createName: props.chooseCreater,
        description: state.valueSuggest,
        pass: state.valuePass == "1" ? 1 : -1,
        projectId: props.chooseProject,
      })
        .then((res) => {
          console.log("提交成功", res);
          message.destroy();
          message.success("提交成功");
          closeDrawer();
        })
        .catch((err) => {
          console.log(err);
          message.warning("提交失败");
        });
    };

    return {
      ...toRefs(state),
      closeDrawer,
      afterVisibleChange,
      getTaskInfo,
      changeDe,
      subMit,
    };
  },
};
</script>

<style lang="scss">
.ProjectAudit {
  .drawerMain {
    min-width: 600px;
    margin: 0px 32px 0px 32px;
    // overflow-x: auto;
    display: flex;
    flex-direction: column;

    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // background-color: red;
      margin-bottom: 20px;
      flex-shrink: 0;

      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;

        // margin-left: 24px;
      }
    }

    .main {
      width: 100%;
      height: 100%;
      // background-color: #bfa;
      overflow-y: auto;
      padding-right: 10px;

      .content7 {
        margin-top: 20px;

        .set_tit {
          margin-left: 34px;
          font-size: 18px;
          font-weight: 500;
          color: #232425;
        }

        .line {
          width: 100%;
          height: 1px;
          background-color: #e8e8e8;
          margin-top: 10px;
        }

        .set_body {
          margin-left: 34px;
          margin-right: 34px;
          position: relative;

          .edit {
            position: absolute;
            width: 100px;
            height: 40px;
            background: #388be1;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            right: 0;
            cursor: pointer;

            .img {
              width: 18px;
              height: 18px;
              background-image: url(../../assets/images/basicinfo/edit.png);
              background-size: 100%;
              margin-right: 7px;
            }

            .ed {
              font-size: 14px;
              font-weight: 400;
              color: #ffffff;
            }
          }

          .set_content {
            margin: 32px auto;
            display: flex;

            // justify-content: end;
            .setc_name {
              width: 150px;
              display: flex;
              justify-content: end;
            }

            .setc_main {
              flex: 1;
              margin-left: 12px;
            }
          }
        }
      }

      .detaile {
        width: 100%;
        // background-color: blue;
        display: flex;
        justify-content: center;

        .can {
          width: 130px;
          height: 40px;
          border-radius: 4px;
          border: 1px solid #387df7;
          color: #387df7;
          background-color: #fff;
          margin-right: 30px;
        }

        .debtn {
          width: 130px;
          height: 40px;
          background: #388be1;
          border-radius: 8px;
          border: 0;
          color: #ffffff;
          cursor: pointer;
        }
      }

      .audit {
        margin-left: 34px;
        margin-right: 34px;
        position: relative;

        .set_content {
          margin: 32px auto;
          display: flex;

          // justify-content: end;
          .setc_name {
            width: 150px;
            display: flex;
            justify-content: end;
          }

          .setc_main {
            flex: 1;
            margin-left: 12px;

            textarea {
              border-radius: 4px !important;
              resize: none;
            }
          }
        }
      }
    }
  }
}
</style>

