<template>
    <div>
        <div class="mrg-b">
            <!--<drop-filter :columns="wholeLabels" :storeKey="storeKey"  :storeLabels="storeLables"  @doFilter="labels => storeLables = labels"></drop-filter>-->
            <el-table
                ref="table"
                stripe
                border
                :max-height="tableMaxHeight"
                :data="tableData"
                :filteredLabels="storeLables"
                @selection-change='handleSelectChange'
                @row-click="toCheck">
                <table-column
                type="selection"
                fixed
                align="center">
                </table-column>
                <table-column
                label="出库单号"
                prop="soNo">
                <template slot-scope="scope">
                  <span class="blue" @click.stop="handleOpenDetail(scope.row.soNo, tabIndex)">{{scope.row.soNo}}</span>
                </template>
                </table-column>
                <table-column
                    label="状态">
                    <template slot-scope="scope">
                        <p>{{ $utils.keyMatcher(scope.row.status, $keys.stockOut.status).name }}</p>
                        <p>{{ $utils.keyMatcher(scope.row.auditStatus, $keys.stockOut.auditStatus).name }}</p>
                    </template>
                </table-column>
                <table-column
                    label="类型">
                    <template slot-scope="scope">
                        {{ $utils.keyMatcher(scope.row.soType, $keys.stockOut.soType).name }}
                    </template>
                </table-column>
                <table-column
                label="货主"
                prop="ownerName">
                </table-column>
                <table-column
                label="承运商"
                prop="carrierName">
                </table-column>
                <table-column
                label="供应商"
                prop="supplierName">
                </table-column>
                <table-column
                label="收货人"
                prop="consigneeName">
                </table-column>
                <table-column
                label="订单时间"
                prop="orderTime">
                </table-column>
                <table-column
                label="物流单号"
                prop="logisticNo">
                </table-column>
                <table-column
                label="订货数"
                prop="sumQtySoEa">
                </table-column>
                <table-column
                  label="订货重量"
                  prop="sumSoWeight">
                </table-column>
                <table-column
                    label="预计发货时间">
                    <template slot-scope="scope">
                        <p>{{scope.row.fmEtd}}</p>
                        <p>{{scope.row.toEtd}}</p>
                    </template>
                </table-column>
                <table-column
                label="创建人"
                prop="creatorLoginName">
                </table-column>
                <table-column
                    label="操作"
                    width="150"
                    fixed="right">
                    <template slot-scope="scope">
                      <el-tooltip content="附件管理" placement="top">
                        <el-badge style="margin-right: 20px;" :value="scope.row.fileNumber">
                          <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-tickets"
                            plain
                            circle
                            @click.stop="toFile(scope.row)"
                          ></el-button>
                        </el-badge>
                      </el-tooltip>
                       <el-tooltip content="编辑" placement="top" v-if="tabIndex==='0'">
                        <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-edit"
                        plain
                        circle
                        @click.stop="handleEdit(scope.$index,scope.row)"
                        ></el-button></el-tooltip>
                         <el-tooltip content="删除" placement="top" v-if="tabIndex==='0'">
                          <el-button
                          size="mini"
                          type="danger"
                          icon="el-icon-delete"
                          plain
                          circle
                          @click.stop="handleDelete(scope.$index,scope.row)"
                        ></el-button></el-tooltip>
                        <el-tooltip content="分配" placement="top" v-if="tabIndex==='1'">
                          <el-button
                          size="mini"
                          type="success"
                          icon="el-icon-check"
                          plain
                          circle
                          @click.stop="handleAllot(scope.$index,scope.row)"
                        ></el-button></el-tooltip>
                        <el-tooltip content="关闭订单" placement="top" v-if="tabIndex==='4'">
                          <el-button
                          size="mini"
                          type="danger"
                          icon="el-icon-close"
                          plain
                          circle
                          @click.stop="handleOrderClose(scope.$index,scope.row)"
                        ></el-button></el-tooltip>

                    </template>
                </table-column>
            </el-table>
        </div>
        <div>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

    </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('framework')
