<template>
  <div class="app-container">

    <div class="filter-container">

      <el-input :size="sizeType" v-model="search.billCode" placeholder="单据号" style="width: 200px;" class="filter-item"/>
      <el-input :size="sizeType" v-model="search.itemCode" placeholder="订单编号" style="width: 200px;" class="filter-item"/>
      <el-input :size="sizeType" v-model="search.invoiceCode" placeholder="发票号" style="width: 200px;" class="filter-item"/>
      <el-input :size="sizeType" v-model="search.invoiceTitle" placeholder="发票抬头" style="width: 200px;" class="filter-item"/>
      <el-button :size="sizeType" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <div class="top-right-btn">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="getList"/>
        </el-tooltip>
      </div>
      <el-table
        :data="tableData"
        v-loading="listLoading"
        row-key="id"
        border
        stripe
        :size="sizeType"
        style="margin-top: 10px"
        @sort-change="changeSort"
        default-expand-all>
        <el-table-column fixed label="操作" align="left" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
           <el-button v-if="row.billStatus == 0" size="mini" type="primary" @click="handleVerify(row)">审核</el-button>
            <el-button v-else size="mini" type="warning" @click="handleVerify(row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="序号"
          fixed
          align="center"
          width="50"
          type="index">
          <template slot-scope="scope">
            <span>{{ (listData.page - 1) * listData.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <template v-for="column in columnnames">
          <el-table-column
            v-if="column.id == 2"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            align="left"
            show-overflow-tooltip>
            <template slot-scope="{row}">
              <el-tag size="mini" v-if="row[column.field] == 0" type="info">待审核</el-tag>
              <el-tag size="mini" v-else-if="row[column.field] == 1" type="success">已审核</el-tag>
              <el-tag size="mini" v-else-if="row[column.field] == 2" type="danger">已退回</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="column.id == 8"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            align="left"
            show-overflow-tooltip>
            <template slot-scope="{row}">
              <span v-if="row[column.field]">{{row[column.field] | getTime}}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            show-overflow-tooltip>
          </el-table-column>

        </template>

      </el-table>
      <!--      <span>总计：</span>-->
      <pagination
        v-show="listData.total>0"
        :total="listData.total"
        :page.sync="listData.page"
        :limit.sync="listData.pageSize"
        @pagination="getList"/>

    </div>

    <order-step ref="orderStep"></order-step>
    <el-drawer
      title="订单消息"
      :reverse="true"
      :visible.sync="memoDrawer"
      size="600px">
      <order-message ref="orderMessage"></order-message>
    </el-drawer>

    <el-dialog title="订单详情" :close-on-click-modal="false" class="orderDetailDialog" :visible.sync="detailVisible" top="10px" width="1200px">
      <order-detail ref="orderDetail"></order-detail>
    </el-dialog>

    <el-dialog title="开票信息" :visible.sync="invoiceInfoVisible" width="1000px">
      <el-dialog append-to-body title="审核驳回" :visible.sync="rejectDialog" width="600px">
        <el-form size="mini" inline label-width="120px">
          <el-form-item label="驳回原因">
            <el-input v-model="validateMemo" type="textarea" style="width: 400px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="rejectDialog = false">取 消</el-button>
          <el-button type="primary" @click="rejectBtn">驳回确定</el-button>
        </div>
      </el-dialog>
      <el-form size="mini" label-width="120px" style="width: 700px">
        <el-row :gutter="20">
          <el-col :span="12">
        <el-form-item label="发票抬头">
          <el-input style="width: 280px" disabled v-model="invoiceBill.invoiceTitle"></el-input>
        </el-form-item></el-col><el-col :span="12">
        <el-form-item label="税号">
          <el-input style="width: 280px" v-model="invoiceBill.buyerTaxNum" disabled></el-input>
        </el-form-item></el-col>
          <el-col :span="12">
          <el-form-item label="开户行">
            <el-input v-model="invoiceBill.buyerBankName" disabled></el-input>
          </el-form-item></el-col><el-col :span="12">
          <el-form-item label="注册地址">
            <el-input v-model="invoiceBill.buyerInvoiceAddress" disabled></el-input>
          </el-form-item></el-col><el-col :span="12">
          <el-form-item label="注册电话">
            <el-input v-model="invoiceBill.buyerInvoicePhone" disabled></el-input>
          </el-form-item></el-col>
          <el-col :span="12">
        <el-form-item label="发票号">
          <el-input style="width: 280px" v-model="invoiceBill.invoiceCode"></el-input>
        </el-form-item></el-col><el-col :span="12">
        <el-form-item label="开票金额">
          <el-input style="width: 280px" v-model="invoiceBill.invoiceMoney" disabled></el-input>
        </el-form-item></el-col>
          <el-col :span="12">
        <el-form-item label="开票说明">
          <el-input style="width: 280px" v-model="invoiceBill.invoiceMemo" type="textarea"></el-input>
        </el-form-item></el-col><el-col :span="12">
        <el-form-item label="申请人">
          <el-input style="width: 280px" disabled v-model="invoiceBill.requestMan"></el-input>
        </el-form-item></el-col><el-col :span="12">
        <el-form-item label="审核人">
          <el-input style="width: 280px" disabled v-model="invoiceBill.validateMan"></el-input>
        </el-form-item></el-col>
        </el-row>
      </el-form>
      <el-table
        :data="invoiceBill.itemList"
        size="mini"
        highlight-current-row
        @row-click="getChargeData"
        style="margin-bottom: 20px;margin-left: 10px"
        border>
        <el-table-column
          prop="itemCode"
          label="订单编号">
        </el-table-column>
        <el-table-column
          prop="itemName"
          label="印品名称"></el-table-column>
        <el-table-column
          prop="itemClientName"
          label="客户名称"></el-table-column>
        <el-table-column
          prop="itemMoney"
          label="订单金额"></el-table-column>
        <el-table-column
          prop="payMoney"
          label="已收金额"></el-table-column>
      </el-table>
      <el-table v-if="orderCollectionData.length>0" border size="mini" :data="orderCollectionData" style="margin-bottom: 20px;margin-left: 10px">
        <el-table-column prop="chargeDate" label="收款日期">
          <template slot-scope="{row}">
            <span v-if="row.chargeDate">{{row.chargeDate |getTime}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="chargeMan" label="收款人"></el-table-column>
        <el-table-column prop="orderCode" label="订单编号"></el-table-column>
        <el-table-column prop="accountName" label="会计科目"></el-table-column>
        <el-table-column prop="receivableMoney" label="收款金额"></el-table-column>
        <el-table-column prop="agioMoney" label="折扣金额"></el-table-column>
        <el-table-column prop="agioMemo" label="折扣备注"></el-table-column>
        <el-table-column prop="voucherCode" label="凭证号"></el-table-column>
      </el-table>

      <div slot="footer" v-if="invoiceBill.billStatus==0" class="dialog-footer">
        <el-button @click="invoiceInfoVisible = false">取 消</el-button>
        <el-button type="primary" @click="verifyInvoice(1)">审核确定</el-button>
        <el-button type="danger" @click="rejectInvoice">审核驳回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import OrderMessage from '@/components/orderMessage/orderMessage'
import OrderDetail from '@/components/orderDetail/orderDetail'
import OrderStep from '@/components/orderStep/orderStep'
import {getInvoiceBillList, getInvoiceBillInfo, verifyInvoiceBill} from "@/api/invoice/invoiceBillReview";
import {getChargeDataList} from "@/api/orderCharge/collectionRecords";

const searchForm = {
  orderCode: '',
  printBillCode: '',
  clientCode: '',
  clientName: '',
  orderName: '',
  beginTime: '',
  endTime: '',
  createMan: '',
  idProduct: '-1',
  voidFlag: '0',
  businessKind: '-1',
  orderType: '-1'
}

const defaultItems = [
  {
    name: '单据号', id: 1, field: 'billCode', width: ''
  },
  {
    name: '状态', id: 2, field: 'billStatus', width: '180px'
  },
  {
    name: '开票抬头', id: 3, field: 'invoiceTitle', width: ''
  },
  {
    name: '发票号', id: 4, field: 'invoiceCode', width: ''
  },

  {
    name: '开票金额', id: 10, field: 'invoiceMoney', width: ''
  },
  {
    name: '订单金额', id: 5, field: 'itemTotalMoney', width: ''
  },
  {
    name: '审核说明', id: 6, field: 'invoiceMemo', width: '180px'
  },
  {
    name: '开票说明', id: 9, field: 'validateMemo', width: '180px'
  },
  {
    name: '申请人', id: 7, field: 'requestMan', width: ''
  },
  {
    name: '申请时间', id: 8, field: 'createTime', width: '150px'
  },
]

var STORAGE_KEY = 'column'
var columnStorage = {
  fetch() {
    var list = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
    list.forEach((item, index) => {
      item.id = index
    })
    columnStorage.uid = list.length
    return list
  },
  save(list) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(list))
  }
}
export default {
  components: {
    OrderStep,
    OrderDetail,
    OrderMessage,
  },
  data() {
    return {
      sizeType: 'mini',
      orderByString: '', // 排序
      detailVisible: false,
      voidVisible: false,
      drawer: false,
      timeString: '',
      memoDrawer: false,
      noticeVisible: false, // 编辑发货通知弹窗
      dialogStatus: 1, // 1增加，2修改
      dialogTitle: '',
      dialogVisible: false,
      queryType: 1, // 1模糊搜索，2组合搜索
      searchTime: [],
      search: {
        billCode: '',
        itemCode: '',
        invoiceCode: '',
        invoiceTitle: ''
      },
      combinedQuery: false,
      searchForm: Object.assign({}, searchForm),

      balanceLimit: '',
      balance: {
        clientId: '',
        debtFlag: 0,
        balacneLimit: '',
        debtTime: '',
        activePassword: ''
      },
      options: [],
      productList: [],
      columnSelect: '',
      defaultColumnName: columnStorage.fetch(),
      columnnames: Object.assign([], defaultItems), // 选中的列名
      defaultItem: Object.assign([], defaultItems), // 默认列
      tableItem: [], // 选中列
      group: 'col',
      columnVisible: false,
      columnList: {
        name: '',
        columnItem: []

      },

      listData: {
        total: 0,
        page: 1,
        pageSize: 20
      },

      listLoading: false,
      tableData: [],

      stepList: [],

      // 审核信息
      invoiceInfoVisible: false,
      indexBillId: '',
      invoiceBill: {},

      orderCollectionData: [],

      // 驳回
      rejectDialog: false,
      validateMemo: '',

      oldActivedId: '',

      // 验证规则
      rules: {
        productName: [{ required: true, trigger: 'blur', message: '请选择产品类型' }],
        clientName: [{ required: true, trigger: 'blur', message: '请选择客户' }]
      }
    }
  },
  watch: {
    defaultColumnName(val) {
      columnStorage.save(val)
    },
    memoDrawer(val) {
      // console.log(val)
      if (!val) {
        this.getList()
      }
    }
  },
  mounted() {
    this.getList()
  },
  created() {
    // window.clickImg = this.clickImg
  },
  methods: {
    /**
     * 显示字符串中间加星号
     */
    plusXing(str, frontLen, endLen) {
      // var len = str.length - frontLen - endLen
      var xing = ''
      for (var i = 0; i < 6; i++) {
        xing += '*'
      }
      return str.substr(0, frontLen) + xing + str.substr(str.length - endLen)
    },
    // 排序
    changeSort(val) {
      // console.log(val)
      var _that = this
      if (val.order == 'ascending') {
        _that.orderByString = val.prop + ',' + 'asc'
      } else if (val.order == 'descending') {
        _that.orderByString = val.prop + ',' + 'desc'
      } else {
        _that.orderByString = ''
      }
      _that.getList()
    },

    // 获取列表
    getList() {
      const _that = this
      _that.listLoading = true

      if (_that.listData.pageSize == 10) {
        _that.sizeType = 'medium'
      } else {
        _that.sizeType = 'mini'
      }
      var params = _that.search
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }
      // console.log(data)
      // return;
      getInvoiceBillList(data).then(response => {
        console.log(response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        _that.listData.total = response.total
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
      })
    },
    // 获取脚印
    getOrderStep(row) {
      const _that = this
      _that.$refs.orderStep.idOrder = row.id
      _that.$refs.orderStep.getOrderStep()
    },

    getChargeData(val){
      // console.log(val);
      const _that = this;
      if(_that.oldActivedId != val.idOrder){
        _that.oldActivedId = val.idOrder
        var page = {
          pageIndex: 1,
          pageSize: 200
        }
        var data = {
          'params': JSON.stringify({'idOrder':val.idOrder}),
          'page': JSON.stringify(page)
        }
        getChargeDataList(data).then(response => {
          console.log(response)
          const data = response.data
          _that.orderCollectionData = data
          // //  组合表单数据
        }).catch(err => {
          _that.$message.error(err)
        })
      }
    },

    // 刷新变革
    tableRefresh() {
      // 刷新变革
      this.getList()
    },
    // 搜索
    searchData() {
      this.queryType = 1
      this.listData.page = 1
      this.getList()
      this.combinedQuery = false
    },
    combinedQueryBtn() {
      this.queryType = 2
      this.listData.page = 1
      this.getList()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.searchTime = []
    },

    openDetail(row) {
      var _that = this
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = row.id
        _that.$refs.orderDetail.getInfo()
      })
    },


    // 订单消息
    openMessage(row) {
      var _that = this
      _that.memoDrawer = true
      _that.$nextTick(function() {
        // console.log(_that.$refs.orderMemo);
        _that.$refs.orderMessage.idOrder = row.id
        _that.$refs.orderMessage.getList()
      })
    },

    // 审核
    handleVerify(row) {
      var _that = this;
      _that.orderCollectionData = [];
      _that.indexBillId = row.id
      var data = {
        idBill: row.id
      }
      getInvoiceBillInfo(data).then(res => {
        if (res.httpCode == 200) {
          _that.invoiceInfoVisible = true
          _that.invoiceBill = res.data
        }
      })
    },
    // 审核驳回
    rejectInvoice() {
      const _that = this
      _that.rejectDialog = true;
      _that.validateMemo = "";
    },
    rejectBtn() {
      const _that = this
      _that.rejectDialog = false
      _that.verifyInvoice(2)
    },
    /**
     * 审核确定
     * @type  1 审核通过 2 审核驳回
     * @private
     */
    verifyInvoice(type) {
      const _that = this
      var invoiceInfo = {}
      if (type == 1) {
        invoiceInfo = {
          id: _that.indexBillId,
          billStatus: type,
          invoiceCode: _that.invoiceBill.invoiceCode,
          invoiceMemo: _that.invoiceBill.invoiceMemo
        }
      } else {
        invoiceInfo = {
          id: _that.indexBillId,
          billStatus: type,
          validateMemo: _that.validateMemo
        }
      }
      var data = {
        invoiceBill: invoiceInfo
      }
      // console.log(data);
      // return
      verifyInvoiceBill(data).then(res =>{
        console.log(res);
        if (res.httpCode == 200) {
          if(type == 1){
            _that.$message.success('审核成功')
          }else {
            _that.$message.success('驳回成功')
          }
          _that.invoiceInfoVisible = false
          _that.tableRefresh()
        }
      })
    }

  }
}
</script>
<style>
/*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
.el-drawer__body {
  overflow: auto;
}

.stepList .el-card__body {
  padding: 10px;
}

:focus {
  outline: 0;
}
</style>

<style lang="scss" scoped>
.filter-container {
  margin-bottom: 15px;
}

.board-column {
  min-width: 100px;
  min-height: 100px;
  height: auto;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: 3px;

  .board-column-header {
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    background: #333;
    color: #fff;
    border-radius: 3px 3px 0 0;
  }

  .board-column-content {
    height: auto;
    overflow: hidden;
    border: 10px solid transparent;
    min-height: 60px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;

    .board-item {
      cursor: pointer;
      width: 100%;
      height: 64px;
      margin: 5px 0;
      background-color: #fff;
      text-align: left;
      line-height: 54px;
      padding: 5px 10px;
      box-sizing: border-box;
      box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
    }
  }
}

.button-new-tag {
  display: inline-block;
  font-size: 12px;
  box-sizing: border-box;
  white-space: nowrap;
  padding: 0 5px;
  height: 20px;
  line-height: 19px;
}

.box-card {
  margin-top: 10px;

  ::v-deep .el-card__body {
    padding-bottom: 0;
  }
}

.orderPayDialog {
  .infoItem {
    display: inline-block;
    margin-right: 20px;
  }
}
</style>
