<template>
 
  <div>


    <el-card class="box-card">
     

 
      <!-- 表格 -->
      <el-table   key="0"  :data="tableList"  v-loading="tableLoading" element-loading-text="给我一点时间"    border fit>
        <el-table-column label="序号"  width="50px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="饲料名称" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="成本" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.cost }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最近更新时间" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.updated_at_format }}</span>
          </template>
        </el-table-column> 
        <el-table-column label="最近更新用户" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.operation_user }}</span>
          </template>
        </el-table-column>
        <el-table-column label="成本更新记录" min-width="150px" align="center">
          <template slot-scope="scope">
             <el-button type="primary" size="mini"  @click="form_record_see(scope.row)">查看</el-button>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
             <!-- 修改按钮 -->
             <el-button type="primary" size="mini" v-if="isButtonEdit"  icon="el-icon-edit" @click="form_edit(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

 
    </el-card>


    <!-- 弹窗 新增or修改 -->
    <el-dialog   title="设置" :visible.sync="addFormShow" @close="add_dialog_close" width="50%">
      <div class="">
        <el-form  ref="addFormRef"  :rules="addFormRules"  :model="addForm"  label-position="right" label-width="100px"  style="width:50%;margin:0 auto 50px">
            <el-form-item label="类型名称：" prop="name">
                <el-input   v-model="addForm.name" disabled ></el-input>  
            </el-form-item>
            <el-form-item label="成本：" prop="cost">
                <el-input   v-model="addForm.cost" ></el-input>  
            </el-form-item>
           
            
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="edit_dialog_save()">确认</el-button>
          <el-button @click="addFormShow = false">关闭</el-button>
        </div>
      </div>
    </el-dialog>


    <el-dialog   title="" :visible.sync="seeFormShow" @close="see_dialog_close" width="80%">
      <div class="">

         <!-- 搜索区域 -->
         <h2 style="float:left">饲料名称：{{tableListTxt2}}</h2>
         <div class="search-bx1">
          <el-date-picker v-model="searchData2.inputDatetime" type="daterange"   range-separator="至" start-placeholder="操作时间" end-placeholder="操作时间"  class="g-mr20" />
          
          <el-button type="primary"   @click="form_search2">搜索</el-button>
        </div>
        
        <el-table   key="0"  :data="tableList2"  v-loading="tableLoading2" element-loading-text="给我一点时间"    border fit>
              <el-table-column label="序号"  width="50px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column label="成本" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.cost }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作时间" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.updated_at_format }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作用户" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.operation_user }}</span>
                </template>
              </el-table-column>
        </el-table>

        <div slot="footer" class="dialog-footer">
          <el-button @click="seeFormShow = false">关闭</el-button>
        </div>
      </div>
    </el-dialog>
 
    
  </div>


</template> 

