<template>
 <div class="position-re">
   <div>
     <el-breadcrumb separator="/" class="my-breadcrumb">
       <el-breadcrumb-item>数据标签</el-breadcrumb-item>
       <el-breadcrumb-item>标签任务</el-breadcrumb-item>
     </el-breadcrumb>
   </div>
   <div class="back" @click="$emit('changeOperation','',{})"><span class="fa fa-reply cur-po " >返回</span></div>

   <div class="detail-main">
     <div class="block">
       <div class="my-b-title">基本信息</div>
       <div class="form"><diy-el-form v-model:model-form="forms" :forms="labelTaskDetailBaseForm"/></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="search-div">
         <el-input class="search-input"/>
       </div>
       <my-table
         border
         :is-height-equal-max-height="true"
         :page-size="8"
         :has-operation="operationType !== 'detail'"
         :table-data="tableData"
         :headers="labelTaskDetailTableHeader"

       >
         <template #operation="{data}">
           <el-button type="info" @click="changeState(data,'1')" v-if="data['LABEL_STATES']!=='1'">启用</el-button>
           <el-button type="danger" @click="changeState(data,'2')" v-else>禁用</el-button>
         </template>
       </my-table>

     </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 {labelTaskDetailBaseForm} from "@/data/all-forms";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {onBeforeMount, ref} from "vue";
import MyTable from "@/components/common/MyTable.vue";
import {labelTaskDetailTableHeader} from "@/data/all-table-header";
import {Close, Refresh, Select} from "@element-plus/icons-vue";
import {
  addLabelTaskD,
  changeLabelTaskDetailState,
  editLabelTaskD,
  getLabelTaskDetailTableData
} from "@/service/label-task";
import {elAlert, handleMes} from "@/unit/element-ui/tip";

export default {
  name: "LabelTaskDetail",
  computed: {
    Close() {
      return Close
    },
    Select() {
      return Select
    },
    Refresh() {
      return Refresh
    }
  },
  components: {MyTable, DiyElForm},
 props:{
   currentOpObj:{

   },
   operationType:{

   }
 },
  setup(props,{emit}) {
    function saveS(state) {
      if (!(tableData.value.length >0)){
        elAlert('请先配置标签规则')
        return
      }
      let url
      let params = {}
     if (!props.currentOpObj.LABEL_TASK_ID){
      url = addLabelTaskD
       params = {
         CATALOG_ID:props.currentOpObj.CID,
         "FREQUENT": forms.value.FREQUENT,
         "TASK_STATES": state
       }
     }else {
       url = editLabelTaskD
       params = {
         LABEL_TASK_ID: props.currentOpObj.LABEL_TASK_ID || '',
         "FREQUENT": forms.value.FREQUENT,
         "TASK_STATES": state
       }
     }
      if (!(tableData.value.length > 0)){
        elAlert('请先配置标签规则')
      }else {
        url(params).then(res => {
          handleMes(res,() => {
            emit('changeOperation','')
          })


        })
      }

    }
    function changeState(data,state) {
      changeLabelTaskDetailState({
        LABEL_CONFIG_ID:data.LABEL_CONFIG_ID,
        LABEL_RULE_ID:data.LABEL_RULE_ID,
        CATALOG_JOIN_FIELD:data.CATALOG_JOIN_FIELD,
        ASSOCIATED_FIELD_NAME:data.ASSOCIATED_FIELD_NAME,
        LABEL_STATES:state,
      }).then(res => {
        handleMes(res,() => {
          getLabelTaskDetailTableData(props.currentOpObj.CID).then(res => {
            tableData.value = res.msg[0].Rows||[]
            totalCount.value = res.msg[0].TotalRowCount
          })
        })
      })
    }
    const forms = ref({

    })
    const totalCount  = ref([])
    onBeforeMount(() => {
      forms.value = {
        ...props.currentOpObj
      }
      getLabelTaskDetailTableData(props.currentOpObj.CID).then(res => {
        tableData.value = res.msg[0].Rows||[]
        totalCount.value = res.msg[0].TotalRowCount
      })
    })
    const tableData = ref([])
    return {
      labelTaskDetailBaseForm,
      forms,
      labelTaskDetailTableHeader,
      tableData,
      totalCount,
      changeState,
      saveS
    }
  }
}
</script>

<style scoped lang="scss">
.detail-main{
  .search-div{
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    width: 300px;
  }
  .form{
    max-width: 600px;
  }
  padding: 0 20px;
}
</style>
