<template>
    <div style="height: 100%">
        <el-row id="container" class="container">
            <el-col class="order-add" :span="24">
                <div id="header" class="header">
                    <el-row class="button-area">
                        <!--审核图标-->
                        <span v-show="bill_status_2" class="auditIcon"></span>
                        <div class="button-group">
                            <el-button-group>
                                <el-button  type="primary" @click="bill_refresh" size="mini">刷新</el-button>
                                <el-button  type="primary" @click="add_bill" size="mini">新增</el-button>
                                <el-button  type="primary" @click="bill_save" v-show="!bill_editable" size="mini">保存</el-button>
                                <el-dropdown class="button-dropdown">
                                    <el-button type="primary" size="mini">
                                        更多<i class="el-icon-arrow-down el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item @click.native="bill_copy">复制</el-dropdown-item>
                                        <el-dropdown-item @click.native="delete_bill" v-show="bill_status_01">删除</el-dropdown-item>
                                        <el-dropdown-item @click.native="bill_close_bills" v-show="bill_status_2">完结</el-dropdown-item>
                                        <el-dropdown-item @click.native="bill_un_close_bills" v-show="bill_status_6">取消完结</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <el-button  type="primary" @click="bill_save_temporary"  size="mini">暂存</el-button>
                                <el-button  type="primary" @click="bill_audit" v-if='bill_status_1' size="mini">审核</el-button>
                                <el-button  type="primary" @click="bill_un_audit" v-if='bill_status_2' size="mini">反审</el-button>
                                <el-button  type="primary" v-show="bill_add_status" @click="bill_next_up_down(1)" size="mini" icon="el-icon-arrow-left"></el-button>
                                <el-button  type="primary" v-show="bill_add_status" @click="bill_next_up_down(2)" size="mini" icon="el-icon-arrow-right"></el-button>
                                <!--样式代码-->
                                <el-dropdown class="button-dropdown" style="display: none">
                                    <el-button type="primary" size="mini">
                                        更多<i class="el-icon-arrow-down el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item @click="delete_bill">删除</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <!--=====-->
                            </el-button-group>
                        </div>
                    </el-row>
                    <el-row class="header-form">
                        <el-form status-icon label-width="100px" ref="imArrive" :model="bill_hdr" :inline="true">
                            <el-form-item label="到货单号" style="margin-top: 0;">
                                <el-input disabled size="mini"  placeholder="输入到货单号" v-model="bill_hdr.bill_no"></el-input>
                            </el-form-item>

                            <el-form-item label="客户" style="margin-top: 0;">
                                <el-input :disabled="bill_editable" size="mini"  placeholder="输入客户" v-model="bill_hdr.customer_name" ></el-input>
                            </el-form-item>

                            <el-form-item label="供应商" style="margin-top: 0;">
                                <el-input :disabled="bill_editable" size="mini"  placeholder="输入供应商" v-model="bill_hdr.provider_name" ></el-input>
                            </el-form-item>

                            <el-form-item label="款号" style="margin-top: 0;">
                                <el-input :disabled="bill_editable" size="mini" placeholder="输入款号" v-model="bill_hdr.style_code" ></el-input>
                            </el-form-item>

                            <el-form-item label="订单号" style="margin-top: 0;">
                                <el-input  :disabled="bill_editable" size="mini" placeholder="输入订单号" v-model="bill_hdr.order_no" ></el-input>
                            </el-form-item>
                            <el-form-item label="*抽样率%" prop="sampling_rate" style="margin-top: 0;">
                                <el-input  :disabled="bill_editable" size="mini" max="100" placeholder="输入 1~100 的数字"  v-model="bill_hdr.sampling_rate" type="number" ></el-input>
                            </el-form-item>
                            <el-form-item label="生产线" style="margin-top: 0;">
                                <el-input :disabled="bill_editable" size="mini" max="100" placeholder="输入生产线"  v-model="bill_hdr.product_line" ></el-input>
                            </el-form-item>
                            <el-form-item label="*单据日期" prop="bill_date" style="margin-top: 0;">
                                <el-date-picker  size="mini" max="100" v-model="bill_hdr.bill_date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <!--<el-form-item label="单据状态" style="margin-top: 0;">-->
                                <!--<span>{{bill_hdr.bill_status|filter_bill_status}}</span>-->
                            <!--</el-form-item>-->
                            <!---->
                        </el-form>
                    </el-row>
                </div>
                <div class="main-area">
                    <el-tabs v-model="activeTable">
                        <el-tab-pane :label="tabHeader1" name="1" v-if="bill_dtl.length>0">
                            <el-table
                                    ref="multiple_dtl_table"
                                    :data="bill_dtl[0].data"
                                    :max-height="bill_height - 70"
                                    border
                                    :show-summary="showSummary"
                                    :summary-method="getSummaries"
                                    style="width: 100%">
                                <el-table-column type="index"></el-table-column>
                                <el-table-column
                                        type="selection"
                                        width="55">
                                </el-table-column>
                                <el-table-column  width="120" prop="serial_code" label="序列号">
                                </el-table-column>
                                <el-table-column  width="120"  :show-overflow-tooltip=true prop="material_name" label="物料名称">
                                </el-table-column>
                                <el-table-column prop="color_name" :show-overflow-tooltip=true label="色名">
                                </el-table-column>
                                <el-table-column prop="quantity" width="120" label="*数量(求和)">
                                    <template slot-scope="scope">
                                        <el-input :disabled="bill_editable"  type="number"  size="mini" v-model="scope.row.quantity"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="quantity_unit_name" label="单位(求平均)">
                                    <template slot-scope="scope">
                                        <el-input :disabled="bill_editable" size="mini" v-model="scope.row.quantity_unit_name"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="supplier_seq" width="120" label="*供应商匹号(求数量)">
                                    <template slot-scope="scope">
                                        <el-input :disabled="bill_editable"  size="mini" type="number" v-model="scope.row.supplier_seq"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="factory_seq" width="120"  label="*本厂匹号">
                                    <template slot-scope="scope">
                                        <el-input :disabled="bill_editable" size="mini"  type="number" v-model="scope.row.factory_seq"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="material_lot" width="120" label="*物料批号">
                                    <template slot-scope="scope">
                                        <el-input :disabled="bill_editable" size="mini"  v-model="scope.row.material_lot"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="width" width="120" label="幅宽">
                                    <template slot-scope="scope">
                                        <el-input :disabled="bill_editable" size="mini"  v-model="scope.row.width"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="是否抽检">
                                    <template slot-scope="scope">
                                        <el-checkbox :disabled="bill_editable" v-model="scope.row.is_sampling_inspection"></el-checkbox>
                                    </template>
                                </el-table-column>
                                <el-table-column fixed="right" label="操作">
                                    <template slot-scope="scope">
                                        <el-tooltip content="新增" placement="top">
                                            <el-button :disabled="bill_editable" @click="add_new_bill_dtl(scope.$index,bill_dtl[0].data)" type="text"  size="medium" icon="el-icon-plus"></el-button><el-button  @click="delete_curr_bill_dtl(scope.$index)" type="text"  size="medium" icon="el-icon-delete"></el-button>
                                        </el-tooltip>
                                        <el-tooltip content="删除" placement="top">
                                            <el-button :disabled="bill_editable" @click="delete_curr_bill_dtl(scope.$index,bill_dtl[0].data)" type="text"  size="medium" icon="el-icon-delete"></el-button><el-button  @click="delete_curr_bill_dtl(scope.$index)" type="text"  size="medium" icon="el-icon-delete"></el-button>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane :label="tabHeader2" name="2" v-if="bill_dtl.length>0">
                            <el-table
                                ref="multiple_dtl_table"
                                :data="tableData2"
                                :max-height="bill_height - 60"
                                border
                                :summary-method="getSummaries"
                                :show-summary="showSummary"
                                style="width: 100%">
                            <el-table-column type="index"></el-table-column>
                            <el-table-column prop="header1" label="header1"></el-table-column>
                            <el-table-column prop="header2" label="header2"></el-table-column>
                            <el-table-column prop="header3" label="header3"></el-table-column>
                            <el-table-column prop="header4" label="header4"></el-table-column>
                            <el-table-column prop="header5" label="header5"></el-table-column>
                            <el-table-column prop="header6" label="header6"></el-table-column>
                            <el-table-column prop="header7" label="header7"></el-table-column>
                            <el-table-column
                                    fixed="right"
                                    width="80"
                                    label="操作">
                                <template slot-scope="scope">
                                    <el-tooltip content="新增" placement="top">
                                        <el-button :disabled="bill_editable" @click="add_new_bill_dtl(scope.$index)" type="text"  size="medium" icon="el-icon-plus"></el-button><el-button  @click="delete_curr_bill_dtl(scope.$index)" type="text"  size="medium" icon="el-icon-delete"></el-button>
                                    </el-tooltip>
                                    <el-tooltip content="删除" placement="top">
                                        <el-button :disabled="bill_editable" @click="delete_curr_bill_dtl(scope.$index)" type="text"  size="medium" icon="el-icon-delete"></el-button><el-button  @click="delete_curr_bill_dtl(scope.$index)" type="text"  size="medium" icon="el-icon-delete"></el-button>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                        </el-table>
                        </el-tab-pane>
                    </el-tabs>
                    <el-row class="footer-area" v-show="bill_editable">
                        <el-col :span="24">
                            <el-form :inline="true">
                                <el-form-item label="制单人">
                                    <el-input disabled size="mini" v-model="bill_hdr.creator_name"></el-input>
                                </el-form-item>
                                <el-form-item label="制单时间">
                                    <el-input disabled size="mini" v-model="bill_hdr.bill_date"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>

