<template>
 <div class="position-re">
   <my-breadcrumb class="my-breadcrumb" :breadcrumb-arr="dataImputationTaskDetailBreadcrumbArr"/>
   <div class="back" @click="$emit('changeOperation','',{})"><span class="fa fa-reply cur-po " >返回</span></div>
   <div class="my-detail-main">
     <div class="block">
       <div class="my-b-title">基本信息</div>

       <div class="form">
         <diy-el-form v-model:model-form="forms"  :forms="formConfig1"/>
       </div>
     </div>
     <div class="block">
       <div class="my-b-title">同步规则</div>
       <div>
         <span class="my-data-source">数据资源</span>
         <span class="my-total">共 <strong>{{totalCount}}</strong> 个目录项</span>
       </div>
       <div class="my-search-div">
         <el-input v-model="keyWord"/>
       </div>
       <my-table
         :filter-meothod="row => row.ORIGION_MODE?.includes(keyWord)"
         :page-size="5"
         :is-height-equal-max-height="true"
         border
         :has-operation="true"
         :table-data="tableData"
         :headers="dataImputationTaskDetailTableHeader"

       >
         <template #operation="{data}">
           <el-button type="info" @click="changeState(data,'1')"  v-if="data.KETTLE_RULE_STATES === '2'">启用</el-button>
           <el-button type="danger"  @click="changeState(data,'2')"   v-else>禁用</el-button>
         </template>
       </my-table>
       <div  class="info-m mt20">
         显示第 1 到第 {{totalCount}} 条记录，总共 {{totalCount}} 条记录
       </div>

     </div>
     <div class="detail-operation-btn" v-if="operationType !== 'detail'">
       <el-button :icon="Refresh" @click="saveS('1')">运行</el-button>
       <el-button :icon="Select" @click="saveS('4')">保存</el-button>
       <el-button :icon="Close" @click="$emit('changeOperation','')">返回</el-button>
     </div>
   </div>
 </div>
</template>

<script>
import MyBreadcrumb from "@/components/common/MyBreadcrumb.vue";
import {dataImputationTaskDetailBreadcrumbArr} from "@/data/all-el-breadcrumb-arr";
import {dataImputationTaskDetailBaseForm, qualityCheckTaskDetailBaseForm} from "@/data/all-forms";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {onBeforeMount, ref, watch} from "vue";
import MyTable from "@/components/common/MyTable.vue";
import {dataImputationTaskDetailTableHeader} from "@/data/all-table-header";
import {getSyncDetailTableData} from "@/service/zsk/sync-rule";
import {
  changeDetailState,
  saveOrRefreshImputationDAdd,
  saveOrRefreshImputationDEdit
} from "@/service/data-gj/data-imputation-task";
import {elAlert, handleMes} from "@/unit/element-ui/tip";
import {Close, Refresh, Select} from "@element-plus/icons-vue";

