
<template>
  <page-header-wrapper
    :tab-active-key="tabActiveKey"
    :tab-change="handleTabChange"
    :tab-list="tabsList"
    :title="pageTitle"
  >
    <!-- <template v-slot:content>
      <a-descriptions size="small">
        <a-descriptions-item :label="item.tab" v-for="item in tabList" :key="item.key" >
          <div><a style="font-size:18px;font-weight:600;">{{ item.count }}</a> 单</div>
        </a-descriptions-item>
      </a-descriptions>
    </template> -->
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="订单编号">
                <a-input v-model="queryParam.order_no" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="申请用户">
                <a-input v-model="queryParam.nickname" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="法务老师">
                <a-input v-model="queryParam.teacher" placeholder="" />
              </a-form-item>
            </a-col>
            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button class="ml8" @click="() => ((this.queryParam = {state: tabActiveKey}), $refs.table.refresh(true))">重置</a-button>
            <!-- <DeriveButton :queryParam="queryParam" :listCount="listCount" /> -->
          </a-row>
        </a-form>
      </div>

      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(row) => row.business_order_id"
        showPagination="auto"
        bordered
        size="default"
        :scroll="{ x: 1500, y: 1000 }"
      >
        <!-- 订单单号 -->
        <span slot="order_no" slot-scope="text, record">
          <router-link tag="a" target="_blank" :to="{ name: 'Detail', params: {id: record.business_order_id } }">
            {{ record.order_no }}
          </router-link>
        </span>

        <!-- 申请用户 实习顾问 法务老师 -->
        <div slot="user" slot-scope="text, record">
          <user-info :info="{...record.user,sex: record.cert?record.cert.sex : '未实名'}" />
        </div>
        <div slot="transactor" slot-scope="text, record">
          {{ record.transactor != '' ?record.transactor:'--' }}
        </div>
        <div slot="teachers" slot-scope="text, record">
          {{ record.teachers != '' ? record.teachers : '--' }}
        </div>

        <!-- 业务类型 -->
        <span slot="one" slot-scope="text, record"><a> {{ record.item_type.one>0?'x '+record.item_type.one :'--' }}</a></span>
        <span slot="two" slot-scope="text, record" ><a> {{ record.item_type.two>0?'x '+record.item_type.two :'--' }}</a></span>
        <span slot="price" slot-scope="text, record">￥<span>{{ record.price }}</span></span>
        <span slot="total" slot-scope="text, record">￥<span>{{ record.total }}</span></span>

        <!-- 订单状态 -->
        <span slot="status" slot-scope="text, record">
          <a-tag color="blue">{{ record.status.text }}</a-tag>
        </span>

        <!-- 操作 -->
        <div slot="actions" slot-scope="text, record">
          <router-link tag="a" target="_blank" :to="{ name: 'Detail', params: { id: record.business_order_id } }"> 查看详情 </router-link>
        </div>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable, UserInfo } from '@/components'
import DeriveButton from '@/components/OrderDetailInfo/DeriveButton'
import {
  getOrderList,
  getOrdersCount,
  teachermakesure
} from '@/api/order'

const columns = [
  {
    title: '订单号',
    dataIndex: 'order_no',
    scopedSlots: { customRender: 'order_no' },
    align: 'center',
    width: 160,
    fixed: 'left'
  },
  {
    title: '申请用户',
    dataIndex: 'user',
    key: 'user',
    scopedSlots: { customRender: 'user' },
    width: 180,
    align: 'center'
  },
  {
    title: '实习顾问',
    dataIndex: 'manager',
    key: 'manager',
    scopedSlots: { customRender: 'manager' },
    align: 'center',
    width: 120
  },
  {
    title: '法务老师',
    dataIndex: 'teachers',
    key: 'teachers',
    scopedSlots: { customRender: 'teachers' },
    align: 'center',
    width: 120
  },
  {
    title: '业务类型',
    children: [
      {
        title: '信用卡业务',
        dataIndex: 'one',
        key: 'one',
        scopedSlots: { customRender: 'one' },
        align: 'center'
      },
      {
        title: '网贷业务',
        dataIndex: 'two',
        scopedSlots: { customRender: 'two' },
        key: 'two',
        align: 'center'
      },
      {
        title: '总申请额度',
        dataIndex: 'price',
        scopedSlots: { customRender: 'price' },
        key: 'price',
        align: 'center'
      },
      {
        title: '服务包总金额',
        dataIndex: 'total',
        scopedSlots: { customRender: 'total' },
        key: 'total',
        align: 'center'
      }
    ]
  },
  {
    title: '订单状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
    align: 'center'
  },
  {
    title: '下单时间',
    dataIndex: 'created_at',
    align: 'center',
    sorter: true
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'actions' },
    align: 'center',
    width: 180,
    fixed: 'right'
  }
]

export default {
  name: 'Index',
  components: {
    STable,
    UserInfo,
    DeriveButton
  },
  data () {
    this.columns = columns
    return {
      tabList: [
        { key: 'process', tab: '业务办理中' },
        { key: 'makesure', tab: '待确认方案' }
      ],
      tabsList: [],
      tabActiveKey: 'process',
      pageTitle: '业务办理中',
      dataList: [],
      queryParam: {
        state: 'process',
        order_no: '',
        nickname: '',
        teacher: ''
      },
      listCount: 0,
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        getOrderList(requestParameters).then(res => {
          this.listCount = res.data.length
        })
        return getOrderList(requestParameters)
      }
    }
  },
  watch: {
    $route (to, from) {
      if (
        (from.name === 'Detail' && to.name === 'HandleService') ||
        (from.name === 'Home' && to.name === 'HandleService') ||
        (from.name === 'FristCheckrderIndex' && to.name === 'HandleService') ||
        (from.name === 'SignInrderIndex' && to.name === 'HandleService') ||
        (from.name === 'AssignrderIndex' && to.name === 'HandleService') ||
        (from.name === 'ReCheckrderIndex' && to.name === 'HandleService') ||
        (from.name === 'CompleteOrder' && to.name === 'HandleService')
      ) {
        this.$refs.table.loadData()
      }
    }
  },
  activated () {
    getOrdersCount({ state: this.tabList }).then(res => {
      this.tabsList = []
      res.map(item => {
        item.tab = item.tab + '(' + item.count + ')'
        this.tabsList.push(item)
      })
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    teachearSure (item) {
      teachermakesure(item.business_order_id).then(res => {
        this.$notification.success({
            message: '成功',
            description: '审核通过'
        })
        this.$refs.table.loadData()
      }).catch(err => {
       this.$notification.error(err)
      })
    },
    logistic (order) {
      this.$router.push({
        name: 'OrderLogistic',
        params: { orderId: order.order_no }
      })
    },
    handleTabChange (key) {
      this.tabActiveKey = key
      this.queryParam.state = key
      this.$refs.table.refresh(true)
      this.pageTitle = this.tabList.find((item) => item.key === key).tab
    }
  }
}
</script>

<style lang="less" scoped>
.ml8 {
  margin-left: 8px;
}
</style>
