<template>
 
  <div>


    <el-card class="box-card">
      <!-- 搜索区域 -->
      <div class="search-bx1">
          <el-input v-model="searchData.number" placeholder="工单编号"  style="width: 180px;" class="g-mr20 g-mb20" clearable />
          
          <el-input v-model="searchData.operation_user" placeholder="派单人"  style="width: 180px;" class="g-mr20" clearable />
          <el-input v-model="searchData.operation_phone" placeholder="派单人手机号"  style="width: 180px;" class="g-mr20" clearable />
          <el-select v-model="searchData.work_order_category_id" filterable placeholder="类型" class="g-mr20" style="width: 180px;" clearable>
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-select v-model="searchData.status" filterable placeholder="状态" class="g-mr20" style="width: 180px;" clearable>
            <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>

          <el-date-picker v-model="searchData.inputDatetime1" class="g-mr20" type="daterange" range-separator="至" start-placeholder="完成时间" end-placeholder="完成时间" style="width: 250px;" />

          <el-date-picker v-model="searchData.inputDatetime2" class="g-mr20" type="daterange" range-separator="至" start-placeholder="派单时间" end-placeholder="派单时间" style="width: 250px;" />
        
          
          <el-button type="primary"   @click="form_search">搜索</el-button>
          <el-button type="primary"   @click="form_clear">重置</el-button>
          <el-button type="primary"   v-if="isButtonEdit" @click="form_add">添加</el-button>
           <!-- <el-button type="primary"   @click="form_export">导出</el-button> -->
      </div>

 
      <!-- 表格 -->
      <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="200px" align="center">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.number }}</span> -->
            <el-button type="primary" size="mini"  @click="form_see(scope.row)">{{ scope.row.number }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="类型" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.work_order_category_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="150px" align="center">
          <template slot-scope="scope">
            <!-- <span v-if = "scope.row.status == 0">未知</span> -->
            <span v-if = "scope.row.status == 1">已创建未执行</span>
            <span v-if = "scope.row.status == 2">执行中</span>
            <span v-if = "scope.row.status == 3">已完成</span>
            <span v-if = "scope.row.status == 4">已关闭</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_see(scope.row)">查看</el-button> -->
             <span>{{ scope.row.barn_names }}</span>
          </template>
        </el-table-column>
        <el-table-column label="任务" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
       
        <el-table-column label="派单人" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.operation_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="派单人手机号" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.operation_phone }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="完成时间" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.finished_at_format }}</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="danger" v-if="isButtonEdit &&(scope.row.status == 1 || scope.row.status == 2)" size="mini" icon="el-icon-delete" @click="form_complete(scope.row)">完成工单</el-button>
          </template>
        </el-table-column>
      </el-table>


      <!-- <span v-if = "scope.row.status == 1">已创建未执行</span>
            <span v-if = "scope.row.status == 2">执行中</span>
            <span v-if = "scope.row.status == 3">已完成</span>
            <span v-if = "scope.row.status == 4">已关闭</span> -->

      <!-- 分页区域 -->
      <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>


    <!-- 弹窗 新增or修改 -->
    <el-dialog  :title="addFormTxt[addFormStatus]" :visible.sync="addFormShow" @close="add_dialog_close" width="50%">
      <div class="">
        <el-form  ref="addFormRef"  :rules="addFormRules"  :model="addForm"  label-position="right" label-width="140px"  style="width:90%;margin:0 auto 50px">


          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="工单类型：" prop="work_order_category_id">
                <el-select  v-model="addForm.work_order_category_id"  placeholder="请选择" class="filter-item" style="width: 100%;" :disabled=" addFormStatus=='see'">
                  <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="负责人员：" prop="user_id">
                <el-select  v-model="addForm.user_id"  placeholder="请选择" class="filter-item" style="width: 100%;" @change = "change_person"  :disabled=" addFormStatus=='see'">
                  <el-option v-for="item in personList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="工单任务：" prop="remark">
                <el-input  v-model="addForm.remark" type="textarea" maxlength="200"   :rows="3" :disabled=" addFormStatus=='see'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="负责人手机号：" prop="user_phone">
                <el-input  v-model="addForm.user_phone" type="input"  disabled />
              </el-form-item>
            </el-col>
          </el-row>


          <!-- <el-row :gutter="20">
              <el-transfer  :titles="['栏舍组名称', '栏舍名称组']" v-model="transDataChooseRight1" :data="transDataList1" :props="{  key: 'id',   label: 'name'  }" @change="change_transData1"></el-transfer>
          </el-row> -->

          <el-row :gutter="20">
              <el-transfer  :titles="['栏舍名称', '栏舍名称']" v-model="transDataChooseRight2" :data="transDataList2" :props="{  key: 'id',   label: 'name'  }" @change="change_transData2"></el-transfer>
          </el-row>
           
            
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" v-if="addFormStatus==='create' || addFormStatus==='edit'" @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/work_order/list',
      //接口 - 新增 - 表格
      url_add_table:'/api/v1/ops/work_order/add',  
      //接口 - 修改 - 表格
      url_edit_table:'/api/v1/ops/work_order/update', 
      //接口 - 删除 - 表格
      url_complete_table:'/api/v1/ops/work_order/finished', 
      
      //接口 - 下拉框 列表 
      url_get_select1:'/role/getAll',

      //按钮权限
      isButtonEdit:false,

      //获取 - 表格数据 - 参数
      searchData:{
        number: "",
        user_name: "",
        user_phone: "",
        operation_user: "",
        operation_phone: "",
        work_order_category_id: undefined,
        status: undefined,
        start_finished_time: "",
        end_finished_time: "",
        start_created_time: "",
        end_created_time: "",
        inputDatetime1:"",
        inputDatetime2:"",
        page: 1,  //页码
        page_size: 10,   //每页数量
        total:0,  //总页数
        pastureId: ""
      },
      tableLoading: false,
      //表格内容
      tableList:[
          { number:"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' },
      ],


      
      typeList:[
        
      ],

      personList:[
        
        ],

      statusList:[
        // {id: 0, name: '未知'},
        {id: 1, name: '已创建未执行'},
        {id: 2, name: '执行中'},
        {id: 3, name: '已完成'},
        {id: 4, name: '已关闭'},
      ],
    
   
 


      addFormShow:false,
      addFormStatus: '',
      addFormTxt: {  edit: '修改',  create: '新增' },
      addForm:{
        remark:'',user_phone:'',  work_order_category_id:undefined,user_id:undefined,id:undefined,
      },

      addFormRules:{
        name: [ { required: true, message: '类型名称必填', trigger: 'blur' },  ],
   

      },


      //穿梭框右边的值
      transDataChooseRight1:[],
      //穿梭框所有列表
      transDataList1:[
        // {key:1,label:'组1',disabled:false},
        // {key:2,label:'组2',disabled:false},
        // {key:3,label:'组3',disabled:false},
        // {key:4,label:'组4',disabled:false},
        // {key:5,label:'组5',disabled:false},
        // {key:6,label:'组6',disabled:false},
        // {key:7,label:'组7',disabled:false},
      ],

      //穿梭框右边的值
      transDataChooseRight2:[],
      //穿梭框所有列表
      transDataList2:[
        // {key:1,label:'组1',disabled:false},
        // {key:2,label:'组2',disabled:false},
        // {key:3,label:'组3',disabled:false},
        // {key:4,label:'组4',disabled:false},
        // {key:5,label:'组5',disabled:false},
        // {key:6,label:'组6',disabled:false},
        // {key:7,label:'组7',disabled:false},
      ],

     
       
    }
  },
  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
        
        ajaxDataPost('/api/v1/ops/base_setting/category_table/list?page=1&page_size=1000', {category_type:1}).then(e => {
          console.log("工单下拉框1：",e)
          if(e.code == 200 ){
            me.typeList = e.data.list
          } else {
            me.typeList = []
          }

        })

        
 


        ajaxDataPost('/api/v1/system/user/list?page=1&page_size=1000', {name:""}).then(e => {
          console.log("人员下拉：",e)
          if(e.code == 200 ){
            me.personList = e.data.list
          } else {
            me.personList = []
          }

        })


        // ajaxDataPost('/api/v1/ops/barn_group/list?page=1&page_size=1000', {name:""}).then(e => {
        //   console.log("穿梭框1：",e)

        //   //打印请求成功结果
        //   if(e.data.list == null || e.data.list == undefined ||e.data.list.length == 0   ){
        //     me.transDataList1 = []
        //   } else {
        //     var transDataList1 = e.data.list
        //     transDataList1.forEach(function(item){
        //       item.name = item.name + "（犊牛数量："+ item.calf_number + "）"
        //     })
        //     me.transDataList1 = transDataList1
        //   }

        // })


        ajaxDataPost('/api/v1/ops/barn/list?page=1&page_size=1000', {name:"",barn_group_name:"",status:undefined}).then(e => {
          console.log("穿梭框2：",e)

          //打印请求成功结果
          if(e.data.list == null || e.data.list == undefined ||e.data.list.length == 0   ){
            me.transDataList2 = []
          } else {
        
            var transDataList2 = e.data.list
            transDataList2.forEach(function(item){
              if(item.stauts == 4){
                item.name = item.name + "（犊牛数量：0）"
              } else {
                item.name = item.name + "（犊牛数量：1）"
              }
              
            })
            me.transDataList2 = transDataList2

          }

        })
    
    },

    
    //获取 表格
    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_search(){
      var me = this
      console.log('请求表格列表searchData',me.searchData)
      if (me.searchData.inputDatetime1 !== '' && me.searchData.inputDatetime1 !== null) {
          me.searchData.min_operation_time = parseTime(me.searchData.inputDatetime1[0], '{y}-{m}-{d}')
          me.searchData.max_operation_time = parseTime(me.searchData.inputDatetime1[1], '{y}-{m}-{d}')
        } else {
          me.searchData.inputDatetime1 = ''
          me.searchData.min_operation_time = ''
          me.searchData.max_operation_time = ''
        }

        if (me.searchData.inputDatetime2 !== '' && me.searchData.inputDatetime2 !== null) {
          me.searchData.start_created_time = parseTime(me.searchData.inputDatetime2[0], '{y}-{m}-{d}')
          me.searchData.end_created_time = parseTime(me.searchData.inputDatetime2[1], '{y}-{m}-{d}')
        } else {
          me.searchData.inputDatetime2 = ''
          me.searchData.start_created_time = ''
          me.searchData.end_created_time = ''
        }
      me.get_table_data()

    },

    //重置 表格
    form_clear(){
      var me = this
      me.searchData.number = ""
      me.searchData.user_name = ""
      me.searchData.user_phone = ""
      me.searchData.operation_user = ""
      me.searchData.operation_phone = ""
      me.searchData.work_order_category_id = undefined
      me.searchData.status = undefined
      me.searchData.start_finished_time = ""
      me.searchData.end_finished_time = ""
      me.searchData.start_created_time = ""
      me.searchData.end_created_time = ""
      me.searchData.inputDatetime1 = ""
      me.searchData.inputDatetime2 = ""

      me.searchData.page = 1
      me.searchData.page_size = 10


 

      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.remark = ''
      this.addForm.user_phone = ''
      this.addForm.work_order_category_id = undefined
      this.addForm.user_id = undefined
      this.addForm.id = undefined
     
    },

    //新增
    form_add() {
      this.reset_form()
      this.addFormStatus = 'create'
      this.addFormShow = true
      this.$nextTick(() => {
        this.$refs['addFormRef'].clearValidate()
      })
    },


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


    //编辑
    form_edit(row) {
      console.log('行内容row=========', row)
      //编辑行内容赋值
      this.addForm = Object.assign({}, row)  

      this.transDataChooseRight2 = row.barns
  

      this.addFormStatus = 'edit'
      this.addFormShow = true
      this.$nextTick(() => {
        this.$refs['addFormRef'].clearValidate()
      })
    },


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

    //新增 保存
    add_dialog_save() {
      var me = this
      this.$refs['addFormRef'].validate(valid => {
        //验证成功
        if (valid) {
          //发起请求
          var send_data = {
              "work_order_category_id": me.addForm.work_order_category_id,
              "user_id": me.addForm.user_id,
              "user_phone": me.addForm.user_phone,
              "remark": me.addForm.remark,
              "barns": me.transDataChooseRight2,
           
          }

        
          console.log("弹窗参数：", send_data)

          //关闭弹窗
          // me.addFormShow = false
         //加载 - 发送新增保存
           ajaxDataPost(me.url_add_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 })
                }
            })
         
        }
      })
    },
    //编辑 保存
    edit_dialog_save(){
      var me = this
      this.$refs['addFormRef'].validate(valid => {
        //验证成功
        if (valid) {
          //发起请求
          var send_data = {
           
              "id": me.addForm.id,
              "work_order_category_id": me.addForm.work_order_category_id,
              "user_id": me.addForm.user_id,
              "user_phone": me.addForm.user_phone,
              "remark": me.addForm.remark,
              "barns": me.transDataChooseRight2,
          }
          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_complete(row) {
      var me = this

       me.$confirm('是否完成工单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            console.log("删除的ID参数：", row.id)
            //加载 - 发送新增保存
            ajaxDataPut(me.url_complete_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: '已取消'
          });          
        });


       
    },

    change_person(value){
      var me = this 
      console.log("更改人员Id",value)
      var item  = me.personList.find(obj => obj.id == value)
      console.log("更改人员当前的内容",item)
      me.addForm.user_phone = item.phone
          
    },

    //监听 - 穿梭框选到右边的值
    change_transData1(value){
      console.log("穿梭框选到右边的值",value)
    },

    //监听 - 穿梭框选到右边的值
    change_transData2(value){
      console.log("穿梭框选到右边的值",value)
    },
 
    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>
.el-transfer /deep/.el-transfer-panel {  width:300px;  text-align: left;}
</style>
