<template>
  <div class="chart-clear-rule">
    <div class="my-b-title">清洗项名称</div>
    <div class="my-search-div">
      <el-input v-model="kewWord" class="search-input"/>
    </div>
    <div class="table-a">
      <my-table
        :filter-meothod="row => (row.NAME||'').includes(kewWord)"

        border
        :has-operation="true"
        :headers="chartClearRuleTableHeader"
        :table-data="tableData"
        :page-size="8"
      >
        <template #operation="{data}">
          <el-button type="info" @click="changeState(data,'1')" :disabled="!(operationType !== 'detail' && currentOpObj.STATE!=='2')" v-if="data.DEPLOY_STATUS === '0'">启用</el-button>
          <el-button type="danger" @click="changeState(data,'0')" :disabled="!(operationType !== 'detail' && currentOpObj.STATE!=='2')" v-else-if="data.DEPLOY_STATUS === '1'">禁用</el-button>
          <el-button type="info" :disabled="true" v-else-if="(operationType !== 'detail' && currentOpObj.STATE==='2')">运行中</el-button>
        </template>
      </my-table>
    </div>
    <div  class="m-s">
      显示第 1 到第 {{totalCount}} 条记录，总共 {{totalCount}} 条记录
    </div>
    <div class="detail-operation-btn" v-if="operationType!=='detail'">
      <el-button :icon="Select" @click="$emit('back')">保存</el-button>
      <el-button :icon="Close" @click="$emit('back')">返回</el-button>
    </div>
  </div>
</template>

<script>
import {onBeforeMount, ref} from 'vue'
import {chartClearRuleTableHeader} from "@/data/all-table-header";
import MyTable from "@/components/common/MyTable.vue";
import {getChartClearRuleTableData} from "@/service/task-manage/task-set";
import {changeClearTaskDetailStatus} from "@/service/data-clear";
import {handleMes} from "@/unit/element-ui/tip";
import {getClearRuleDetailTableData} from "@/service/zsk/clear-rule";
import {useRootStore} from "@/stores/useStore";
import {Close, Select} from "@element-plus/icons-vue";

export default {
  name: "ChartClearRule",
  computed: {
    Close() {
      return Close
    },
    Select() {
      return Select
    }
  },
  components: {MyTable},
  props:{
    settingType:{

    },
    operationType:{

    },
    currentOpObj:{

    }
  },
  setup(props,{emit}){
    const kewWord = ref('')
    const totalCount = ref(0)
    const tableData = ref([])
    function changeState(data,state) {
      changeClearTaskDetailStatus({
        cleaningRuleUUID:data.CLEANING_DEPLOY_UUID,
        "cleaningDeployUUID": data.CLEANING_DEPLOY_UUID,
        "deployStatus": state,
        cleaningRule:data?.CLEANING_RULE || '',
      }).then(res => {
        handleMes(res,() => {
          getClearRuleDetailTableData({
            "cid": props.currentOpObj.CATALOG_CODE,
            "CleaningRuleUUID": "",
            "CleaningRuleStatus": "",

          }).then(res => {
            tableData.value = res.msg[0].Rows.map(i => {
             let obj = {...i}
              if (+i.DEPLOY_STATUS === 0){
                obj.QYZT = '未启用'
              }else  if (+i.DEPLOY_STATUS === 1){
                obj.QYZT = '已启用'
              }else {
                obj.QYZT = '正在运行'
              }
              return obj
            })
            totalCount.value = res.msg[0].TotalRowCount
          })
        })
      })
    }
    onBeforeMount(() => {
      getClearRuleDetailTableData({
        "cid": props.currentOpObj.CATALOG_CODE,
        "CleaningRuleUUID": "",
        "CleaningRuleStatus": "",
        appkey:useRootStore().userInfo.ptjk_userkeycode

      }).then(res => {
        tableData.value = res.msg[0].Rows.map(i => {
          let obj = {...i}
          if (+i.DEPLOY_STATUS === 0){
            obj.QYZT = '未启用'
          }else  if (+i.DEPLOY_STATUS === 1){
            obj.QYZT = '已启用'
          }else {
            obj.QYZT = '正在运行'
          }
          return obj
        })
        totalCount.value = res.msg[0].TotalRowCount
      })
    })
    return {
      totalCount,tableData,
      chartClearRuleTableHeader,
      kewWord,
      changeState
    }
  }
}
</script>

<style scoped lang="scss">
.chart-clear-rule{
  padding:0 20px;
}
</style>
