<template>
  <div>
    <div class="filter"><el-input v-model="keyWord" class="search"/><el-button @click="openDetailDialog('add')"  :icon="Plus"  /></div>
    <my-table
      :filter-meothod="row => (row.CLEANING_NAME || '').includes(keyWord)"
      border
      :headers="baseUseClearTypeHeader"
      :has-operation="true"
      :table-data="tableData"

    >
      <template #INSP_RULE_NAME="{data}">
        {{data.INSP_RULE_NAME || 0}}
      </template>
      <template #UPDATE_TIME="{data}">
        {{data.UPDATE_TIME?data.UPDATE_TIME.split(".")[0]:''}}
      </template>
      <template #operation="{data}">
        <el-button type="info" @click="openDetailDialog('edit',data)">编辑</el-button>
      </template>
      <template #STATUS="{data}">
        <span>{{data['STATUS']==='1'?'可用':(data['STATUS'] === '2')?'不可用':'不可用'}}</span>
      </template>
    </my-table>
    <template v-if="isDetailDialogShow">
      <clear-type-detail-dialog
        @editClearCheck="editClearCheck"
        :current-dialog-obj="currentDialogObj" :dialog-operation-type="dialogOperationType" v-model:dialog-visible="isDetailDialogShow"/>
    </template>
  </div>
</template>

<script>
import {onBeforeMount, ref} from "vue";
import {Plus} from "@element-plus/icons-vue";
import MyTable from "@/components/common/MyTable.vue";
import {baseUseClearTypeHeader} from "@/data/all-table-header";
import QualityTypeDetailDialog from "@/view/other/c-views/data-handle/zsk/base-rule/tabs/QualityTypeDetailDialog.vue";
import ClearTypeDetailDialog from "@/view/other/c-views/data-handle/zsk/base-rule/tabs/ClearTypeDetailDialog.vue";
import {
  addBaseQualityRule,
  editBaseQualityRule,
  getBaseQualityRuleTableData
} from "@/service/zsk/base-rule/quality-rule";
import {addBaseClearRule, editBaseClearRule, getBaseClearRuleTableData} from "@/service/zsk/base-rule/clear-rule";
import {useDetailOrEdit} from "@/unit/use-method/usePagination";
import {handleMes} from "@/unit/element-ui/tip";

export default {
  name: "ClearType",
  components: {ClearTypeDetailDialog, QualityTypeDetailDialog, MyTable},
  computed: {
    Plus() {
      return Plus
    }
  },
  setup() {
    const isDetailDialogShow = ref(false)
    const tableData = ref([])
    function openDetailDialog(op,item) {
      isDetailDialogShow.value = true
      changeDialogOperation(op,item)
    }
    function editClearCheck(form){
      let params ={
        cleaningRuleTodo:form.cleaningRuleTodo,
        cleaningRuleName:form.cleaningRuleName,
        cleaningRuleCode:form.cleaningRuleCode,
        inspRuleUuid:form.inspRuleUuid,
        cleaningRuleStatus:'',

      }
      if (dialogOperationType.value === 'edit'){
        params.cleaningRuleUuid = currentDialogObj.value.UUID
      }
      let url = dialogOperationType.value === 'add'?addBaseClearRule:editBaseClearRule
      url(params).then(res => {
        handleMes(res,()=>{
          isDetailDialogShow.value = false
          getTableList()
        })
      })
    }
    function getTableList(){
      getBaseClearRuleTableData({

      }).then(res => {

        tableData.value = res.msg[0].Rows
        console.log('as',res,tableData)

      })
    }
    const {currentOpObj:currentDialogObj,operationType:dialogOperationType,changeOperation:changeDialogOperation} = useDetailOrEdit()
    onBeforeMount(() => {
      getTableList()
    })
    const keyWord = ref('')
    return {
      keyWord,
      baseUseClearTypeHeader,
      isDetailDialogShow,
      openDetailDialog,
      tableData,
      currentDialogObj,dialogOperationType,changeDialogOperation,
      editClearCheck

    }
  }
}
</script>

<style scoped lang="scss">
.filter{
  text-align: right;
  margin-bottom: 20px;
  .el-button{
    border-radius: 1px;
  }
  .search{

     border-radius:1px;
    :deep{
      .el-input__wrapper{
        border-radius: 1px;
        width: 100%;
        box-sizing: border-box;
      }
    }
    width: 15%;


    display: inline-block;
  }
}
</style>
