<template>
  <div class="cashierManagement">
    <a-button type="primary" style="margin-bottom: 20px" @click="choosePeople">添加收银人</a-button>
    <div class="searchUserMessage" v-if="searchSource.UserMessage.emplId">
      <div class="positionDiv"></div>
      <div class="clearUserMessage"><a href="javascript:;" @click="clearUserMessage">清除</a></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>
    <a-table :columns="columns" :dataSource="cashierManagementList" size="default" rowKey="id" :pagination="pagination" @change="handleTableChange">
      <span slot="name">成员</span>
      <span slot="createDate"></span>
      <span slot="action" slot-scope="text, record, index">
        <a v-if="record.status === '0'" href="javascript:;" @click="showModel(record, text, index)">删除</a>
        <a v-else href="javascript:;" style="color:#cccccc">已删除</a>
      </span>
    </a-table>
  </div>
</template>

<script>
import { config } from './../../../api/config.js'
import { $http } from './../../../api/axios.js'
export default {
  name: 'cashierManagement',
  data () {
    return {
      searchSource: {
        UserMessage: {
          avatar: '',
          emplId: '',
          name: ''
        },
        status: '',
        agentId: ''
      },
      columns: [{
        title: '成员',
        dataIndex: 'name'
      }, {
        title: '时间',
        dataIndex: 'createDate'
      }, {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }],
      cashierManagementList: [],
      pagination: {
        current: 1,
        defaultCurrent: 1,
        defaultPageSize: 10,
        hideOnSinglePage: true,
        total: 0
      }
    }
  },
  watch: {},
  computed: {},
  created: function () {
    this.getCashierList()
  },
  methods: {
    showModel (record, text, index) {
      const _that = this
      this.$confirm({
        title: '确认要删除该收银员吗？',
        content: '删除后，该人员无法在设备上进行收钱操作',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          _that.deleteCashier(record)
        }
      })
    },
    deleteCashier (record) {
      let DeleteCashierData = {
        ddUserId: record.userId,
        cashierStatus: '1',
        userType: '0',
        id: record.id
      }
      $http.get(`/mingpay/v1/isv/cashier/delete_cashier`, DeleteCashierData).then((res) => {
        if (res.data.resultCode === 0) {
          this.$message.success('操作成功')
          this.getCashierList()
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(() => {
        this.$message.error('删除失败')
      })
    },
    getCashierList () {
      let CashierListData = {
        pageNumber: this.pagination.defaultPageSize,
        currentPage: this.pagination.current,
        userType: '0'
      }
      $http.get(`/mingpay/v1/isv/cashier/list_cashier`, CashierListData).then((res) => {
        this.pagination.total = parseInt(res.data.data.total)
        this.cashierManagementList = res.data.data.list
      }).catch(() => {
        this.$message.error('获取收银员信息失败')
      })
    },
    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}`
    },
    choosePeople () {
      config.ddready('ddchooseOne').then((res) => {
        let insertCashierData = {
          cashierName: res[0].name,
          ddUserId: res[0].emplId,
          cashierStatus: '0',
          userType: '0'
        }
        $http.get(`/mingpay/v1/isv/cashier/insert_cashier`, insertCashierData).then((res) => {
          if (res.data.resultCode === 0) {
            this.$message.success('添加成功')
            this.getCashierList()
          } else {
            this.$message.error(res.data.message)
          }
        }).catch((err) => {
          this.$message.error('网络异常请重试')
          console.log(err)
        })
      })
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.getCashierList()
    }
  }
}
</script>

<style lang="less" scoped>
.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;
}
.peopleBox{
  width: 100%;
  border: 1px solid #d9d9d9;
  min-height: 40px;
  border-radius: 4px;
  padding: 4px 11px;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}
</style>