<!-- 留言审批 -->
<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 MSG_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 showPoptip from '@/mixin/showPoptip'
import ApprovalAPI from '@api/common/approval'
import { MSG_APPROVAL_STATE } from '@conf/dict'
import { differenceInDays } from 'date-fns'
export default {
  name: 'msg-approval',
  mixins: [commonList, showPoptip],
  data () {
    return {
      MSG_APPROVAL_STATE: MSG_APPROVAL_STATE,
      columns: [
        {
          type: 'index',
          title: '序号',
          width: 65,
          align: 'center'
        },
        {
          title: '发起日期',
          width: 150,
          key: 'createtime',
          tooltip: true
        },
        {
          title: '发起人',
          key: 'userName'
        },
        {
          title: '员工编号',
          key: 'userCode',
          tooltip: true
        },
        {
          title: '联系方式',
          key: 'contact'
        },
        {
          title: '投诉留言对象',
          key: 'targetName'
        },
        {
          title: '对象员工编号',
          key: 'targetCode'
        },
        {
          title: '投诉留言类型',
          key: 'leaveType'
        },
        {
          title: '备注',
          key: 'remark',
          tooltip: true
        },
        {
          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',
                {
                  directives: [
                    {
                      name: 'show',
                      value: status === 1 && processStatus === 1
                    }
                  ],
                  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'
                      }
                    },
                    '同意'
                  )
                ]
              ),
              h(
                'Poptip',
                {
                  directives: [
                    {
                      name: 'show',
                      value: status === 1 && processStatus === 1
                    }
                  ],
                  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'
                      }
                    },
                    '拒绝'
                  )
                ]
              ),
              h(
                'Poptip',
                {
                  directives: [
                    {
                      name: 'permission',
                      arg: 'close',
                      value: 'msg-approval'
                    },
                    {
                      name: 'show',
                      value: status === 3
                    }
                  ],
                  props: {
                    confirm: true,
                    transfer: true,
                    title: '确定关闭该投诉留言吗？'
                  },
                  on: {
                    'on-ok': () => {
                      this.doClose(uuid)
                    }
                  }
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        'margin-left': '4px'
                      },
                      props: {
                        type: 'default',
                        size: 'small'
                      }
                    },
                    '关闭'
                  )
                ]
              )
            ])
          }
        }
      ],
      dataList: []
    }
  },
  methods: {
    doSearch () {
      this.searchLoading = true
      this.$nextTick(() => {
        const dateRange = differenceInDays(
          new Date(this.searchForm.endTime),
          new Date(this.searchForm.startTime)
        )
        if (dateRange > this.$config.DATE_RANGE_QUARTER) {
          this.$Message.warning(
            `日期范围不能超过${this.$config.DATE_RANGE_QUARTER}天`
          )
        } else {
          ApprovalAPI.complainCheckList({ ...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.checkComplain({ approvalId, operateType })
        .then(({ data }) => {
          if (data.status === 'success') {
            this.$Message.destroy()
            this.$Message.success(operateType === 1 ? '已同意' : '已拒绝')
            this.doInitSearch()
          }
        })
        .catch(err => {
          console.error('err', err)
        })
    },
    // 关闭
    doClose (uuid) {
      this.$Message.loading({
        content: '正在提交...',
        duration: 0
      })
      ApprovalAPI.complainClose({ uuid })
        .then(({ data }) => {
          if (data.status === 'success') {
            this.$Message.destroy()
            this.$Message.success('已关闭')
            this.doInitSearch()
          }
        })
        .catch(err => {
          console.error('err', err)
        })
    }
  }
}
</script>

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