<template>
  <!-- 102 -->
  <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="250px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.number }}</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">
            <a class="correcting" size="mini" style="width: 80px;" @click="form_see(scope.row)">查看</a>
          </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="操作" align="center" width="300" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
             <!-- 修改按钮 -->
             <el-button type="primary" v-if="isButtonEdit" size="mini" icon="el-icon-edit" @click="form_edit(scope.row)">设置</el-button>
     
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination  @size-change="change_size_page"  @current-change="change_current_page"  :current-page="searchData.page" :page-sizes="[1,5,10,20,30,50]"  :page-size="searchData.page_size" layout="total, prev, pager, next" :total="searchData.total"/>
    </el-card>


    <!-- 弹窗 设置 -->
    <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"  ></el-input>  
            </el-form-item>
        </el-form>

        <div style="height: 500px;">
          <el-row :gutter="20">
            <el-col :span="8">
       
              <el-form  ref="addFormRef"  :rules="addFormRules"  :model="addForm"  label-position="right" label-width="120px"  style="width:100%;margin:0 auto 50px">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="消息名称:" prop="messageName">
                      <span>{{addForm.messageName}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="触发条件:" prop="triggerCondition">
                      <span>{{addForm.triggerCondition}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="发送方式:" prop="sendingMethod">
                      <el-select v-model="addForm.sendingMethod" style="width: 100%;" placeholder="发送方式">
                        <el-option v-for="item in modeList" :key="item.id" :label="item.name" :value="item.id" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div v-if="addForm.sendingMethod == '1'">
                  <el-row :gutter="5">
                    <el-col :span="18">
                      <el-form-item label="发送机制">
                        <el-select v-model="addForm.sendingMechanism" style="width: 100%;" placeholder="发送机制">
                          <el-option v-for="item in mechanismList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="addForm.sendingMechanism == '2'">
                        <el-input ref="numberCycles" v-model="addForm.numberCycles" style="width: 100%;" placeholder="循环次数" type="text" />
                    </el-col>
                  </el-row>
                  <el-row v-if="addForm.sendingMechanism !== '1' && addForm.sendingMechanism !== ''">
                    <el-col :span="24">
                      <el-form-item label="间隔周期:">
                        <el-input ref="intervalPeriod1" v-model="addForm.intervalPeriod1" style="width: 33%;margin-right:1%" placeholder="天" type="text" />
                        <el-input ref="intervalPeriod2" v-model="addForm.intervalPeriod2" style="width: 33%;margin-right:1%" placeholder="小时" type="text" />
                        <el-input ref="intervalPeriod3" v-model="addForm.intervalPeriod3" style="width: 32%;" placeholder="分钟" type="text" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <div v-if="addForm.sendingMethod == '2'">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="延时:">
                        <el-input ref="delayed1" v-model="addForm.delayed1" style="width: 33%;margin-right:1%" placeholder="天" type="text" />
                        <el-input ref="delayed2" v-model="addForm.delayed2" style="width: 33%;margin-right:1%" placeholder="小时" type="text" />
                        <el-input ref="delayed3" v-model="addForm.delayed3" style="width: 32%;" placeholder="分钟" type="text" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="发送时间">
                         <el-time-select placeholder="发送时间" :clearable="false" style="width: 100%;" v-model="addForm.sendTime" :picker-options="{ start: '00:00', step: '00:05', end: '23:59' }" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col :span="18">
                      <el-form-item label="发送机制">
                        <el-select v-model="addForm.sendingMechanism" style="width: 100%;" placeholder="发送机制">
                          <el-option v-for="item in mechanismList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="addForm.sendingMechanism == '2'">
                        <el-input ref="numberCycles" v-model="addForm.numberCycles" style="width: 100%;" placeholder="循环次数" type="text" />
                    </el-col>
                  </el-row>
                  <el-row v-if="addForm.sendingMechanism !== '1' && addForm.sendingMechanism !== ''">
                    <el-col :span="24">
                      <el-form-item label="间隔周期:">
                        <el-input ref="intervalPeriod1" v-model="addForm.intervalPeriod1" style="width: 33%;margin-right:1%" placeholder="天" type="text" />
                        <el-input ref="intervalPeriod2" v-model="addForm.intervalPeriod2" style="width: 33%;margin-right:1%" placeholder="小时" type="text" />
                        <el-input ref="intervalPeriod3" v-model="addForm.intervalPeriod3" style="width: 32%;" placeholder="分钟" type="text" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <div v-if="addForm.sendingMethod == '3'">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="发送机制:">
                        <span>持续循环</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col :span="18">
                      <el-form-item label="周期类型">
                        <el-select v-model="addForm.cycleType" style="width: 100%;" placeholder="周期类型">
                          <el-option v-for="item in cycleTypeList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="addForm.cycleType == '2'">
                      <el-select v-model="addForm.week" style="width: 100%;" placeholder="每周">
                        <el-option v-for="item in weekList" :key="item.id" :label="item.name" :value="item.id" />
                      </el-select>
                    </el-col>
                    <el-col :span="6" v-if="addForm.cycleType == 3">
                      <el-select v-model="addForm.month" style="width: 100%;" placeholder="每月">
                        <el-option v-for="item in monthList" :key="item.id" :label="item.name" :value="item.id" />
                      </el-select>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="发送时间">
                         <el-time-select placeholder="发送时间" :clearable="false" style="width: 100%;" v-model="addForm.sendTime" :picker-options="{ start: '00:00', step: '00:05', end: '23:59' }" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-form>
            </el-col>
            <el-col :span="16">
              <b>提醒对象:</b>
              <div class="search">
                <el-input v-model="setUp.empCode" placeholder="角色名称" style="width: 180px;" class="filter-item" clearable />
                <el-input v-model="setUp.empCode" placeholder="用户名称" style="width: 180px;" class="filter-item" clearable />
                <el-input v-model="setUp.empname" placeholder="员工姓名" style="width: 180px;" class="filter-item" clearable />
                <el-button class="successBorder" @click="form_search">查询</el-button>
              </div>
              <el-row :gutter="5">
                <el-col :span="6">
                  <el-table
                    ref="setUpTable1"
                    :key="setUp.tableKey1"
                    v-loading="setUp.listLoading1"
                    element-loading-text="给我一点时间"
                    :data="setUp.list1"
                    border
                    fit
                    highlight-current-row
                    style="width: 100%;"
                    :row-style="rowStyle"
                    :cell-style="cellStyle"
                    class="elTable table-fixed"
                    @selection-change="handleSelectionChange1"
                    :height="350"
                  >
                    <el-table-column type="selection" align="center" width="50" />
                    <el-table-column label="角色名" min-width="100px" align="center" prop="rolename" />
                  </el-table>
                </el-col>
                <el-col :span="18">
                  <el-table
                    ref="setUpTable2"
                    :key="setUp.tableKey2"
                    v-loading="setUp.listLoading2"
                    element-loading-text="给我一点时间"
                    :data="setUp.list2"
                    border
                    fit
                    highlight-current-row
                    style="width: 100%;"
                    :row-style="rowStyle"
                    :cell-style="cellStyle"
                    class="elTable table-fixed"
                    @selection-change="handleSelectionChange2"
                    :height="350"
                  >
                    <el-table-column type="selection" align="center" width="50" />
                    <el-table-column label="用户名称" min-width="130px" align="center" prop="username" />
                    <el-table-column label="员工姓名" min-width="130px" align="center" prop="empname" />
                    <el-table-column label="角色" min-width="130px" align="center" prop="rolename" />
                  </el-table>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addFormStatus==='create'?add_dialog_save():edit_dialog_save()">确认</el-button>
          <el-button @click="addFormShow = 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/calf_type/list',
      //接口 - 新增 - 表格
      url_add_table:'/api/v1/ops/base_setting/calf_type/add',  
      //接口 - 修改 - 表格
      url_edit_table:'/api/v1/ops/base_setting/calf_type/update', 
      //接口 - 删除 - 表格
      url_delete_table:'/api/v1/ops/base_setting/calf_type/is_show', 
      
      //接口 - 下拉框 列表 
      url_get_select1:'/role/getAll',

      //按钮权限
      isButtonEdit:false,

      //获取 - 表格数据 - 参数
      searchData:{
          messageName:'',//消息名称
          triggerCondition:'',//触发条件,
          sendingMethod:'1',//发送方式
          delayed1:'',//延时
          delayed2:'',//延时
          delayed3:'',//延时,
          sendTime:'',//发送时间，
          sendingMechanism:'1',// 发送机制
          numberCycles:'',//循环次数
          intervalPeriod1:'',//间隔周期
          intervalPeriod2:'',//间隔周期
          intervalPeriod3:'',//间隔周期
          cycleType:'1',

          page: 1,  //页码
          page_size: 10,   //每页数量
          total:0,  //总页数
          pastureId: ""
      },

      modeList: [
          { id: '1', name: '立即' },
          { id: '2', name: '延时' },
          { id: '3', name: '指定周期' },
        ],
        mode: '0',
        mechanismList: [
          { id: '1', name: '单次' },
          { id: '2', name: '指定循环次数' },
          { id: '3', name: '循环至任务结束' },
        ],
        cycleTypeList:[
          { id: '1', name: '每天' },
          { id: '2', name: '每周' },
          { id: '3', name: '每月' },
        ],//周期类型
        weekList:[
          { id: '1', name: '周一' },
          { id: '2', name: '周二' },
          { id: '3', name: '周三' },
          { id: '4', name: '周四' },
          { id: '5', name: '周五' },
          { id: '6', name: '周六' },
          { id: '7', name: '周日' },
        ],//周
        monthList:[],//月
        mechanism: '0',
        activeName:'first',


      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:'',id:'' 
      },
      addFormRules:{
        name: [ { required: true, message: '类型名称必填', trigger: 'blur' },  ],
      },



      setUpForm:{
        name:'',id:'' 
      },

      setUp:{
          dialogStatus: '',
          dialogFormVisible:false,
          // 角色
          tableKey1: 0,
          list1: [],
          total1: 0,
          listLoading1: false,
          data1:{
            name: 'getRoleList', page: 1, offset: 1, pagecount:'',returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid')
            }
          },
          // 用户
          tableKey2: 0,
          list2: [],
          total2: 0,
          listLoading2: false,
          data2:{
            name: 'getuserallL', page: 1, offset: 1, pagecount:'',returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              roleid:''
            }
          },
          temp:{}
        },
     
       
    }
  },
  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_auto_buttons() {
      // 编辑
      const isButtonEdit = checkButtons(this.$store.state.buttonsList, "用户管理编辑")
      this.isButtonEdit = isButtonEdit
      console.log('this.isButtonEdit==========',this.isButtonEdit)
    },
    
    //获取 下拉框
    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=' + me.searchData.page +  '&page_size=' + me.searchData.page_size

      ajaxDataPost(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 = ''
    },

    

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


    //新增关闭
    add_dialog_close(){
       //内容重置
       this.$refs['addFormRef'].resetFields()
    },

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

          //关闭弹窗
          // me.addFormShow = false
         //加载 - 发送新增保存
         ajaxDataPut(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_delete(row) {
      var me = this

       me.$confirm('是否删除此条内容?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            console.log("删除的ID参数：", row.id)
            //加载 - 发送新增保存
            ajaxDataDelete(me.url_delete_table + '/' +row.id, {}).then(e => {
                console.log("编辑结果：",e)
                //打印请求成功结果
                if(e.code == 200  ){
                  me.$message({ type: 'success',  message: '删除成功!'  });
                  me.get_table_data()
                } else {
                  me.$message({ type: 'error', message: '删除失败！' + e.msg, duration: 2000 })
                }
            })

        
 
          
        }).catch(() => {
          me.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });


       
    },

 
    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>
