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

    <div class="filter-container">

      <el-input :size="sizeType" v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item"/>

      <el-button :size="sizeType" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-button :size="sizeType" type="warning" @click="combinedQuery = !combinedQuery">组合查询</el-button>
      <el-button :size="sizeType" type="success" @click="addDrawer = true;invoiceBill.invoiceTitle='';invoiceBill.buyerTaxNum='';invoiceBill.invoiceMemo='';">已选中{{invoiceList.length}}条</el-button>
      <el-card class="box-card" v-if="combinedQuery">
        <el-form :size="sizeType" ref="searchForm" :model="searchForm">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item prop="orderCode">
                <el-input placeholder="订单编号" :size="sizeType" v-model="searchForm.orderCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="printBillCode">
                <el-input placeholder="施工单号" :size="sizeType" v-model="searchForm.printBillCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="clientCode">
                <el-input placeholder="客户编号" :size="sizeType" v-model="searchForm.clientCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="clientName">
                <el-input placeholder="客户名称" :size="sizeType" v-model="searchForm.clientName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="orderName">
                <el-input placeholder="订单名称" :size="sizeType" v-model="searchForm.orderName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="orderCode">
                <el-date-picker
                  :size="sizeType"
                  v-model="searchTime"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="createMan">
                <el-input placeholder="制单人" :size="sizeType" v-model="searchForm.createMan"></el-input>
              </el-form-item>
            </el-col>

            <!--                    <el-col :span='6'>物流货号</el-col>-->
          </el-row>
          <el-row :gutter="20" style="margin-bottom: 0px">
            <el-col :span="6">
              <el-form-item label="产品类型" prop="idProduct">
                <el-select v-model="searchForm.idProduct" :size="sizeType" filterable placeholder="产品类型" value-key="id">
                  <el-option
                    label="全部"
                    value="-1">
                  </el-option>
                  <el-option
                    v-for="item in productList"
                    :key="item.id"
                    :label="item.productName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订单状态" prop="voidFlag">
                <el-select v-model="searchForm.voidFlag" :size="sizeType" filterable placeholder="订单状态" value-key="id">
                  <el-option
                    label="正常"
                    value="0">
                  </el-option>
                  <el-option
                    label="已作废"
                    value="1">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="业务类型" prop="businessKind">
                <el-select
                  v-model="searchForm.businessKind"
                  :size="sizeType"
                  filterable
                  placeholder="业务类型"
                  value-key="id">
                  <el-option
                    label="全部"
                    value="-1">
                  </el-option>
                  <el-option
                    label="正常业务"
                    value="0">
                  </el-option>
                  <el-option
                    label="外协业务"
                    value="1">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订单类型" prop="orderType">
                <el-select v-model="searchForm.orderType" :size="sizeType" filterable placeholder="订单类型" value-key="id">
                  <el-option
                    label="全部"
                    value="-1">
                  </el-option>
                  <el-option
                    label="短版订单"
                    value="0">
                  </el-option>
                  <el-option
                    label="长版订单"
                    value="1">
                  </el-option>
                  <el-option
                    label="通货订单"
                    value="2">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-button
            style="margin-bottom: 10px;margin-right: 10px"
            type="primary"
            :size="sizeType"
            @click="combinedQueryBtn">搜索
          </el-button>
          <el-button style="margin-bottom: 10px" @click="resetForm('searchForm')" :size="sizeType">重置</el-button>
        </el-form>
      </el-card>
      <span style="font-size: 13px;color: #7c7c7c">收款状态:</span>
      <el-select style="width: 95px;" @change="orderStateChange"  size="mini" v-model="search.orderStateCharge" placeholder="收款状态">
        <el-option
          v-for="item in optionsList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <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"
        ref="orderTable"
        @sort-change="changeSort"
        @row-click="handleClickTableRow"
        @selection-change="handleSelectionChange"
        default-expand-all>
        <el-table-column
          type="selection"
          fixed="left"
          :selectable="selectable"
          width="55"
          :reserve-selection="true">
        </el-table-column>
