<template>
  <div class="position-re">
    <div>
      <el-breadcrumb separator="/" class="my-breadcrumb">
        <el-breadcrumb-item>数据质检 </el-breadcrumb-item>
        <el-breadcrumb-item>质检记录</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
     <div class="detail-main">
       <div class="back" @click="$emit('changeOperation','',{})"><span class="fa fa-reply cur-po " >返回</span></div>
       <div class="diy-area">
         <diy-el-form :span="5"  v-model:model-form="form" :forms="formConfig">
           <template #searchBtn>
             <el-button type="primary" :icon="Search" @click="filterBySelf">查询</el-button>
           </template>
         </diy-el-form>
       </div>
       <div class="line"></div>
       <div class="">
         <span class="my-data-source">质检记录</span>
         <span class="my-total">共 <strong>{{totalCount}}</strong> 个目录项</span>
       </div>

       <div class="t-area">
         <my-table
             :has-operation="true"
           :page-size="10"

           border
           :headers="qualityCheckRecordErrorTableHeader"
           :table-data="tableData"

         >
           <template #ERROR_CODE="{data}">
             {{allQualityRuleArr.find(i => i.CODE === data.ERROR_CODE)?.label}}
           </template>
           <template #operation="{data}">
             <el-button type="info" @click="openDataDialog(data)">详细信息</el-button>
           </template>
         </my-table>
       </div>
       <div  class="info-m">
         显示第 1 到第 {{totalCount}}条记录，总共 {{totalCount}} 条记录
       </div>
     </div>
    <template v-if="isDataDialogIsShow">
      <quality-check-record-dialog :current-op-obj="currentDialogObj" :current-dialog-obj="currentDialogObj" v-model:dialog-visible="isDataDialogIsShow"/>
    </template>
  </div>
</template>

<script>
import DiyElForm from "@/components/common/DiyElForm.vue";
import {onBeforeMount, ref} from "vue";
import {Search} from "@element-plus/icons-vue";
import {qualityCheckRecordDetailBaseForm} from "@/data/all-forms";
import MyTable from "@/components/common/MyTable.vue";
import {qualityCheckRecordErrorTableHeader} from "@/data/all-table-header";
import {getQualityDetailRuleSelect} from "@/service/zsk/quality-check-rule";
import {getQualityCheckRecordDetailTableData} from "@/service/data-quelity-check/quality-check-record";
import {isEmptyCheck} from "@/unit/validate";
import {getDateToString} from "@/unit/time";
import {useDetailOrEdit} from "@/unit/use-method/usePagination";
import QualityCheckRecordDialog
  from "@/view/other/c-views/data-handle/data-quelity-check/quality-check-record/QualityCheckRecordDialog.vue";

export default {
  name: "QualityCheckRecordDetail",
  computed: {
    Search() {
      return Search
    }
  },
  props:{
    currentOpObj:{

    }
  },
  components: {QualityCheckRecordDialog, MyTable, DiyElForm},
  setup(props) {
    const isDataDialogIsShow = ref(false)
    const allQualityRuleArr = ref([])
    const allTableData = ref([])
    const totalCount = ref(0)
    const formConfig=  ref({...qualityCheckRecordDetailBaseForm})
    const {currentOpObj:currentDialogObj,operationType:dialogOperationType,changeOperation:changeDialogOperation} = useDetailOrEdit()

    const form = ref({

    })
    function openDataDialog(data){
      isDataDialogIsShow.value = true
      changeDialogOperation('detail',data)
    }
    function filterBySelf(){
      tableData.value = allTableData.value.filter( i => {
        let isHasFiledName = new RegExp(`${(form.value.FIELD_NAME || '' )}`,'i').test(i.FIELD_NAME)

        let isHasError = new RegExp(`${form.value.ERROR || ''}`,'i').test(i.ERROR)
        let isHasErrorCode = (i.ERROR_CODE === form.value.ERROR_CODE) || !form.value.ERROR_CODE
        return isHasFiledName && isHasError && isHasErrorCode

      })
      totalCount.value = tableData.value.length
    }
    function getTableList() {
      function getTimeStart(value) {
        if (isEmptyCheck(value)) {
          return "";
        }
        return getDateToString(new Date(value));
      }
      let params = {
        pageIndex:1,
        pageSize:20000,
        CATALOG_CODE:props.currentOpObj.CATALOG_CODE,
        INSPECTION_DATE:getTimeStart(props.currentOpObj.INSPECTION_DATE || ''),
        ERROR:form.value.ERROR || '',
        ERROR_CODE:form.value.ERROR_CODE || '',
        FIELD_NAME:form.value.FIELD_NAME || '',
      }

      getQualityCheckRecordDetailTableData(params).then(res => {
        allTableData.value  = tableData.value = res.msg[0].Rows
        totalCount.value = res.msg[0].TotalRowCount
        filterBySelf()

      })
    }
    onBeforeMount(() => {
      getQualityDetailRuleSelect().then(res => {
        try {
          let findI = formConfig.value.formItemsArr.find(i => i.modelValue === 'ERROR_CODE')
          allQualityRuleArr.value = findI.options = [{value:'',label:'全部'}].concat(res.msg[0].Rows.map(i =>({
            ...i,
            value:i.CODE,
            label:i.NAME || '无'
          })))

        }catch{
          allQualityRuleArr.value = findI.options = [{value:'',label:'全部'}]
        }
      })
      getTableList()
    })
    const tableControlBtns =   [
      {
        id:'9af449d8-cdb4-4804-b15e-0f60d866c15f',
        type:'查询',
        className:'glyphicon glyphicon-credit-card'
      },
      {
        id:'c9af72ac-bab5-48a4-b119-a9b82ac053a7',
        type:'元数据查询',
        className:'glyphicon glyphicon-credit-card'
      },
      {
        id:'ff55c172-2676-4379-afe0-b6b181b08767',
        type:'导入',
        className:'glyphicon glyphicon-credit-card'
      }
    ]
    const tableData = ref([])
    return {
      form,
      formConfig,
      tableData,
      qualityCheckRecordErrorTableHeader,
      tableControlBtns,
      getTableList,
      totalCount,
      allQualityRuleArr,
      filterBySelf,
      allTableData,
      currentDialogObj,dialogOperationType,changeDialogOperation,
      isDataDialogIsShow,openDataDialog
    }
  }
}
</script>

<style scoped lang="scss">
.detail-main{
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}
.line{

  margin-bottom: 30px;
  border: 0;
  border-top: 1px solid #eee;
}
.t-area{
  margin-bottom: 20px;
  margin-top: 20px;
}
.diy-area{

  padding-top: 30px;
}
.op-btns{
  width: max-content;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: 10px;
}
.operation-btns{

  li{
    transition: 0.5s all;
    &.disabled{
      background-color: #ccc;
      border-color: #ccc;
      cursor:not-allowed;
    }
    &:hover{
      background-color: #bababa;
      border-color: #bababa;
      color: #FFFFFF;
    }
    cursor: pointer;
    height: 34px;
    width: 36px;
    margin-right: -1px;
    text-align: center;
    line-height: 36px;
    border: 1px solid #c2c2c2;
  }
  display: flex;

}
</style>
