<template>
 <div class="h100">
   <common-layout
     ref="layoutRef"
     :form-attrs="{
     spanAttrs: {
       span:5
     }
     }"
     :table-attrs="{
     'has-operation':true
     }"
     :get-table-list="getTableList"
     :filter-form="dataTaskHomeFilterForm()"
   :table-header="dataTaskHomeTableHeader"

   >
    <template #CLEANING_TASK_STATUS="{data}">

      {{getStatus(data.CLEANING_TASK_STATUS)}}
    </template>

     <template #operation="{data}">
       <template v-if="!(data.CLEANING_TASK_STATUS)">
         <el-button type="info" @click="$emit('changeOperation','set',data)">配置</el-button>
       </template>
       <template v-if="data.CLEANING_TASK_STATUS === '0'">
         <el-button type="info" @click="changeStatus(data,'1')">启用</el-button>
         <el-button type="info" @click="$emit('changeOperation','set',data)">配置</el-button>
       </template>
       <template v-if="data.CLEANING_TASK_STATUS === '1'">
         <el-button type="danger" @click="changeStatus(data,'0')">停用</el-button>

       </template>
       <template v-if="data.CLEANING_TASK_STATUS === '2'">
         <el-button type="info" @click="changeStatus(data)">运行中</el-button>

       </template>
     </template>
   </common-layout>
 </div>
</template>

<script>
import CommonLayout from "@/components/CommonLayout.vue";
import {dataTaskHomeTableHeader} from "@/data/all-table-header";
import {dataTaskHomeFilterForm} from "@/data/all-forms";
import {ref} from "vue";
import {changeClearTaskStatus, getDataClearHomeData} from "@/service/data-clear";
import {handleMes} from "@/unit/element-ui/tip";
import {useActiveGetTableData} from "@/unit/use-method/usePagination";

export default {
  name: "DataTaskHome",
  components: {CommonLayout},
  setup() {
    useActiveGetTableData(getTableList)
    function getStatus(value) {
      switch (value) {
        case "0":
          return "未启用";
        case "1":
          return "已启用";
        case "2":
          return "清洗中";
        default:
          return '未配置'
      }
    }
    function changeStatus(data,state){
      changeClearTaskStatus(data.CATALOG_CODE,state).then(res => {
        handleMes(res,() => {
          getTableList()
        })
      })
    }
    function getTableList() {
      getDataClearHomeData({
        pageIndex:layoutRef.value.pageIndex,
        pageSize:layoutRef.value.pageSize,
        catalogName:layoutRef.value.form.catalogName,
        unitCode:layoutRef.value.form.unitCode,
        taskStatus:layoutRef.value.form.taskStatus,

      }).then(res => {
        layoutRef.value.getResData(res.msg[0].Rows||[],res.msg[0].TotalRowCount)
      })

    }
    const layoutRef = ref(null)
    return {
      dataTaskHomeTableHeader,
      dataTaskHomeFilterForm,
      layoutRef,
      getTableList,
      getStatus,
      changeStatus
    }
  }
}
</script>

<style scoped lang="scss">

</style>
