<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="标题" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入流程名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">
          新增
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="leaveList"
      style="width: 100%;"
    >
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="请假类型" align="center" prop="type">
        <template slot-scope="scope">
          <el-tag
            effect="dark">
            {{ leaveTypeFormat( scope.row) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="标题" align="center" prop="title"/>
      <el-table-column label="原因" align="center" prop="reason"/>
      <el-table-column label="开始时间" align="center" prop="startTime">
        <template slot-scope="scope">
          <span>{{ parseTimeT(scope.row.startTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="endTime">
        <template slot-scope="scope">
          <span>{{ parseTimeT(scope.row.startTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="请假时长" align="center" prop="totalTime" width="180">
        <template slot-scope="scope">
          <span>{{ formatTotalDateSub(scope.row.totalTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="createUserName"/>
      <el-table-column label="申请人" align="center" prop="applyUserName"/>
      <el-table-column label="申请时间" align="center" prop="applyTime">
        <template slot-scope="scope">
          <span>{{ parseTimeT(scope.row.startTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="当前任务阶段" align="center" prop="taskName"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.instanceId"
            size="mini"
            type="text"
            icon="el-icon-s-data"
          >表单数据
          </el-button>
          <el-button
            v-if="scope.row.instanceId"
            size="mini"
            type="text"
            icon="el-icon-time"
          >审批历史
          </el-button>
          <el-button
            v-if="scope.row.instanceId"
            size="mini"
            type="text"
            icon="el-icon-view"
          >进度查看
          </el-button>
          <!--未结束-->
          <el-button
            v-if="scope.row.instanceId && scope.row.taskName.indexOf('已结束') === -1"
            size="mini"
            type="text"
            icon="el-icon-refresh-left"
          >撤销
          </el-button>
          <el-button
            v-if="scope.row.instanceId && scope.row.taskName.indexOf('已结束') === -1"
            size="mini"
            type="text"
            :icon="scope.row.suspendState === '2' ?'el-icon-video-play':'el-icon-video-pause'"
          >{{scope.row.suspendState === '2'?'激活':'挂起'}}
          </el-button>
          <!--无ID-->
          <el-button
            v-if="!scope.row.instanceId"
            size="mini"
            type="text"
            icon="el-icon-s-promotion"
          >提交申请
          </el-button>
          <el-button
            v-if="!scope.row.instanceId"
            size="mini"
            type="text"
            icon="el-icon-edit"
          >编辑
          </el-button>
          <el-button
            v-if="!scope.row.instanceId"
            size="mini"
            type="text"
            icon="el-icon-delete"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
    <!-- 添加或修改对话框 -->
    <el-dialog title="添加请假" :visible.sync="addOpen" width="560px" append-to-body>
      <el-form ref="form" :model="addForm" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题" prop="title">
              <el-input v-model="addForm.title" placeholder="请输入标题"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="原因" prop="reason">
              <el-input v-model="addForm.reason" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="请假时间" prop="leaveTimeRange">
              <el-date-picker
                @change="datePickerChange"
                v-model="addForm.leaveTimeRange"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="请假时长" prop="totalTimeText">
              <el-input v-model="addForm.totalTimeText"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="padding-top:20px">
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
        <el-button @click="cancelAdd">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listLeave } from '@/api/work/leave/index'

  export default {
    name: 'modeler',
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 表格数据
        leaveList: [],
        // 状态数据字典
        leaveTypeOptions: [],
        // 查询参数
        queryParams: {
          title: undefined,
          pageNum: 1,
          pageSize: 10
        },
        // 是否显示弹出层
        addOpen: false,
        editOpen: false,
        // 表单参数
        addForm: {
          title: undefined,
          reason: undefined,
          leaveTimeRange: undefined,
          totalTimeText: 'undefined'
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近七天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        // 表单校验
        rules: {
          name: [
            { required: true, message: '流程名称不能为空', trigger: 'blur' }
          ],
          key: [
            { required: true, message: '唯一标识符Key不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.getList()
      this.getDicts('biz_leave_type').then(response => {
        this.leaveTypeOptions = response.data
        console.log(this.leaveTypeOptions)
      })
    },
    methods: {
      /** 查询登录日志列表 */
      getList() {
        this.loading = true
        listLeave(this.queryParams).then(response => {
          this.leaveList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      // 取消按钮
      cancelAdd() {
        this.addOpen = false
        this.reset()
      },
      submitAddForm() {
        var totalSecond = (this.addForm.leaveTimeRange[1].getTime() - this.addForm.leaveTimeRange[0].getTime()) / 1000
        this.msgSuccess(totalSecond)
      },
      // 表单重置
      reset() {
        this.addForm = {
          title: undefined,
          reason: undefined,
          leaveTimeRange: undefined
        }
        this.resetForm('addForm')
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.addOpen = true
      },
      formatTotalDateSub(secondSub) {
        if (!secondSub) {
          return '未知'
        } else {
          var days = Math.floor(secondSub / (24 * 3600))     // 计算出小时数
          var leave1 = secondSub % (24 * 3600)                // 计算天数后剩余的毫秒数
          var hours = Math.floor(leave1 / 3600)              // 计算相差分钟数
          var leave2 = leave1 % (3600)                       // 计算小时数后剩余的毫秒数
          var minutes = Math.floor(leave2 / 60)              // 计算相差秒数
          var leave3 = leave2 % 60                           // 计算分钟数后剩余的毫秒数
          var seconds = Math.round(leave3)
          return days + ' 天 ' + hours + ' 时 ' + minutes + ' 分 ' + seconds + ' 秒'
        }
      },
      leaveTypeFormat(row) {
        return this.selectDictLabel(this.leaveTypeOptions, row.type)
      },
      datePickerChange() {
        this.addForm.totalTimeText = (this.addForm.leaveTimeRange[1] - this.addForm.leaveTimeRange[0]) / 1000 / 60 / 60 / 24 + '天'
        this.msgSuccess(this.addForm.totalTimeText)
      }
    }
  }
</script>

