<template>
  <div class="cattleTrdeValue">
    <Row :gutter="8">
      <Col span="4">
        <Input v-model="typesearchFilter.cattleBreed" placeholder="请输入牛只品种" clearable/>
      </Col>
      <Col span="4">
        <Button type="primary" @click="getData">查询信息</Button>
      </Col>
      <Col span="16" style="text-align: right;">
        <el-button type="primary" @click="addContent">新增牛只品种</el-button>
      </Col>
    </Row>

    <el-table :data="tabData.data" style="width: 100%; margin-top:3.5em;" border>
      <!-- <el-table-column label="序号" type="index" width="70" align="center"></el-table-column> -->
      <el-table-column prop="cattleBreed" label="牛只品种" align="center"> </el-table-column>
      <el-table-column label="牛只类型" align="center">
        <template #default="scope">
          {{scope.row.cattleType||'无'}}
        </template>
      </el-table-column>
      <el-table-column label="日增重（公斤）" align="center">
        <template #default="scope"> 
         {{scope.row.dailyGain}}
        </template>
      </el-table-column>
      <el-table-column label="平均日增重（公斤）" align="center">
        <template #default="scope"> 
         {{scope.row.dailyGainAvg}}
        </template>
      </el-table-column>
      <el-table-column label="胴体率（%）" align="center">
        <template #default="scope"> 
         {{scope.row.carcassPercent || '0'}}
        </template>
      </el-table-column>
      <el-table-column label="平均胴体率（%）" align="center">
        <template #default="scope"> 
         {{scope.row.carcassPercentAvg || '0'}}
        </template>
      </el-table-column>
      <el-table-column label="净肉率（%）" align="center">
        <template #default="scope"> 
         {{scope.row.meatPercent || '0'}}
        </template>
      </el-table-column>
       <el-table-column label="平均净肉率（%）" align="center">
        <template #default="scope"> 
         {{scope.row.meatPercentAvg || '0'}}
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort" width="70" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <!--按钮-->
          <el-button type="primary" size="small" @click="updateContent(scope.row)">编辑</el-button>&nbsp;
          <el-button type="danger" size="small" @click="delContent(scope.row.id)">删除</el-button>&nbsp;
        </template>
      </el-table-column>
    </el-table>
    
    <div class="page_style">
      <Page :total="tabData.total" :model-value="currentPage" show-elevator show-total @on-change="changePage" />
    </div>
    <!-- 新增分类信息 -->
    <Modal v-model="optClassifyModal" :title="optClassifyModalTitle" width="35%">
      <Form ref="optClassifyFormRef" :model="optClassifyForm" :label-width="140">
        <FormItem prop="cattleBreed" label="牛只品种：">
          <Input v-model="optClassifyForm.cattleBreed" placeholder="请输入牛只品种" style="width:100%;" clearable></Input>
        </FormItem>
        <FormItem prop="cattleType" label="牛只类型：">
          <Select :label-in-value="true" v-model="optClassifyForm.cattleType" style="width:100%" placeholder="请选择" clearable>
            <Option value="公牛">公牛</Option>
            <Option value="母牛">母牛</Option>
          </Select>
        </FormItem>
        <FormItem prop="cattleBreed" label="排序：">
          <Input type='number' v-model="optClassifyForm.sort" placeholder="请输入序号" style="width:100%;"></Input>
        </FormItem>
        <FormItem prop="dailyGain" label="日增重(公斤)：">
          <Input v-model="optClassifyForm.dailyGain" placeholder="请输入日增重" style="width:100%;" clearable></Input>
        </FormItem>
        <FormItem prop="dailyGainAvg" label="平均日增重(公斤)：">
          <InputNumber :min="0" v-model="optClassifyForm.dailyGainAvg" placeholder="请输入日增重" style="width:100%;" />
        </FormItem>
        <FormItem prop="carcassPercent" label="胴体率(%)：">
          <Input v-model="optClassifyForm.carcassPercent" placeholder="请输入胴体率" style="width:100%;" clearable></Input>
        </FormItem>
        <FormItem prop="carcassPercentAvg" label="平均胴体率(%)：">
          <InputNumber :min="0" v-model="optClassifyForm.carcassPercentAvg" placeholder="请输入胴体率" style="width:100%;" />
        </FormItem>
        <FormItem prop="meatPercent" label="净肉率(%)：">
          <Input v-model="optClassifyForm.meatPercent" placeholder="请输入净肉率" style="width:100%;" clearable></Input>
        </FormItem>
        <FormItem prop="meatPercentAvg" label="平均净肉率(%)：">
          <InputNumber :min="0" v-model="optClassifyForm.meatPercentAvg" placeholder="请输入净肉率" style="width:100%;" />
        </FormItem>
        <Row>
          <Col :span="12">
            <FormItem prop="viceCowhide" label="牛皮占比(%)：">
              <InputNumber :min="0" v-model="optClassifyForm.viceCowhide" placeholder="请输入牛皮占比" style="width:100%;" />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem prop="viceOil" label="杂油占比(%)：">
              <InputNumber :min="0" v-model="optClassifyForm.viceOil" placeholder="请输入杂油占比" style="width:100%;" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12">
            <FormItem prop="viceHead" label="牛头占比(%)：">
              <InputNumber :min="0" v-model="optClassifyForm.viceHead" placeholder="请输入牛头占比" style="width:100%;" />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem prop="viceHoof" label="牛蹄占比(%)：">
              <InputNumber :min="0" v-model="optClassifyForm.viceHoof" placeholder="请输入牛蹄占比" style="width:100%;" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12">
            <FormItem prop="viceOmasum" label="毛肚占比(%)：">
              <InputNumber :min="0" v-model="optClassifyForm.viceOmasum" placeholder="请输入毛肚占比" style="width:100%;" />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem prop="viceLiver" label="牛肝占比(%)：">
              <InputNumber :min="0" v-model="optClassifyForm.viceLiver" placeholder="请输入牛肝占比" style="width:100%;" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12">
            <FormItem prop="viceIntestine" label="牛肠占比(%)：">
              <InputNumber :min="0" v-model="optClassifyForm.viceIntestine" placeholder="请输入牛肠占比" style="width:100%;" />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem prop="viceLung" label="牛肺占比(%)：">
              <InputNumber :min="0" v-model="optClassifyForm.viceLung" placeholder="请输入牛肺占比" style="width:100%;" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12">
            <FormItem prop="viceTripe" label="牛百叶占比(%)：">
              <InputNumber :min="0" v-model="optClassifyForm.viceTripe" placeholder="请输入牛百叶占比" style="width:100%;" />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem prop="viceHeart" label="牛心占比(%)：">
              <InputNumber :min="0" v-model="optClassifyForm.viceHeart" placeholder="请输入牛心占比" style="width:100%;" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <template #footer>
        <div style="text-align:center;">
          <Button style="margin-right:5em;" @click="optClassifyModal = false">取消操作</Button>
          <Button type="primary" @click="submitOptClassify">确定提交</Button>
        </div>
      </template>
    </Modal>
  </div>