export default {
  name: "DataImputationTaskDetail",
  computed: {
    Close() {
      return Close
    },
    Select() {
      return Select
    },
    Refresh() {
      return Refresh
    }
  },
  components: {MyTable, DiyElForm, MyBreadcrumb},
  props:{
    operationType:{

    },
    currentOpObj:{}

  },
  setup(props,{emit}) {
    const totalCount  = ref(null)
    const forms= ref({

    })
    function saveS(state){
      if (!(tableData.value.length > 0)){
        elAlert('请先配置该目录数据源规则')
      }else {
        let url = saveOrRefreshImputationDAdd
        let EXEC_TIME
        if (forms.value.cycle === '0'){
          //  周期执行
          if (forms.value.frequency === '年'){
            EXEC_TIME = [forms.value.month,forms.value.day,forms.value.time].join('-')

          } else if (forms.value.frequency === '月'){
            EXEC_TIME = [forms.value.day,forms.value.time].join('-')

          } else if (forms.value.frequency === '周'){
            EXEC_TIME = [forms.value.day,forms.value.time].join('-')

          }else if (forms.value.frequency === '日'){
            EXEC_TIME = [forms.value.time].join('-')

          }else if (forms.value.frequency === '时'){
            EXEC_TIME = [forms.value.time].join('-')
          }
        }
        else if (forms.value.cycle === '1'){
          EXEC_TIME = [forms.value.singleYear,forms.value.singleMonth,forms.value.singleDay,forms.value.singleTime].join('-')

        }
        let params = {
          CATALOG_CID:props.currentOpObj.CID,
          EXEC_CYCLE:forms.value.cycle,
          CYCLE_CLASS:forms.value.frequency,
          EXEC_TIME:EXEC_TIME,
          TASK_STATES:state
        }
        if (props.currentOpObj.KETTLE_TASK_ID){
          url = saveOrRefreshImputationDEdit
           params.KETTLE_TASK_ID = props.currentOpObj.KETTLE_TASK_ID
        }
        url(params).then(res => {
          handleMes(res,() => {
            emit('changeOperation','')
          })
        })

      }
    }
    function changeState(data,state){
      changeDetailState(data.KETTLE_RULE_ID,state).then(res => {
        handleMes(res,() => {
          getTableList()
        })
      })
    }
    const keyWord = ref('')
    const formConfig1 = ref({...dataImputationTaskDetailBaseForm()})
    const tableData = ref([])
    watch(() =>forms.value.cycle,(val) => {
      const beforeForm =  dataImputationTaskDetailBaseForm().formItemsArr.slice(0,2)
      let findItemCycle = formConfig1.value.formItemsArr.find(i => i.modelValue === 'cycle')
      let findAdd = findItemCycle.options.find(i => i.value === val)
      if (findAdd){
        formConfig1.value.formItemsArr  =[...beforeForm,...findAdd.forms]
      }else {
        formConfig1.value.formItemsArr = beforeForm
      }
      let val2 = forms.value['frequency']
      if (val2){
        let findFrequencyIndex = formConfig1.value.formItemsArr.findIndex(i => i.modelValue === 'frequency')
        console.log('findFrequencyIndex',findFrequencyIndex)
        if (findFrequencyIndex===-1){
          return
        }
        let findAdd = formConfig1.value.formItemsArr[findFrequencyIndex].radioArr.find(i => i.value === val2)
        if (!findAdd) {
          return;
        }
        formConfig1.value.formItemsArr = [...formConfig1.value.formItemsArr.slice(0,findFrequencyIndex + 1),...findAdd.forms]
      }

    })
    watch(() => forms.value['frequency'],(val) => {
      if (val){
        let findFrequencyIndex = formConfig1.value.formItemsArr.findIndex(i => i.modelValue === 'frequency')
        console.log('findFrequencyIndex',findFrequencyIndex)
        if (findFrequencyIndex===-1){
          return
        }
        let findAdd = formConfig1.value.formItemsArr[findFrequencyIndex].radioArr.find(i => i.value === val)
        if (!findAdd) {
          return;
        }
        formConfig1.value.formItemsArr = [...formConfig1.value.formItemsArr.slice(0,findFrequencyIndex + 1),...findAdd.forms]
      }
    })
   function getTableList() {
     getSyncDetailTableData({
       "pageIndex": "1",
       "pageSize": "20000",
       "CATALOG_CID": props.currentOpObj.CID,
       //"TYPE": "",
       "STATE": "",
     }).then(res => {
       tableData.value = res.msg[0].Rows
       totalCount.value = res.msg[0].TotalRowCount
     })

   }
    onBeforeMount(() => {
      if (props.operationType !== 'add'){
        forms.value = {
          ...props.currentOpObj,

          cycle:props.currentOpObj.EXEC_CYCLE,
          frequency:props.currentOpObj.CYCLE_CLASS,
        }
        const splitA = (forms.value.EXEC_TIME || '').split('-')
        if (splitA.length > 0){
          if (forms.value.cycle === '0'){
            //  周期执行
            if (forms.value.frequency === '年'){
              forms.value.month = splitA[0] || ''
              forms.value.day = splitA[1] || ''
              forms.value.time = splitA[2] || ''
            } else if (forms.value.frequency === '月'){

              forms.value.day = splitA[0] || ''
              forms.value.time = splitA[1] || ''
            } else if (forms.value.frequency === '周'){

              forms.value.day = splitA[0] || ''
              forms.value.time = splitA[1] || ''
            }else if (forms.value.frequency === '日'){
              forms.value.time = splitA[0] || ''
            }else if (forms.value.frequency === '时'){
              forms.value.time = splitA[0] || ''
            }
          }
          else if (forms.value.cycle === '1'){
            forms.value.singleYear = splitA[0] || ''
            forms.value.singleMonth = splitA[1] || ''
            forms.value.singleDay = splitA[2] || ''
            forms.value.singleTime = splitA[3] || ''
          }
        }
        getTableList()
      }
    })

    return {
      dataImputationTaskDetailBreadcrumbArr,
      formConfig1,
      forms,
      keyWord,
      tableData,
      dataImputationTaskDetailTableHeader,
      totalCount,
      changeState,
      saveS
    }
  }
}
</script>

<style scoped lang="scss">
.form{
  max-width: 600px;
}
</style>
