<template>
 <div class="h100 task-execute">
   <div class="diy-area">
     <diy-el-form :span="4"  v-model:model-form="form" :forms="taskExecuteHomeFilterForm()">
       <template #searchBtn>
         <el-button type="primary"  :icon="Search" @click="getTableData">查询</el-button>
       </template>

     </diy-el-form>
   </div>
   <div class="line"></div>
   <el-row :gutter="20">
     <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
       <div class="my-content">
         <div class="title">执行任务一(实时且万以下)</div>
         <draggable class="cons" :fallback-class="true"  :force-fallback="true" :fallback-on-body="true" :list="arrData1" :group="{
           name:'site2',
           pull:true,
           put:true
         }" animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" >
           <template #item="{ element }">
             <div class="item" :class="getStaClass(element)">
               <span class="my-circle">{{element.CYCLE_CLASS}}</span>
               <span>{{element.CATALOG_NAME}}</span>
             </div>
           </template>

         </draggable>
       </div>
     </el-col>
     <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
       <div class="my-content">
         <div class="title">执行任务二(实时且万以上)</div>
         <draggable :list="arrData2"   class="cons" :group="{
           name:'site',
           pull:true,
           put:true
         }" animation="300" dragClass="dragClass" :fallback-class="true"  :force-fallback="true" :fallback-on-body="true"  ghostClass="ghostClass" chosenClass="chosenClass" >
           <template #item="{ element }">
             <div class="item" :class="getStaClass(element)">
               <span class="my-circle">{{element.CYCLE_CLASS}}</span>
               <span>{{element.CATALOG_NAME}}</span>
             </div>
           </template>

         </draggable>
       </div>
     </el-col>
     <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
       <div class="my-content">
         <div class="title">执行任务三(定时且万以下)</div>
         <draggable :list="arrData3"   class="cons" :group="{
           name:'site3',
           pull:true,
           put:true
         }" animation="300" dragClass="dragClass" :fallback-class="true"  :force-fallback="true" :fallback-on-body="true"  ghostClass="ghostClass" chosenClass="chosenClass" >
           <template #item="{ element }">
             <div class="item" :class="getStaClass(element)">
               <span class="my-circle">{{element.CYCLE_CLASS}}</span>
               <span>{{element.CATALOG_NAME}}</span>
             </div>
           </template>

         </draggable>
       </div>
     </el-col>
     <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
       <div class="my-content">
         <div class="title">执行任务四(定时且万以上)</div>
         <draggable :list="arrData4"   class="cons" :group="{
           name:'site4',
           pull:true,
           put:true
         }" animation="300" dragClass="dragClass" :fallback-class="true"  :force-fallback="true" :fallback-on-body="true"  ghostClass="ghostClass" chosenClass="chosenClass" >
           <template #item="{ element }" :class="getStaClass(element)">
             <div class="item">
               <span class="my-circle">{{element.CYCLE_CLASS}}</span>
               <span>{{element.CATALOG_NAME}}</span>
             </div>
           </template>

         </draggable>
       </div>
     </el-col>
   </el-row>
   <div class="detail-operation-btn">
     <el-button :icon="Check" @click="savsS">保存</el-button>
     <el-button @click="resetTable"><span class="icon-back iconfont" ></span><span>重置</span></el-button>
   </div>
<!--   <div class="content">-->
<!--      <div>-->
<!--        <div class="title">执行任务一(实时且万以下)</div>-->
<!--        <div class="c-c">-->

<!--        </div>-->
<!--      </div>-->
<!--      <div>-->
<!--        <div class="title">执行任务一(实时且万以下)</div>-->
<!--      </div>-->
<!--      <div>-->
<!--        <div class="title">执行任务一(实时且万以下)</div>-->
<!--      </div>-->
<!--      <div>-->
<!--        <div class="title">执行任务一(实时且万以下)</div>-->
<!--      </div>-->
<!--   </div>-->
 </div>
