<template>
  <div>
    <a-card :bordered="true" style="margin-top: 24px" title="申请机构列表">
      <a slot="extra" v-if="(count>0)">
        <span style="margin-right:20px;">
          <span style="color:#ff4d4f;">共{{ count }}条驳回待审</span>
          <a-tooltip>
            <template slot="title">
              有信息被驳回，请先审核通过！
            </template>
            <a-icon type="info-circle" :style="{ fontSize: '16px', color: '#ff4d4f',padding:'0 0 0 10px' }" />
          </a-tooltip>
        </span>
      </a>
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(row) => row.order_item_id"
        showPagination="auto"
        size="default"
        :expandRowByClick="true"
      >
        <span slot="action" slot-scope="text, record" href="javascript:;">
          <!-- <span>
            <a style="margin-right:10px;" type="primary" @click.stop="seedMessage(record)" >导出表格</a>
          </span> -->
          <span v-if="record.can.send">
            <a-divider type="vertical" />
            <a style="margin-right:10px;" type="primary" @click.stop="seedMessage(record)" >发送通知</a>
            <a-divider type="vertical" />
          </span>
          <span v-if="(record.log_count>0)">(<span style="color:#ff4d4f;">{{ record.log_count }}条待修改</span>、<span style="color:#faad14;">{{ record.log_make_count }}条待确认)</span></span>
          <a-divider type="vertical" v-if="record.can && record.can.logs" />
          <a v-if="record.can && record.can.logs" @click.stop="checkOperation(record.order_item_id)"> {{ record.can.logAdd ? '添加记录':'查看记录' }}</a>
          <!-- <a-icon @click.stop="addOperation(record)" type="plus" :style="{ fontSize: '14px', color: '#1890ff',padding:'6px' }" /> -->
          <a-divider type="vertical"/>
          <a @click.stop="surePlan(record.order_item_id)">结案方案</a>
        </span>
        <span slot="price" slot-scope="text, record">
          <a @click.stop="moneyChangeDetail(record)">￥{{ record.price }} <a-icon type="edit" v-if="can.update_price" @click.stop="moneyChange(record)" color="#1890ff" /></a>
        </span>
        <div slot="expandedRowRender" slot-scope="record">
          <BankItem :record="record" :orderId="id+''" :can="can" />
        </div>
      </s-table>
      <!-- 记录展示 -->
      <div v-if="logsList.length>0" class="logs" >
        <a-descriptions title="记录列表(订单记录、机构记录)"></a-descriptions>
        <a class="seeMore" v-if="logsList.length>1" >
          <a class="more" @click="showAll = !showAll">{{ !showAll?'更多':'收起' }}
            <a-icon :type="!showAll?'down':'up'" color="#1890ff" />
          </a>
        </a>
        <a-timeline v-if="showAll">
          <a-timeline-item v-for="item in logsList" :key="item.log_id">
            {{ item.operate.name }}({{ item.operate.type }})
            <span>添加了
              <a v-if="item.item" @click="checkOperation(item.item_id)">「{{ item.item }}」机构记录</a>
              <a v-else>「订单记录」</a>
            </span>
            <div>记录内容： {{ item.description }}</div>
            <div>{{ item.do_at }}</div>
          </a-timeline-item>
        </a-timeline>
        <a-timeline v-else>
          <a-timeline-item>
            {{ logsList[0].operate.name }}({{ logsList[0].operate.type }})
            <span>添加了
              <a v-if="logsList[0].item" @click="checkOperation(logsList[0].item_id)">「{{ logsList[0].item }}」机构记录</a>
              <a v-else>「订单记录」</a>
            </span>
            <div>记录内容： {{ logsList[0].description }}</div>
            <div>{{ logsList[0].do_at }}</div>
          </a-timeline-item>
        </a-timeline>
      </div>
    </a-card>
    <a-drawer width="640" placement="right" :closable="false" :visible="changeVisible" @close="onClose">
      <template v-if="changeBankLog.length>0">
        <a-descriptions :title="`第${index}次修改`" v-for="(item , index ) in changeBankLog" :key="index">
          <a-descriptions-item label="修改机构" span="1">{{ item.item }}</a-descriptions-item>
          <a-descriptions-item label="修改前金额">￥{{ item.pre_price }}</a-descriptions-item>
          <a-descriptions-item label="修改后金额"><span style="color:red;">￥{{ item.price }}</span></a-descriptions-item>
          <a-descriptions-item label="操作人" span="1">{{ item.user.name }}({{ item.user.job }})</a-descriptions-item>
          <a-descriptions-item label="操作时间" span="2">{{ item.created_at }}</a-descriptions-item>
          <a-descriptions-item label="备注原因" span="3">{{ item.reason }}</a-descriptions-item>
          <a-descriptions-item><br /></a-descriptions-item>
        </a-descriptions>
      </template>
    </a-drawer>
  </div>
