<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-form
          :inline="true"
          class="demo-form-inline"
          label-position="right"
          label-width="115px"
          label-suffix=":"
        >
          <el-form-item label="订单号">
            <el-input
              v-model="query.sale_order_name"
              clearable
              placeholder="输入订单号"
              style="width: 185px;"
              class="filter-item"
              @keyup.enter.native="crud.toQuery"
            />
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input
              v-model="query.customer_description"
              clearable
              placeholder="输入客户名称"
              style="width: 185px;"
              class="filter-item"
              @keyup.enter.native="crud.toQuery"
            />
          </el-form-item>
          <el-form-item label="客户编码">
            <el-input
              v-model="query.customer_name"
              clearable
              placeholder="输入客户编码"
              style="width: 185px;"
              class="filter-item"
              @keyup.enter.native="crud.toQuery"
            />
          </el-form-item>
          <!--          <el-form-item label="状态">-->
          <!--            <el-select-->
          <!--              v-model="query.status"-->
          <!--              clearable-->
          <!--              size="mini"-->
          <!--              placeholder="请选择"-->
          <!--              class="filter-item"-->
          <!--              @change="hand"-->
          <!--            >-->
          <!--              <el-option label="未分配" value="99" />-->
          <!--              <el-option label="已分配" value="0" />-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <rrOperation :crud="crud" />
        </el-form>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission">
        <el-button
          slot="right"
          class="filter-item"
          type="success"
          :disabled="dis_flag"
          icon="el-icon-position"
          size="mini"
          @click="divOpen1"
        >
          分配
        </el-button>
      </crudOperation>
      <!--表格渲染-->
      <el-tabs v-model="activeName" class="custom-tabs" @tab-click="handleClick">
        <el-tab-pane label="未分配" name="first" />
        <el-tab-pane label="已分配" name="second" />
      </el-tabs>
      <el-table
        ref="table"
        v-loading="crud.loading"
        height
        style="width: 100%"
        :data="crud.data"
        size="mini"
        @select="handleSelectionChange"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" />
        <el-table-column
          prop="sale_order_name"
          label="销售订单及行号"
          :min-width="flexWidth('sale_order_name',crud.data,'销售订单及行号')"
        />
        <el-table-column
          prop="customer_name"
          label="客户编码"
          :min-width="flexWidth('customer_name',crud.data,'客户编码')"
        />
        <el-table-column
          prop="customer_description"
          label="客户名称"
          :min-width="flexWidth('customer_description',crud.data,'客户名称')"
        />
        <el-table-column prop="status" label="状态" :min-width="flexWidth('status', crud.data, '状态')">
          <template slot-scope="scope">
            {{ scope.row.status === "99" ? '未分配' : '已分配' }}
          </template>
        </el-table-column>

        <el-table-column prop="create_name" label="创建人" :min-width="flexWidth('create_name',crud.data,'创建人')" />
        <el-table-column
          prop="create_time"
          label="创建时间"
          :min-width="flexWidth('create_time',crud.data,'创建时间')"
        />
        <el-table-column
          prop="sale_order_description"
          label="销售订单描述"
          :min-width="flexWidth('sale_order_description',crud.data,'销售订单描述')"
        />
        <!--        <el-table-column prop="remark" label="备注" :min-width="flexWidth('remark',crud.data,'备注')"/>-->
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
    <DivDialog
      :dialog-show.sync="divShow"
      :open-param="openParam"
      :sale-order-name="this.saleOrderName"
      @childEvent="handleChildEvent"
      @AddChanged="querytable"
    />
  </div>
</template>

<script>
import crudSubpackagerelation from './packagerelation'
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { download } from '@/api/data'
import { downloadFile } from '@/utils'
import DivDialog from '@/views/wms/pdm/sub/DivDialog.vue'