</template>

<script>
import draggable from "vuedraggable";
import  "sortablejs";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {nextTick, onBeforeMount, ref} from "vue";
import {Check, Search} from "@element-plus/icons-vue";
import {taskExecuteHomeFilterForm} from "@/data/all-forms";
import {getTaskExcuteData, saveTaskExcuteD} from "@/service/task-manage/task-excute";
import {isEmptyCheck} from "@/unit/validate";
import {getDateToString, getDateToString_ymd, getDateToStrNum, GetMonday} from "@/unit/time";
import {handleMes} from "@/unit/element-ui/tip";

export default {
  name: "TaskExecute",
  computed: {
    Check() {
      return Check
    },
    Search() {
      return Search
    }
  },
  components: {DiyElForm,draggable},
  setup() {
    const style = {
      'min-height':'120px;display: block'
    }
    function savsS() {
      let arr2 = []
      let refArr = [arrData1.value,arrData2.value,arrData3.value,arrData4.value]
      for (let i = 0; i < refArr.length; i++) {

        for (let j = 0; j < refArr[i].length; j++) {
          arr2.push({
            CATALOG_CODE:refArr[i][j].CATALOG_CODE,
            ORDER_NUM:i+1
          })
        }
        // console.log(arr2)

      }

      saveTaskExcuteD(arr2).then(res => {
        handleMes(res,() => {
          getTableData()
        })
      })
    }
    function resetTable() {
      arrData1.value = allDataList.value.filter(i => +i.ORDER_NUM === 1)
      arrData2.value = allDataList.value.filter(i => +i.ORDER_NUM === 2)
      arrData3.value = allDataList.value.filter(i => +i.ORDER_NUM === 3)
      arrData4.value = allDataList.value.filter(i => +i.ORDER_NUM === 4)
    }


     const arrData1 = ref([])
     const arrData2 = ref([])
     const arrData3 = ref([])
     const arrData4 = ref([])

     const sortables = ref([{},{},{},{}])
     const ulRef = ref([])
     const ulRef2 = ref([])
     const ulRef3 = ref([])
     const ulRef4 = ref([])
     const arr = ref([])
    const liRefArr = ref([])

    function nextExecDateTime(row){
      if (isEmptyCheck(row["EXEC_TIME"])) {
        return "";
      }
      var temptime = row["EXEC_TIME"];
      temptime = temptime.split("-");
      if (row["EXEC_CYCLE"] == "0") {//周期执行
        var temp = "";
        if (row["EXEC_CYCLE"] == 0) {
          switch (row["CYCLE_CLASS"]) {
            case "年":
              temp = getDateToStrNum(new Date()).toString().substr(0, 4);
              if (isEmptyCheck(row["INSPECTION_DATE"])) {
                return temp + "-" + temptime[0] + "-" + temptime[1] + " " + temptime[2] + ":00:00";
              }
              if (new Date(row["INSPECTION_DATE"]).getTime() < new Date(temp + "-" + temptime[0] + "-" + temptime[1] + " " + temptime[2] + ":00:00").getTime()) {
                return temp + "-" + temptime[0] + "-" + temptime[1] + " " + temptime[2] + ":00:00";
              }
              temp = parseInt(temp) + 1;
              return temp + "-" + temptime[0] + "-" + temptime[1] + " " + temptime[2] + ":00:00";
              break;
            case "月":
              temp = getDateToStrNum(new Date()).toString().substr(0, 6);
              if (isEmptyCheck(row["INSPECTION_DATE"])) {
                return temp.substr(0, 4) + "-" + temp.substr(4, 6) + "-" + temptime[0] + " " + temptime[1] + ":00:00";
              }
              if (new Date(row["INSPECTION_DATE"]).getTime() < new Date(temp.substr(0, 4) + "-" + temp.substr(4, 6) + "-" + temptime[0] + " " + temptime[1] + ":00:00").getTime()) {
                return temp.substr(0, 4) + "-" + temp.substr(4, 6) + "-" + temptime[0] + " " + temptime[1] + ":00:00";
              }
              var d = new Date(temp.substr(0, 4) + "-" + temp.substr(4, 6) + "-" + temptime[0] + " " + temptime[1] + ":00:00")
              d.setMonth(d.getMonth() + 1);
              return getDateToString_ymd(d) + " " + temptime[1] + ":00:00";
              break;
            case "周":
              temp = getDateToStrNum(new Date()).toString().substr(0, 6);
              if (isEmptyCheck(row["INSPECTION_DATE"])) {
                return GetMonday(new Date(), temptime[0]) + " " + temptime[1] + ":00:00";
              }
              if (new Date(row["INSPECTION_DATE"]).getTime() < new Date(GetMonday(new Date(), temptime[0]) + " " + temptime[1] + ":00:00").getTime()) {
                return GetMonday(new Date(), temptime[0]) + " " + temptime[1] + ":00:00";
              }
              var dateTime = new Date(GetMonday(new Date(), temptime[0]));
              dateTime = dateTime.setDate(dateTime.getDate() + 7);
              dateTime = getDateToString_ymd(new Date(dateTime));
              return dateTime + " " + temptime[1] + ":00:00";
              break;
            case "日":
              temp = getDateToString_ymd(new Date()).toString();
              if (isEmptyCheck(row["INSPECTION_DATE"])) {
                return temp + " " + temptime[0] + ":00:00";
              }
              if (new Date(row["INSPECTION_DATE"]).getTime() < new Date(temp + " " + temptime[0] + ":00:00").getTime()) {
                return temp + " " + temptime[0] + ":00:00";
              }
              var dateTime = new Date();
              dateTime = dateTime.setDate(dateTime.getDate() + 1);
              dateTime = getDateToString_ymd(new Date(dateTime));
              return dateTime + " " + temptime[0] + ":00:00";
              break;
            case "时":
              temp = getDateToString(new Date()).toString();
              if (isEmptyCheck(row["INSPECTION_DATE"])) {
                return temp;
              }
              var curTime = new Date(row["INSPECTION_DATE"]);
              var addHour = curTime.setHours(curTime.getHours() + parseInt(temptime[0]));

              dateTime = getDateToString(new Date(curTime));
              return dateTime.toString().substr(0,16);
              break;
          }
        }
      }
      if (row["EXEC_CYCLE"] == "1") {//单次执行
        if (!isEmptyCheck(row["INSPECTION_DATE"])) {
          return row["INSPECTION_DATE"];
        }
        return temptime[0] + "-" + temptime[1] + "-" + temptime[2] + " " + temptime[3] + ":00:00";
      }
    }
    function getStaClass(data){
        let tempDate
      if(data["STATE"] == "5"){
        //执行中
        return 'warning-element'
      }else if(data["STATE"] == "1"){
        return  'info-element'
      }
      tempDate = nextExecDateTime(data);
      if(!isEmptyCheck(tempDate) && (new Date()).getTime() > (new Date(tempDate)).getTime()){
        return 'danger-element'
      }
    }
    const allDataList = ref([])
    function getTableData() {
      getTaskExcuteData({
        CATALOG_NAME:form.value.CATALOG_NAME,
        UNIT_CODE:form.value.UNIT_CODE,
        STATE:form.value.STATE,
      }).then(res=>{

        nextTick(() => {
          console.log(ulRef.value);

          allDataList.value = [...res.msg[0].Rows]
          arrData1.value = allDataList.value.filter(i => +i.ORDER_NUM === 1)
          arrData2.value = allDataList.value.filter(i => +i.ORDER_NUM === 2)
          arrData3.value = allDataList.value.filter(i => +i.ORDER_NUM === 3)
          arrData4.value = allDataList.value.filter(i => +i.ORDER_NUM === 4)

        })

      })
    }
    onBeforeMount(() => {
      getTableData()


    })
    const form = ref({

    })
    return {
      form,
      taskExecuteHomeFilterForm,
      allDataList,
      getStaClass,
      liRefArr,

      sortables,
      ulRef,
      ulRef2,
      ulRef3,
      ulRef4,

      resetTable,
      getTableData,
      savsS,
      style,
      arrData1,
      arrData2,
      arrData3,
      arrData4,
    }
  }
}
</script>

