<template>
  <el-dialog
    :modal="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"

    destroy-on-close
    width="36%"
    :title="title"
    :model-value="dialogVisible"

    :before-close="handleClose"

  >
    <div class="block">
      <div class="title">基本信息</div>
      <div class="form-a">
        <diy-el-form ref="formRef" :span-attrs="{
        span:24
      }" v-model:model-form="form" :forms="baseForm"/>
      </div>
    </div>
    <div class="block"         v-if="(dialogOperationType !== 'add') || title === '配置审计类型'">
      <div class="title">配置项信息</div>
      <div class="add-div">
        <el-button type="info" @click="addTd">新增</el-button>
      </div>
      <my-table
        border
        :page-size="4"

        :table-data="tableData"
        :headers="tableHeader "


      >
        <template #[item.prop]="{data}" v-for="item in tableHeader.filter(i => i.prop!=='operation')">
          <el-input v-if="data.isEdit" v-model="data[item.prop]"/>
          <span v-else>{{data[item.prop]}}</span>
        </template>
        <template #operation="{data,index}">
          <el-button circle :icon="Edit" @click="changeIsEdit(data)"></el-button>
          <el-button circle :icon="Delete" @click="delTable(index)"></el-button>
        </template>
      </my-table>
    </div>
    <template #footer>
      <el-button :icon="SuccessFilled" @click="editOrAddCheckType">确定</el-button>
      <el-button @click="handleClose" :icon="Close">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import {Close, Delete, Edit, SuccessFilled} from "@element-plus/icons-vue";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {onBeforeMount, ref} from "vue";
import {checkInfoDialogBaseForm} from "@/data/all-forms";
import MyTable from "@/components/common/MyTable.vue";
import {baseRuleCheckDialogTableHeader} from "@/data/all-table-header";
import {isValid} from "js-base64";
import {elAlert} from "@/unit/element-ui/tip";
import {getCircleDialogConfigTable} from "@/service/zsk/base-rule/circle-type";

export default {
  name: "CheckTypeDialog",
  components: {MyTable, DiyElForm},
  computed: {
    Delete() {
      return Delete
    },
    Edit() {
      return Edit
    },
    Close() {
      return Close
    },
    SuccessFilled() {
      return SuccessFilled
    }
  },
  props:{
    dialogVisible:{

    },
    title:{

    },
    baseForm:{

    },
    tableHeader: {

    },
    currentDialogOpObj:{

    },
    dialogOperationType:{}
  },
  setup(props,{emit}) {
    function delTable(index){
      tableData.value.splice(index,1)
    }
    const formRef=  ref(null)
    function addTd() {
      let obj = {}
      props.tableHeader.filter(i => i.prop!=='operation').forEach(i => {
        obj[i.prop] = ''
        obj.isEdit = true
      })
      tableData.value.push(obj)

    }
    const tableData = ref([

    ])
    const form = ref({

    })
    onBeforeMount(() => {

      if (props.dialogOperationType !== 'add'){
        form.value = {
          ...props.currentDialogOpObj
        }
        if (props.title === '配置审计类型'){
          tableData.value = (props.currentDialogOpObj.SAFE_AUDIT_VALUES || '').split(',').map(i => {
            return {
              zd:i
            }
          })
        }
        else {
          getCircleDialogConfigTable(props.currentDialogOpObj.ORIGION_ID).then(res => {
            tableData.value = res.msg[0]?.Rows || []
          })
        //   环节类型
        }
      }
    })
    function editOrAddCheckType() {
      formRef.value.refEl.validate(isValid=>{
        if (isValid){
          let isHasNotSave = tableData.value.find(i => i.isEdit)
          if (isHasNotSave){
            elAlert('还未全部保存')
          }else if (((props.dialogOperationType !== 'add') || props.title === '配置审计类型')){
            if (!(tableData.value.length > 0)){
              elAlert('尚未保存关键字')
            }else {
              emit('editOrAddCheckType',form.value,tableData.value)
            }
          }else {
            emit('editOrAddCheckType',form.value,tableData.value)
          }
        }
      })
    }
    function handleClose() {
      emit('update:dialogVisible',false)

    }
    function changeIsEdit(item) {
      item.isEdit = !item.isEdit
    }
    return {
      handleClose,
      form,
      checkInfoDialogBaseForm,
      tableData,
      baseRuleCheckDialogTableHeader,
      changeIsEdit,
      addTd,
      editOrAddCheckType,
      formRef,
      delTable
    }
  }
}
</script>

<style scoped lang="scss">
.add-div{
  text-align: right;

}
.form-a{
  padding: 0 12%;
}
.title{

  padding-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #676a6c;
  border-bottom: 1px solid  var(--el-border-color-light);
  margin-bottom: 20px;
}
</style>
