<!--
  @description: 订单对账
  @Modifier：qk
  @routerPath:/personalCenter/reconciliation
  @date：2019/12/11
-->
<template>
  <div class="reconciliatio">
    <div class="shopmall-page-title">
      订单对账
    </div>
    <div class="search-content clearfix">
      <section class="fl">
        <el-form ref="searchForm" :inline="true" :model="searchForm">
          <el-form-item label="供应商">
            <el-input v-model.trim="searchForm.supplier" placeholder="请输入供应商" @keyup.enter.native="searchList" />
          </el-form-item>
          <el-form-item label="对账单名称">
            <el-input v-model.trim="searchForm.statementName" size="small" placeholder="输入对账单名称" @keyup.enter.native="searchList" />
          </el-form-item>
          <el-form-item label="出账日期">
            <el-date-picker
              v-model="searchForm.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="(val) => {handleDate(val, 'startDate', 'endDate');}"
            />
          </el-form-item>
        </el-form>
      </section>
      <div class="fr">
        <el-button type="purple" @click="searchList">
          搜索
        </el-button>
        <el-button type="gray" @click="resetList">
          重置
        </el-button>
      </div>
    </div>
    <div class="p0-16">
      <!-- tabs -->
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane
          v-for="(item,index) in tabsList"
          :key="index"
          :name="item.index"
        >
          <span slot="label">
            {{ item.name }}
            <template v-if="item.num>0">
              （{{ item.num }}）
            </template>
            <el-popover
              v-if="index===tabsList.length-1"
              placement="top-start"
              popper-class="hint"
              offset="5"
              trigger="hover"
            >
              <ul v-for="(sitem,sindex) in popoverContent" :key="sindex" class="hint">
                <li>
                  <p class="title">{{ sitem.title }}:</p>
                  <p class="value">{{ sitem.value }}</p>
                </li>
              </ul>
              <el-button slot="reference" type="info" class="prompt">
                <i class="iconfont icon-qm" />
              </el-button>
            </el-popover>
          </span>
        </el-tab-pane>
      </el-tabs>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
      >
        <el-table-column
          label="序号"
          type="index"
          align="center"
          header-align="center"
        />
        <el-table-column
          prop="statementName"
          label="对账单名称"
          header-align="center"
          min-width="200"
        />
        <el-table-column
          prop="supplierName"
          label="供应商"
          header-align="center"
          min-width="120"
        />
        <el-table-column
          prop="detailSettleAmount"
          label="本期应付金额（元）"
          align="right"
          header-align="center"
          width="130"
        />
        <el-table-column
          prop="detailOrderAmount"
          label="本期订单金额（元）"
          align="right"
          header-align="center"
          width="130"
        />
        <el-table-column
          prop="statementTime"
          label="出账日期"
          align="center"
          header-align="center"
        />
        <!-- <el-table-column
          prop="statementStatus"
          label="状态"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.statementStatus === '01'" style="color: #1f94f4;">
              已完成
            </p> -->
        <!-- <p v-if="scope.row.checkStatus === '03' && scope.row.statementStatus === '00'" style="color: #1f94f4;">
              账单有差异
            </p>
            <p v-if="scope.row.checkStatus !== '03' && scope.row.statementStatus === '00'" style="color: #1f94f4;">
              确认完成
            </p> -->
        <!-- <p v-if="scope.row.checkStatus === '03' && scope.row.statementStatus !== '01'" style="color: #1f94f4;">
              账单有差异 -->
        <!-- <i class="el-icon-refresh cursor fs14" title="刷新对账单状态" @click="refreshStatus（scope.row)" /> -->
        <!-- </p>
            <p v-if="scope.row.checkStatus !== '03' && scope.row.statementStatus !== '01'" style="color: #1f94f4;">
              账单无差异 -->
        <!-- <i class="el-icon-refresh cursor fs14" title="刷新对账单状态" @click="refreshStatus(scope.row)" /> -->
        <!-- </p>
          </template>
        </el-table-column> -->
        <el-table-column
          label="操作"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="handleClick(scope.row)">
              账单明细
            </el-link>
            <el-link type="primary" @click="handleDownLoad(scope.row)">
              账单导出
            </el-link>
            <!-- <el-button type="text" size="small" @click="handleDownLoad(scope.row)">
              账单导出
            </el-button>
            <div>
              <el-button v-if="activeIndex==='02'" type="text" size="small" @click="handleDialog(scope.row)">
                未对账原因说明
              </el-button>
            </div> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 未对账原因说明弹框 -->
    <reconCiliationExplain v-if="dialog.dialogFormVisible" :dialog="dialog" />
    <!--分页组件-->
    <pagination :pagination-data="paginationData" @change="initData" />
  </div>