</template>

<script>
import { defineComponent,ref,reactive,onMounted } from 'vue'
import {item} from '@/request/api'
import { ElMessage } from 'element-plus'
import { tr } from 'element-plus/es/locale'
export default defineComponent({
  components:{
    
  },
  setup() {
    let optClassifyModal = ref(false)
    let optClassifyModalTitle = ref('新增')
    let optClassifyForm = reactive({carcassPercent:'',carcassPercentAvg:'',cattleBreed :'',cattleType :'',dailyGain :'',dailyGainAvg :'',meatPercent :'',
    meatPercentAvg:'',viceCowhide :'',viceHead :'',viceHeart :'',viceHoof :'',viceIntestine :'',viceLiver:'',viceLung :'',viceOil :'',viceOmasum :'',viceTripe :'',sort:0})

    let tabData = ref({})
    let typesearchFilter = reactive({limit:10,offset:0,cattleBreed:''})
    //获取列表内容
    async function getData(){
      await item.cattleDeelList(typesearchFilter).then(res =>{
        if (res.code == 101) {
          tabData.value = res || {}
        }
      })
    }

    let currentPage = ref(1)
    //更改页码
    function changePage (page) {
      if(tabData.value.limit){
        typesearchFilter.offset = (page -1) *  tabData.value.limit  //更新偏移量
        currentPage = page  //切换当前页码
        getData()//获取广告数据
      }
    }

    // 删除内容
    function delContent(id){
      this.$Modal.confirm({
        title: '温馨提示',
        content: '您确定删除当前内容吗?',
        onOk:async () => {
          await item.deleteCattleDeel({id:id}).then(res=>{
            if(res.code == 101){
              ElMessage({
                message: res.message || '操作成功!',
                type: 'success',
              })
              this.changePage(1)  //重新获取列表
            }else{
              ElMessage({
                message: res.message || '操作失败!',
                type: 'warning',
              })
            }
          }).catch(e=>{
            ElMessage({
              message: e.message || '添加失败!',
              type: 'error',
            })
          })
        },
        onCancel: () => {
          this.$Message.info('您已取消操作!');
        }
      });
    }
    // 提交操作分类
    function submitOptClassify(){
      let sendParams = JSON.parse(JSON.stringify(optClassifyForm))
      let reqFn = null
      if(optClassifyForm.id && optClassifyForm.id != null){
        reqFn = item.updateCattleDeel
      }else{
        reqFn = item.createCattleDeel
      }
      reqFn(sendParams).then(res=>{
        if(res.code === 101){
          optClassifyModal.value = false
          ElMessage({
            message: res.message || '操作成功!',
            type: 'success',
          })
          getData()
        }else{
          ElMessage({
            message: res.message || '操作失败!',
            type: 'warning',
          })
        }
      }).catch(e=>{
        ElMessage({
          message: res.message || '操作失败!',
          type: 'warning',
        })
      })
    }
    //编辑
    function updateContent(data){
      optClassifyModal.value = true
      Object.assign(optClassifyForm,data)
      optClassifyModalTitle.value = '编辑'
    }
    //新增
    function addContent(){
      Object.assign(optClassifyForm,{id:null,carcassPercent:'',carcassPercentAvg:'',cattleBreed :'',cattleType :'',dailyGain :'',dailyGainAvg :'',meatPercent :'',
      meatPercentAvg:'',viceCowhide :'',viceHead :'',viceHeart :'',viceHoof :'',viceIntestine :'',viceLiver:'',viceLung :'',viceOil :'',viceOmasum :'',viceTripe :'',sort:0})
      console.log(optClassifyForm,'optClassifyForm')
      optClassifyModal.value = true
      optClassifyModalTitle.value = '新增'
    }
    onMounted(()=>{
      getData() 
    })

    return {
      typesearchFilter,optClassifyModal,optClassifyModalTitle,optClassifyForm,
      getData,tabData,changePage,currentPage,updateContent,delContent,submitOptClassify,addContent
    }
  },
  methods:{
    
  }
})
</script>

<style lang="scss" scoped>
.cattleTrdeValue{
  padding: 1em;
  .page_style{
    text-align: right; margin-top: 1em;
    background-color: var(--system-container-background);
  }
}
</style>