<!-- 换班审批 -->
<template>
  <div>
    <Row>
      <Select
        :disabled="searchLoading"
        clearable
        placeholder="审批状态"
        style="width: 200px;"
        v-model="searchForm.status"
      >
        <Option :key="index" :value="index+1" v-for="(item ,index) in SHIFT_APPROVAL_STATE">{{item}}</Option>
      </Select>
      <DatePicker
        :clearable="false"
        :disabled="searchLoading"
        :editable="false"
        placeholder="请选择月份"
        style="width: 200px; margin-left: 8px;"
        type="month"
        v-model="searchDateRange"
      ></DatePicker>
      <Button
        :loading="searchLoading"
        @click="doInitSearch"
        style="margin-left: 8px;"
        type="primary"
      >查询</Button>
    </Row>
    <br />
    <Table :columns="columns" :data="dataList" :loading="searchLoading" border></Table>
    <br />
    <Page
      :current.sync="searchForm.pageNum"
      :page-size="searchForm.pageSize"
      :total="total"
      @on-change="pageChange"
      show-total
    />
  </div>
</template>

<script>
import commonList from '@/mixin/commonList'
import ApprovalAPI from '@api/common/approval'
import showPoptip from '@/mixin/showPoptip'
import { SHIFT_APPROVAL_STATE } from '@conf/dict'
export default {
  name: 'shift-approval',
  mixins: [commonList, showPoptip],
  data () {
    return {
      SHIFT_APPROVAL_STATE: SHIFT_APPROVAL_STATE,
      columns: [
        {
          type: 'index',
          title: '序号',
          width: 65,
          align: 'center'
        },
        {
          title: '发起日期',
          key: 'creatTime',
          width: 150,
          tooltip: true
        },
        {
          title: '发起人',
          key: 'userName'
        },
        {
          title: '工号',
          key: 'userCode',
          tooltip: true
        },
        {
          title: '班次',
          key: 'event'
        },
        {
          title: '响应人',
          key: 'targetUserName'
        },
        {
          title: '响应人班次',
          key: 'targetEvent'
        },
        {
          title: '对象工号',
          key: 'targetUserCode',
          tooltip: true
        },
        {
          title: '换班日期',
          key: 'changeDate',
          tooltip: true
        },
        {
          title: '换班方式',
          key: 'changeType'
        },
        {
          title: '状态',
          key: 'chinaStatus'
        },
        {
          title: '操作',
          key: 'action',
          width: 140,
          render: (h, params) => {
            const status = params.row.status
            const processStatus = params.row.processStatus
            const uuid = params.row.uuid
            return h('div', [
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    transfer: true,
                    title: '确定同意该换班申请吗？',
                    popperClass: 'poptip-mod'
                  },
                  on: {
                    'on-ok': () => {
                      this.doCheck(uuid, 1)
                    },
                    'on-popper-show': () => {
                      this.showPoptip(
                        status !== 1 || processStatus !== 1,
                        '.poptip-mod'
                      )
                    }
                  }
                },
                [
                  h(
                    'Button',
                    {
                      props: {
                        type: 'success',
                        size: 'small',
                        disabled: status !== 1 || processStatus !== 1
                      }
                    },
                    '同意'
                  )
                ]
              ),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    transfer: true,
                    title: '确定拒绝该换班申请吗？',
                    popperClass: 'poptip-mod2'
                  },
                  on: {
                    'on-ok': () => {
                      this.doCheck(uuid, 2)
                    },
                    'on-popper-show': () => {
                      this.showPoptip(
                        status !== 1 || processStatus !== 1,
                        '.poptip-mod2'
                      )
                    }
                  }
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        'margin-left': '4px'
                      },
                      props: {
                        type: 'warning',
                        size: 'small',
                        disabled: status !== 1 || processStatus !== 1
                      }
                    },
                    '拒绝'
                  )
                ]
              )
            ])
          }
        }
      ],
      dataList: []
    }
  },
  methods: {
    doSearch () {
      this.searchLoading = true
      this.$nextTick(() => {
        ApprovalAPI.shiftCheckList({ ...this.searchForm })
          .then(({ data }) => {
            console.log('data: ', data)
            this.searchLoading = false
            if (data.status === 'success') {
              this.dataList = data.data.list
              this.total = data.data.total
            }
          })
          .catch(err => {
            console.error('err:', err)
            this.searchLoading = false
          })
      })
    },
    // 审批
    doCheck (approvalId, operateType) {
      this.$Message.loading({
        content: '正在提交...',
        duration: 0
      })
      ApprovalAPI.checkApproval({ approvalId, operateType })
        .then(({ data }) => {
          if (data.status === 'success') {
            this.$Message.destroy()
            this.$Message.success(operateType === 1 ? '已同意' : '已拒绝')
            this.doInitSearch()
          }
        })
        .catch(err => {
          console.error('err', err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