export default {
  data () {
    return {
      headData: {},
      carData: {},
      goodsData: [],
      storeKey: 'sendOrder',
      queryData: []
    }
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    pageSize: Number,
    currentPage: Number,
    total: Number,
    // todoBool: Boolean,
    type: String,
    tabIndex: String
  },
  computed: {
    ...mapState(['newColumns'])
  },
  mounted () {
  },
  methods: {

    // 点击表格行
    toCheck (row) {
      this.$refs.table.toggleRowSelection(row)
    },

    // 每页显示条数
    handleSizeChange (pageSize) {
    // 这里不能给子组件赋值，通过props传入
    //   this.pageSize = pageSize
      console.log(pageSize)
      const query = {
        'page.limitCount': pageSize
      }
      this.$emit('getList', query, this.type)
    },

    // 当前页码
    handleCurrentChange (currentPage) {
    // 这里不能给子组件赋值，通过props传入
    //   this.currentPage = currentPage
      console.log(currentPage)
      const query = {
        'page.currentPage': currentPage
      }
      this.$emit('getList', query, this.type)
    },

    getData (url, param) {
      return this.$https.post(url, param)
    },

    // 编辑
    handleEdit (index, row) {
      const headUrl = this.$API.stockOut.sendOrder.headList
      const goodsUrl = this.$API.stockOut.sendOrder.goodsList
      const queryUrl = this.$API.stockOut.sendOrder.getQueryAll
      const car = this.$API.stockOut.sendOrder.carList
      const queryaram = { soNo: row.soNo, soNos: row.soNo, 'page.currentPage': 1, 'page.limitCount': 10 }
      const param = { soNo: row.soNo, 'page.currentPage': 1, 'page.limitCount': 10 }

      this.$https.all([this.getData(headUrl, param), this.getData(goodsUrl, param), this.getData(queryUrl, queryaram), this.getData(car, param)]).then(res => {
        this.headData = res[0]
        this.goodsData = res[1].rows
        this.queryData = res[2].rows
        this.carData = res[3]
        this.$emit('handleOpenEditForm', 'edit', this.headData, this.goodsData, this.carData, this.queryData)
      })
    },

    // 删除当前行数据
    handleDelete (index, row) {
      const url = this.$API.stockOut.sendOrder.delList
      const param = {
        soNos: row.soNo
      }
      this.$confirm('是否删除此条数据？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$https.post(url, param).then(res => {
          this.$emit('getList')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    handleOpenDetail (id) {
      const headUrl = this.$API.stockOut.sendOrder.getDetailHead
      const goodsUrl = this.$API.stockOut.sendOrder.getDetailGoods
      const queryUrl = this.$API.stockOut.sendOrder.getQueryAll
      const car = this.$API.stockOut.sendOrder.carList
      const param = { soNo: id, 'page.currentPage': 1, 'page.limitCount': 10 }
      const queryaram = { soNo: id, soNos: id, 'page.currentPage': 1, 'page.limitCount': 10 }
      this.$https.all([this.getData(headUrl, param), this.getData(goodsUrl, param), this.getData(queryUrl, queryaram), this.getData(car, param)]).then(res => {
        const headData = res[0]
        const goodsData = res[1].rows
        const queryData = res[2].rows
        const carData = res[3]
        this.$emit('handleOpenDetail', 'detail', headData, goodsData, queryData, carData)
      })
    },

    // 分配
    handleAllot (index, row) {
      const url = this.$API.stockOut.sendOrder.getAllot
      const param = { soNos: row.soNo }

      this.$confirm('是否执行分配操作？', '分配', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$https.post(url, param).then(res => {
          if (res.success) {
            this.$emit('getList', {}, this.type)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    // 订单关闭
    handleOrderClose (index, row) {
      const url = this.$API.stockOut.sendOrder.getOrderClose
      const param = { soNos: row.soNo }
      this.$confirm('是否执行关闭订单操作？', '关闭订单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$https.post(url, param).then(res => {
          if (res.success) {
            this.$emit('getList', {}, this.type)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    // checkbox勾选,存储id
    handleSelectChange (selection) {
      const selectedIds = selection.map(item => item.soNo).join(',')
      this.$emit('handleSelectChange', selectedIds, selection)
    },
    // 附件管理
    toFile (row) {
      const config = {
        orderNo: row.soNo, // 组件需要的当前选择的业务单号
      }
      this.$upload(config)
    },
  }

}
</script>
<style lang="scss" scoped>
    .mrg-b{
        margin-bottom: 20px;
    }
    .mrg-l{
        margin-left:10px;
    }
     .blue{
      cursor:pointer;
      color:#0682ea
    }
</style>
