<template>
  <div class="chart-label-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.LABEL_NAME||'').includes(kewWord)"

        border
        :has-operation="true"
        :headers="chartQualityLabelRuleTableHeader"
        :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.LABEL_STATES !== '1'">启用</el-button>
          <el-button type="danger" @click="changeState(data,'2')" :disabled="!(operationType !== 'detail' && currentOpObj.STATE!=='2')" v-else-if="data.LABEL_STATES === '1'">禁用</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 MyTable from "@/components/common/MyTable.vue";
import {onBeforeMount, ref} from "vue";
import {chartQualityLabelRuleTableHeader} from "@/data/all-table-header";
import {getChartLabelRuleTableData} from "@/service/task-manage/task-set";
import {changeLabelTaskDetailState} from "@/service/label-task";
import {handleMes} from "@/unit/element-ui/tip";
import {Close, Select} from "@element-plus/icons-vue";

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

    },
    operationType:{

    },
    currentOpObj:{

    }
  },
  setup(props,{emit}) {
   function changeState(data,states){
     changeLabelTaskDetailState({
       "LABEL_CONFIG_ID": data.LABEL_CONFIG_ID,
       "LABEL_RULE_ID": data.LABEL_RULE_ID,
       "CATALOG_JOIN_FIELD": "",//关联字段
       "ASSOCIATED_FIELD_NAME": data.ASSOCIATED_FIELD_NAME,
       "JUDGMENT_BASIS": data.JUDGMENT_BASIS,
       "OPERATOR": data.OPERATOR,
       "LABEL_STATES": states, //默认禁用
     }).then(res => {
       handleMes(res,() => {
         getTableData()
       })
     })
   }
    const kewWord = ref('')
    const totalCount = ref(0)
    const tableData = ref([])
    function getTableData() {
      getChartLabelRuleTableData({
       "pageIndex": 1,
       "pageSize": 20000,
       "CATALOG_ID":props.currentOpObj.CATALOG_CODE ,
       "ASSOCIATED_FIELD_NAME": "",
       "LABEL_STATES": "",
     }).then(res => {
       tableData.value = (res.msg[0].Rows||[])
       totalCount.value = res.msg[0].TotalRowCount
     })
    }
    onBeforeMount(() => {
      getTableData()
    })
    return {
      kewWord,tableData,totalCount,
      chartQualityLabelRuleTableHeader,
      changeState
    }
  }
}
</script>

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