<template>
  <el-container>
    <el-header style="width: 100%">
      <VxeForm :data="formData" :items="formItems" />
    </el-header>
    <el-container style="padding-top: 10px">
      <el-container>
        <el-main>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="双周达成" name="one">
              <VxeGrid ref="szRef" v-bind="gridOptions1" />
            </el-tab-pane>
            <el-tab-pane label="配送达成" name="two">
              <VxeGrid ref="psRef" v-bind="gridOptions2" />
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import edit from "@/views/cxtj/edit";
import request from '@/utils/request'
import { VXETable } from 'vxe-table'

const 获取钢加公司目标达成率统计=()=>{
  return request({
    url: "/YdjhKban/getMbdc",
    method: "get",
  });
}

const 保存钢加公司目标达成率统计=(data)=>{
  return request({
    url: "/YdjhKban/saveMbdc",
    method: "post",
    data,
  });
}

const 保存双周达成率=(data)=>{
  return request({
    url: "/YdjhKban/saveSzdc",
    method: "post",
    data,
  });
}

const 获取配送达成率=()=>{
  return request({
    url: "/YdjhKban/getPsdc",
    method: "get",
  });
}

const 保存配送达成率=(data)=>{
  return request({
    url: "/YdjhKban/savePsdc",
    method: "post",
    data,
  });
}

const 获取双周达成率=()=>{
  return request({
    url: "/YdjhKban/getSzdc",
    method: "get",
  });
}

export default {
  name:'CXTJ',
  data(){
    return{
      activeName:'one',
      formData:{
        ndgc:0,
        jhwc:0,
      },
      formItems:[
        { field: 'ndgc', title: '年度钢材加工', span: 4,
          itemRender: {
            name: '$input', props: {placeholder: '年度钢材加工' }
          }
        },
        { field: 'jhwc', title: '年度计划完成率', span: 4 ,
          itemRender: {
            name: '$input', props: {placeholder: '年度计划完成率' }
          }
        },
        {align:'center',
          itemRender: {
            name: '$button', props: {content:'保存',status:'primary'},events:{click:this.butClick}
          }
        },
        {span:13,align:'right',
          itemRender: {
            name: '$button', props: {content:'新增',status:'primary'},events:{click:this.addClick}
          }
        },
        {align:'right',
          itemRender: {
            name: '$button', props: {content:'保存',status:'primary'},events:{click:this.saveClick}
          }
        },
      ],
      gridOptions1:{},
      gridOptions2:{},
      setActiveName:null
    }
  },
  created(){
    const {formData,formItems,options1,options2,columns,activeName,setActiveName}=edit(this.$route.path)
    this.setActiveName=setActiveName
    this.activeName=activeName
    // this.formData.data=formData
    // this.formData.items=formItems
    this.gridOptions1=options1
    this.gridOptions1.columns=columns
    this.gridOptions2=options2
    this.gridOptions2.columns=columns
  },
  mounted(){
    this.$nextTick(()=>{
      获取钢加公司目标达成率统计().then(res=>{
        this.formData=res.data
      })
    })
  },
  methods:{
    init配送达成率(){
      获取配送达成率().then(res=>{
        this.gridOptions2.data=res.data||[]
      })
    },
    addClick(){
      console.log(this.activeName)
      if(this.activeName==='one'){
        this.gridOptions1.data.push({})
      }

      if(this.activeName==='two'){
        this.gridOptions2.data.push({})
      }
    },
    saveClick(){
      if(this.activeName==='one'){
        保存双周达成率(this.gridOptions1.data).then(()=>{
          this.init双周达成率()
        })
      }

      if(this.activeName==='two'){
        保存配送达成率(this.gridOptions2.data).then(()=>{
          this.init配送达成率()
        })
      }
    },
    butClick(){
      保存钢加公司目标达成率统计(this.formData).then(res=>{
        if(res.success){
          VXETable.modal.message({ content: '成功', status: 'success' })
        }
      })
    },
    init双周达成率(){
      console.log(111)
      获取双周达成率().then(res=>{
        this.gridOptions1.data=res.data||[]
      })
    },
    handleClick(tab, event){
      this.setActiveName(this.activeName)
    },
  }
}
</script>

<style lang="scss" scoped>
.el-header {
  margin: 0;
  padding: 5px 0;
  height: auto;
}
.el-container {
  padding: 0;
  margin: 0;
}
.el-main {
  padding: 0;
}
.el-col {
  padding: 0;
}
.el-aside {
  background: #fff;
  padding: 0;
}
.el-container {
  padding: 0;
}
.el-row {
  margin-bottom: 5px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.tableStyles {
  background: #0a76a4;
}
.my-dropdown {
  width: 450px;
  height: 250px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  font-size: 12px;
}
::v-deep .mytable .vxe-input {
  display: flex !important;
}
::v-deep .el-form-item{
  margin-bottom: 0px !important;
}
</style>
