<template>
<div class="flex mt-1 column ai-c">  
    <div class="flex bodyheaderbox">
        <div class="flex ai-c jc-c index">序号</div>
        <div class="flex flex-1 ai-c jc-c">所属宗地编码</div>
        <div class="flex flex-1 ai-c jc-c">统计年度</div>
        <div class="flex flex-1 ai-c jc-c">年度贡献(万元)</div>
        <div class="flex flex-1 ai-c jc-c">备注</div>
        <div class="flex tempbox ai-c jc-c">操作</div>
    </div>
    <div class="overauto">
        <div class="flex column ai-c max-w">
            <div class="flex bodyheaderbox bodysectionbox" v-for="(item,index) in tabDatasArr">
                <div class="flex ai-c jc-c index">{{ index+1 }}</div>
                <div class="flex flex-1 ai-c jc-c">
                    <a-input v-model:value="item.sszdbm" placeholder="请输入" disabled style="width: 80%;" />
                </div>
                <div class="flex flex-1 ai-c jc-c">
                    <a-input v-model:value="item.tjnd" placeholder="请输入" style="width: 80%;" />
                </div>
                <div class="flex flex-1 ai-c jc-c">
                    <a-input v-model:value="item.ndgx" placeholder="请输入" style="width: 80%;" />
                </div>
                <div class="flex flex-1 ai-c jc-c">
                    <a-input v-model:value="item.bz" placeholder="请输入" style="width: 80%;" />
                </div>
                <div class="flex tempbox ai-c jc-c delete">
                    <span class="save" @click="handleSave(item)">保存</span>
                    <span class='delete' @click="handleDetete(item,index)">删除</span>
                </div>
            </div>
        </div>       
    </div> 
    <div class="flex ai-c jc-c addDatabox" @click="addDataList">增加一行</div>
</div>
</template>
    
<script setup lang="ts">
import { createVNode, defineProps, onMounted, ref } from "vue"
import { Upload, message, Modal } from 'ant-design-vue';
import { PlusOutlined,ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { 
    GetGongxiandiInfoByBM,
    AddGongxiandi,
    UpdateGongxiandi,
    DeleteGongxiandi,
} from '@/api/tudizhanyonggongxian/index';
const props = defineProps(['zdbm'])


const tabDatasArr = ref([])
onMounted(() => {
    console.log('zdbm', props.zdbm)
    if(props.zdbm){
        GetTablelistData()
    }
  
})
const GetTablelistData = ()=>{
    GetGongxiandiInfoByBM({sszdbm: props.zdbm }).then(res =>{
    tabDatasArr.value = res
  })
}
const handleSave = (e) =>{
  if(e.id == 0){
    AddGongxiandi(e).then(res =>{
      if(res){
        message.success('新增成功')
        GetTablelistData()
      }else{
        message.error('操作失败')
      }
    })
  }else{
    UpdateGongxiandi(e).then(res =>{
      if(res){
        message.success('编辑成功')
        GetTablelistData()
      }else{
        message.error('操作失败')
      }
    })
  }
  
}  
const handleDetete = (item,index) =>{
  if(item.id == 0){
    tabDatasArr.value.splice(index,1)
  }else{
    Modal.confirm({
      title: '提示',
      icon: createVNode(ExclamationCircleOutlined),
      content: '确定要删除该数据吗',
      onOk() {
        return DeleteGongxiandi([item.id]).then(res => {
          message.success('删除成功')
          GetTablelistData()
        })
      },
      onCancel() {},
    })
  }
  
}
const addDataList = ()=>{
  let obj = { id: 0, sszdbm: props.zdbm , tjnd: '' , bz: '', ndgx: '' }
  tabDatasArr.value.push(obj)
}

</script>

<style lang="scss" scoped>
.flex{
    display: flex;
}
.column{
    flex-direction: column;
}
.ai-c{
    align-items: center;
}
.jc-c{
    justify-content: center;
}
.jc-sb{
    justify-content: space-between;
}
.js-sa{
    justify-content: space-around
}
.mt-1{
    margin-top: 15px;
}
.max-w{
    width: 100%;
}
.overauto{
    width: 100%;
    height: 500px;
    overflow: auto;
}
.bodyheaderbox{
    width: 95%;
    background: #F7F7F7;
    height: 50px;
    color: #000;
    font-size: 14px;
    font-weight: bold;
    .index{
        width: 80px;
    }
    .tempbox{
        width: 180px;
        color: #7A7AFF;
        span{
            cursor: pointer;
        }
        .delete{
            color: #f00;
            margin-left: 15px;
        }
        .save{
            color: #0885F7;
            margin-left: 15px;
        }
    }
}
.bodysectionbox{
    font-weight: 400 !important;
    color: #9C9C9C !important;
    background: #fff;
}
.bodysectionbox:nth-child(2n-1){
    background: #F8F8F8;
}
.addDatabox{
    width: 80%;
    color: #9C9C9C;
    height: 50px;
    border: 1px solid #F3F1F1;
    cursor: pointer;
}
</style>
    