<template>
  <div style=" position: relative; background-color: #fff; padding: 20px; min-height: calc(100vh - 160px);" class="">
    <el-tabs v-model="activeName2" type="card">
      <el-tab-pane label="待审批" name="waiting">

      </el-tab-pane>
      <el-tab-pane label="已通过" name="pass">

      </el-tab-pane>

      <el-tab-pane label="已驳回" name="refuse">

      </el-tab-pane>

      <el-tab-pane label="抄送给我的" name="all">

      </el-tab-pane>
      <!-- <el-tab-pane label="补卡" name="type_1">

      </el-tab-pane>
      <el-tab-pane label="加班" name="type_2">

      </el-tab-pane> -->

    </el-tabs>
   


   <!-- 

      <el-tab-pane label="请假" name="type_5">
 
      </el-tab-pane>
      <el-tab-pane label="出差" name="type_3">
 
      </el-tab-pane>
 
      <el-tab-pane label="外出" name="type_4">
 
      </el-tab-pane>
      <el-tab-pane label="补卡" name="type_1">
 
      </el-tab-pane>
      <el-tab-pane label="加班" name="type_2">
 
      </el-tab-pane>


    -->



    <div>
      <div class="inline-block-btn-list" style="margin-right:10px;">

        <el-select v-model="filter.type" placeholder="请选择" @change="onFilterChanged" class="first-element-btn" style="margin-bottom:10px;">
           <el-option label="全部" value="0"></el-option>
           <el-option label="请假"  value="5"></el-option>
            <el-option label="出差"  value="3"></el-option>
            <el-option label="外出"  value="4"></el-option>
            <el-option label="补卡"  value="1"></el-option>
             <el-option label="加班"  value="2"></el-option>
          <!-- <el-option label="全部" :value="'all'"></el-option>
          <el-option label="已通过" :value="'pass'"></el-option>
          <el-option label="待审批" :value="'waiting'"></el-option>
          <el-option label="已驳回" :value="'refuse'"></el-option> -->
        </el-select>

        <el-select
        
          style="margin:0 10px 0;"
          v-show="filter.type=='5'"
          v-model="filter.holidays_rule_id"
          @change="selectgroupId"
          filterable
          :clearable="false"
          placeholder="请选择"
        >
          <el-option
            v-for="item in checkingInGroup"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>

        <!-- <el-date-picker style="margin-left:10px;"
          v-model="filter.time_range"
          type="daterange"
          value-format="timestamp"
          selectableRange="00:00:00-23:59:59"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="instantPickerOptions"
          @change="onFilterChanged"
        ></el-date-picker> -->
        <!-- <el-date-picker style="margin-left:10px;"
          v-model="filter.time_range"
          type="daterange"
          value-format="yyyy-MM-dd"
          selectableRange="00:00:00-23:59:59"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="instantPickerOptions"
          @change="onFilterChanged"
        ></el-date-picker> -->
        
          <el-date-picker
            v-model="filter.time_range"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="onFilterChanged">
          </el-date-picker>

        <div class="gap-right-8" style="display:inline-block; width:310px;margin-left:10px;">
          <el-input
            placeholder="输入关键词查找"
            ref="search-bar"
            v-model="filter.keywords"
            class="input-with-select"
            width="200px"
            @keyup.enter.native="onFilterChanged"
          >
            <el-button slot="append" icon="el-icon-search" @click="onFilterChanged"></el-button>
          </el-input>
        </div>
        

      </div>




      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        :border="false"
        tooltip-effect="dark"
      >


        <el-table-column align="center" prop="employee_name" label="申请人" width="120"></el-table-column>
        <!-- <el-table-column v-if="filter.type == 4" prop="type_mark" label="类型">

          <template slot-scope="scope">


            <template slot-scope="scope"><span v-if="scope.row.ask_for_leave_type == 1">事假</span>
            <span v-if="scope.row.ask_for_leave_type == 2">病假</span>
             <span v-if="scope.row.ask_for_leave_type == 0">年假</span>

             <span v-if="scope.row.ask_for_leave_type == 3">调休</span>
             <span v-if="scope.row.ask_for_leave_type == 4">产假</span>
             <span v-if="scope.row.ask_for_leave_type == 5">婚假</span>
             <span v-if="scope.row.ask_for_leave_type == 6">例假</span>
             <span v-if="scope.row.ask_for_leave_type == 7">丧假</span>
             <span v-if="scope.row.ask_for_leave_type == 8">陪产假</span>
          </template>



          </template>
        </el-table-column> -->

        <el-table-column align="center" label="行程" v-if="filter.type == 3">
          <template slot-scope="scope">
        
            <div v-for="(item,index) in JSON.parse(scope.row.travel_list)">
              <div>出差地点：{{item.name}}</div>
              <div>开始时间：{{item.start_time.date}}{{item.start_time.scope}}</div>
              <div>结束时间：{{item.end_time.date}}{{item.end_time.scope}}</div></div>


          </template>
        </el-table-column>

        <el-table-column header-align="center" label="时间"  width="210">

          <template slot-scope="scope">

            <div>开始时间：{{scope.row.start_time}}</div>

            <div v-if="scope.row.type!=0 ">结束时间：{{scope.row.end_time}}</div>
               <div v-if="scope.row.type!=0  ">时长：{{scope.row.duration}}小时</div>
          </template>

        </el-table-column>

        <el-table-column align="center" label="附件" v-if="filter.type != 2">
          <template slot-scope="scope">
            <div style="color: #5b8bf7;">
             
              <a style="margin:5px;"
                v-for="(item,idx) in scope.row.file_list"
                :key="idx"
                @click="fileProview(item, scope.row.file_list, scope.row.id)"
              >
           
                <img width="50" height="50" v-if="item != ''"
                  :src="item"
                >

              </a>
            </div>

            <!-- <div style="display:none;">
              <img
                v-for="(item,index) in scope.row.file_list"
                :key="index"
                v-if="(['jpg', 'png', 'bmp', 'jpeg','JPG','PNG']).indexOf(item.split('.')[1]) >= 0"
                :src="serverdomain+item"
                :preview="scope.row.id"
                :preview-text="item"
              >
            </div> -->
          </template>
        </el-table-column>
        <!--  v-if="filter.type == '0' " -->
          <el-table-column align="center" prop="type"  label="类型" >
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">加班</span>
            <span v-if="scope.row.type == 3">外出</span>
            <span v-if="scope.row.type == 0">补卡</span>
            <span v-if="scope.row.type == 4">请假</span>
            <span v-if="scope.row.type == 2">出差</span>
            <span v-if="scope.row.holidays_rule">（{{scope.row.holidays_rule}}）</span>
          </template>

        </el-table-column>


        <el-table-column align="center" prop="status" label="状态" >
          <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 == -1">驳回</span>
          </template>

        </el-table-column>
        <el-table-column align="center" prop="remark" label="备注"></el-table-column>


        <el-table-column align="center" label="操作" width="130">
          <template slot-scope="scope">
            <div style="display:flex;">
              
              <!-- 状态为0  待审核  是否通过 -->
            <el-button
              v-if="scope.row.status == 0 && activeName2!= 'all'"
              type="text"
              @click="set_review_status(1,scope.row.id)"
            >通过
            </el-button>

            <!-- 状态为 -1  已通过 驳回 -->
             <el-button
              v-if="scope.row.status  != 1 && activeName2!= 'refuse' && activeName2!= 'all'"  
              type="text"
              @click="returnA(scope.row.id)"
            >
            驳回
            </el-button>
            <!--  @click="set_review_status(-1,scope.row.id)" -->
            <!-- <el-button
              v-if="scope.row.status != 0"
              type="text"
              @click="set_review_status(0,scope.row.id)"
            >撤销
            </el-button> -->


            <el-button
              type="text"
              @click="get_review_info(scope.row.id)"
            >查看
            </el-button>

            </div>
           

         


          </template>
        </el-table-column>
      </el-table>
      <center style="margin: 20px 0">
        <el-pagination
          background
          layout="total,sizes, prev, pager, next"
          :page-size="pageLimit"
          :page-sizes="[10, 20, 50, 100]"
          :total="totalCount"
          @size-change="handleSizeChange"
          :current-page.sync="currentPage"
          @current-change="changePage"
        ></el-pagination>
      </center>
    </div>




    <el-dialog
      class="attendance_group"
      title="审批详情"
      :visible.sync="ReviewDetailDialogVisible"
      :before-close="ColseOpen"
    
       style="padding: 0 0 0 30px;"
    >
      <el-scrollbar
        wrap-class="column-wrapper scrollable-items-container check-item-box dept_tree"
        :native="false"
        style="height: 400px;"
      >
     
      <div  v-for="item in travel_list">
       <el-form>
            <el-form-item  style="font-weight: normal!important;" label="出差地点:">{{item.name}}</el-form-item>
            <el-form-item  style="font-weight: normal!important;" label="开始时间:">{{item.start_time.date}} {{item.start_time.scope}}</el-form-item>
            <el-form-item  style="font-weight: normal!important;" label="结束时间:">{{item.end_time.date}} {{item.end_time.scope}}</el-form-item>
           </el-form>
      </div>
        <div v-for="item in detail">
      <!-- <div  class="text_item" v-if="item.key!='附件'" >{{item.key}}: {{item.value}}</div>

        <div v-if="item.key == '附件'"  v-for="items in item.value" >
           
            <span>{{item.key}}</span>: <span style="display:inline-block;width: 160px;word-break: break-all; cursor:pointer;color: #409EFF; overflow:hidden;" >{{item.value}}</span>
            <!-- <img style="border:1px solid #eee; padding:2px;width: 50px;height: 50px;"
            :src="items"/> -->
        <!-- </div> --> 
           <el-form>
            <el-form-item v-if="item.key!='附件'" style="font-weight: normal!important;":label="item.key+':'">{{item.value}}</el-form-item>
           </el-form-item>
           

        
            </el-form-item>



            <el-form-item v-if="item.key =='附件'" :label="item.key" >


              <div style="width: 180px;color: #409EFF;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor:pointer;word-wrap: break-word;"> 
               <div  v-for="(items,key) in item.value" @click="openUrl(items)" >
    
                {{items}}
            </div>
            </div>
            </el-form-item>
           </el-form-item>
           </el-form>
       </div>
       <div style="padding:0 50px;">
        <!-- <div class="text_item" v-if="review_info.type == 4">申请类型：请假</div>
        <div class="text_item" v-if="review_info.type == 0">申请类型：补卡</div>
        <div class="text_item" v-if="review_info.type == 1">申请类型：加班</div>
        <div class="text_item" v-if="review_info.type == 2">申请类型：出差</div>
        <div class="text_item" v-if="review_info.type == 3">申请类型：外出</div>