</template>
<script>
/* api*/
import { reconciliations, reconciliationNums, exportStatementData, getOrderDiff } from '@/api/shoppingmall/order'
/* 公共方法*/
import { download, restoreInitialValue, filterObj } from '@assets/js/utils'// 常用方法
import { ListMixin } from '@/mixins/ListMixin'// 分页
/* 组件*/
import reconCiliationExplain from './reconCiliationExplain-dialog' // 未对账原因说明弹框
import pagination from '@comp/common/pagination/pagination'// 分页
export default {
  components: {
    pagination, // 分页组件
    reconCiliationExplain // 对账弹框
  },
  mixins: [ListMixin],
  data() {
    return {
      activeName: '00',
      tabIndex: 0,
      popoverContent: [
        {
          title: '待对账',
          value: '次月初系统自动生成的上个月的对账单'
        },
        {
          title: '对账中',
          value: '对账人发送对账单后等待供应商核对期间的对账单'
        },
        {
          title: '已对账',
          value: '供应商核对完成并开出发票的对账单'
        },
        {
          title: '往期账单',
          value: '上月账期之前的历史账单'
        }
      ],
      tabsList: [
        { index: '00', name: '待对账', settlementStatus: '02', isHistory: '', num: null },
        { index: '01', name: '对账中', settlementStatus: '00', isHistory: '', num: null },
        { index: '02', name: '已对账', settlementStatus: '01', isHistory: '00', num: null },
        { index: '03', name: '往期账单', settlementStatus: '01', isHistory: '01', num: null }
      ],
      searchForm: {
        date: [],
        isHistory: '',
        endDate: '', // 出账结束日期
        settlementStatus: '',
        startDate: '', // 出账开始日期
        supplier: '', // 供应商名称
        statementName: '' // 对账单名称
      },
      tableData: [],
      // 未对账原因说明弹框
      dialog: {
        dialogFormVisible: false,
        id: '',
        type: 'save'
      },
      loading: false
    }
  },
  mounted() {
    // type 00 初始化加载 01搜索重置、点击tab加载
    this.initData('00') // 账单列表
  },
  methods: {
    // 获取账单列表
    initData(type) {
      const params = this.getQueryParams()// 查询条件
      this.loading = true
      reconciliations(params).then(res => {
        this.tableData = res.data.records
        this.paginationData.total = res.data.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
      this.getReconciliationNums(params, type)
    },
    // 获取账单数量
    getReconciliationNums(params, type) {
      // 初始化加载循环调用
      if (type === '00') {
        this.tabsList.map((item, k) => {
          const paramsData = {
            ...params,
            settlementStatus: this.tabsList[k].settlementStatus,
            isHistory: this.tabsList[k].isHistory
          }
          reconciliationNums(paramsData).then(res => {
            this.tabsList[k].num = res.data
          })
        })
      } else {
        // 点击tab只查询当前tab
        reconciliationNums(params).then(res => {
          this.tabsList[this.tabIndex].num = res.data
        })
      }
    },
    // 查询条件
    getQueryParams() {
      this.searchForm.settlementStatus = this.tabsList[this.tabIndex].settlementStatus
      this.searchForm.isHistory = this.tabsList[this.tabIndex].isHistory
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 搜索
    searchList() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      // 获取列表信息
      this.initData('00')
    },
    // 重置
    resetList() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      restoreInitialValue(this.searchForm)
      this.initData('00')
    },
    // 切换tab
    tabClick(tab) {
      const index = Number(tab.index)
      this.tabIndex = index
      this.activeName = tab.name
      this.paginationData.pageNo = 1
      this.searchForm.settlementStatus = this.tabsList[index].settlementStatus
      this.searchForm.isHistory = this.tabsList[index].isHistory
      // this.initData('01')
      // 暂时获取全部Tab的num，解决两个Tab短时间多次切换时，数量错误的问题
      this.initData('00')
    },
    // 账单明细
    handleClick(val) {
      this.$router.push({
        path: '/personalCenter/reconciliationDetail',
        query: {
          id: val.id, // 对账单ID
          name: val.supplierName, // 供应商名称
          activeName: this.activeName, // 当前选中
          tabIndex: this.tabIndex, // 从哪个tab页跳转的
          rowTitle: val.statementName, // 对账单名称
          settlementStatus: this.searchForm.settlementStatus
        }
      })
    },
    // 刷新对账单状态
    refreshStatus(row) {
      const params = {
        statementId: row.id,
        supplier: row.supplierName
      }
      getOrderDiff(params).then(res => {
        this.initData('01')
      })
    },
    // 处理搜索时间格式
    handleDate(val, start, end) {
      if (val) {
        this.searchForm[start] = this.$Moment(val[0]).format(this.momentDate) // 开始时间
        this.searchForm[end] = this.$Moment(val[1]).format(this.momentDate) // 结束时间
      }
    },
    // 对账单导出
    handleDownLoad(row) {
      const data = {
        statementId: row.id
      }
      exportStatementData(data).then(res => {
        download(res, '对账单.xlsx')
      })
    },
    // 未对账原因说明弹框
    handleDialog(row) {
      this.dialog.dialogFormVisible = true
      this.dialog.id = row.id
    }
  }
}
</script>
<style scoped lang="less">
</style>