<!--        <el-table-column fixed label="操作" align="left" class-name="small-padding fixed-width">-->
<!--          <template slot-scope="{row}">-->
<!--           <el-button size="mini" type="primary" @click="addRecord(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 == 3"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            sortable="custom"
            fixed
            show-overflow-tooltip>
            <template slot-scope="{row}">
              <a href="javascript:;" style="color: #20a0ff" @click="getOrderStep(row)">{{ row[column.field] }}
                <span v-if="row.businessKind==3" style="display: inline-block;color: red">(补{{ row.rePrintIndex}})</span>
                <el-image v-if="row.firstOrderFlag == 1" :src="new_badge"></el-image></a>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="column.id == 22"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            fixed
            show-overflow-tooltip>
            <template slot-scope="{row}">
              <a href="javascript:;" style="color: #20a0ff" @click="openDetail(row)">{{ row[column.field] }}</a>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="column.id == 2"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            sortable="custom"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="{row}">
              <el-tag size="mini" v-if="row[column.field] == '待编辑'" type="info">{{ row[column.field] }}</el-tag>
              <el-tag size="mini" v-else-if="row[column.field] == '待审核'" type="success">{{ row[column.field] }}</el-tag>
              <el-tag size="mini" v-else-if="row[column.field] == '待组版'">{{ row[column.field] }}</el-tag>
              <el-tag size="mini" v-else-if="row[column.field] == '已组版'" type="danger">{{ row[column.field] }}</el-tag>
              <el-tag size="mini" v-else-if="row[column.field] == '生产中'" type="danger">{{ row[column.field] }}</el-tag>
              <el-tag size="mini" v-else-if="row[column.field] == '待入库'" type="green">{{ row[column.field] }}</el-tag>
              <el-tag size="mini" v-else-if="row[column.field] == '待发货'" >{{ row[column.field] }}</el-tag>
              <el-tag size="mini" v-else-if="row[column.field] == '已发货'" type="info">{{ row[column.field] }}</el-tag>
              <el-tag size="mini" v-else-if="row[column.field] == '文件待处理'" type="warning">{{ row[column.field] }}</el-tag>
              <el-button size="mini" class="button-new-tag" v-else>{{ row[column.field] }}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="column.id == 9"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="{row}">
              <el-tag size="mini" v-if="row[column.field] == '已开票'" type="danger">{{ row[column.field] }}</el-tag>
              <el-tag size="mini" v-else-if="row[column.field] == '未开票'" type="primary">{{ row[column.field] }}</el-tag>
              <el-tag size="mini" v-else>{{ row[column.field] }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="column.id == 6"
            header-align="center"
            :prop="column.field"
            :label="column.name"
            show-overflow-tooltip
            :width="column.width">
            <template slot-scope="{row}">
              <template v-if="row.orderMessage">
                <el-button size="mini" circle icon="el-icon-plus" @click="openMessage(row)"></el-button>
                <a href="javascript:;" style="color: #20a0ff" @click="openMessage(row)">{{ row.orderMessage }}</a>
              </template>
              <template v-else>
                <el-button size="mini" circle icon="el-icon-plus" @click="openMessage(row)"></el-button>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="column.id == 11"
            header-align="center"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            show-overflow-tooltip
          >
            <template slot-scope="{row}">
              <el-link :href="row.originFileLink" target="_blank" style="color: #20a0ff">{{ row[column.field] }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="column.id == 12"
            align="center"
            header-align="center"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            sortable="custom"
          >
            <template slot-scope="{row}">
            <span v-if="row.createTime">{{ row.createTime | getTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="column.id == 24"
            header-align="center"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            show-overflow-tooltip
          >
            <template slot-scope="{row}">
              <el-tag size="mini" v-if="row.orderMoneyTotal <= row.payMoney" type="success">已收款</el-tag>
              <el-tag size="mini" v-else type="danger">未收款</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="column.id == 1 || column.id == 8|| column.id == 10"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            sortable="custom"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            v-else-if="column.id == 23"
            header-align="center"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            show-overflow-tooltip
          >
            <template slot-scope="{row}">
              <el-link :href="row.attachFileLink" target="_blank" style="color: #20a0ff">{{ row[column.field] }}
              </el-link>
            </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-drawer
      title="开票记录"
      direction="btt"
      :reverse="true"
      :visible.sync="addDrawer"
      size="40%">
      <el-dialog title="选择发票抬头" append-to-body :visible.sync="clientInvoiceInfoVisible">
        <el-dialog
          :close-on-click-modal="false"
          width="480px"
          size="mini"
          title="新增发票抬头"
          :visible.sync="innerVisible"
          append-to-body>
          <el-form  :inline="true" size="mini" label-width="100px">
            <el-form-item label="发票抬头">
              <el-input style="width: 300px" v-model="addInvoice.invoiceTitle" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="税号">
              <el-input style="width: 300px" v-model="addInvoice.taxNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="开户行">
              <el-input style="width: 300px" v-model="addInvoice.bankName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="注册地址">
              <el-input style="width: 300px" v-model="addInvoice.invoiceAddress" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="注册电话">
              <el-input style="width: 300px" v-model="addInvoice.invoicePhone" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="innerVisible = false">取 消</el-button>
            <el-button size="mini"  type="primary" @click="addInvoiceTitle()">确 定</el-button>
          </div>
        </el-dialog>
        <el-button style="margin-top: -20px;margin-bottom: 10px" size="mini" type="primary" @click="addBill">新增发票抬头</el-button>
        <el-table size="mini" border :data="gridData">
          <el-table-column label="操作" width="140px" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-button size="mini" type="primary" @click="chooseClient(row)">选择</el-button>
            </template>
          </el-table-column>
          <el-table-column property="invoiceTitle" show-overflow-tooltip label="发票抬头" width="120"></el-table-column>
          <el-table-column property="taxNum" show-overflow-tooltip label="税号" width="120"></el-table-column>
          <el-table-column property="bankName" show-overflow-tooltip label="开户行" width="120"></el-table-column>
          <el-table-column property="invoiceAddress" show-overflow-tooltip label="注册地址" width="120"></el-table-column>
          <el-table-column property="invoicePhone" show-overflow-tooltip label="注册电话" width="120"></el-table-column>
          <el-table-column align="center" label="状态" class-name="status-col" width="100">
            <template slot-scope="{row}">
              <el-tag v-if="row.voidFlag==1" type="danger">
                禁用中
              </el-tag>
              <el-tag v-else-if="row.voidFlag==0" type="success">
                启用中
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column property="createTime" label="创建时间" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.createTime">{{scope.row.createTime | getTime}}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          style="margin-top: 8px"
          v-show="listData1.total>0"
          :total="listData1.total"
          :page.sync="listData1.page"
          :limit.sync="listData1.pageSize"
          @pagination="getClientInvoiceData"/>
      </el-dialog>
      <el-row style="margin: 0 40px">
        <el-col :span="18">
          <el-form size="mini" inline>
            <el-form-item label="发票抬头">
              <el-input style="width: 400px" v-model="invoiceBill.invoiceTitle" disabled></el-input>
            </el-form-item>
            <el-form-item label="税号">
              <el-input style="width: 500px" v-model="invoiceBill.buyerTaxNum" disabled></el-input>
            </el-form-item>
            <el-form-item label="开户行">
              <el-input style="width: 400px" v-model="invoiceBill.buyerBankName" disabled></el-input>
            </el-form-item>
            <el-form-item label="注册地址">
              <el-input style="width: 400px" v-model="invoiceBill.buyerInvoiceAddress" disabled></el-input>
            </el-form-item>
            <el-form-item label="注册电话">
              <el-input style="width: 200px" v-model="invoiceBill.buyerInvoicePhone" disabled></el-input>
            </el-form-item>
            <el-form-item label="开票说明">
              <el-input style="width: 400px" v-model="invoiceBill.invoiceMemo" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="开票金额">
              <el-input type="number" v-model="invoiceBill.invoiceMoney"></el-input>
            </el-form-item>
          </el-form>
          <el-table
            :data="invoiceList"
            size="mini"
            style="margin-bottom: 20px;margin-left: 10px"
            border>
            <el-table-column
              prop="orderCode"
              label="订单编号">
            </el-table-column>
            <el-table-column
              prop="orderName"
              label="印品名称"></el-table-column>
            <el-table-column
              prop="clientName"
              label="客户名称">
              <template slot-scope="{row}">
                <el-link type="primary" @click="handleChoose(row)">{{row.clientName}}</el-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="orderMoneyTotal"
              label="订单金额"></el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="deleteRecord(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="3" style="margin-left: 20px">
          <span>共计{{ invoiceList.length }}条</span>
          <el-button :disabled="invoiceBtnDisabled" size="mini" type="green" @click="invoiceBtn">开票</el-button>
          <el-button size="mini" type="danger" @click="clearList">清空</el-button>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import {
  getOrderList
} from '@/api/order/orderList.js'
import OrderMessage from '@/components/orderMessage/orderMessage'
import OrderDetail from '@/components/orderDetail/orderDetail'
import { getConfigInfo } from '@/api/system/config'
import OrderStep from '@/components/orderStep/orderStep'
import { invoicePrintOrderRequest } from '@/api/invoice/invoiceOrderList'
import { addClientInvoiceTitle, getClientInvoiceTitle } from '@/api/doc/client/client'
import new_badge from '@/assets/new_badge.gif'

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

const defaultItems = [
  {
    name: '订单编号', id: 3, field: 'orderCode', width: '125px'
  },
  {
    name: '印品名称', id: 22, field: 'orderName', width: '180px'
  },
  {
    name: '产品类型', id: 1, field: 'productName', width: '130px'
  },
  {
    name: '制单时间', id: 12, field: 'createTime', width: '160'
  },
  {
    name: '订单状态', id: 2, field: 'stateMemo', width: ''
  },
  {
    name: '开票状态', id: 9, field: 'invoiceStateMemo', width: ''
  },{
    name: '总金额', id: 17, field: 'orderMoneyTotal', width: '120'
  }, {
    name: '已收金额', id: 18, field: 'payMoney', width: '120'
  }, {
    name: '收款状态', id: 24, field: 'payMoney', width: '58'
  },
  // {
  //   name: '应收单号', id: 4, field: 'financeCode', width: '125px'
  // },
  {
    name: '施工单号', id: 5, field: 'printBillCode', width: '125px'
  }, {
    name: '订单消息', id: 6, field: 'orderMessage', width: '170'
  }, {
    name: '客户编码', id: 7, field: 'clientCode', width: '100'
  }, {
    name: '客户名称', id: 8, field: 'clientName', width: '120'
  },
  {
    name: '文件描述', id: 11, field: 'fileDescription', width: '190px'
  }, {
    name: '制单人', id: 13, field: 'createMan', width: '75'
  },
  {
    name: '订单印量', id: 14, field: 'orderQty', width: '120'
  },
  // {
  //   name: '成品规格', id: 15, field: 'productSize', width: '125px '
  // },
  {
    name: '定金', id: 16, field: 'orderMoneyPre', width: '100'
  },
  // {
  //   name: '提成比例', id: 19, field: '', width: ''
  // },
  {
    name: '平台单号', id: 20, field: 'platformOrderID', width: '220px'
  },
  {
    name: 'p数', id: 21, field: 'pageQty', width: ''
  }, {
    name: '资质文件', id: 23, field: 'attachFile', width: '190px'
  }
]

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 {
      optionsList: [{
        value: 0,
        label: '未付款'
      },{
        value: 1,
        label: '已付款'
      },{
        value: -1,
        label: '全部'
      }],
      invoiceBtnDisabled: false,
      new_badge:new_badge,
      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: {
        keyWord: '',
        orderStateCharge:1
      },
      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: [],

      sMemo: '',
      voidId: '',

      // 开票
      addDrawer: false,
      invoiceList: [],
      invoiceBill: {
        invoiceTitle: '',
        buyerTaxNum: '',
        invoiceMemo: '',
        invoiceMoney: 0,
        itemList: [],
        buyerBankName: '',
        buyerInvoicePhone: '',
        buyerInvoiceAddress: ''
      },
      // 客户开票信息
      clientInvoiceInfoVisible: false,
      idClientRow: '',
      listData1: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      gridData: [], // 发票抬头列表

      // 添加发票抬头
      innerVisible: false,
      addInvoice: {
        invoiceTitle: '',
        taxNum: '',
        bankName: '',
        invoiceAddress: '',
        invoicePhone: ''
      },

      // 验证规则
      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()
    this.getConfig('FileUploadServerIp')
    this.getConfig('OrderShareRoot')
  },
  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()
    },
    orderStateChange(){
      this.listData.page = 1
      this.getList()
    },

    // 获取列表
    getList() {
      const _that = this
      _that.listLoading = true
      if (_that.searchTime == null || _that.searchTime < 0) {
        _that.searchForm.beginTime = ''
        _that.searchForm.endTime = ''
      } else {
        _that.searchForm.beginTime = _that.searchTime[0]
        _that.searchForm.endTime = _that.searchTime[1]
      }
      // if (_that.search.keyWord != '') {
      //   if (_that.searchTime == null || _that.searchTime < 0) {
      //     _that.$message.error('请选择时间')
      //     return
      //   }
      // }
      if (_that.listData.pageSize == 10) {
        _that.sizeType = 'medium'
      } else {
        _that.sizeType = 'mini'
      }
      var params
      if (_that.queryType == 1) {
        params = _that.search
      } else {
        params = _that.searchForm
      }
      var orderBy = _that.orderByString
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        'orderBy': orderBy,
        'page': JSON.stringify(page)
      }
      console.log(data)
      // return;
      getOrderList(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()
    },

    // 刷新变革
    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()
      })
    },

    // 获取配置信息
    getConfig(key) {
      const _that = this
      const data = {
        configKey: key
      }
      // console.log(data);
      getConfigInfo(data).then(res => {
        // console.log(res)
        if (key == 'FileUploadServerIp') {
          _that.configValue1 = res.data.configValue1
        } else if (key == 'OrderShareRoot') {
          _that.configValue2 = res.data.configValue1
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },

    // 订单消息
    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()
      })
    },
    selectable (row, index) {
      if (row.orderMoneyTotal <= row.payMoney) {
        return true
      } else {
        return false
      }
    },
    sumMoney() {
      var _that = this
      _that.invoiceBill.invoiceMoney = 0
      _that.invoiceList.forEach(item => {
        _that.invoiceBill.invoiceMoney = _that.invoiceBill.invoiceMoney + parseInt(item.orderMoneyTotal)
      })
    },

    // 点击行内任何地方选中
    handleClickTableRow(row, event, column) {
      this.$refs.orderTable.toggleRowSelection(row)
    },
    handleSelectionChange(val){
      const _that = this
      _that.invoiceList = val
      _that.sumMoney()
    },
    // 添加记录
    addRecord(row) {
      var _that = this
      _that.addDrawer = true
      var result = _that.invoiceList.some(item => {
        if (item.id == row.id) {
          return true
        }
      })
      if (!result) {
        _that.invoiceList.push(row)
        _that.sumMoney()
      }
    },
    // 删除添加的记录
    deleteRecord(index) {
      this.invoiceList.splice(index, 1)
      this.sumMoney()
    },

    // 选择抬头
    handleChoose(row) {
      const _that = this
      _that.clientInvoiceInfoVisible = true
      _that.idClientRow = row.idClient
      _that.getClientInvoiceData()
    },
    getClientInvoiceData() {
      const _that = this
      _that.listLoading = true
      var page = {
        pageIndex: _that.listData1.page,
        pageSize: _that.listData1.pageSize
      }
      var data = {
        'idClient': _that.idClientRow,
        'page': JSON.stringify(page)
      }
      getClientInvoiceTitle(data).then(response => {
        // console.log("tableData",response);
        _that.gridData = response.data
        _that.listData1.total = response.total
        _that.listLoading = false
      }).catch(err => {
        _that.listLoading = false
      })
    },
    chooseClient(row) {
      const _that = this
      _that.invoiceBill.invoiceTitle = row.invoiceTitle
      _that.invoiceBill.buyerTaxNum = row.taxNum
      _that.invoiceBill.buyerBankName = row.bankName
      _that.invoiceBill.buyerInvoiceAddress = row.invoiceAddress
      _that.invoiceBill.buyerInvoicePhone = row.invoicePhone
      _that.clientInvoiceInfoVisible = false
    },
    addBill() {
      const _that = this
      _that.innerVisible = true
      _that.dialogStatusBill = 1
      _that.addInvoice= {
        invoiceTitle: '',
        taxNum: '',
        bankName: '',
        invoiceAddress: '',
        invoicePhone: ''
      }
    },
    addInvoiceTitle() {
      const _that = this
      if (!_that.addInvoice.invoiceTitle) {
        _that.$message('发票抬头不能为空')
        return
      }
      if (!_that.addInvoice.taxNum) {
        _that.$message('税号不能为空')
        return
      }
      if (!_that.addInvoice.bankName) {
        _that.$message('开户行不能为空')
        return
      }
      if (!_that.addInvoice.invoiceAddress) {
        _that.$message('注册地址不能为空')
        return
      }
      if (!_that.addInvoice.invoicePhone) {
        _that.$message('注册电话不能为空')
        return
      }
      var invoiceTitle = {
        'idClient': _that.idClientRow,
        'invoiceTitle': _that.addInvoice.invoiceTitle,
        'taxNum': _that.addInvoice.taxNum,
        'bankName': _that.addInvoice.bankName,
        'invoiceAddress': _that.addInvoice.invoiceAddress,
        'invoicePhone': _that.addInvoice.invoicePhone
      }
      var data = {
        'invoiceTitle': JSON.stringify(invoiceTitle)
      }

      addClientInvoiceTitle(data).then(response => {
        // console.log("tableData",response);
        _that.$message('增加成功')
        _that.innerVisible = false;
        _that.getClientInvoiceData()
      }).catch(err => {
        _that.listLoading = false
      })
    },

    // 清空
    clearList() {
      this.invoiceList = []
      this.invoiceBill = {
        invoiceTitle: '',
        buyerTaxNum: '',
        invoiceMemo: '',
        invoiceMoney: 0,
        itemList: []
      }
    },
    // 开票
    invoiceBtn() {
      const _that = this;
      if (_that.invoiceBill.invoiceTitle == '') {
        _that.$message.warning('请选择开票抬头')
        return
      }
      _that.invoiceBtnDisabled = true;
      _that.invoiceBill.itemList = []
      _that.invoiceList.forEach(item => {
        var invoiceItem = {
          itemKind: 0,
          idOrder: item.id,
          itemName: item.orderName, // 对应订单名称，
          itemClientName: item.clientName, // 对应订单客户名称，
          itemCode: item.orderCode, // 对应订单编号，
          itemMoney: item.orderMoneyTotal // 订单金额
        }
        _that.invoiceBill.itemList.push(invoiceItem)
      })
      var data = {
        invoiceBill: _that.invoiceBill
      }
      // console.log(data);
      // return
      invoicePrintOrderRequest(data).then(res => {
        // console.log(res)
        if (res.httpCode == 200) {
          _that.$message.success('开票成功')
          _that.invoiceList = []
          _that.addDrawer = false
        }
        _that.invoiceBtnDisabled = false;
      }).catch(err => {
        _that.invoiceBtnDisabled = false;
      })
    }

  }
}
</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>
