<template>
  <div>
    <el-dialog title='在线安全库参加人员列表' width="1200px" v-model="addDiaShow" :before-close="handleClose">
      <!-- 培训计划新增或修改 -->
      <div class="config">
        <div class="addbtn">
        </div>
        <section>
          <div class="from_box">
            <div class="from_left">
              <div style="height: 175px;overflow-y: hidden;">
                <MOSTY.Upload :width="'100%'" :limit="1" :nopicer="false" :isImg="true" :ShowfileList="false"
                  v-model="dialogForm.videopic" :gsgfList="['jpg', 'png']" :disabled='!savebtn'>
                </MOSTY.Upload>
              </div>
              <span style="margin-left: 40px">课件封面图</span>
            </div>
            <el-form class="addcjry-form" ref="frombt" style="flex: 1;" :model="dialogForm" :rules="rules"
              label-width="120px">
              <el-form-item label="课件类型：" prop="videotype">
                <el-select class="pxdx_box" v-model="dialogForm.videotype" clearable style="width: 212px"
                  :disabled='!savebtn'>
                  <el-option v-for="item in D_TB_YWLX" :key="item" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="学习类型：" prop="learntype">
                <el-select class="pxdx_box" v-model="dialogForm.learntype" clearable style="width: 212px"
                  :disabled='!savebtn'>
                  <el-option v-for="item in xxlxlist" :key="item" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="课件名称：" prop="videoname">
                <el-input v-model="dialogForm.videoname" maxlength="50" autosize type="textarea" show-word-limit
                  placeholder="不能超过50个字" style="width: 730px" :disabled='!savebtn'></el-input>
              </el-form-item>
              <el-form-item label="课件简介：" prop="instro">
                <el-input style="width: 730px" v-model="dialogForm.instro" autosize type="textarea" row="10"
                  :disabled='!savebtn' />
              </el-form-item>
              <el-form-item label="学时：" prop="videotime">
                <el-input v-model="dialogForm.videotime" type="Number" maxlength="30" @input="check"
                  style="width: 730px" :disabled='!savebtn'></el-input>
              </el-form-item>
              <el-form-item label="课件附件：" prop="videourl" v-if='dialogForm.learntype == "1"'>
                <MOSTY.Upload width="730px" :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true"
                  :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" v-model="dialogForm.videourl"
                  :delrow="delrow" :disabled='true'>
                </MOSTY.Upload>
              </el-form-item>
              <el-form-item label="视频上传：" prop="videourl" v-if='dialogForm.learntype == "2"'>
                <MOSTY.Upload width="730px" :limit="1" :nopicer="true" :isImg="false" :isVideosp="true"
                  :ShowfileList="true" v-model="dialogForm.videourl" :delrow="delrow" @filehandleChange="changeFile"
                  :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :keys="keys" :disabled='!savebtn'>
                </MOSTY.Upload>
                <div style="margin-left:20%;color:red;"> <span> (仅支持视频格式文件上传)</span></div>
              </el-form-item>
              <el-form-item label="指定范围：" prop="studytype" style="width: 730px">
                <el-radio-group v-model="dialogForm.studytype">
                  <el-radio label="1">全员参与</el-radio>
                  <el-radio label="2">指定人员</el-radio>
                </el-radio-group>
                <el-button type="primary" v-if="dialogForm.studytype == '2'" @click="ChooesDdld('03')" class="ml12">
                  <el-icon>
                    <CirclePlus />
                  </el-icon>
                  <span>添加人员</span>
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </section>
        <div v-if="dialogForm.studytype == '2'">
          <el-table ref="multipleTableRef" :data="ryList" stripe style="width: 100%" v-loading="tableloading"
            element-loading-text="数据加载中..." @selection-change="handleSelectionChange" border>
            <el-table-column label="学员名称" property="username"></el-table-column>
            <el-table-column label="所属部门名称" property="depname"></el-table-column>
            <el-table-column label="操作" width="250">
              <template #default="{ row }">
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="handledelete(row)">
                  <template #reference>
                    <span span class="operate" style="color:yellowgreen" size="small">删除</span>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenyes">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
              layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" :loading="loading" @click="saveFrom(frombt)">保存</el-button>
          <el-button @click="handleClose" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 选择人员 -->
    <ChooseUser v-model="chooseUserVisible" @close="closeChooseUser" :Single="singleShow" :data="memberList"
      :leaderid="leaderid" :deptId="deptId" @choosedUsers="getSonValue"></ChooseUser>
  </div>
</template>

