<template>
  <div class="RecordsOfConsumption">
    <div class="searchBox">
      <div class="choosePeople" @click="choosePeople" style="width: 120px">选择成员</div>
      <a-select placeholder="状态" :allowClear="true" style="width: 120px;margin-right: 20px;" @change="selectHandRecords">
        <a-select-option value="SUCCESS">已消费</a-select-option>
        <a-select-option value="REFUND_SUCCESS">已退款</a-select-option>
      </a-select>
      <a-select placeholder="收银员" :allowClear="true" style="width: 120px;margin-right: 20px;" @change="selectagent">
        <a-select-option v-for="item in agentList" :value="item.userId" :key="item.userId">{{item.name}}</a-select-option>
      </a-select>
      <a-button type="primary" @click="search()">查询</a-button>
    </div>
    <div class="searchUserMessage" v-if="searchSource.UserMessage.emplId">
      <div class="positionDiv"></div>
      <div class="clearUserMessage"><a href="javascript:;" @click="clearUserMessage">清除</a></div>
      <div class="userListBox">
        <div>
          <img v-if="searchSource.UserMessage.avatar" :src="searchSource.UserMessage.avatar" :alt="searchSource.UserMessage.name"/>
          <img v-else :src="this.avatarCanvasFn(searchSource.UserMessage.name)" :alt="searchSource.UserMessage.name">
          <span>{{ searchSource.UserMessage.name }}</span>
        </div>
      </div>
    </div>
     <a-table :columns="columns" :dataSource="recordsList" size="default" rowKey="orderNo" :pagination="pagination" @change="handleTableChange">
        <span slot="userName">消费人</span>
        <span slot="departmentNameList" slot-scope="departmentNameList">
          {{ departmentNameListToStr(departmentNameList) }}
        </span>
        <span slot="agent">收银员</span>
        <span slot="consumptionAmount">实际消费</span>
        <span slot="consumptionSubsidyAmount">津贴消费</span>
        <!-- <span slot="orderNo">单号</span> -->
        <span slot="orderStatus" slot-scope="orderStatus">
          <a-badge v-if="orderStatus === MINGPAY_RECORDS_STATUS.SUCCESS" status="success" text="已消费" />
          <a-badge v-else-if="orderStatus === MINGPAY_RECORDS_STATUS.WAITING_PERMIT" status="processing" text="审批中" />
          <a-badge v-else status="error" text="已退款" />
        </span>
        <span slot="remark">备注</span>
        <span slot="createTime" slot-scope="createTime">
          {{ createTime }}
        </span>
        <span slot="action" slot-scope="text, record, index" class="operationTable">
          <a v-if="record.orderStatus === MINGPAY_RECORDS_STATUS.SUCCESS" href="javascript:;" @click="refundModal(record, text, index)">退款</a>
          <a v-else style="color: #cccccc;" href="javascript:;">退款</a>
        </span>
      </a-table>
      <a-modal title="发起退款" v-model="visible" @ok="refund()">
        <a-form :form="form">
          <a-form-item label="退款金额" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" >
            <a href="javascript:;">{{ parseFloat(refundSelect.consumptionAmount) + parseFloat(refundSelect.consumptionSubsidyAmount) }}</a>
          </a-form-item>
          <a-form-item label="备注" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" >
            <a-textarea v-decorator="['remark', {rules: [{ required: true, message: '备注不能为空' }]}]"/>
          </a-form-item>
        </a-form>
      </a-modal>
  </div>
</template>

