<template>
  <div>
    <el-dialog v-model="dialogVisible" :close-on-click-modal="false" draggable width="1200px" height="500px">
      <el-card :body-style="cardBodyStyle">
        <el-input v-model="query.contrNm" style="width: 200px; margin-right: 10px;" placeholder="请输入合同名称" clearable></el-input>
        <el-button type="primary" plain @click="search">查询</el-button>
      </el-card>
      <el-card :body-style="cardBodyStyle">
        <el-table :data="tableData" border highlight-current-row>
          <el-table-column v-for="(item, index) in column" :key="index" :prop="item.prop" :label="item.label"
                           header-align="center" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" header-align="center" align="center" show-overflow-tooltip
                           width="200px">
            <template #default="scope">
              <el-button plain @click="handleSelect(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="pageSizes"
            :total="totalRows" background="background" layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
      </el-card>
    </el-dialog>
  </div>
</template>

<script setup>

import {
  ref,
  onMounted,
  watch,
  getCurrentInstance
} from 'vue'

const {
  proxy
} = getCurrentInstance()

import tools from '@/tools'

const cardBodyStyle = ref(tools.style.card)

const dialogVisible = ref(false)
const open = () => {
  dialogVisible.value = true
}
const close = () => {
  dialogVisible.value = false
}

const props = defineProps({
  column: { // form查询项
    type: Array,
    default: () => [
      {
        prop: 'contrNo',
        label: '合同编号',
      },
      {
        prop: 'contrNm',
        label: '合同名称',
      },
      {
        prop: 'contrTy',
        label: '合同类型',
      },
      {
        prop: 'khContrNo',
        label: '对方合同编号',
      },
      {
        prop: 'contrForm',
        label: '合同分类',
      },
      {
        prop: 'supplierNm',
        label: '交易方名称',
      },
      {
        prop: 'totalAmt',
        label: '合同金额',
      },
      {
        prop: 'conSts',
        label: '合同状态',
      },
    ]
  },
  // tableData: { // form查询数据
  //   type: Array,
  //   default: () => []
  // },
  url: { // form查询数据
    type: String,
    default: 'cot/Head/queryPopup'
  }
})
const query = ref({
  tradePartnerName: '',
  contrTy: '销售合同',
  conSts: '审批通过',
})



const emit = defineEmits(['receiveFromChild'])
const handleSelect = (row) => {

  emit('receiveFromChild', row)
  close()
}
const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = ref([ 10, 20, 30, 40])
const tableData = ref([])
const totalRows = ref()
const initTableData = () => {
  var url = props.url
  var param = {
    page: currentPage.value,
    rows: pageSize.value,
    params: JSON.stringify(query.value)
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      tableData.value = response.data.data.records
      totalRows.value = response.data.data.total
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}

const search = ()=>{
  initTableData()
}
const handleSizeChange = (val) => {
  pageSize.value = val
  initTableData()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  initTableData()
}

onMounted(() => {
    initTableData()
})
watch(dialogVisible, (newValue, oldValue) => {
  if (newValue) {
    initTableData()
  } else {

  }
})
defineExpose({
  open,
  close
})
</script>

<style>
</style>
