<template>
  <el-dialog
    v-loading.fullscreen.lock="fullscreenLoading"
    append-to-body
    :visible.sync="dialogVisible2"
    destroy-on-close
    :show-close="false"
    fullscreen
    @close="close"
  >

    <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="dialogVisible2 = 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="table"
        :data="this.openParam"
        style="width: 100%;"
        max-height="300"
        border
        highlight-current-row
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
        @row-click="clcikRow"
      >
        <el-table-column show-overflow-tooltip type="index" label="序号" align="center" />
        <el-table-column show-overflow-tooltip prop="bill_code" label="入库单号" align="center" />
        <el-table-column show-overflow-tooltip prop="seq_no" label="明细序号" align="center" />
        <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="pcsn" 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>
    <el-card class="box-card" shadow="never" :body-style="{padding:'20px 20px 0 20px'}">
      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="mini">
        <el-form-item prop="checked">
          <el-checkbox v-model="form.checked" true-label="1" false-label="0" @change="checkedChange()">仅显示未完成的任务</el-checkbox>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="crud-opts2">
      <span class="role-span">入库单据任务项</span>
      <span class="crud-opts-right2">
        <!--左侧插槽-->
        <slot name="left" />
        <el-button
          slot="left"
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="updateTask()"
        >
          修改
        </el-button>
        <el-button
          slot="left"
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="delTask()"
        >
          删除
        </el-button>
        <el-button
          slot="left"
          class="filter-item"
          type="warning"
          icon="el-icon-check"
          size="mini"
          @click="reIssueTask()"
        >
          下发
        </el-button>
        <el-button
          slot="left"
          class="filter-item"
          type="warning"
          icon="el-icon-check"
          size="mini"
          @click="confirmTask()"
        >
          标识完成
        </el-button>
        <el-button
          slot="left"
          class="filter-item"
          type="warning"
          icon="el-icon-check"
          size="mini"
          @click="cancelTask()"
        >
          取消完成
        </el-button>
      </span>
    </div>
    <el-card class="box-card" shadow="never" :body-style="{padding:'0'}">
      <!--表格渲染-->
      <el-table
        ref="disTable"
        :data="form.tableMater"
        style="width: 100%;"
        max-height="300"
        :row-class-name="tableRowClassName"
        highlight-current-row
        border
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
        @row-click="clcikDisRow"
      >
        <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="pcsn" label="批次" align="center" />
        <el-table-column show-overflow-tooltip prop="seq_no" label="序号" align="center" />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="storagevehicle_code"
          width="120"
          label="载具号"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="bucketDtl(scope.row)">{{ scope.row.storagevehicle_code }}</el-link>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="bucket_num" 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="struct_code" label="分配货位" align="center" />
        <el-table-column show-overflow-tooltip prop="work_status" label="指令状态" :formatter="statusFormat" align="center" />
        <el-table-column show-overflow-tooltip prop="task_code" label="指令操作号" align="center" />
        <el-table-column show-overflow-tooltip prop="point_code" label="入库点位编码" align="center" />
        <el-table-column show-overflow-tooltip prop="point_name" label="入库点位名称" align="center" />
      </el-table>
    </el-card>

    <StructUpdateDiv :dialog-show.sync="structShow" :sect-prop="sectProp" :bucket-form="bucketForm" @updateCommit="updateCommit" />

  </el-dialog>
</template>

<script>
import CRUD, { crud } from '@crud/crud'
import StructUpdateDiv from '@/views/wms/st/inbill/StructUpdateDialog'
import crudRawAssist from '@/views/wms/st/inbill/rawassist'