<div　 class="text_item" v-if="review_info.type == 2">
  <div  v-for="(item,index) in (review_info.travelList)">行程：{{item.address}}　{{item.startTime}} — {{item.endTime}}</div>

</div>
        <div class="text_item" v-if="review_info.type == 2">共计：{{(review_info.duration/3600).toFixed(2)}}小时</div>


        <div v-if="review_info.type == 1 || review_info.type == 3 || review_info.type == 4" class="text_item">时间：{{review_info.startTime}} 至 {{review_info.endTime}} 共计：{{(review_info.duration/3600).toFixed(2)}}小时</div>


  <div v-if="review_info.type == 0" class="text_item">补卡班次：{{review_info.startTime}}</div>

        <div class="text_item">备注：{{review_info.remark}}</div>
        <div class="text_item" v-if="review_info.noticePeopleList&&review_info.noticePeopleList.length > 0">抄送人：<el-tag style="margin:0 5px;" v-for="(item,index) in review_info.noticePeopleList">{{item.name}}</el-tag></div>




        <div class="text_item">附件：
          <a style="margin:5px;"
             v-for="(item,idx) in review_info.fileList"
             :key="idx"
             @click="fileProview(item, review_info.fileList, review_info.id)"
          >

            <img style="border:1px solid #eee; padding:2px;" width="50" height="50" v-if="item != ''"
                 :src="serverdomain+item"
            >

          </a>
        </div> -->