<style scoped lang="scss">
.data-list{
  box-sizing: border-box;

  li{
    &.info-element {
      border-left: 3px solid #e7eaec;
      .my-circle{
        border: 1px solid #1c84c6;
        color: #1c84c6;
      }
    }
    &.warning-element {
      border-left: 3px solid #f8ac59;
      .my-circle{
        border: 1px solid #f8ac59;
        color: #f8ac59;
      }
    }
    &.danger-element {
      border-left: 3px solid #FF0000;
      .my-circle{
        border: 1px solid #FF0000;
        color: #FF0000;
      }
    }
    .my-circle{
      display: inline-block;
      /* float: none; */
      border-radius: 50%;
      width: 18px;
      height: 18px;
      /* background-color: #FF0000; */
      /* background-color: #FF0000; */
      font-size: 9px;
      color: #FF0000;
      text-align: center;
      box-sizing: border-box;
      line-height: 18px;
      border-left: 1px solid #FF0000;
      margin-right: 5px;
    }
    background: #FAFAFB;
    border: 1px solid #e7eaec;
    margin: 10px 0 10px 0;
    padding: 10px;
    border-radius: 2px;
  }
}
.diy-area{

  padding-top: 30px;
}
.line{

  margin-bottom: 30px;
  border: 0;
  border-top: 1px solid #eee;
}
.content{

  display: flex;
  justify-content: space-between;

  flex-wrap: wrap;
  flex: 1;
}
:deep{
  .el-col{
    height: 48%;
    margin-bottom: 20px;
  }
}
.my-content{
  :deep{
    .cons{
      overflow-x: hidden;
      margin: 15px 0;
      padding: 0 15px;
      flex: 1;
      overflow-y: auto;
    }
  }
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 3px;

  .c-c{
    flex: 1;
    overflow: auto;
  }
  .title{
    padding: 10px  15px;
    border-bottom: 1px solid #1c84c6;
    background-color: #1c84c6;
    border-color: #1c84c6;
    color: #ffffff;
  }
  margin-bottom: 20px;

  overflow: hidden;
  border: 1px solid #1c84c6;

}
.task-execute{
  .el-row{
    padding-bottom: 20px;
    flex: 1;
    overflow: hidden;

  }
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding:0 20px;

}
.detail-operation-btn{
  margin-top: 10px;
}
.item{
  overflow-x: hidden;
  .my-circle{
    display: inline-block;
    /* float: none; */
    border-radius: 50%;
    width: 18px;
    height: 18px;
    /* background-color: #FF0000; */
    /* background-color: #FF0000; */
    font-size: 9px;
    color: #FF0000;
    text-align: center;
    box-sizing: border-box;
    line-height: 18px;
    border-left: 1px solid #FF0000;
    margin-right: 5px;
  }
  background: #FAFAFB;
  border: 1px solid #e7eaec;
  margin: 10px 0 10px 0;
  padding: 10px;
  border-radius: 2px;
  &.info-element {
    border-left: 3px solid #e7eaec;
    .my-circle{
      border: 1px solid #1c84c6;
      color: #1c84c6;
    }
  }
  &.warning-element {
    border-left: 3px solid #f8ac59;
    .my-circle{
      border: 1px solid #f8ac59;
      color: #f8ac59;
    }
  }
  &.danger-element {
    border-left: 3px solid #FF0000;
    .my-circle{
      border: 1px solid #FF0000;
      color: #FF0000;
    }
  }
}
</style>