export default {
  name: 'TaskDialog',
  components: {StructUpdateDiv },
  mixins: [crud()],
  dicts: ['io_bill_status', 'task_status'],
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    bussConfig: {
      type: Object
    },
    openParam: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      dialogVisible2: false,
      tableDtl: [],
      stor_id: '',
      sect_id: '',
      sectProp: null,
      structShow: false,
      sects: [],
      dis_row: null,
      fullscreenLoading: false,
      bucketParam: null,
      bucketForm: null,
      bucketDtlShow: false,
      form: {
        tableMater: [],
        dtl_row: null,
        checked: '1'
      },
      storlist: [],
      rules: {
      }
    }
  },
  watch: {
    dialogShow: {
      handler(newValue, oldValue) {
        this.dialogVisible2 = newValue
      }
    }
  },
  methods: {
    close() {
      this.$emit('update:dialogShow', false)
      this.form.tableMater = []
      this.form.checked = '1'
      this.form.dtl_row = null
      this.$emit('AddChanged')
    },
    delTask() {
      if (!this.dis_row) {
        this.crud.notify('请选择一条任务项', CRUD.NOTIFICATION_TYPE.INFO)
        return
      }
      if (this.dis_row.work_status !== '01') {
        this.crud.notify('只能对状态为生成的任务进行删除！', CRUD.NOTIFICATION_TYPE.INFO)
        return
      }
      this.fullscreenLoading = true
      crudRawAssist.delTask(this.dis_row).then(res => {
        this.fullscreenLoading = false
        crudRawAssist.queryTask(this.form.dtl_row).then(res => {
          this.form.tableMater = res
        }).catch(() => {
          this.fullscreenLoading = false
        })
        crudRawAssist.getIODtl({ 'bill_code': this.currentRow.bill_code, 'open_flag': '2' }).then(res => {
          this.openParam = res
          this.dis_row = null
          this.crud.notify('删除任务成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
        }).catch(() => {
          this.fullscreenLoading = false
        })
      }).catch(() => {
        this.fullscreenLoading = false
      })
    },
    statusFormat(row, column) {
      return this.dict.label.task_status[row.work_status]
    },
    confirmTask() {
      if (!this.dis_row) {
        this.crud.notify('请选择一条任务项', CRUD.NOTIFICATION_TYPE.INFO)
        return
      }
      if (this.dis_row.work_status === '99' || this.dis_row.work_status === '00') {
        this.crud.notify('只能已生成或下发进行中的任务完成！', CRUD.NOTIFICATION_TYPE.INFO)
        return
      }
      this.fullscreenLoading = true
      crudRawAssist.confirmTask(this.dis_row).then(res => {
        crudRawAssist.queryTask(this.form.dtl_row).then(res2 => {
          this.form.tableMater = res2
          this.fullscreenLoading = false
          this.crud.notify('强制确认任务成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
        }).catch(() => {
          this.fullscreenLoading = false
        })
      }).catch(() => {
        this.fullscreenLoading = false
      })
    },
    cancelTask() {
      if (!this.dis_row) {
        this.crud.notify('请选择一条任务项', CRUD.NOTIFICATION_TYPE.INFO)
        return
      }
      if (this.dis_row.work_status !== '99') {
        this.crud.notify('只能对状态为完成的任务进行取消！', CRUD.NOTIFICATION_TYPE.INFO)
        return
      }
      this.fullscreenLoading = true
      crudRawAssist.cancelTask(this.dis_row).then(res => {
        this.fullscreenLoading = false
        crudRawAssist.queryTask(this.form.dtl_row).then(res2 => {
          this.form.tableMater = res2
          this.crud.notify('取消确认任务成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
        }).catch(() => {
          this.fullscreenLoading = false
        })
      }).catch(() => {
        this.fullscreenLoading = false
      })
    },
    reIssueTask() {
      if (!this.dis_row) {
        this.crud.notify('请选择一条任务项', CRUD.NOTIFICATION_TYPE.INFO)
        return
      }
      if (this.dis_row.work_status !== '01') {
        this.crud.notify('只能对状态为生成的任务进行下发！', CRUD.NOTIFICATION_TYPE.INFO)
        return
      }
      this.fullscreenLoading = true
      crudRawAssist.reIssueTask(this.dis_row).then(res => {
        this.fullscreenLoading = false
        crudRawAssist.queryTask(this.form.dtl_row).then(res2 => {
          this.form.tableMater = res2
          this.crud.notify('下发任务成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
        })
      }).catch(() => {
        this.fullscreenLoading = false
      })
      crudRawAssist.queryTask(this.form.dtl_row).then(res => {
        this.form.tableMater = res
      })
    },
    updateTask() {
      if (!this.dis_row) {
        this.crud.notify('请选择一条任务项', CRUD.NOTIFICATION_TYPE.INFO)
        return
      }
      debugger
      if (this.dis_row.work_status !== '01') {
        this.crud.notify('只能对状态为生成的任务进行修改！', CRUD.NOTIFICATION_TYPE.INFO)
        return
      }
      this.structShow = true
      this.bucketForm = this.dis_row
    },
    updateCommit() {
      crudRawAssist.queryTask(this.form.dtl_row).then(res => {
        this.form.tableMater = res
        this.crud.notify('修改任务成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
      })
    },
    checkedChange(val) {
      this.form.dtl_row.checked = this.form.checked
      crudRawAssist.queryTask(this.form.dtl_row).then(res => {
        this.form.tableMater = res
      })
    },
    clcikRow(row, column, event) {
      this.form.dtl_row = row
      row.checked = this.form.checked
      crudRawAssist.queryTask(row).then(res => {
        this.form.tableMater = res
      })
    },
    clcikDisRow(row, column, event) {
      this.dis_row = row
    },
    assignFormat(row, column) {
      if (!row.assign_qty) {
        return '0'
      } else {
        return row.assign_qty
      }
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    bucketDtl(row) {
      crudRawAssist.bucketDtl(row).then(res => {
        this.bucketParam = res
        this.bucketDtlShow = true
      })
    }
  }
}
</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>