<script setup>
// 引入
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  reactive,
  watch,
  getCurrentInstance
} from "vue";
import { getItem } from "@/utils/storage";
import { useRouter } from "vue-router";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { getApi, postApi, putApi, deleteApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const { D_TB_YWLX } = proxy.$dict("D_TB_YWLX");
const props = defineProps({
  id: String,
  deptId: String
});
const addDiaShow = ref(true)
const tableloading = ref(false)
const frombt = ref();
const dialogForm = ref({
  studytype: '1'
})
const rules = reactive({
  studytype: [
    {
      trigger: "blur",
      required: true,
      message: "指定范围不能为空"
    }
  ]
});
const xxlxlist = ref([
  { label: '附件', value: '1' },
  { label: '视频学习', value: '2' }
])
const loading = ref(false); //新增保存按钮截流
const otherfiledelrow = ref({});
const total = ref(0)
const memberList = ref([])
const disabled = ref(false)
const otherfileList = ref([])
const ruleFormRef = ref()
const zzlx = ref(null);
const ryList = ref([]);
const deptcode = ref('')
const userIdList = ref([]);
const emits = defineEmits(["changeAddVi", "changeclose"]);
const activeNames = ref(1);
const chooseUserVisible = ref(false); //选择人员弹窗
const singleShow = ref(true); //单选多选
const leaderid = ref("");
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  studyid: props.id
})
const addfrom = ref({
  userIdList: [],
  id: props.id
})
//获取详情
onMounted(() => {
  getxqData(props.id)
  getprople()
});
//	查询参与人员列表
function getprople() {
  tableloading.value = true
  getApi(listQuery.value, '/mosty-jcgl/videoStudy/getStudyUserPage').then(res => {
    if (res.records) {
      ryList.value = res.records;
      total.value = res.total;
      tableloading.value = false;
    }

  })
}
//选择人员或部门
function ChooesDdld(value) {
  zzlx.value = value;
  leaderid.value = "";
  //人员多选
  singleShow.value = false;
  chooseUserVisible.value = true;
  if (ryList.value) {
    memberList.value = ryList.value.map((item) => {
      return item.userId;
    });
  }
}
//新增课件
const saveFrom = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      dialogForm.value.videopic = dialogForm.value.videopic ? dialogForm.value.videopic.toString() : null;
      dialogForm.value.videourl = dialogForm.value.videourl ? dialogForm.value.videourl.toString() : null;
      postApi(dialogForm.value, '/mosty-jcgl/videoStudy/editStudy').then(res => {
        ElMessage.success('修改成功');
        loading.value = false;
        emits("changeclose", true);
      })
    } else {
      ElMessage.warning('请输入必填项！！！')
    }
  })
}
//	查询数据详情
function getxqData(id) {
  getApi({ id }, "/mosty-jcgl/videoStudy/getInfo").then((res) => {
    dialogForm.value = res;
  });
}
//获取部门、人员
const getSonValue = (value) => {
  // ryList.value = value;
  // value.forEach(item => {
  //     item.username = item.userName;
  //     item.depname = item.deptName
  // })
  memberList.value = value.map((item) => {
    return item.id;
  });
  addfrom.value.userIdList = memberList.value
  getpushpepo()
}
//添加人员
function getpushpepo() {
  tableloading.value = true
  postApi(addfrom.value, '/mosty-jcgl/videoStudy/setPersonal').then(res => {
    ElMessage.success("添加成功");
    deptcode.value = ''
    getprople()
  })
}
//删除人员
function handledelete(row) {
  deleteApi({ studyid: row.studyid, userpk: row.userpk }, '/mosty-jcgl/videoStudy/delStudyUser').then(res => {
    ElMessage.success("删除成功");
    getprople()
  })
}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getprople();
};
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getprople();
};
// 关闭
const handleClose = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      ryList.value = []
      emits("changeAddVi", false);
    })
    .catch(() => {
      // catch error
    })

};

// 关闭×
const closeDialog = () => {
  loading.value = false;
  emits("changeAddVi", false);
};



</script>

<style lang="scss" scoped>
.fj {
  .el-form {
    padding: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    // width: 1170px;
    justify-content: flex-end;
  }

  .from_fix {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    margin-top: 10px;

    // .el-form-item--default .el-form-item__content {
    //   flex-wrap: nowrap !important;
    // }

    .el-input {
      width: 100%;
    }
  }
}

// ::v-deep .el-form-item__content {
//   flex-wrap: nowrap !important;
// }

.config {
  max-height: 70vh;
  padding-top: 20px;
  padding-bottom: 20px;
  .el-form {
    padding: 0 40px;
    margin-top: 0;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .el-form-item {
    text-align: center;
  }
}

.pxdx_box {
  width: 500px;
}

.titleBox {
  align-items: center;
  margin: 0;
  padding: 0;
  height: 60px;
  border: 1px solid rgb(32, 75, 54);
  padding: 20px;
}

.form>div {
  position: relative;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;

  div {
    display: flex;
    align-items: center;

    .el-select {
      width: 65%;
    }
  }
}

.el-input {
  width: 75%;
}

.two .el-input {
  width: 65%;
}

.three {
  justify-content: flex-start !important;

  .el-select {
    width: 15%;
  }
}

.four {
  display: flex;
  align-items: center;

  span {
    width: 5%;
  }

  .el-textarea__inner {
    width: 95%;
  }
}

.group {
  margin-top: 50px;
  // background-color: red;
  position: relative;
}

.fj {
  margin-top: 50px;
  width: 100%;

  .content {
    width: 100%;
    display: flex;
    padding: 20px;

    div {
      display: flex;
      width: 85%;
      align-items: center;
    }

    justify-content: space-between;
  }
}

.jc {
  margin-top: 50px;
}

.tabBox {
  height: 300px !important;
}

.el-table {
  height: 300px !important;
  border: 1px solid var(--el-color-primary);
}



.el-collapse {
  border-color: var(--el-color-primary);
  height: 460px;
}

::v-deep .el-collapse-item__header {
  border-bottom-color: var(--el-color-primary);
  color: #000 !important;
}

::v-deep .el-collapse-item__header.is-active {
  border-bottom-color: transparent;
}

::v-deep .el-date-editor .el-range-input {
  color: #0c0b0b !important;
}

.addcjry-form ::v-deep .el-form-item > .el-form-item__content {
  // flex-wrap: nowrap;
  // border: 1px solid red;
}

.from_box {
  display: flex;
  justify-content: space-between;



  .from_left {
    width: 25%;

    >div {
      height: 200px;
      overflow: hidden;
    }
  }
}
</style>
