<!--
  @description:添加订单
  @Modifier：qk
  @routerPath: /reconciliation
  @date：  2019/12/27-14:48
-->
<template>
  <div>
    <el-dialog
      :visible.sync="childrenInvoice.dialog"
      :close-on-click-modal="false"
      title="添加订单"
      modal-append-to-body
      append-to-body
      width="1010px"
      custom-class="shop_mall_dialog"
    >
      <div class="shopmall-page-reconciliation">
        <div class="shopmall-page-left">
          <p>
            <table>订单编号</table>
            <el-input v-model="value" size="small" style="width:40%" placeholder="" />
          </p>
          <p>
            <table>订单创建时间</table>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width:80%;"
              value-format="timestamp"
            />
          </p>
        </div>
        <div class="shopmall-page-right">
          <el-button type="primary" @click="searchList">
            搜索
          </el-button>
          <el-button @click="resetList">
            重置
          </el-button>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        height="350px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="序号"
          type="index"
        />
        <el-table-column
          label="订单编号"
          width="80"
        >
          <template slot-scope="scope">
            {{ scope.row.supplierOrderNo }}
          </template>
        </el-table-column>
        <el-table-column
          prop="orderNo"
          label="客户订单编号"
          width="120"
        />
        <el-table-column
          prop="taxpayerIdentificationNumber"
          label="商品数量"
          width="120"
        />
        <el-table-column
          prop="totalAmount"
          width="120"
          label="订单总额(元)"
        />
        <el-table-column
          prop="orderCreateTime"
          label="订单创建时间"
          width="120"
        />
        <el-table-column
          prop="orderCompleteTime"
          label="订单完成时间"
          width="120"
        />
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">
              订单详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="pagination shopmall-pagination p16" style="clear:both;margin:20px 0">
        <div class="page-number fl">
          共{{ Math.ceil(total / infoForm.pageSize) }}页
          {{ total }}条
        </div>
        <el-pagination
          :current-page="infoForm.pageNo"
          :total="total"
          :page-sizes="[12,24,48,96]"
          class="fr"
          background
          layout="prev, pager, next, sizes"
          @current-change="pickHandle"
          @size-change="handleSizeChange"
        />
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doneAddClickBtn">确 定</el-button>
        <el-button @click="childrenInvoice.dialog = false">取 消</el-button>
      </span>
    </el-dialog>
    <reconCiliaationAdds :data="childenData" />
  </div>
</template>

<script>
import reconCiliaationAdds from './reconCiliaation-add'
import { getOrdersOfStatement, addOrderToReconciliation } from '@/api/shoppingmall/order'
export default {
  name: 'ConstrastAdd',
  components: {
    reconCiliaationAdds
  },
  props: {
    childrenInvoice: {
      type: Object,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      fincIdata: {
        statementId: this.$route.query.id,
        ids: []
      },
      value: '',
      value1: '',
      infoForm: {
        statementId: this.$route.query.id,
        supplier: this.$route.query.name,
        endDate: null,
        orderNo: null,
        pageNo: 1,
        pageSize: 10,
        startDate: null
      },
      tableData: [
      ],
      multipleSelection: [],
      total: 0,
      childenData: {
        dialog: false
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    handleClick(item) {
      if (item.status === '00') {
        this.childenData = {
          dialog: true,
          id: item.id
        }
      } else {
        this.childenData = {
          dialog: true,
          id: item.id,
          status: item.status
        }
      }
    },
    initData() {
      getOrdersOfStatement(this.infoForm).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    doneAddClickBtn() {
      this.childrenInvoice.dialog = false
      addOrderToReconciliation(this.fincIdata).then(res => {
        this.$message({
          type: 'success',
          message: '添加订单成功!'
        })
      })
      this.$emit('watchs', this.childrenInvoice)
    },
    handleSelectionChange(val) {
      const obj = []
      val.forEach(ele => {
        obj.push(ele.id)
      })
      this.fincIdata.ids = obj
    },
    searchList() {
      if (this.value1) {
        this.infoForm.startDate = this.value1[0]
        this.infoForm.endDate = this.value1[1]
      }
      if (this.value) {
        this.infoForm.orderNo = this.value
      }
      this.initData()
    },
    resetList() {
      this.infoForm.endDate = null
      this.infoForm.orderNo = null
      this.infoForm.pageNo = 1
      this.infoForm.pageSize = 10
      this.infoForm.startDate = null
      this.value = ''
      this.value1 = ''
      this.initData()
    },
    pickHandle(val) {
      this.infoForm.pageNo = val
      this.initData()
    },
    handleSizeChange(val) {
      this.infoForm.pageSize = val
      this.initData()
    }
  }
}
</script>

<style scoped lang="less">
.shopmall-page-reconciliation{
   width: 100%;
   height: 60px;
   padding:0 15px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom:1px solid rgba(238, 238, 238, 1);
}
.shopmall-page-left {
    display: flex;
    align-items: center;
    width: 90%;
    p{
        display: flex;
        align-items: center;
        table{
            margin-right:10px;
        }
    }
}
.shopmall-page-right{
    width: 10%;
    display: flex;
    justify-content: flex-end;
}
</style>