</template>
<style src="@components/common/whole_list.css" scoped></style>
<script>
  // import '@components/common/whole_list.css'
  import utilUI from '@basicClass/util_uc_all.js'
  export default {
    mixins: [utilUI],
    data() {
      return {
        tabHeader1: '表1',
        tabHeader2: '表2',
        showSummary: true, // 是否显示合计
        summaryAttr: [
          {
            type: 'sum',
            attr: 'quantity'
          },
          {
            type: 'ava',
            attr: 'quantity_unit_name'
          }
        ],
        // summaryAttr: ['quantity', 'quantity_unit_name'], // 配置合计项
        activeTable: '1',
        module_name: '/mesAPI/im_arrive', // 头表module
        bill_hdr_empty: {            // 头表表名
          table_name: 'im_arrive',
          data: {
            bill_status: '0'
          }
        },
        bill_dtl_empty: [{  // 从表结构
          table_name: 'im_arrive_item',
          data: [{}]
        }],
        tableData2: [
          {
            header1: 'name1',
            header2: 'name2',
            header3: 'name3',
            header4: 'name4',
            header5: 'name5',
            header6: 'name6',
            header7: 'name7',
            header8: 'name8'
          },
          {
            header1: 'name11',
            header2: 'name12',
            header3: 'name13',
            header4: 'name14',
            header5: 'name15',
            header6: 'name16',
            header7: 'name17',
            header8: 'name18'
          }
        ],
        required_field_bill_hdr: { // 必填表头字段
          bill_date: '单据日期',
          sampling_rate: '抽样率'
        },
        required_field_bill_dtl: { // 明细必填字段
          material_code: '面料品号',
          material_item_code: '色号',
          quantity: '数量',
          supplier_seq: '供应商匹号',
          factory_seq: '本厂匹号',
          material_lot: '物料批号'
        },
        bill_not_check_hdr: {
          id: '' // 不检查字段 默认不修改
        }
      }
    },
    mounted() {
      this.bill_hdr.data.id = this.$route.params.id
      this.query_bill(this.bill_hdr.data.id)
    },
    activated() {
      if (this.bill_hdr.data.id === this.$route.params.id) {
        return
      }
      const result = this.is_leave_page()
      if (!result) {
        this.query_bill(this.$route.params.id)
      } else {
        result.then(() => {
          this.query_bill(this.$route.params.id)
        }).catch(() => {
          this.replaceURL('', this.bill_hdr.data.id || '0') // 替换浏览器地址栏路由
        })
      }
    },
    methods: {
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        let _sums = 0
        for (const item of data) {
          for (const prop in item) {
            if (item[prop]) {
              _sums++
            }
          }
        }
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          if (index === 1) {
            sums[index] = _sums
            return
          }
          const { property } = column
          this.summaryAttr.forEach(sum => {
            const { type, attr } = sum
            if (property === attr) {
              const values = data.map(item => {
                const val = Number(item[column.property])
                return isNaN(val) ? 0 : val
              })
              if (values.length) {
                const count = values.reduce((prev, curr) => {
                  return prev + curr
                }, 0)
                switch (type) {
                  case 'sum':
                    sums[index] = count
                    break
                  case 'ava':
                    sums[index] = _sums === 0 ? '-' : (count / _sums).toFixed(2)
                    break
                }
              } else {
                sums[index] = '-'
              }
            }
          })
        })
        return sums
      },
      getSummaries2(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          if (index === 1) {
            sums[index] = data.length
            return
          }
          this.summaryAttr.forEach(sum => {
            let ava_length = 0
            let ava_sums = 0
            const type = sum.type
            const attr = sum.attr
            if (column.property === attr) {
              const values = data.map(item => Number(item[column.property]))
              if (!values.every(value => isNaN(value))) {
                switch (type) {
                  case 'sum':
                    sums[index] = values.reduce((prev, curr) => {
                      const value = Number(curr)
                      if (!isNaN(value)) {
                        return prev + curr
                      } else {
                        return prev
                      }
                    }, 0)
                    break
                  case 'ava':
                    ava_sums = values.reduce((prev, curr) => {
                      const value = Number(curr)
                      if (!isNaN(value)) {
                        ava_length += 1
                        return prev + curr
                      } else {
                        return prev
                      }
                    }, 0)
                    sums[index] = (ava_sums / ava_length).toFixed(2)
                    break
                }
                // sums[index] += ' '
              } else {
                sums[index] = '-'
              }
            }
          })
        })
        return sums
      }
    }
  }
</script>
