<!-- 对账单 -->
<template>
  <div class="main-container order-mc-bg">
    <div class="sale-container">
      <!-- 顶部按钮组 -->
      <!-- <toolBtn @actionhandel="actionhandel" :btnType="btnType"></toolBtn> -->
      <!-- 列表 -->
      <div class="sale-page-body">
        <!-- 表头 -->
        <div class="sale-page-table-header" ref="getSaleTableHeader">
          <el-form :inline="true">
            <el-row class="form-row1">
              <el-col :span="20">
                <el-row :gutter="2">
                  <el-col :span="4">
                    <el-form-item class="Iisshow" label="采购组织">
                      <el-input class="f-1+2" placeholder="请输入" v-model="search.producePickNo"></el-input>
                      <div :data-clipboard-text="search.producePickNo" @click="saleOrderCopy" class="copyBtn">
                        <i class="el-icon-document-copy" />
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="供应商">
                      <el-select clearable placeholder="请选择" v-model="search.documentStatus">
                        <el-option :key="key + index" :label="value" :value="key" class="f-12"
                          v-for="(value, key, index) in documentStatuslist"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="对账月份">
                      <el-select clearable filterable placeholder="请选择部门" v-model="search.workShopId">
                        <el-option class="f_12" label="全部" value="0"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="状态">
                      <el-select clearable filterable placeholder="请选择状态" v-model="search.product">
                        <el-option class="f_12" label="全部" value="0"></el-option>
                      </el-select>
                      <!-- <el-input v-model.trim="search.product" placeholder class="f-12"></el-input> -->
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4" class="form-row-lastcol">
                <el-row :gutter="2">
                  <el-col :span="24">
                    <el-form-item class="form-group1">
                      <el-button @click="searchData" size="small" type="primary">搜索</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 列表 -->
        <div class="sale-page-table-body">
          <el-table :data="tableData" :header-cell-class-name="headerRigthMethod" :header-cell-style="headerBg"
            :max-height="heightNum" @row-click="openDetails" @row-dblclick="openDetailsDB"
            @selection-change="handleSelectionChange" border class="table-box" element-loading-spinner="el-icon-loading"
            element-loading-text="加载中，请稍后..." ref="tableInfoRef" style="width: 100%;font-size:12px"
            v-loading="isLoading">
            <el-table-column align="left" fixed type="selection" />
            <el-table-column align="left" label="对账月份" prop="monthNo" />
            <el-table-column align="left" label="对账单号" prop="sheetNo">
              <template #default="scope">
                <span style="color: #4178D5">{{ scope.row.sheetNo }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="采购组织" prop="purOrgName" />
            <el-table-column align="left" label="供应商名称" prop="supplierName" />
            <el-table-column align="right" label="对账数量" prop="payNum" />
            <!-- <el-table-column prop="stockLoc" label="仓位" align="left" width="160" /> -->
            <el-table-column align="right" label="对账金额" prop="payAmount" />
            <el-table-column align="center" label="状态" prop="sheetSta" width="280" />
          </el-table>
        </div>
      </div>
      <!-- 底部 -->
      <div class="sale-page-footer">
        <div class="footer-right">
          <el-pagination :currentPage="search.pageNo" :page-size="search.pageSize" :page-sizes="[50, 100, 150]"
            :total="orderTotal" @current-change="handleCurrentChange" @size-change="handleSizeChange"
            layout="slot,sizes, total,prev,pager, next,jumper" popper-class="每页显示">
            <span class="total-select-item">
              共选中
              <text style="text-align:center;color:#4178D5;padding:0 1px;">{{ selectItem }}</text>行
            </span>
          </el-pagination>
        </div>
        <div class="footer-pagination-total-page">
          <span>共{{ Math.ceil(orderTotal / search.pageSize) }}页</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { orderCopy } from '@/utils/takeMethods'
import { transformTimestamp } from '@/utils/pubulic.js'
export default {
  name: 'SupplierCoordinationAccountOrder',
  data () {
    return {
      // 自定义条件 订单类型 单据状态 供应组织 是否211 是否赠品 关闭状态
      statusForm: {
        customCondition: []
      },
      // @ 事件 methods
      // : 属性 data()
      isLoading: false,
      selectItem: 0,
      documentStatuslist: [],
      dialogCX: false,
      orderTotal: 0,
      tableData: [],
      btnType: [],

      productDeptList: [], // 生产部门
      Time1: [],
      dialogVisible: false, // 操作弹框显示
      dialogxt: false, // 选择下推单据弹框显示
      // 搜索条件
      search: {
        orgId: '', // 组织id
        billNo: '', // 销售订单号
        purOrgId: '', // 采购组织
        supplierId: '', // 供应商
        monethNo: '', // 对账月份
        status: '', // 状态
        pageNo: 1, // 页码
        pageSize: 50 // 页数
      }
    }
  },
  computed: {
    ...mapState({
      userInfo: state => (state && state.user && state.user.userInfo ? state.user.userInfo : {}),
      orgId: state => (state && state.org && state.org.orgId ? state.org.orgId : null),
      orgIdArr: state => (state ? state.user.orgIdArr : null)
    }),
    transformTime: function () {
      // 转换时间为 年-月-日
      return function (value) {
        return transformTimestamp(value)
      }
    }
  },
  created () {
    this.customerSel1 = 1
    this.windowHeight = document.documentElement.clientHeight
    this.heightNum = this.windowHeight - (40 + 30 + 54 + 34 + 34 + 34 + 16 + 16)
    this.search.orgId = this.userInfo.identity === 2 ? 0 : this.orgId
    this.getProductdept()
    this.Init()
  },
  activated () {
    // 键盘监听事件
    document.addEventListener('keyup', this.keyupFn, false)
  },
  deactivated () {
    document.removeEventListener('keyup', this.keyupFn, false)
  },
  watch: {
    orgId (val) {
      if (val) {
        this.search.orgId = this.userInfo.identity === 2 ? 0 : val
        this.Init()
      }
    },
    customerSel1 (val, oldVal) {
      this.setselfChangeValue('customerSel1', 'customerSel2', 'customerSel13', 'z', 'customerSel1', 'compKey3')
    },
    customerSel2 (val, oldVal) {
      this.setselfChangeValue('customerSel2', 'customerSel1', 'customerSel13', 'y', 'customerSel2', 'compKey2')
    },
    customerSel3 (val, oldVal) {
      this.setselfChangeValue('customerSel3', 'customerSel1', 'customerSel12', 'z', 'customerSel2', 'compKey3')
    }
  },
  methods: {
    keyupFn (e) {
      if (e.keyCode === 13) {
        // enter见搜索
        this.searchData()
      }
    },
    // 初始化
    submitCX () { },
    Init () {
      this.getaccountOrder()
    },
    actionhandel () { },
    openDetails (row, column) {
      // 详情跳转
      if (column.property == 'sheetNo') {
        this.$router.push({
          path: '/supplier/coordination/addaccountOrder',
          query: { type: 'details', id: row.details, status: row.documentStatus, order: row.name, sheetNo: row.sheetNo }
        })
      }
    },
    // 订单号 复制按钮
    saleOrderCopy () {
      orderCopy()
    },
    // 双击计入
    openDetailsDB (row, column) {
      let typeStr1 = row.documentStatus === '重新审核' || row.documentStatus === '创建' ? 'edit' : 'see'
      this.$router.push({
        path: '/supplier/coordination/addaccountOrder',
        query: { type: typeStr1, productId: row.id, sheetNo: row.sheetNo }
      })
    },

    // 获取部门数据
    getProductdept () {
      this.$http.post('SysConfig/GetDept/' + this.orgId).then(res => {
        if (res.status === 200) {
          this.productDeptList = res.data
        }
      })
    },
    //获取对账订单数据
    getaccountOrder () {
      this.isLoading = true
      this.$http.post('Pament/getlist', this.search).then(res => {
        if (res.status === 200) {
          this.isLoading = false
          this.tableData = res.data.list
          this.orderTotal = res.data.totalCount
          this.details = res.data.list.details
          console.log('获取生产领料订单数据', res)
        }
      })
    },

    // 顶部操作方法
    toolarFn (path, newArry, detailsIds) {
      let formdata = detailsIds
        ? {
          ids: newArry,
          detailsIds: detailsIds
        }
        : { ids: newArry }

      this.$http.post(path, formdata).then(res => {
        if (res.status === 200) {
          this.dialogVisible = true
          this.tableInfo = res.data
          this.search.pageNo = 1
          this.getaccountOrder()
        }
      })
    },
    // 下单日期改变
    time1Chang (value) {
      if (value && value.length > 0) {
        this.search.orderBeginDate = value[0]
        this.search.orderEndDate = value[1]
      } else {
        this.search.orderBeginDate = ''
        this.search.orderEndDate = ''
      }
    },
    // 搜索事件
    searchData () {
      this.search.pageNo = 1
      this.getaccountOrder()
    },
    //控制表头颜色
    headerBg ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 17 || columnIndex === 18) {
        return `text-align:right!important;`
      }
    },
    headerRigthMethod ({ row, column, rowIndex, columnIndex }) {
      return 'headerRight'
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSizeChange (val) {
      this.search.pageNo = 1
      this.search.pageSize = val
      this.Init()
    },
    handleCurrentChange (val) {
      this.search.pageNo = val
      this.Init()
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/saleOrder/saleOrderCommon.scss';
@import '@/assets/style/saleOrder/orderList.scss';
@import '@/assets/style/saleOrder/common.scss';

.form-row1 {
  margin-top: 20px;
}
</style>