</template>
<script>
import {
  getBankItem,
  doLogsList,
  getChangeBankCountLog
} from '@/api/order'
import { sendMessage } from '@/api/notice'
import { STable } from '@/components'
import BankItem from './BankItem.vue'
import MoneyChange from '@/components/OrderDetailInfo/modules/MoneyChange.vue'

const columns = [
  { title: '申请机构', dataIndex: 'institution', key: 'institution' },
  { title: '业务名称', dataIndex: 'business', key: 'business' },
  { title: '业务类型', dataIndex: 'business_type', key: 'business_type' },
  { title: '欠款金额', dataIndex: 'price', key: 'price', scopedSlots: { customRender: 'price' } },
  { title: '状态', dataIndex: 'check_status', key: 'check_status' },
  { title: '操作', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action' } }
]
export default {
  name: 'BankList',
  components: {
    STable, BankItem, MoneyChange
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    can: {
      type: Object,
      default: () => {
        return {}
      }
    },
    count: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      columns,
      queryParam: {},
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getBankItem(this.id, requestParameters)
      },
      logsList: [],
      changeBankLog: [], // 银行修改金额记录
      changeVisible: false,
      showAll: false
    }
  },
  created () {
    this.getInfo()
  },
  activated () {
    this.$refs.table.loadData()
    this.getInfo()

    // 接受传参
    this.eventBus.$on('editBank', (res) => {
      this.$refs.table.loadData()
      this.getInfo()
    })
  },
  deactivated () {
    this.eventBus.$off('editBank')
  },
  methods: {
    getInfo () {
      doLogsList(this.id, { item_id: '' }).then(
        res => {
          this.logsList = res
        }).catch(
        err => {
          this.$notification.error(err)
        }
      )
    },
    surePlan (itemId) {
      this.$router.push({
        name: 'ConfirmPlan',
        params: {
          itemId: itemId,
          orderId: this.id
        }
      })
    },
    checkOperation (itemId) {
      this.$router.push({
        name: 'OperationList',
        params: {
          itemId: itemId,
          orderId: this.id
        }
      })
    },
    // 修改金额
    moneyChange (item) {
      const order = {
        item: item,
        orderId: this.id
      }
      this.$dialog(MoneyChange,
          {
            order,
            on: {
              ok: () => {
                this.$refs.table.loadData()
                this.getInfo()
              }
            }
          },
          {
            title: '修改当前机构的欠款金额',
            width: 500,
            maskClosable: true,
            closable: true,
            okText: '确认修改',
            cancelText: '取消'
          }
        )
    },
    // 查看欠款金额修改详情
    moneyChangeDetail (item) {
      getChangeBankCountLog(this.id, item.order_item_id).then(res => {
        this.changeBankLog = res
        if (res.length > 0) {
          this.changeVisible = true
        } else {
          this.$notification.error({
            message: '提醒',
            description: '没有修改过该机构的欠款金额!'
          })
        }
      }).catch(err => {
        this.$notification.error(err)
      })
    },
    onClose () {
      this.changeVisible = false
    },
    // 发送信息
    seedMessage (item) {
      sendMessage(this.id, 2, item.order_item_id).then(res => {
        this.$notification.success({
            message: '成功',
            description: '发送消息成功！'
        })
        this.getInfo()
        this.$refs.table.loadData()
      }).catch(err => {
       this.$notification.error(err)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ai_start {
  align-items: flex-start;
}
.jc_start {
  justify-content: flex-start;
}
.jc_sb {
  justify-content: space-between;
}
.js_start {
  justify-content: start;
}
.logs{
  margin:40px 20px 0 20px;
  position: relative;
  .seeMore{
    position: absolute;
    right: 10px;
    top:4px;
    .addOperation{
      margin-right: 10px;
    }
    .more{
      margin-left: 10px;
    }
  }
}
</style>