<h4>审批流程</h4>
        <div class="text_item"></div>
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in review_list"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.timestamp">
             <div>{{activity.name}}</div>
            <div style="line-height: 1.5">{{activity.remark}}</div>
         
          </el-timeline-item>
        </el-timeline>





  <el-input
     v-if="review_info.status == 0"
    type="textarea"
    :rows="3"
    placeholder="审批意见"
    v-model="formdata.comment">
  </el-input>
</div>
      </el-scrollbar>

      <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="set_review_status(1, retuRnId)" v-if="review_info.status == 0">通过</el-button>
            <el-button type="danger" plain @click="set_review_status(-1, retuRnId)" v-if="review_info.status == 0 ">驳回</el-button>
            <el-button type="primary" plain @click="ReviewDetailDialogVisible = false" v-if="review_info.status == -1 || review_info.status ==  1">取消</el-button>
      </span>

    </el-dialog>


    <el-dialog
      title="审批驳回"
      :visible.sync="retrunAgree"
      :close-on-click-modal="false"
      width="500px"
      height="468px;"
      @close="resetTaskForm"
    >
        <el-form ref="taskForm" :model="formdata" @submit.native.prevent style="padding:0 ;">
          <el-form-item label="意见" >
            <el-input type="textarea" style="width: 287px;height: 63px;"v-model="formdata.comment" placeholder="请输入驳回意见"></el-input>
          </el-form-item>
        
        </el-form>
 
      <div slot="footer" class="dialog-footer" style="padding-top: 175px;">
          <el-button @click="retrunAgree = false;">取消</el-button>
          <el-button type="primary" @click="rebut()">确定</el-button>
      </div>
    </el-dialog>
 

   <el-dialog  :visible.sync="picture">
     <div>
       <img :src="example"  style="width: 100%;height:100%;" />
     </div>
   </el-dialog>


  </div>