<script>
import { config } from './../../../api/config.js'
import { $http } from './../../../api/axios.js'
import { MINGPAY_RECORDS_STATUS } from './../../../api/constant'
export default {
  name: 'recordsOfConsumption',
  data () {
    return {
      MINGPAY_RECORDS_STATUS: MINGPAY_RECORDS_STATUS,
      visible: false,
      columns: [{
        title: '消费人',
        dataIndex: 'userName'
      }, {
        title: '部门',
        dataIndex: 'departmentNameList',
        scopedSlots: { customRender: 'departmentNameList' }
      }, {
        title: '收银员',
        dataIndex: 'agent'
      }, {
        title: '实际消费',
        dataIndex: 'consumptionAmount'
      },
      {
        title: '津贴消费',
        dataIndex: 'consumptionSubsidyAmount'
      },
      // {
      //   title: '单号',
      //   dataIndex: 'orderNo'
      // },
      {
        title: '状态',
        dataIndex: 'orderStatus',
        scopedSlots: { customRender: 'orderStatus' }
      }, {
        title: '备注',
        dataIndex: 'remark'
      }, {
        title: '时间',
        dataIndex: 'createTime',
        scopedSlots: { customRender: 'createTime' }
      }, {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }],
      searchSource: {
        UserMessage: {
          avatar: '',
          emplId: '',
          name: ''
        },
        status: '',
        agentId: ''
      },
      recordsList: [],
      pagination: {
        current: 1,
        defaultCurrent: 10,
        defaultPageSize: 10,
        hideOnSinglePage: true,
        total: 0
      },
      status: '',
      refundSelect: '',
      form: this.$form.createForm(this),
      agentList: []
    }
  },
  created: function () {
    this.queryRecordList()
    this.queryAgentList()
  },
  methods: {
    queryAgentList () {
      let CashierListData = this.$qs.stringify({
        orgId: localStorage.getItem('orgId')
      })
      $http.get(`/v1/cashier/list_cashier_all?${CashierListData}`).then((res) => {
        this.agentList = res.data.data.list
      }).catch(() => {
        this.$message.error('获取操作员信息失败')
      })
    },
    refundModal (record, text, index) {
      this.visible = !this.visible
      this.refundSelect = record
    },
    search () {
      this.pagination.current = 1
      this.queryRecordList()
    },
    // 退款
    refund () {
      const _that = this
      if (this.form.getFieldsValue().remark === undefined) {
        this.$message.error('请输入备注')
      } else {
        let refundData = this.$qs.stringify({
          orderNo: this.refundSelect.orderNo,
          userId: this.refundSelect.userId,
          remark: this.form.getFieldsValue().remark || '',
          orgId: localStorage.getItem('orgId')
        })
        $http.get(`/v1/consume/refund?${refundData}`).then((res) => {
          if (res.data.message === 'SUCCESS') {
            this.$message.success('退款成功')
            this.visible = false
            this.form.resetFields()
            _that.queryRecordList()
          } else {
            this.$message.error(res.data.message)
          }
        }).catch(() => {
          this.$message.error('退款失败')
        })
      }
    },
    // table部门表格字符串处理
    departmentNameListToStr (str) {
      let departmentNameListStr = ''
      if (str.length !== 0) {
        str.map((data) => {
          departmentNameListStr = `${departmentNameListStr}${data}，`
        })
      }
      departmentNameListStr = departmentNameListStr.substring(0, departmentNameListStr.length - 1)
      return departmentNameListStr
    },
    // 获取消费列表
    queryRecordList () {
      let RecordListData = this.$qs.stringify({
        currentPage: this.pagination.current,
        pageNumber: this.pagination.defaultPageSize,
        status: this.searchSource.status,
        userId: this.searchSource.UserMessage.emplId,
        agentId: this.searchSource.agentId,
        orgId: localStorage.getItem('orgId')
      })
      $http.get(`/v1/consume/list_expense_record?${RecordListData}`).then((res) => {
        let data = res.data.data
        this.recordsList = data.recordList
        this.pagination.total = parseInt(data.totalCount)
      })
    },
    // 选人组件调用
    choosePeople () {
      config.ddready('ddchooseOne').then((res) => {
        this.searchSource.UserMessage = res[0]
      })
    },
    // 表格时间处理
    createTimeToStr (time) {
      let timeData = new Date(parseInt(time))
      let year = timeData.getFullYear()
      let month = timeData.getMonth() + 1
      let date = timeData.getDate()
      let hour = timeData.getHours()
      let minute = timeData.getMinutes()
      return `${year}年${month}月${date}日 ${hour}:${minute}`
    },
    // 清理选择帅选人list
    clearUserMessage () {
      this.searchSource.UserMessage = {
        avatar: '',
        emplId: '',
        name: ''
      }
    },
    // 用户头像处理
    avatarCanvasFn (name) {
      let canvas = document.createElement('canvas')
      let con = canvas.getContext('2d')
      let ratio = this.getPixelRatio(con)
      canvas.style.width = 40 + 'px'
      canvas.style.height = 40 + 'px'
      canvas.width = 40 * ratio
      canvas.height = 40 * ratio
      con.scale(ratio, ratio)
      con.fillStyle = '#1890ff'
      con.fillRect(0, 0, 40, 40)
      con.fillStyle = '#ffffff'
      con.font = '12px Arial'
      con.textAlign = 'center'
      con.fillText(name, 20, 25)
      return canvas.toDataURL()
    },
    // 头像模糊处理
    getPixelRatio (context) {
      var backingStore = context.backingStorePixelRatio ||
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio || 1
      return (window.devicePixelRatio || 1) / backingStore
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.queryRecordList()
    },
    // 搜索条件消费单状态
    selectHandRecords (value) {
      this.searchSource.status = value
    },
    selectagent (value) {
      this.searchSource.agentId = value
    }
  }
}
</script>

<style lang="less" scoped>
.searchBox{
  display: flex;
  margin-bottom: 20px;
}
.searchBox > input {
  margin-right: 20px;
  max-width: 180px;
}
.operationTable a{
  margin-right: 8px;
}
.searchUserMessage{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
  padding: 8px 8px;
  border: 1px solid #cccccc;
  margin-bottom: 15px;
  border-radius: 8px;
  position: relative;
}
.searchUserMessage img{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-bottom: 8px;
}
.positionDiv{
  height: 12px;
  width: 12px;
  transform:rotate(45deg);
  border-left: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
  position: absolute;
  top: -7px;
  left: 30px;
  background: white;
  z-index: 99;
}
.clearUserMessage{
  position: absolute;
  right: 10px;
}
.userListBox{
  text-align: center;
  display: flex;
}
.userListBox>div>img{
  display: block;
  text-align: center;
}
.choosePeople{
  line-height: 32px;
  width: 120px;
  margin-right: 20px;
  padding-left: 11px;
  height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  color: #bfbfbf;
  cursor: pointer;
}
.choosePeople:hover{
  border: 1px solid #1890ff;
}
</style>