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

    >
      <template #STATE="{data}">
        <span>{{data['STATE']==='1'?'可用':(data['STATE'] === '2')?'不可用':''}}</span>
      </template>
      <template #operation="{data}">
        <el-button type="info" @click="openDetailDialog('edit',data)" >编辑</el-button>
      </template>

    </my-table>
    <template v-if="isDetailDialogShow">
      <quality-type-detail-dialog
        @editQualityCheck="editQualityCheck"

        :dialog-operation-type="dialogOperationType" :current-dialog-obj="currentDialogObj" 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 {baseUseQualityTypeHeader} from "@/data/all-table-header";
import QualityTypeDetailDialog from "@/view/other/c-views/data-handle/zsk/base-rule/tabs/QualityTypeDetailDialog.vue";
import {
  addBaseQualityRule,
  editBaseQualityRule,
  getBaseQualityRuleTableData
} from "@/service/zsk/base-rule/quality-rule";
import {useDetailOrEdit} from "@/unit/use-method/usePagination";
import {handleMes} from "@/unit/element-ui/tip";

export default {
  name: "QualityType",
  components: {QualityTypeDetailDialog, MyTable},
  computed: {
    Plus() {
      return Plus
    }
  },
  setup(props) {
    function editQualityCheck(form){
      let params ={
        NAME:form.NAME,
        REMARKS:form.REMARKS,
        ERROR_MSG:form.ERROR_MSG,
        FUNCTION_CODE:form.FUNCTION_CODE,
        TYPE_CODE:form.TYPE_CODE,
        CODE:form.TYPE_CODE,
      }
      if (dialogOperationType.value === 'edit'){
        params.UUID = currentDialogObj.value.UUID
      }
      let url = dialogOperationType.value === 'add'?addBaseQualityRule:editBaseQualityRule
      url(params).then(res => {
        handleMes(res,()=>{
          isDetailDialogShow.value = false
          getTableList()
        })
      })
    }

    const tableData = ref([])
    const isDetailDialogShow = ref(false)
    function openDetailDialog(op,item) {
      isDetailDialogShow.value = true
      changeDialogOperation(op,item)
    }
    function getTableList(){
      getBaseQualityRuleTableData({
        "pageIndex": 1,
        "pageSize": 20000,

      }).then(res => {
        tableData.value = res.msg[0].Rows
        console.log('as',res)
      })
    }
    const {currentOpObj:currentDialogObj,operationType:dialogOperationType,changeOperation:changeDialogOperation} = useDetailOrEdit()
   onBeforeMount(() => {
     getTableList()
   })
    const keyWord = ref('')
    return {
      keyWord,tableData,
      baseUseQualityTypeHeader,
      isDetailDialogShow,
      openDetailDialog,
      currentDialogObj,dialogOperationType,changeDialogOperation,
      editQualityCheck
    }
  }
}
</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>
