<template>
  <!-- 1.没修改过2.修改过未通过，3修改过通过了 -->
  <!--
    const CHANGE_NONE   = 'none';        // 没修改过
    const CHANGE_UNPASS = 'unfinished';  // 被驳回，用户未改
    const CHANGE_UPDATE = 'finished';    // 被驳回，用户改了信息
    const CHANGE_PASS   = 'success';     // 被驳回，审核通过
  -->
  <div class="jc_sb row">
    <a-popover placement="topLeft" v-if="resetEdit">
      <template slot="content" v-if="item.reason">
        <span>操作人员: <span class="spanItem">{{ item.reason.type }} {{ item.reason.personal }} </span></span><br />
        <span>驳回原因: <span class="spanItem">{{ item.reason.description }} </span></span><br />
        <span class="spanItem">{{ item.reason.created_at }}</span><br />
        <a-popconfirm title="是否确认审核通过该信息?" ok-text="确认" cancel-text="取消" @confirm="popoverAction(item)">
          <a class="popoverAction" v-if="item.is_change == 'finished'">通过</a>
        </a-popconfirm>
      </template>
      <span slot="title">驳回记录</span>
      <a-icon v-if="item.is_change == 'unfinished'" type="info-circle" :style="{ fontSize: '16px', color: '#ff4d4f' }" />
      <a-icon v-if="item.is_change == 'finished'" type="issues-close" :style="{ fontSize: '16px', color: '#faad14' }" />
      <a-icon v-if="(item.is_change == 'success' && rejectEdit)" type="check-circle" :style="{ fontSize: '16px', color: '#87d068' }" />
    </a-popover>
    <a-icon v-if="!rejectEdit && item.is_change != 'unfinished' && item.is_change != 'finished' && !item.disabled" @click="edit(item)" type="edit" :style="{ fontSize: '16px', color: '#1890ff' }" />
    <a-icon v-if="!resetEdit && !item.disabled " @click="edit(item)" type="edit" :style="{ fontSize: '16px', color: '#1890ff' }" />
  </div>
</template>
<script>
import Reason from '@/components/OrderDetailInfo/modules/Reason.vue'
import EditOrderInfo from '@/components/OrderDetailInfo/modules/EditOrderInfo.vue'
import { passInfo } from '@/api/order'
export default {
  name: 'ItemPopover',
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    id: {
      type: Object,
      default: () => {
        return {}
      }
    },
    rejectEdit: {
      type: Boolean,
      default: true
    },
    resetEdit: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: ''
    }
  },
  methods: {
    edit (item) {
      item.id = this.id
      item.actionType = this.type
      let success = {}
      if (!this.resetEdit) {
        if (this.type === 'user') {
          success = {
            title: '修改用户信息',
            width: 600,
            maskClosable: true,
            closable: true,
            okText: '确认修改',
            cancelText: '取消'
          }
        } else if (this.type === 'bank') {
          success = {
            title: '修改该机构信息',
            width: 600,
            maskClosable: true,
            closable: true,
            okText: '确认修改',
            cancelText: '取消'
          }
        }
        console.log('resetEdit', item)
        this.$dialog(
          EditOrderInfo,
          {
            item,
            on: {
              ok: () => {
                if (this.type === 'bank') {
                  this.eventBus.$emit('editBank', { data: true })
                } else if (this.type === 'user') {
                  this.eventBus.$emit('editRealName', { data: true })
                }
                this.eventBus.$emit('updateOrderInfo', { data: true })
              }
            }
          },
          success
        )
        return
      }
      if (!this.rejectEdit) {
        if (this.type === 'user') {
          success = {
            title: '驳回用户信息',
            width: 500,
            maskClosable: true,
            closable: true,
            okText: '确认驳回',
            cancelText: '取消'
          }
        } else if (this.type === 'bank') {
          success = {
            title: '驳回该机构信息',
            width: 500,
            maskClosable: true,
            closable: true,
            okText: '确认驳回',
            cancelText: '取消'
          }
        }
        this.$dialog(
          Reason,
          {
            item,
            on: {
              ok: () => {
                if (this.type === 'bank') {
                  this.eventBus.$emit('editBank', { data: true })
                } else if (this.type === 'user') {
                  this.eventBus.$emit('editRealName', { data: true })
                }
                this.eventBus.$emit('updateOrderInfo', { data: true })
              }
            }
          },
          success
        )
      }
    },
    // 驳回通过
    popoverAction (item) {
      const params = {
        item_id: this.id.item_id,
        type: this.type === 'user' ? 1 : 2,
        params: {
          key: item.key
        }
      }
      passInfo(this.id.order_id, params)
        .then((res) => {
          this.$notification.success({
              message: '成功',
              description: '驳回被通过！'
          })
          if (this.type === 'user') {
            this.eventBus.$emit('editRealName', { data: true })
          } else {
            this.eventBus.$emit('editBank', { data: true })
          }
          this.eventBus.$emit('updateOrderInfo', { data: true })
        })
        .catch((err) => {
          this.$notification.error({
            message: '失败',
            description: err.message
          })
        })
    }
  }
}
</script>
<style lang="less" scoped>
.spanItem {
  color: grey;
}
.popoverAction {
  display: inline-block;
  width: 100%;
  text-align: right;
}
</style>
