<script setup>
import { ref, reactive } from "vue";
import { Plus, Calendar, Search,Delete ,Download,} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import user from '~/store/user';
import { useRouter } from "vue-router";
import StuDocItem from "@/components/stu-doc-item/index.vue";

const router = useRouter()

const transId = router.currentRoute.value.query.userId;
const recordName=router.currentRoute.value.query.recordName

const nodata = ref('');
const dataTime = ref([]);
const searchValue = ref("");

const tempParams = ref("");

const singleStuDocData = ref("");
//初始化数据-档案
const InitData = () => {
  if (dataTime.value.length == 0) {
    tempParams.value = '';
  } else {
    tempParams.value = dataTime.value[0] + " - " + dataTime.value[1];
  }
  request({
    url: "/dyaw/xlfw_xsda_dajl/index",
    data: {
      limit:88,
      user_id:transId,
      keyword: searchValue.value,
      dxxd_date:tempParams.value,
    },
  })
    .then(res => {
      if (res.code == "1") {
        singleStuDocData.value = res.data.page_data;
        if (res.data.page_data.length > 0) {
          nodata.value = true;
        } else {
          nodata.value = false;
        }
        
      }
    })
    .catch(error => {
      console.log(error);
    })
};
InitData();

const backBtn = () => {
  router.push("archives");
}

const disA = ref(true);
//按钮-搜索
const searchBtn = () => {
  InitData();
};
//时间筛选
const ChooseDate = (val) => {
  if(val==null){//做了清空操作
    dataTime.value = [];
  } else {
    let objA = val;
    let tempArr = [];
    for (var i = 0; i < objA.length; i++) {
      tempArr.push(objA[i])
  }
    dataTime.value = tempArr;
  }
  InitData();
}


//多选
const multipleSelection = ref([]);
const editChooseIdArr = (data) => {
  if (data.mark) {//选中
    multipleSelection.value.push(data.params)
  } else {//取消选中
    multipleSelection.value = multipleSelection.value.filter(
      (x)=>{
        return x != data.params;
      }
    );
  }
}
//批量导出
const batchExport = () => {
  let tempStr = multipleSelection.value.join();
  let downUrl= window.GLOBAL_CONFIG.api + "/dyaw/xlfw_xsda_dajl/index"+"?" +"api=xls&dxxd_id="+tempStr
  window.open(downUrl, "_blank");
}
//批量删除
const batchDel = () => {
  if (multipleSelection.value.length==0) {
    ElMessage({
      showClose: true,
      message: "请至少选择一项~",
      type: "error",
    });
  } else {
    let tempStr = multipleSelection.value.join();
  request({
    url: "/dyaw/xlfw_xsda_dajl/delete",
    data: {
      dxxd_id: tempStr,
    },
  }).then((res) => {
    if (res.code == "1") {
      ElMessage({
        showClose: true,
        message: res.msg,
        type: "success",
      });
    }
  });
  }
  
};
components: { StuDocItem }
</script>

<template>
  <div class="studocSingle">
    <div class="backOption">
      <el-button round @click="backBtn">返回</el-button>
    </div>
    <div class="studocSingleAll">
      <div class="optionTop">
      <div class="optionTop_left">详情：{{  recordName}}</div>
      <div class="optionTop_middle">
        <el-date-picker v-model="dataTime"  type="daterange" range-separator="-" start-placeholder="开始时间"  end-placeholder="结束时间" value-format="YYYY-MM-DD" round @change="ChooseDate" />
      </div>
      <div class="optionTop_right">
        <el-input v-model="searchValue" style="width: 30%; margin: 0 5px 0 20px" placeholder="关键字搜索"
        :prefix-icon="Search" />
        <el-button type="primary" round  @click="searchBtn">搜索</el-button>
        <el-button type="success" round :icon="Download" @click="batchExport" >批量导出</el-button>
        <el-button type="danger" round :icon="Delete" @click="batchDel" >批量删除</el-button>
      </div>
    </div>
      <div class="allDoc" v-if="nodata">
      <div class="singlePartDoc" v-for="item in singleStuDocData" :key="item.dxx_id" >
          <div class="everyComp">
            <StuDocItem  :docInfo="item" :d="disA" @editChooseArr="editChooseIdArr" />
          </div>
      </div>
    </div>
    <div class="normalNoneData" v-else >暂无数据~</div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.normalNoneData {
  text-align: center;
  margin-top: 10%;
}
.backOption{
  text-align:right;
  margin:10px 0;
}
.studocSingleAll{
  min-height:500px;
  background: #fff;
  box-sizing: border-box;
  padding: 1% 1% 3% 1%;
 }
 .fucList{
  box-sizing:border-box;
  padding:30px 10px;
  text-align: right;
}

.optionTop{
  width:100%;
  display: flex;
  flex-direction: row;
  box-sizing:border-box;
  padding: 0 1%;
}
.optionTop_left{
  width: 35%;
  font-size: 18px;
  font-family: PingFangSC-Regular;
  text-align: left;
  color: #000000;
}
.optionTop_middle{
  width: 30%;
  text-align: right;
}
.optionTop_right{
  width:35%;
  text-align: right;
}
.allDoc{
  width:100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}
.singlePartDoc{
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 50%;
  min-height: 50px;
  box-sizing: border-box;
  padding: 20px;
}
.everyComp{
  /* border: 1px solid #969696; */
}
</style>