<template>
  <div style=" position: relative;" class="">
    <el-tabs v-model="activeName2" type="card">

      <el-tab-pane label="全部" name="all">

      </el-tab-pane>

      <el-tab-pane label="等待审批" name="waiting">

      </el-tab-pane>

      <el-tab-pane label="录入成功" name="complete">

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

      </el-tab-pane>


    </el-tabs>




    <div style="background-color: #fff; padding:15px;">
      <div style="margin-top:2px; margin-bottom:15px;" class="inline-block-btn-list">




        <div class="gap-right-8" style="display:inline-block; width:310px;">
          <el-input
            placeholder="输入关键词查找"
            ref="search-bar"
            v-model="filter.keyword"
            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"
        style="width: 100%"
      >


        <el-table-column prop="name" label="姓名" width="120"></el-table-column>



        <el-table-column label="积分">
          <template slot-scope="scope">


{{scope.row.point}}
<span v-if="scope.row.point_type == 0">B分</span>
<span v-if="scope.row.point_type == 1">A分</span>


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


        <el-table-column prop="review_mark" label="状态"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column prop="event_time" label="事件时间"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">




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




          </template>
        </el-table-column>
      </el-table>
      <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>

    </div>




    <el-dialog
      class="attendance_group"
      title="录入详情"
      :visible.sync="ReviewDetailDialogVisible"
      width="600px"
      top="50px"
    >
      <el-scrollbar
        wrap-class="column-wrapper scrollable-items-container check-item-box dept_tree"
        :native="false"
        style="height: 400px;"
      >




<div style="padding:0 50px;">

        <div class="text_item">姓名：{{review_info.target_name}}</div>
        <div class="text_item">类型：{{review_info.mode_type}}</div>
  <div class="text_item" v-if="review_info.remark != ''">备注：<span>{{review_info.remark}}</span></div>
  <div class="text_item" v-if="review_info.rule_item != ''">规则：<span>{{review_info.rule_item}}</span></div>
        <div class="text_item">积分：{{review_info.point}}</div>




        <div class="text_item" v-if="review_info.file_list && review_info.file_list.length > 0">附件：
          <a style="margin:5px;"
             v-for="(item,idx) in review_info.file_list"
             :key="idx"
             @click="fileProview(item.url, review_info.file_list, 1)"
          >

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

          </a>
        </div>

  <div style="display:none;">
    <img
      v-for="(item,index) in review_info.file_list"
      :key="index"
      v-if="(['jpg', 'png', 'bmp', 'jpeg','JPG','PNG']).indexOf(item.url.split('.')[1]) >= 0"
      :src="item.url"
      :preview="1"
      :preview-text="item.url"
    >
  </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.mark}} {{activity.time}}</div>
          </el-timeline-item>
        </el-timeline>



</div>




      </el-scrollbar>


    </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 {
        ReviewDetailDialogVisible: false,
        activeName2: 'all',
        filter: {
          type: 4,
          time_range: [],
          status: 'all',
          keyword: ''
        },
        formdata: {
          id: 0,
          status: 0,
          remark: ''
        },
        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': []

        },
        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.status = val.split('_')[1]
        this.onFilterChanged()
      }
    },
    filters: {
      dateTimeFormatter: function(cellValue) {
        return moment(cellValue * 1000).format('YYYY-MM-DD HH:mm')
      }
    },
    methods: {

      fileProview(url, list, key) {
        const $ext_list1 =  ['jpg', 'png', 'bmp', 'jpeg','JPG','PNG']
        const $ext_name1 = url.split('.')[1]
        window.open(url)
        if ($ext_list1.indexOf($ext_name1) >= 0) {
          console.log(this.serverdomain + url)

          let ii = 0
          for (const i in list) {
            if (
              ['jpg', 'png', 'bmp', 'jpeg','JPG','PNG'].indexOf(list[i].url.split('.')[1]) >=
              0
            ) {
              if (list[i].url == url) {
                this.openPhotoSwipe(
                  ii,
                  document.querySelectorAll('img[preview="' + key + '"]')
                )

                return
              }
              ii++
            }
          }
        }
      },

      get_status_text(status) {
        if (status == 0) {
          return '待审批'
        }
        if (status == -1) {
          return '驳回'
        }
        if (status == 1) {
          return '通过'
        }
      },

      set_review_status(status, id) {
        const self = this
        if (typeof (id) !== 'undefined') {
          self.formdata.id = id
        }
        self.formdata.status = status
        this.$http('post','/integral.php/attendance_review/review',qs.stringify(self.formdata),
          // headers: {
          //   'Content-Type': 'application/x-www-form-urlencoded'
          // }
        ).then(function(res) {
          self.ReviewDetailDialogVisible = false
          self.loadList()
          if (res.data.code == 1) {
            self.setting_show = false
            self.$message.success(res.data.msg)
          } else {
            self.$message.error(res.data.msg)
          }
        })
          .catch(function(err) {})
      },

      get_review_info(id) {
        const self = this
        this.$http('get','/integral.php/ajax_request_common/integral_apply_info',{id: id}).then(response => {
            if (response.status == 200) {
              var jsonData = response.data

              self.review_info = jsonData.results.info

              self.review_list = jsonData.results.info.review_list
            }
          })
          .catch(error => {
            console.log(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) {
        console.log(tab, event)
      },
      onFilterChanged: function() {
        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.keyword,
          status: self.activeName2,
        }


        this.$http('get','/integral.php/ajax_request_common/integral_apply_list',params)
          .then(function(response) {
            if (response.status == 200) {
              self.loading = false
              var jsonData = response.data
              console.log(jsonData)
              try {
                self.totalCount = jsonData.results.total_count
                self.tableData = jsonData.results.list
              } catch (err) {
                console.log(err)
              }
            }
          })
          .catch(function(error) {
            console.log(error)
          })
      },
      changePage: function(current) {
        if (isNaN(current) || current < 1) {
          return false
        }
        this.loadList()
      }
    },
    created() {
      this.loadList()
    }
  }
</script>

<style>


  .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;}
</style>
