<template>
  <el-dialog
    append-to-body
    :visible.sync="dialogVisible"
    destroy-on-close
    :show-close="false"
    fullscreen
    @close="close"
    @open="open"
  >

    <span slot="title" class="dialog-footer">
      <div class="crud-opts2">
        <span class="el-dialog__title2">出库单分配</span>
        <span class="crud-opts-right2">
          <!--左侧插槽-->
          <slot name="left"/>
          <el-button slot="left" type="info" @click="dialogVisible = false">关闭</el-button>
        </span>
      </div>
    </span>
    <div class="crud-opts2">
      <span class="role-span">待出库单据明细项</span>
    </div>
    <el-card class="box-card" shadow="never" :body-style="{padding:'0'}">
      <!--表格渲染-->
      <el-table
        ref="dtl_table"
        :data="this.openParam"
        style="width: 100%;"
        max-height="300"
        border
        highlight-current-row
        :row-class-name="tableRowClassName"
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
        @row-click="clcikRow"
      >
        <el-table-column prop="bill_status" label="状态" align="center" width="110px">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.bill_status"
              class="filter-item"
              :disabled="true"
            >
              <el-option
                v-for="item in dict.io_bill_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="material_code" label="物料编码" align="center"/>
        <el-table-column show-overflow-tooltip prop="material_name" label="物料名称" align="center"/>
        <el-table-column show-overflow-tooltip prop="material_spec" label="规格" align="center"/>
        <el-table-column show-overflow-tooltip prop="material_model" label="型号" align="center"/>
        <el-table-column show-overflow-tooltip prop="plan_qty" :formatter="crud.formatNum3" label="数量" align="center"/>
        <el-table-column show-overflow-tooltip prop="assign_qty" :formatter="crud.formatNum3" label="已出数量"
                         align="center"/>
        <el-table-column show-overflow-tooltip prop="unassign_qty" :formatter="crud.formatNum3" label="未出数量"
                         align="center"/>
        <el-table-column show-overflow-tooltip prop="qty_unit_name" label="单位" align="center"/>
      </el-table>
    </el-card>
    <div class="crud-opts2">
      <div class="crud-opts-form">
        <el-form ref="form" :inline="true" :model="form" size="mini">
          <el-form-item label="区域" prop="gender5">
            <el-cascader
              placeholder="请选择"
              :options="sects"
              :props="{ checkStrictly: true }"
              clearable
              @change="sectQueryChange"
            />
          </el-form-item>
        </el-form>
      </div>
      <span class="crud-opts-right2">
        <!--左侧插槽-->
        <slot name="left"/>
        <el-button
          slot="left"
          class="filter-item"
          type="warning"
          icon="el-icon-check"
          size="mini"
          @click="openStructIvt()"
        >
          手动分配
        </el-button>
        <el-button
          slot="left"
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="cancelCreate()"
        >
          删除分配
        </el-button>
        <el-button
          slot="left"
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="disConfirm()"
        >
          确认
        </el-button>
      </span>
    </div>
    <el-card class="box-card" shadow="never" :body-style="{padding:'0'}">
      <!--表格渲染-->
      <el-table
        ref="dis_table"
        :data="form.tableMater"
        style="width: 100%;"
        max-height="300"
        border
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
      >
        <el-table-column show-overflow-tooltip type="index" label="序号" align="center"/>
        <el-table-column type="selection" width="55"/>
        <el-table-column show-overflow-tooltip prop="status_name" label="状态" align="center"/>
        <el-table-column show-overflow-tooltip prop="sparepart_only_id" label="备件编码" align="center"/>
        <el-table-column show-overflow-tooltip prop="material_name" label="备件名称" align="center"/>
        <el-table-column show-overflow-tooltip prop="pcsn" label="批次" align="center"/>
        <el-table-column show-overflow-tooltip prop="real_qty" label="数量" align="center"/>
        <el-table-column show-overflow-tooltip prop="qty_unit_name" label="单位" align="center"/>
        <el-table-column show-overflow-tooltip prop="struct_name" label="货位" align="center"/>
      </el-table>
    </el-card>

    <StructIvt :dialog-show.sync="structShow" :open-array="ivtParam" :rowmst="openRow"
               @StructIvtClosed="queryTableDis"/>
  </el-dialog>
</template>

<script>
import CRUD, { crud } from '@crud/crud'
import crudSectattr from '@/api/wms/basedata/st/sectattr'
import StructIvt from '@/views/wms/sb/outbill/StructIvt'
import sparePart from '@/api/wms/sb/sparepartout'