</template>


<script>
  import moment from 'moment'
  import qs from 'qs'
  import Vue from 'vue'
  import preview from 'vue-photo-preview'
  import 'vue-photo-preview/dist/skin.css'
  Vue.use(preview, {
    tapToClose: false
  })
  export default {

    data() {
      return {
        checkingInGroup:[],
        picture: false,
        retrunAgree: false,
         detail: [
           
        ],
        example: '',
        travel_list: [],
        ReviewDetailDialogVisible: false,
        activeName2: 'waiting',
        filter: {
          type: '0',
          time_range: [],
          status: 'waiting',
          keywords: '',
          holidays_rule_id: ''
        },
        formdata: {
          id: 0,
          action: 0,
          comment: ''
        },
        profile: this.$store.getters.user_info,
        review_list: [{
          content: '支持使用图标',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        }],
        review_info: {
          'name': '',
          'department': '',
          'img_url': '',
          'reviewerName': '',
          'startTime': '',
          'endTime': '',
          'duration': 3,
          'status': 0,
          'applyTime': '',
          'reviewTime': '',
          'typeContent': '',
          'fileList': [],
          'remark': '',
          'travelList': []

        },
        closeId:0,
        loading: false,
        pageLimit: 10,
        totalCount: 0,
        currentPage: 1,
        tableData: null,
        instantPickerOptions: {
          shortcuts: [
            {
              text: '本周',
              onClick(picker) {
                const now = new Date(new Date().toLocaleDateString())
                const start =
                  now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000
                const end = start + 7 * 24 * 60 * 60 * 1000 - 1000
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '上周',
              onClick(picker) {
                const now = new Date(new Date().toLocaleDateString())
                const start =
                  now.getTime() - (now.getDay() + 6) * 24 * 60 * 60 * 1000
                const end = start + 7 * 24 * 60 * 60 * 1000 - 1000
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '本月',
              onClick(picker) {
                const now = new Date()
                const startDate = new Date(now.getFullYear(), now.getMonth(), 1)
                const endDate = new Date(
                  now.getFullYear(),
                  now.getMonth() + 1,
                  0
                )
                picker.$emit('pick', [startDate.getTime(), endDate.getTime()])
              }
            },
            {
              text: '上月',
              onClick(picker) {
                const now = new Date()
                const startDate = new Date(
                  now.getFullYear() - (now.getMonth() > 0 ? 0 : 1),
                  (now.getMonth() + 11) % 12,
                  1
                )
                const endDate = new Date(now.getFullYear(), now.getMonth(), 0)
                picker.$emit('pick', [startDate.getTime(), endDate.getTime()])
              }
            }
          ]
        }
      }
  },
    watch: {
      activeName2(val, old) {
        // this.filter.type = val.split('_')[1]
        this.filter.status = val;
        this.onFilterChanged()
      }
    },
    filters: {
      dateTimeFormatter: function(cellValue) {
        return moment(cellValue * 1000).format('YYYY-MM-DD HH:mm')
      }
    },
    methods: {
      selectgroupId(){
        this.loadList()
      },
      vacationList(){
        let data = {
          page:1,
          page_size:2000,
        }
        this.$jtoken({
          url: this.serveAd + '/ad/holidays_rule',
          data: data,
          method: 'post',
        }).then((res)=>{
          this.checkingInGroup = res.data.data.list
        })
      },
      fileProview(url, list, key) {
       
         this.example = url
         this.picture = true;
      },
       openUrl(url) {
          window.open(url,'_blank')
      },
      get_status_text(status) {
        if (status == 0) {
          return '待审批'
        }
        if (status == -1) {
          return '驳回'
        }
        if (status == 1) {
          return '通过'
        }
      },
      resetTaskForm() {
        this.formdata.comment = ''
      },
      returnA(id) {
        this.closeId = id;
        this.retrunAgree = true;
      },
      rebut() {
        this.set_review_status(-1, this.closeId)
      },
      set_review_status(status, id) {
        const self = this
        if (typeof (id) !== 'undefined') {
          self.formdata.id = id
        }
        let action = '';
        if(status == 1 ) {
          // 通过
          action = 'pass';
        }else if(status == -1) {
          action = 'refuse'
        }
        self.formdata.action = action;
        this.$jtoken({
          url: this.serveAd + '/ad/review/verify',
          data: qs.stringify(

            self.formdata

          ),
          method: 'post',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(function(res) {
          
          self.loadList()
          if(res.data.code == 0) {
            self.formdata.comment = '';
           
             self.retrunAgree = false
          }
          if (res.data.code == 1) {
            self.ReviewDetailDialogVisible = false
            self.retrunAgree = false
            self.formdata.comment = '';
            self.$message.success(res.data.msg)
          } else {
            self.$message.error(res.data.msg)
          }
        })
          .catch(function(err) {})
      },
      ColseOpen() {
         this.ReviewDetailDialogVisible = false
         this.formdata.comment = '';
      },
      // 审批详情查看
      get_review_info(id) {
        const self = this
        self.retuRnId = id;
        this.$jtoken
          .get( this.serveAd + '/ad/review/info', {
            params: {
              id: id
            }
          }).then(response => {
            if (response.data.code == 1) {
              self.detail =  response.data.data.detail;
              var jsonData = response.data.data
              self.travel_list = response.data.data.travel_list;
              self.review_info = jsonData;
              // self.review_info = jsonData[0]
              const review_list = []
              // self.formdata.id = jsonData
              for (const i in jsonData.process) {
                // if (jsonData[i].reviewer_id == self.profile.id) {
                //   self.formdata.id = jsonData[i].id
                // }
                review_list.push({
                  // content: jsonData[i].reviewerName + '(' + self.get_status_text(jsonData[i].status) + ')',
                  // timestamp: jsonData[i].reviewTime,
                  size: 'large',
                  type: 'primary',
                  name: jsonData.process[i].name,
                  remark: jsonData.process[i].remark
                })
              }
              self.review_list = review_list;
            }
          })
          .catch(error => {
          })

        this.ReviewDetailDialogVisible = true
      },
      dateTimeFormatter: function(row, column, cellValue) {
        return cellValue
          ? this.$moment(cellValue * 1000).format('MM-DD HH:mm')
          : ''
      },
      handleSizeChange(val) {
        this.pageLimit = val
        this.onFilterChanged()
      },
      handleClick(tab, event) {
      },
      onFilterChanged: function() {
        if(this.checkingInGroup.length>0){
          this.filter.holidays_rule_id = this.checkingInGroup[0].id
        }
        this.currentPage = 1
        this.loadList()
      },

      // 审批列表
      loadList: function() {
        var self = this
        self.loading = true
        // let time_range = JSON.parse(JSON.stringify(self.filter.time_range))
        // if (time_range == null) {
        //   time_range = []
        // }
        // if (time_range.length > 0) {
        //   time_range[0] = time_range[0] * 1 / 1000
        //    time_range[1] = (time_range[1]*1/1000) + 24*3600-1
        // }

        var params = {
          page: this.currentPage,
          page_size: this.pageLimit,
          keyword: self.filter.keywords,
          status: self.filter.status,
          type: self.filter.type,
          // time_range: time_range.toString()
          // start_time: self.filter.time_range[0],
          // end_time:self.filter.time_range[1]
        }
        if(this.filter.time_range){
          params.start_time = self.filter.time_range[0]
          params.end_time = self.filter.time_range[1]
        }
        if (self.filter.status == 10) {
          params.status = '0,1,-1'
        }
        if(this.activeName2 == 'all'){
          params.is_reviewer = '2'
        }else{
          params.is_reviewer = '1'
        }
        if(params.type == '5'){
          if(this.checkingInGroup.length>0){
            params.holidays_rule_id = this.filter.holidays_rule_id
          }
        }else{
          params.holidays_rule_id = null
        }

        this.$jtoken
          .get( this.serveAd + '/ad/review', {
            params: params
          })
          .then(function(res) {
            if (res.data.code == 1) {
              var jsonData = res.data.data.review_list;
              try {
                self.totalCount =  res.data.data.total
                self.tableData = jsonData
              } catch (err) {
              }
            }
          })
          .catch(function(error) {
          }).finally(()=>{
            self.loading = false
          })
      },
      changePage: function(current) {
        if (isNaN(current) || current < 1) {
          return false
        }
        this.loadList()
      }
    },
    created() {
      this.vacationList()
      this.loadList()
    }
  }
</script>

<style scoped>


  .paiming .el-tabs__content {
    overflow: visible;
  }

  .paiming .el-tabs__nav-wrap {
    background-color: #5B8BF7;
    padding: 3px 3px 0 3px;
    border-radius: 3px 3px 0 0;
  }

  .paiming .el-tabs__item {
    color: #fff;
    border: none;
    font-weight: normal;
  }

  .paiming .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: none;
  }

  .paiming .el-tabs--card > .el-tabs__header .el-tabs__item {
    border: none;
  }

  .paiming .is-active {
    background-color: #fff;
    color: rgba(96, 98, 102, 1);
    border-radius: 3px 3px 0 0;
  }

  .paiming .el-tabs__item.is-active {
    color: rgba(96, 98, 102, 1);
  }
  .text_item{line-height: 2;}
  /deep/ .el-form-item__label {
    font-weight: normal;
  }
  /deep/ .el-dialog__body {
    padding: 0 50px;
  }
  .inline-block-btn-list{
    margin-bottom: 15px;
  }
</style>