const defaultForm = {
  workorder_id: null,
  package_box_sn: null,
  quanlity_in_box: null,
  box_weight: null,
  quality_guaran_period: null,
  sale_order_names: null,
  customer_name: null,
  customer_description: null,
  product_name: null,
  product_description: null,
  date_of_fg_inbound: null,
  container_name: null,
  width: null,
  thickness: null,
  mass_per_unit_area: null,
  net_weight: null,
  length: null,
  date_of_production: null,
  is_un_plan_production: null,
  un_plan_product_property1: null,
  un_plan_product_property2: null,
  un_plan_product_property3: null,
  box_type: null,
  sap_pcsn: null,
  remark: null,
  create_id: null,
  create_name: null,
  create_time: null,
  status: '99',
  isreprintpackageboxlabel: null,
  isunpackbox: null,
  thickness_request: null,
  width_standard: null
}
export default {
  name: 'Packagerelation',
  dicts: ['sub_package_relation', 'IS_OR_NOT'],
  components: { pagination, crudOperation, rrOperation, udOperation, DivDialog },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '子卷装箱',
      optShow: { add: false, edit: false, del: false },
      url: 'api/pdmBiSubpackagerelation/queryContainerization',
      crudMethod: { ...crudSubpackagerelation }
    })
  },
  data() {
    return {
      activeName: 'first',
      divShow: false,
      openParam: [],
      saleOrderName: null,
      bussConfig: null,
      currentRow: null,
      dis_flag: true,
      permission: {
        add: ['admin', 'sub:add'],
        edit: ['admin', 'sub:edit'],
        del: ['admin', 'sub:del']
      },
      isPlanProducList: [
        { 'label': '是', 'value': '1' },
        { 'label': '否', 'value': '0' }
      ]
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    // 标签页点击
    handleClick(tab) {
      this.query.status = tab.name === 'first' ? '99' : '0'
      this.crud.toQuery()
    },
    async divOpen() {
      this.saleOrderName = this.currentRow.sale_order_name
      const res = await crudSubpackagerelation.queryContainerization({ 'sale_order_name': this.currentRow.sale_order_name })
      this.openParam = res.content
      // this.divShow = true
    },
    divOpen1() {
      this.saleOrderName = this.currentRow.sale_order_name
      crudSubpackagerelation.queryContainerization({ 'sale_order_name': this.currentRow.sale_order_name }).then(res => {
        this.openParam = res.content
        this.divShow = true
      })
    },
    querytable() {
      this.onSelectAll()
      this.crud.toQuery()
    },
    handleChildEvent() {
      this.divOpen()
    },
    handleSelectionChange(val, row) {
      if (val.length > 1) {
        this.$refs.table.clearSelection()
        this.$refs.table.toggleRowSelection(val.pop())
        this.buttonChange(row)
      } else if (val.length === 1) {
        this.buttonChange(row)
      } else {
        this.handleCurrentChange(null)
      }
    },
    buttonChange(currentRow) {
      if (currentRow !== null) {
        this.currentRow = currentRow
        this.dis_flag = false
      }
    },
    onSelectAll() {
      this.$refs.table.clearSelection()
      this.handleCurrentChange(null)
    },
    handleCurrentChange(currentRow) {
      if (currentRow === null) {
        this.dis_flag = true
        this.currentRow = {}
      }
    },
    hand(value) {
      this.crud.toQuery()
    },
    downdtl() {
      if (this.currentRow !== null) {
        crud.downloadLoading = true
        download('/api/packagerelation/download', this.crud.query).then(result => {
          debugger
          downloadFile(result, '子卷包装', 'xlsx')
          crud.downloadLoading = false
        }).catch(() => {
          crud.downloadLoading = false
        })
      }
    }
  }
}
</script>

<style scoped>
.custom-tabs {
  margin-bottom: 0px; /* 调整垂直间距，根据需要调整数值 */
}

.custom-table {
  margin-top: 0px; /* 调整垂直间距，根据需要调整数值 */
}

.tableAuto.el-table .cell {
  white-space: nowrap;
}
</style>