export default {
  name: 'DivDialog',
  components: { StructIvt },
  mixins: [crud()],
  dicts: ['io_bill_status'],
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    bussConfig: {
      type: Object
    },
    openParam: {
      type: Array,
      default: () => {
        return []
      }
    },
    billType: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      dialogVisible: false,
      stor_id: '',
      sect_id: '',
      ivtParam: [],
      sectProp: null,
      structShow: false,
      bucketObj: null,
      sects: [],
      sect_val: null,
      openRow: {},
      form: {
        dtl_row: null,
        tableMater: []
      },
      storlist: [],
      rules: {}
    }
  },
  watch: {
    dialogShow: {
      handler(newValue, oldValue) {
        this.dialogVisible = newValue
      }
    }
  },
  methods: {
    open() {
      crudSectattr.getSect({ 'is_attachment': '1', 'sect_type_attr': '00' }).then(res => {
        this.sects = res.content
      })
    },
    openStructIvt() {
      if (!this.form.dtl_row) {
        this.crud.notify('请选择一条出库明细', CRUD.NOTIFICATION_TYPE.INFO)
        return
      }
      debugger
      sparePart.getStructIvt(this.form.dtl_row).then(res => {
        this.ivtParam = res
        this.structShow = true
        this.openRow = this.form.dtl_row
      })
    },
    toDelete(data) {
      data.pop = true
    },
    close() {
      this.form.tableMater = []
      this.form.dtl_row = null
      this.sectProp = null
      this.$emit('update:dialogShow', false)
      this.$emit('AddChanged')
      this.crud.refresh()
      this.$refs['form2'].resetFields()
    },
    clcikRow(row, column, event) {
      debugger
      this.form.dtl_row = row
      sparePart.getDisDtl(row).then(res => {
        this.form.tableMater = res
      })
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    createCode() {
      debugger
      if (!this.form.dtl_row) {
        this.crud.notify('请选择一条入库明细', CRUD.NOTIFICATION_TYPE.INFO)
        return
      }

      if (this.form.dtl_row.bill_status !== '10') {
        this.crud.notify('请选择状态为生成的明细', CRUD.NOTIFICATION_TYPE.INFO)
        return
      }

      this.form.sect_id = this.sect_id
      this.form.stor_id = this.stor_id

      if (!this.form.sect_id || !this.form.stor_id) {
        this.crud.notify('请先选择备件库区！', CRUD.NOTIFICATION_TYPE.INFO)
        return
      }
      sparePart.createCode(this.form).then(res => {
        sparePart.getIODtl({ 'bill_code': this.form.dtl_row.bill_code }).then(res => {
          this.openParam = res
        })
        sparePart.getDisDtl(this.form.dtl_row).then(res => {
          this.form.tableMater = res
          this.crud.notify('操作成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
        })
      })
    },
    cancelCreate() {
      const rows = this.$refs.dis_table.selection
      if (rows.length === 0) {
        this.crud.notify('请至少选择一条分配记录', CRUD.NOTIFICATION_TYPE.INFO)
        return false
      }
      sparePart.cancelCreate({ rows: rows, row: this.form.dtl_row }).then(res => {
        sparePart.getIODtl({ 'bill_code': this.form.dtl_row.bill_code }).then(res => {
          this.openParam = res
        })
        sparePart.getDisDtl(this.form.dtl_row).then(res => {
          this.form.tableMater = res
          this.crud.notify('操作成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
        })
      })
    },
    queryTableDtl() {
      sparePart.getIODtl({ 'bill_code': this.form.dtl_row.bill_code }).then(res => {
        this.openParam = res
      })
    },
    queryTableDis() {
      sparePart.getDisDtl(this.form.dtl_row).then(res => {
        this.form.tableMater = res
      })
    },
    disConfirm() {
      debugger
      let rows = this.$refs.dis_table.selection
      if (rows.length == 0) {
        this.crud.notify('请至少勾选一条记录！', CRUD.NOTIFICATION_TYPE.INFO)
        return
      }
      sparePart.disConfirm({ rows: rows }).then(res => {
        sparePart.getIODtl({ 'bill_code': this.form.dtl_row.bill_code }).then(res => {
          this.openParam = res
        })
        sparePart.getDisDtl(this.form.dtl_row).then(res => {
          this.form.tableMater = res
          this.crud.notify('操作成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
        })
      })
    },
    sectQueryChange(val) {
      this.sectProp = val
      if (val.length === 1) {
        this.stor_id = val[0]
        this.sect_id = ''
      }
      if (val.length === 0) {
        this.sect_id = ''
        this.stor_id = ''
      }
      if (val.length === 2) {
        this.stor_id = val[0]
        this.sect_id = val[1]
      }
    },
    tableChanged(row) {
      let rows = this.$refs.dis_table.selection
      const data = {}
      data.struct = row
      data.rows = rows
      sparePart.divStruct(data).then(res => {
        sparePart.getIODtl({ 'bill_code': this.form.dtl_row.bill_code }).then(res => {
          this.openParam = res
        })
        sparePart.getDisDtl(this.form.dtl_row).then(res => {
          this.form.tableMater = res
          this.crud.notify('操作成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
        })
      })
    },
    bucketChange(row) {
      debugger
      this.bucketObj = row
      this.form.bucketunique = row.bucketunique
      this.form.storage_qty = row.storage_qty
    }
  }
}
</script>

<style>
.crud-opts2 {
  padding: 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.crud-opts2 .el-dialog__title2 {
  line-height: 24px;
  font-size: 20px;
  color: #303133;
}

.crud-opts2 .role-span {
  padding: 10px 0px 10px 0px;
}

.crud-opts2 .crud-opts-form {
  padding: 10px 0px 0px 20px;
}

.input-with-select {
  background-color: #fff;
}
</style>