<script>
import {  ajaxDataGet, ajaxDataPost, ajaxDataPut, ajaxDataDelete, checkButtons} from '@/api/common'
import { parseTime, json2excel } from '@/utils/index.js'
export default {
  data() {


    
 
  
    return {

 

      //接口 - 获取 - 表格
      url_get_table:'/api/v1/ops/base_setting/forage/list',

      url_get_table2:'/api/v1/ops/base_setting/forage_cost_log/list',
    
   
      //接口 - 修改 - 表格
      url_edit_table:'/api/v1/ops/base_setting/forage/edit', 
   
      
      //接口 - 下拉框 列表 
      url_get_select1:'/role/getAll',

      //按钮权限
      isButtonEdit:false,

      //获取 - 表格数据 - 参数
      searchData:{
        name: "",
        page: 1,  //页码
        page_size: 10,   //每页数量
        total:0,  //总页数
        pastureId: ""
      },
      tableLoading: false,
      //表格内容
      tableList:[
        //  { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123',roleList:[2,3] },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123',roleList:[] },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
        // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
        // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
        // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
      ],


      
      pastureList:[
    
      ],

    

 


      addFormShow:false,
      addFormStatus: '',
      addFormTxt: {  edit: '修改',  create: '新增' },
      addForm:{
        name:'',cost:'',id:'' 
      },
      addFormRules:{
        name: [ { required: true, message: '类型名称必填', trigger: 'blur' },  ],
        cost: [ { required: true, message: '成本必填', trigger: 'blur' },  ],
      },


      tableLoading2: false,
      //表格内容
      tableListTxt2:'',
      tableList2:[],
      seeFormShow:false,
      seeFormStatus: '',
      seeFormTxt: {  edit: '修改',  create: '新增' },
      seeForm:{
        name:'',id:''
      },


      searchData2:{
        min_operation_time: '',
        max_operation_time: '',
        inputDatetime: '',
        forage_id:undefined,
        page: 1,  //页码
        page_size: 10,   //每页数量
        total:0,  //总页数
        pastureId: ""
      },

     
       
    }
  },
  created(){
      //获取按钮权限
      const isButtonEdit = checkButtons(this.$store.state.buttonsList, "饲料成本设置编辑")
      this.isButtonEdit = isButtonEdit
      console.log('this.isButtonEdit==========',this.isButtonEdit)
     

     //获取下拉框
     // this.get_select_list1()

      //表格 - 初始化 
      this.get_table_data()

     

    
  },
  methods:{

    
    
    //获取 下拉框
    get_select_list1(){
        var me = this
        ajaxDataGet(me.url_get_select1, {"roleName": "",  "page": 1,   "page_size": 1000}).then(e => {
          console.log("下拉框1：",e)

          //打印请求成功结果
          if(e.data == null || e.data == undefined ||e.data.length == 0   ){
            me.roleList = []
          } else {
            me.roleList = e.data
          }

         
  
        })


        ajaxDataGet('/authdata/pasture', {  "page": 1,   "page_size": 1000}).then(e => {
          console.log("牧场下拉框1：",e)

          //打印请求成功结果
          if(e.data == null || e.data == undefined ||e.data.length == 0   ){
            me.pastureList = []
          } else {
            me.pastureList = e.data
          }
  
        })

    
    },

    
    //获取 表格
    get_table_data() {
 
     var me = this

     me.tableLoading = true
     console.log("searchData======>", me.searchData)

      var send_url = me.url_get_table + '?page=1&page_size=1000' 
      ajaxDataGet(send_url,  me.searchData).then(e => {
        console.log("表格请求结果：",e)
          //打印请求成功结果
          if(e.code == 200 ){
            me.tableList = e.data.list
            me.searchData.total = e.data.total;	// 总数
            me.searchData.page = e.data.page;	//页码
            me.searchData.page_size = e.data.page_size;	//每页数量
           
          } else {
            me.$message({ type: 'error', message: '请求表格列表失败！' + e.msg, duration: 2000 })
          }

          setTimeout(() => {
            me.tableLoading = false
          }, 100)
  
        })

       
    },
    

    //重置 表格
    form_clear(){
      var me = this
      me.searchData.name = ""
      me.get_table_data()
    },

    //监听 page_size 改变的事件
    change_size_page(item){
      console.log(item)
     // this.searchData.page_size = item
      //  this.getUserList()
    },

    //监听 page 改变的事件
    change_current_page(item){
      console.log(item)
       this.searchData.page = item
       this.get_table_data()
    },

    //清空弹窗表单信息
    reset_form(){
      this.addForm.name = ''
    },

    //新增关闭
    add_dialog_close(){
       //内容重置
       this.$refs['addFormRef'].resetFields()
    },
    //编辑
    form_edit(row) {
      console.log('行内容row=========', row)
      //编辑行内容赋值
      this.addForm = Object.assign({}, row)  
      this.addFormStatus = 'edit'
      this.addFormShow = true
      this.$nextTick(() => {
        this.$refs['addFormRef'].clearValidate()
      })
    },


   
    //编辑 保存
    edit_dialog_save(){
      var me = this
      this.$refs['addFormRef'].validate(valid => {
        //验证成功
        if (valid) {
          //发起请求
          var send_data = {
              "id": me.addForm.id,
              "name": me.addForm.name,
              "cost": parseFloat(me.addForm.cost),
          }
          console.log("弹窗参数：", send_data)

          //关闭弹窗
          // me.addFormShow = false
         //加载 - 发送新增保存
         ajaxDataPost(me.url_edit_table, send_data).then(e => {
                console.log("编辑结果：",e)
                //打印请求成功结果
                if(e.code == 200  ){
                  me.$message({ type: 'success', message: '编辑成功！'  , duration: 2000 })
                  //关闭弹窗
                  me.addFormShow = false
                  me.get_table_data()
                } else {
                  me.$message({ type: 'error', message: '编辑失败！' + e.msg, duration: 2000 })
                }
            })
         
        }
      })
    },



    
     //查看记录
     form_record_see(row) {
      var me = this
      console.log('行内容row=========', row)
      //编辑行内容赋值
      this.seeForm = Object.assign({}, row)

      this.seeFormShow = true
      this.searchData2.forage_id = row.id
   

      this.get_table_data2()

       
    },


     //新增关闭
     see_dialog_close(){
       //内容重置
       this.seeFormShow = false
     },

    //获取 表格
    get_table_data2() {
 
        var me = this

        me.tableLoading = true
        console.log("searchData======>", me.searchData)

          var send_url2 = me.url_get_table2 + '?page=' + me.searchData2.page +  '&page_size=' + me.searchData2.page_size

          ajaxDataPost(send_url2,  me.searchData2).then(e => {
            console.log("表格请求结果：",e)
              //打印请求成功结果
              if(e.code == 200 ){
                me.tableList2 = e.data.list
                me.searchData2.total = e.data.total;	// 总数
                me.searchData2.page = e.data.page;	//页码
                me.searchData2.page_size = e.data.page_size;	//每页数量
              
              } else {
                me.$message({ type: 'error', message: '请求表格列表失败！' + e.msg, duration: 2000 })
              }

              setTimeout(() => {
                me.tableLoading = false
              }, 100)

            })

      
    },


    //搜索 查询表格
    form_search2(){
      var me = this
      console.log('请求表格列表searchData',me.searchData2)
      if (me.searchData2.inputDatetime !== '' && me.searchData2.inputDatetime !== null) {
          me.searchData2.min_operation_time = parseTime(me.searchData2.inputDatetime[0], '{y}-{m}-{d}')
          me.searchData2.max_operation_time = parseTime(me.searchData2.inputDatetime[1], '{y}-{m}-{d}')
        } else {
          me.searchData2.inputDatetime = ''
          me.searchData2.min_operation_time = ''
          me.searchData2.max_operation_time = ''
        }
      me.get_table_data2()

    },

   

 
 
    form_export() {
    //获取请求表格数据的参数
    //this.download.getdataListParm.parammaps = this.tableObj.getdataListParm.parammaps
    //请求表格
    // GetDataByName(this.download.getdataListParm).then(response => {
    //     if (response.data.list !== null) {
    //       this.download.list = response.data.list
    //     } else {
    //       this.download.list = []
    //     }
    //     var excelDatas = [
    //       {
    //         tHeader: ['表头1', '表头2', '表头3', '表头4',],
    //         filterVal: ['title1', 'title2', 'title3', 'title4'],
    //         tableDatas: this.download.list,
    //         sheetName: 'Sheet1'
    //       }
    //     ]
    //     json2excel(excelDatas, '表格大标题', true, 'xlsx')
    // })

    var excelDatas = [
        {
            tHeader: ['表头1', '表头2', '表头3', '表头4',],
            filterVal: ['title1', 'title2', 'title3', 'title4'],
            tableDatas: [ 
                {title1: "内容1",title2: "内容2",title3: "内容3",title4: "内容4"},
                {title1: "内容11",title2: "内容22",title3: "内容32",title4: "内容44"},
                {title1: "内容111",title2: "内容222",title3: "内容333",title4: "内容444"},
            ],
            sheetName: 'Sheet1'
        }
    ]
    json2excel(excelDatas, '表格大标题', true, 'xlsx')
}

     

  }
}
</script>
<!-- 加了scoped，则是仅在此组件里生效 -->
<style scoped>

</style>
