<script lang="ts" setup>
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";

const props = defineProps<{ data: any, isSelection: boolean, colorRow: boolean, cat_code: string }>()
const emit = defineEmits(['relation'])


function getIsCanRelation(cat_code: string){
  return cat_code === props.cat_code
}


function tableRowClassName({ row }){
  if(props.colorRow) return 'success-row'
}

</script>

<template>
    <ElTable size="small" border :data="data" style="width:100%" :row-class-name="tableRowClassName" row-key="id" default-expand-all>
       <ElTableColumn label="明细ID" prop="id" min-width="60px" show-overflow-tooltip />
       <ElTableColumn label="发票明细类目编号" prop="cat_code" min-width="140px" show-overflow-tooltip />
       <ElTableColumn label="货物或应税劳务、服务名称" prop="good_name" min-width="180px" show-overflow-tooltip />

       <ElTableColumn label="是否可关联" v-if="isSelection">
        <template #="{ row }">
          <ElTag size="small" :type="getIsCanRelation(row.cat_code) ? 'success' : 'warning'">
            {{ getIsCanRelation(row.cat_code) ? '可关联' : '不可关联' }}
          </ElTag>
        </template>
       </ElTableColumn>

       <ElTableColumn label="数量" prop="num" width="80px" show-overflow-tooltip />
       <ElTableColumn label="单价" prop="unit_price" width="120px" show-overflow-tooltip />
       <ElTableColumn label="金额" prop="amount" width="80px" show-overflow-tooltip />
       <ElTableColumn label="税率" prop="tax" width="80px" show-overflow-tooltip />
       <ElTableColumn label="税额" prop="tax_amount" width="80px" show-overflow-tooltip />
       <ElTableColumn label="税后总额" prop="total_amount" width="120px" show-overflow-tooltip />
    
      <ElTableColumn fixed="right" v-if="isSelection" label="操作" width="48px">
        <template #="{ row, $index }">
           <ElPopconfirm v-if="getIsCanRelation(row.cat_code)" title="是否确认关联" @confirm="emit('relation', row, $index)">
              <template #reference>
                <ElButton
                  link
                  size="small" 
                  type="primary" 
                >关联</ElButton>
              </template>
           </ElPopconfirm>
        </template>
      </ElTableColumn>
    </ElTable>
</template>
