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

    <div class="filter-container">
        <el-form :size="sizeType" ref="searchForm" :model="searchForm">
          <el-row :gutter="15">
            <el-col :span="5.5">
              <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="2">
            <el-input :size="sizeType" v-model.trim="search.keyWord" @change="combinedQueryBtn" clearable placeholder="关键字" ></el-input>
            </el-col>
            <el-col :span="2">
              <el-form-item prop="orderCode">
                <el-input placeholder="订单编号" :size="sizeType" @change="combinedQueryBtn" clearable v-model.trim="searchForm.orderCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item prop="clientName">
                <el-input placeholder="客户名称" :size="sizeType" @change="combinedQueryBtn" clearable v-model.trim="searchForm.clientName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item prop="orderName">
                <el-input placeholder="订单名称" :size="sizeType" @change="combinedQueryBtn" clearable v-model.trim="searchForm.orderName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="订单状态" prop="orderState">
                <el-select v-model="searchForm.orderState" style="width: 50%" :size="sizeType" @change="combinedQueryBtn" 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-col :span="3">
              <el-form-item label="收款状态" prop="orderStateCharge">
                <el-select v-model="searchForm.orderStateCharge" style="width: 50%" :size="sizeType" @change="combinedQueryBtn" filterable placeholder="收款状态" value-key="id">
                  <el-option
                    label="全部"
                    value="-1">
                  </el-option>
                  <el-option
                    label="未收款"
                    value="0">
                  </el-option>
                  <el-option
                    label="部分收款"
                    value="2">
                  </el-option>
                  <el-option
                    label="完成收款"
                    value="3">
                  </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
            class="filter-item"
            type="green"
            icon="el-icon-plus"
            :size="sizeType"
            @click="createOrderFun">
            创建订单
          </el-button>
          <el-button
            style="margin-bottom: 10px;margin-right: 10px"
            type="warning"
            :size="sizeType"
            @click="exportList">导出
          </el-button>
        </el-form>
      <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>
        <el-tooltip class="item" effect="dark" content="导出" placement="top">
          <el-button size="mini" circle icon="el-icon-download" @click="exportList"/>
        </el-tooltip>
      </div>
      <el-table
        :data="tableData"
        v-loading="listLoading"
        row-key="id"
        max-height="720"
        border
        stripe
        :size="sizeType"
        style="margin-top: 10px"
        @sort-change="changeSort"
        default-expand-all>
        <el-table-column
          fixed
          label="操作"
          align="left"
          :width="permissionFlag2?'210px':'210px'"
          class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button
              v-show ="row.chargeMoney != 0"
              :title="row.chargeMoney < 0 ? '订单收款(多收)': '订单收款(有欠款)'"
              :class="row.chargeMoney < 0 ? 'buttonPurple': 'buttonRed'"
              @click="orderPay(row)"
              type="green"
              icon="el-icon-money"
              size="mini">
            </el-button>
            <el-button
              v-show="row.chargeMoney == 0"
              :title="'全款已收'"
              :class="'buttonGreen'"
              @click="orderPay(row)"
              type="green"
              icon="el-icon-money"
              size="mini">
            </el-button>
            <el-dropdown
              v-if="row.orderState == 0 || row.orderState == 1"
              size="mini"
              @command="getUploadType1($event,row)"
              trigger="click">
              <el-button size="mini" type="warning" icon="el-icon-upload"></el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">上传图片</el-dropdown-item>
                <el-dropdown-item command="2">上传附件</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button
              type="danger"
              v-if="row.orderState == 0"
              size="mini"
              icon="el-icon-delete"
              @click="voidOrderbtn(row)"
              title="作废订单"></el-button>
            <el-button
              title="编辑"
              v-if="row.orderState == 0"
              @click="editOrderFunc(row)"
              type="primary"
              icon="el-icon-edit"
              size="mini">
            </el-button>
            <el-button v-if="row.orderState == 1" title="退回" size="mini" type="danger" icon = "el-icon-back" class="iconfont" @click="backOrderFunc(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 == 1"
            :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 == 3 || column.id == 2"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            fixed
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            v-else-if="column.id == 15"
            :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>
              <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 === 7 || column.id === 18"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            align="center"
            header-align="center"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            v-else-if="column.id === 19"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            align="center"
            header-align="center"
            show-overflow-tooltip>
            <template slot-scope="{row}">
              <span v-if="row.chargeMoney != 0" :class="row.chargeMoney < 0 ? 'txtGreen': 'txtRed'" >{{row.chargeMoney}}</span>
              <span v-else="row.chargeMoney === 0" >{{row.chargeMoney}}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="column.id === 20 || column.id === 21 || column.id === 22 || column.id === 23"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            align="center"
            header-align="center"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              v-else-if="column.id == 14"
              :label="column.name"
              :prop="column.field"
              :width="column.width"
              align="center"
              header-align="center"
              sortable="custom"
          >
            <template slot-scope="{row}">
              <span v-if="row.createTime">{{ row.createTime | 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>
    <el-dialog title="自定义列" :visible.sync="columnVisible">
      <el-row :gutter="20">
        <el-col :span="10" :offset="14">
          <el-button @click="columnVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveColum">保 存</el-button>
        </el-col>
      </el-row>

      <el-form :model="columnList">
        <el-form-item label="预设名称">
          <el-input v-model="columnList.name"></el-input>
        </el-form-item>
      </el-form>
      <el-row :gutter="20">
        <el-col :span="10">
          <Kanban :key="1" :list="defaultItem" :group="group" header-text="初始列"/>
        </el-col>
        <el-col :span="10">
          <Kanban :key="2" :list="tableItem" :group="group" header-text="选中列"/>
        </el-col>
      </el-row>
    </el-dialog>

    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
    <el-dialog :title="deliveryTitle" :close-on-click-modal="false" :visible.sync="noticeVisible" width="1200px"
               class="addressDialog">
      <delivery-notice ref="deliveryNotice"></delivery-notice>
    </el-dialog>
    <order-step ref="orderStep"></order-step>

    <el-dialog title="作废订单" :visible.sync="voidVisible" width="500">
      <el-form label-width="80px" label-position="right">
        <el-form-item label="作废备注">
          <el-input type="textarea" v-model="sMemo"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="voidVisible = false">取 消</el-button>
        <el-button type="primary" @click="voidOrder">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="上传文件" :visible.sync="pluploadVisible" width="600px">
      <el-form label-width="130px" label-position="right">
        <el-form-item label="上传文件">
          <plupload
            v-if="showUpload"
            :file-list="files"
            :limit="1"
            :upUrl="'apis/upload/orderFile'"
            :upType="2"
            :idOrder="upIdOrder"
            :order-code="upOrderCode"
            biz-type="trainModule"
            accept-files=".cdr,.ai,.ps,.eps,.zip,.rar,.xml,.txt,.pdf,.docx,.doc,.xlsx,.xls,.ppt,.pptx,.mp4,.mp3,.gif,.png,.jpg,.jpeg,.bmp"
            @onChange="handleFileChange"
          />
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="订单详情"
      :append-to-body='true'
      :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="订单收款"
      :close-on-click-modal="false"
      class="orderPayDialog"
      :visible.sync='orderPayVisible'
      width="800px">
      <el-card>
        <div class="infoItem">
          <label>订单编号：</label>
          <span>{{ orderPayInfo.orderInfo.orderCode }}</span>
        </div>
        <div class="infoItem">
          <label>印品名称：</label>
          <span>{{ orderPayInfo.orderInfo.orderName }}</span>
        </div>
        <div class="infoItem">
          <label>客户名称：</label>
          <span>{{ orderPayInfo.orderInfo.clientName }}</span>
        </div>
      </el-card>
      <el-card>
        <div class="infoItem">
          <label>总金额：</label>
          <span>{{ orderPayInfo.orderInfo.printMoneyTotal }}</span>
        </div>
        <div class="infoItem">
          <label>已收金额：</label>
          <span>{{ orderPayInfo.orderInfo.payMoney }}</span>
        </div>
        <div class="infoItem">
          <label>应收金额：</label>
          <span style="color:red">{{ orderPayInfo.orderInfo.chargeMoney }}</span>
        </div>
      </el-card>
      <el-card>
        <el-form label-width="100px">
          <el-form-item label="本次收款金额">
            <el-input type="number" v-model="orderPayInfo.receivableMoney"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="orderPayVisible = false">取 消</el-button>
        <el-button type="primary" @click="orderPaySure" :disabled="orderPayLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  clientPayRequest,
  getOrderList,
  exportOrderList,
  ifPermission,
  voidPrintOrder,
  payPrintOrder
} from '@/api/order/orderList.js'
import {
  backPrintOrder
} from '@/api/order/tobeReviewed'
import {
  getPrintOrderInfo
} from '@/api/order/orderDetail.js'
import Cancledialog from '@/components/Dialog/Cancledialog.vue'
import productInfo from '@/views/productFile/product/productInfo'
import clientInfo from '@/views/doc/client/clientList'
import Kanban from '@/components/Kanban'
import OrderMessage from '@/components/orderMessage/orderMessage'
import plupload from '@/components/plupload/plupload.vue'
import Addressdny from '@/components/Dialog/Addressdny'
import OrderDetail from '@/components/orderDetail/orderDetail'
import {getConfigInfo} from '@/api/system/config'
import OrderStep from '@/components/orderStep/orderStep'
import DeliveryNotice from '@/components/deliveryNotice/deliveryNotice'
import new_badge from '@/assets/new_badge.gif';

const searchForm = {
  orderState: '-1',
  orderStateCharge: '-1',
  orderCode: '',
  clientName: '',
  orderName: '',
  beginTime: '',
  endTime: ''
}
const lifeForm = {
  idOrder: '', // 操作的订单id，
  lifeNodeName: '',
  lifeNodeId: '', // 下拉选择，见下条消息。
  lifeNodeState: 1,
  orderYear: 1,
  referenceMasterId: '', // 自行输入。
  referenceMasterCode: '', // 自行输入，
  referenceSlaveId: '', // 自行输入，
  referenceSlaveCode: '', // 自行输入，
  referenceMasterContent: '', // 自行输入，
  createManName: '', // 自行输入，
  updateManName: '' // 自行输入。
}

const defaultItems = [
  {
    name: '订单编号', id: 1, field: 'orderCode', width: '120'
  },
  {
    name: '印品名称', id: 2, field: 'orderName', width: '100'
  },
  {
    name: '客户名称', id: 3, field: 'clientName', width: '120'
  },
  {
    name: '订单状态', id: 15, field: 'orderState', width: ''
  },
  {
    name: '产品类型', id: 4, field: 'productName', width: '90'
  },
  {
    name: '订单数量', id: 5, field: 'printQty', width: '90'
  },
  {
    name: '单价', id: 6, field: 'printPrice', width: '80'
  },
  {
    name: '订单金额', id: 7, field: 'printMoneyTotal', width: '80'
  },
  {
    name: '已收金额', id: 18, field: 'payMoney', width: '80'
  },
  {
    name: '欠款金额', id: 19, field: 'chargeMoney', width: '80'
  },
  {
    name: '外发金额', id: 20, field: 'outMoneyTotal', width: '80'
  },
  {
    name: '外发运费', id: 21, field: 'outSendMoney', width: '80'
  },
  {
    name: '毛利', id: 22, field: 'orderGrossProfit', width: '80'
  },
  {
    name: '毛利率(%)', id: 23, field: 'orderGrossProfitRate', width: '80'
  },
  {
    name: '联数', id: 8, field: 'receiptsCount', width: '100'
  },
  {
    name: '材料类型', id: 9, field: 'paperName', width: '100'
  },
  {
    name: '每本页数', id: 10, field: 'pageCount', width: '100'
  },
  {
    name: '印刷颜色', id: 11, field: 'printColor', width: '100'
  },
  // {
  //   name: '生产工艺', id: 12, field: 'printAllCoverFlag', width: '100'
  // },
  {
    name: '送货地址', id: 13, field: 'sendAddress', width: '100'
  },
  {
    name: '制单时间', id: 14, field: 'createTime', width: '160'
  },
  {
    name: '原图文件', id: 16, field: 'printFileName', width: '100px'
  },
  {
    name: '附件', id: 17, field: 'attachFileName', 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 {
  name: 'orderList',
  components: {
    DeliveryNotice,
    OrderStep,
    OrderDetail,
    OrderMessage,
    Cancledialog,
    Kanban,
    productInfo,
    clientInfo,
    plupload,
    Addressdny
  },
  beforeRouteEnter(to, from, next) {
    // next()
    next(vm => {
      // beforeRouteEnter不能通过this访问组件实例，但是可以通过 vm 访问组件实例
      if (to.path == "/order/orderList") {
        // vm.getTableInfo();
        // vm.checkPermission();
        vm.checkPermission('order:cycle:admin')
        vm.checkPermission('order:orderComplete:admin')
        vm.getList()
        vm.getConfig('FileUploadServerIp')
        vm.getConfig('OrderShareRoot')
        vm.getConfig('OrderUpdateWebUrl')
      }

    })
  },
  data() {
    return {
      deliveryTitle:"",
      sizeType: 'mini',
      new_badge: new_badge,
      permissionFlag1: false, // 权限标识
      permissionFlag2: false, // 权限标识
      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: ''
      },
      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
      },

      confirmdialog: false,
      listLoading: false,
      tableData: [],

      createInnerVisible: false,
      innerTitle: '',
      innerType: 1,
      stepList: [],

      sMemo: '',
      voidId: '',

      pluploadVisible: false,
      showUpload: true,
      files: [],
      upIdOrder: '',
      upOrderCode: '',

      // 发货信息
      sendAddressList: [],
      sendAddressListBySend: [],
      sendAddressListByDisable: [],
      // 省市区选项
      addressOption: [],
      // 发货方式
      sendKinds: [],

      activeTabName: 'first',
      // deliveryColumns: Object.assign([], deliveryItems),

      // 订单收款
      orderPayVisible: false,
      orderPayInfo: {
        orderInfo: {},
        orderReceivableList: [],
        receivableMoney: ''
      },
      orderPayLoading: false,
      // 支付单
      paymentBillVisible: false,
      paymentBillList: [],
      orderPayListData: {
        total: 0,
        page: 1,
        pageSize: 10
      },

      // 客户预存
      clientPayVisible: false,
      clientPayInfo: {
        idClient: '',
        receivableMoney: '',
        clientName: ''
      },

      idOrderIndex: 0,
      configValue1: '',
      configValue2: '',
      configValue3: '',
      // 验证规则
      rules: {
        productName: [{required: true, trigger: 'blur', message: '请选择产品类型'}],
        clientName: [{required: true, trigger: 'blur', message: '请选择客户'}]
      },
      clientPayRules: {
        clientName: [{required: true, trigger: 'blur', message: '请选择客户'}],
        receivableMoney: [{required: true, trigger: 'blur', message: '请输入预存金额'}]
      }
    }
  },
  watch: {
    defaultColumnName(val) {
      columnStorage.save(val)
    }
    // memoDrawer(val) {
    //   // console.log(val)
    //   if (!val) {
    //     this.getList()
    //   }
    // }
  },
  mounted() {

  },
  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()
    },
    // 判断权限
    checkPermission(permissionStr) {
      const _that = this
      var data = {
        permission: permissionStr
      }
      ifPermission(data).then(res => {
        // console.log(res)
        if (res.data == 1) {
          if (permissionStr == 'order:cycle:admin') {
            _that.permissionFlag1 = true
          } else if (permissionStr == 'order:orderComplete:admin') {
            _that.permissionFlag2 = true
          }
        }
      })
    },

    // 获取列表
    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
      })
    },

    exportList() {
      const _that = this
      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]
      }
      var params
      if (_that.queryType == 1) {
        params = _that.search
      } else {
        params = _that.searchForm
      }
      var orderBy = _that.orderByString
      var data = {
        'params': JSON.stringify(params),
        'orderBy': orderBy
      }
      // console.log(data)
      // return;
      exportOrderList(data).then(response => {
        _that.$message.success('导出成功，请稍候前至系统管理-我的任务中进行查看和下载')
      }).catch(err => {
        _that.$message.error(err)
      })
    },

    // 获取脚印
    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 = []
    },

    // 创建订单
    createOrderFun() {
      var _that = this
      _that.$router.push({
        // name: 'CreateOrder',
        path: '/order/createOrder/' + Date.parse(new Date()),
        params: {
          id: Date.parse(new Date()),
          orderCategory: 1,
          editType:0
        },
        query: {
          orderCategory: 1,
          editType: 0
        }
      })
    },
    editOrderFunc(row) {
      var _that = this
      _that.$router.push({
        // name: 'CreateOrder',
        path: '/order/editOrder/' + row.id,
        query: {
          id: row.id,
          orderCode: row.orderCode,
          orderCategory: 2,
          editType:1
        }
      })
    },
    backOrderFunc(row) {
      const _that = this
      _that.$confirm('确认订单退回到待审核？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        var order = {
          'id': row.id,
          'orderState' : 0
        }
        var data = {
          'order': JSON.stringify(order)
        }

        backPrintOrder(data).then(res => {
          // console.log(res);
          if (res.httpCode == 200) {
            _that.$message({
              message: '退回成功',
              type: 'success'
            })
            _that.getList()
          } else {
            _that.$message.error(res.msg)
          }
        }).catch(err => {
          _that.$message.error(err)
        })
      }).catch(() => {

      })
    },
    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
        } else if (key == 'OrderUpdateWebUrl') {
          _that.configValue3 = res.data.configValue1
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    getUploadType1($event, row) {
      const _that = this
      if ($event == 1) {
        _that.openFileDialog(1, row)
      } else if ($event == 2) {
        _that.openFileDialog(2, row)
      }
    },

    // 上传文件
    openFileDialog($event, row) {
      var _that = this
      if ($event == 1) {
        // window.open('/#/upload?id=' + row.id + '&orderCode=' + row.orderCode + '&orderName=' + row.orderName + '&type=1', '_blank')
        window.open(_that.configValue3 + '?id=' + row.id + '&orderCode=' + row.orderCode + '&orderName=' + row.orderName + '&type=1&idUser=' + _that.$store.state.user.user.id + '&supplierCode=' + _that.$store.state.user.indexInfo.supplierCode + '&dataSourceId=' + _that.$store.state.user.indexInfo.dataSourceId, '_blank')
      } else if ($event == 2) {
        // window.open('/#/upload?id=' + row.id + '&orderCode=' + row.orderCode + '&orderName=' + row.orderName + '&type=4', '_blank')
        window.open(_that.configValue3 + '?id=' + row.id + '&orderCode=' + row.orderCode + '&orderName=' + row.orderName + '&type=2&idUser=' + _that.$store.state.user.user.id + '&supplierCode=' + _that.$store.state.user.indexInfo.supplierCode + '&dataSourceId=' + _that.$store.state.user.indexInfo.dataSourceId, '_blank')
      }
    },
    handleFileChange(fileList) {
      var _that = this
      // console.log('handleFileChange', fileList)
      _that.pluploadVisible = false
      setTimeout(() => {
        _that.tableRefresh()
      }, 1000)
    },

    // 作废订单
    voidOrderbtn(row) {
      var _that = this
      _that.voidVisible = true
      _that.voidId = row.id
      _that.versionCode = row.versionCode
    },
    voidOrder() {
      var _that = this
      var order = {
        'id': _that.voidId,
        'voidFlag': 1,
        'sMemo': _that.sMemo,
        'versionCode': _that.versionCode
      }
      var data = {
        'order': JSON.stringify(order)
      }

      voidPrintOrder(data).then(response => {
        // console.log(response)
        if (response.httpCode == 200) {
          _that.$message({
            message: '作废成功',
            type: 'success'
          })
          _that.voidVisible = false
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 自定义列
    diyColumn() {
      var _that = this
      _that.defaultItem = Object.assign([], defaultItems)
      _that.columnVisible = true
      _that.tableItem = []
      _that.columnList = {
        name: '',
        columnItem: []
      }
    },

    // 保存自定义列
    saveColum() {
      var _that = this
      _that.columnList.columnItem = _that.tableItem
      _that.columnVisible = false
      if (_that.columnList.columnItem.length != 0) {
        _that.defaultColumnName.push(
          {
            id: columnStorage.uid++,
            columnList: _that.columnList
          }
        )
      }
      _that.columnList = {
        name: '',
        columnItem: []
      }
    },

    selectedColumn(val) {
      // console.log(val)
      var _that = this
      if (val !== '') {
        _that.defaultColumnName.forEach((item) => {
          if (val == item.id) {
            _that.columnnames = item.columnList.columnItem
          }
        })
      } else {
        _that.columnnames = Object.assign([], defaultItems)
      }
    },
    // 强制完成
    forceComplete(id,versionCode,orderYear) {
      var _that = this
      var params = {
        printOrder: {
          id: id,
          versionCode:versionCode,
          orderYear: orderYear
        }
      }
      var url = '/order/v1/forceCompleteOrder'
      _that.$refs.confirmDialog.updataClick(params, url)
    },

    orderPay(row) {
      const _that = this
      _that.orderPayVisible = true
      // _that.orderPayInfo.orderInfo = row
      var data = {
        idOrder: row.id
      }
      getPrintOrderInfo(data).then(res => {
        console.log(res)
        _that.orderPayInfo.orderInfo = res.data
        _that.orderPayInfo.receivableMoney = ''
      })
      // getOrderReceivableByOrder(data).then(res => {
      //   // console.log(res)
      //   _that.orderPayInfo.orderReceivableList = res.data
      //   _that.orderPayInfo.receivableMoney = ''
      // })

    },
    // 收款确认
    orderPaySure() {
      const _that = this

      if (_that.orderPayInfo.receivableMoney == '' || _that.orderPayInfo.receivableMoney == undefined || _that.orderPayInfo.receivableMoney == null) {
        _that.$message.warning('请填写收款金额')
        return
      }

      _that.orderPayLoading = true
      var order = {
        'id': _that.orderPayInfo.orderInfo.id,
        'payMoney': _that.orderPayInfo.receivableMoney
      }
      var  data = JSON.stringify(order)
      payPrintOrder(data).then(res => {
        const h = this.$createElement;
        if (res.httpCode == 200) {
          _that.orderPayVisible = false
          _that.orderPayLoading = false
          this.tableRefresh();
          _that.$notify({
            title: '提示',
            type: 'success',
            message: h('i', { style: 'color: teal'}, '收款成功'),
            duration: 30000,
            dangerouslyUseHTMLString: true
          })
        }
      }).catch(err => {
        _that.orderPayLoading = false
        // _that.$message.error(err)
      })
    },

    // 批量下单

    // 客户预存
    openClientPay() {
      const _that = this
      _that.clientPayVisible = true
      _that.clientPayInfo = {
        idClient: '',
        receivableMoney: '',
        clientName: ''
      }
    },
    chooseClientByPay(data) {
      this.createInnerVisible = false
      // console.log(data);
      this.clientPayInfo.clientName = data.clientName
      this.clientPayInfo.idClient = data.id
    },
    clientPayBtn() {
      const _that = this
      _that.$refs.clientPayInfo.validate((valid) => {
        if (valid) {
          var data = _that.clientPayInfo
          clientPayRequest(data).then(res => {
            console.log(res);
            if (res.httpCode == 200) {
              _that.clientPayVisible = false
              _that.$notify({
                title: '提示',
                message: '<img src="' + res.data.qrCodeImageUrl + '"width="100px" height="100px" onclick="window.open(this.src)">',
                duration: 0,
                dangerouslyUseHTMLString: true
              })
            }
          })
        }
      })
    }
  }
}
</script>
<style>
/*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
.el-drawer__body {
  overflow: auto;
}

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

.orderDetailDialog .el-dialog__body {
  padding-top: 0;
}

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

<style lang="scss" scoped>
::v-deep .v-modal{
  z-index: -1 !important;
}
.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;
  }
}

::v-deep input::-webkit-outer-spin-button, ::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

::v-deep input[type = 'number'] {
  -moz-appearance: textfield !important;
}

::v-deep .el-button + .el-button {
  margin-left: 0;
}
.buttonPurple{
  color: white;
  background-color: #c640dc;
  border-color: #c640dc;
}

.buttonGreen{
  color: white;
  background-color: #42b983;
  border-color: #42b983;
}
.buttonRed{
  color: white;
  background-color: #e53232;
  border-color: #ee1333;
}
.txtGreen{
  color: #c640dc;
}

.txtRed{
  color: #e53232;
}
</style>
