<template>
  <div class="order-complaints-page">
    <Card>
      <div class="search-con">
        <Input
          placeholder="请输入投诉编号"
          class="search-input"
          v-model="searchContent.complaintId"
          style="width:200px"
        />
        <Input
          placeholder="请输入用户账号"
          class="search-input"
          v-model="searchContent.uid"
          style="width:200px"
        />
      <Select v-model="searchContent.complaintStatus" class="search-input" style="width:200px">
        <Option v-for="(item, index) in complaintObj" :value="item.index" :key="index">
            {{item.label}}
        </Option>
      </Select>
        <ButtonGroup class="search-btngroup">
          <Button @click="handleSearch" type="primary">查找</Button>
          <Button type="primary" @click="handleRefresh">
            <Icon type="md-refresh" />
          </Button>
        </ButtonGroup>
      </div>
      <tables
        ref="tables"
        editable
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
    </Card>
    <Modal
      v-model="complaintFlag"
      title="投诉处理："
      :width="400"
      class-name="vertical-center-modal"
      @on-cancel="handleCancelComplaint"
    >
      <div class="modal-item">
        <label class="label">处理结果：</label>
        <Select
          placeholder="请选择处理结果"
          v-model="form.result"
        >
          <Option
            v-for="(item, index) of complaintResult"
            :value="item.title"
            :key="'state-option-' + index"
          >{{item.title}}</Option
          >
        </Select>
      </div>
      <div class="modal-item">
        <label class="label">备注：</label>
        <Input
          placeholder="备注..."
          v-model="form.remark"
        />
      </div>
      <div slot="footer">
        <Button
          @click="handleComplaintSubmit"
          :loading="complaintSubmitLoading"
          type="primary"
          long
        >确 定</Button
        >
      </div>
    </Modal>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { OrderStatusObj, ComplaintStatusObj, ComplaintStatus } from '@/enums'
import { formatTime } from '../../libs/ali-oss'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  data () {
    return {
      searchContent: {
        uid: '',
        complaintStatus: '',
        complaintId: '',
        pageNum: 1,
        pageSize: 10
      },
      complaintObj: [
        {
          label: '处理中',
          index: 1
        },
        {
          label: '已完成',
          index: 2
        }
      ],
      complaintResult: [
        {
          title: '退款',
          number: 1
        },
        {
          title: '退货',
          number: 2
        },
        {
          title: '补发货物',
          number: 3
        },
        {
          title: '驳回',
          number: 3
        }
      ],
      complaintFlag: false,
      complaintSubmitLoading: false,
      form: {
        result: '',
        remark: '',
        complaintId: '',
        // handlerId: '',
        updateTime: ''
      },
      tableData: [],
      columns: [
        { title: '编号', key: 'complaintId', align: 'left', minWidth: 180 },
        { title: '用户账号', key: 'uid', align: 'left', minWidth: 180 },
        { title: '关联订单', key: 'orderId', align: 'left', minWidth: 180 },
        {
          title: '关联单类型',
          key: 'orderType',
          align: 'center',
          width: 150,
          render: (h, params) => {
            return h('Tag', OrderStatusObj[params.row.orderType])
          }
        },
        { title: '商家名称', key: 'shopName', align: 'center', width: 150 },
        {
          title: '商家联系方式',
          key: 'shopContactPhone',
          align: 'center',
          width: 120
        },
        {
          title: '投诉信息',
          key: 'description',
          align: 'center',
          minWidth: 100
        },
        { title: '处理结果', key: 'result', align: 'center', width: 120 },
        {
          title: '订单状态',
          key: 'complaintStatus',
          align: 'center',
          width: 100,
          render: (h, params) => {
            return h('Tag', ComplaintStatusObj[params.row.complaintStatus])
          }
        },
        { title: '投诉时间',
          key: 'createTime',
          align: 'center',
          minWidth: 150,
          render: (h, params) => {
            return h('span', formatTime(params.row.createTime))
          }
        },
        {
          title: '操作',
          key: 'operate',
          align: 'left',
          fixed: 'right',
          minWidth: 150,
          render: (h, params) => {
            let detailBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  // marginLeft: '10px'
                },
                on: {
                  click: this.handleDetail(params.row)
                }
              },
              '详 情'
            )
            let checkBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  display:
                    params.row.complaintStatus == ComplaintStatus.IN_PROCESS
                      ? 'inline-block'
                      : 'none',
                  marginLeft: '10px'
                },
                on: {
                  click: this.handleCheck(params.row)
                }
              },
              '处 理'
            )
            return ('div', [detailBtn, checkBtn])
          }
        }
      ],
      loading: false,
      totalSize: 0
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.searchContent.complaintId = this.searchContent.complaintId.replace(/\s+/g, '')
      this.searchContent.uid = this.searchContent.uid.replace(/\s+/g, '')
      this.api({
        apiName: 'getComplaintList',
        postdata: this.searchContent,
        complete: () => {
          this.loading = false
        },
        success: res => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    handleSearch () {
      this.searchContent.pageNum = 1
      this.requestData()
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    handleCheck (row) {
      return () => {
        this.complaintFlag = true
        this.form.complaintId = row.complaintId
        this.form.updateTime = row.updateTime
      }
    },
    handleDetail (row) {
      return () => {
        let query = { complaintId: row.complaintId }
        this.$router.push({ name: 'complaint_detail', query })
      }
    },
    handleCancelComplaint () {
      this.complaintFlag = false
      this.form.result = ''
      this.form.remark = ''
    },
    handleComplaintSubmit () {
      let { result, remark } = this.form
      if (!result) {
        return this.$Message.warning('请选择处理结果！')
      }
      if (!remark) {
        return this.$Message.warning('请输入备注！')
      }
      this.complaintSubmitLoading = true
      this.api({
        apiName: 'checkComplaint',
        postdata: this.form,
        complete: () => {
          this.complaintSubmitLoading = false
        },
        success: (res) => {
          this.handleCancelComplaint()
          this.requestData()
          this.$Notice.success({ title: '处理完成！' })
        }
      })
    }
  },
  created () {
    this.requestData()
  }
}
</script>
<style scoped lang="less">
.order-complaints-page .search-con {
  display: flex;
  padding: 10px 0;
  .search-input {
    width: 300px;
    margin-right: 10px;
  }
}
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .ivu-modal {
    top: 0;
  }
  .modal-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .label {
      width: 100px;
      text-align: center;
    }
  }
}
</style>
