<template>
  <div>
    <div class="title_box rx-bc mt6">
      <div class="name"
        >打包信息 ({{
          isWarehousing ? list.length : item.semiProductList.length || 0
        }})个
      </div>

      <div class="title_box rx-bc mt6">
        <div
          v-if="!isDetails && isEngrave"
          class="rx-bc"
          style="margin-left: 20px"
        >
          <el-button type="text" size="mini" @click="batchEngrave()"
            >批量填写刻码</el-button
          >
        </div>

        <div
          v-if="!isDetails && isDisposal"
          class="rx-bc"
          style="margin-left: 20px"
        >
          <el-button type="text" size="mini" @click="batchDisposal()"
            >批量处置</el-button
          >
        </div>

        <!-- <div
          class="rx-bc"
          v-if="!isDetails && isChoose"
          style="margin-left: 20px"
          ><el-button type="text" size="mini" @click="batchDelete()"
            >批量删除</el-button
          >
        </div> -->
      </div>

      <!-- <div class="rx-bc"> </div> -->
    </div>

    <el-table
      ref="oneJobQualityBom"
      class="table_content"
      :max-height="600"
      :data="isWarehousing ? list : item.semiProductList"
      tooltip-effect="dark"
      style="width: 100%"
      stripe
      border
    >
      <el-table-column label="序号" type="index" width="55">
        <template slot-scope="{ row, $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>

      <el-table-column
        label="编码"
        prop="code"
        minWidth="110"
        show-overflow-tooltip
      >
        <template slot-scope="{ row, $index }">
          {{ row.code }}
        </template>
      </el-table-column>

      <el-table-column
        label="名称"
        prop="name"
        minWidth="110"
        show-overflow-tooltip
      >
        <template slot-scope="{ row, $index }">
          {{ row.name }}
        </template>
      </el-table-column>
      <el-table-column
        label="颜色"
        prop="colour"
        minWidth="110"
        v-if="clientEnvironmentId == '21'"
      >
        <template slot-scope="{ row, $index }">
          <el-input
            v-model="row.colour"
            size="mini"
            class="content_num"
            style="width: 100%"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column
        label="车辆编码"
        prop="carCode"
        minWidth="130"
        v-if="clientEnvironmentId == '21'"
      >
        <template slot-scope="{ row, $index }">
          <el-input
            v-model="row.carCode"
            size="mini"
            class="content_num"
            style="width: 100%"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column label="批次号" prop="batchNo" minWidth="90">
        <template slot-scope="{ row, $index }">
          <el-input
            v-model="row.batchNo"
            size="mini"
            class="content_num"
            :disabled="isDetails"
            style="width: 100%"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column label="型号" prop="modelType" show-overflow-tooltip>
        <template slot-scope="{ row, $index }">
          {{ row.modelType }}
        </template>
      </el-table-column>

      <el-table-column label="规格" prop="specification" show-overflow-tooltip>
        <template slot-scope="{ row, $index }">
          {{ row.specification }}
        </template>
      </el-table-column>

      <el-table-column label="牌号" prop="brandNum" show-overflow-tooltip>
        <template slot-scope="{ row, $index }">
          {{ row.brandNum }}
        </template>
      </el-table-column>

      <el-table-column
        label="刻码"
        prop="engrave"
        v-if="item.singleReport == 1"
      >
        <template slot-scope="{ row, $index }">
          <span v-if="isDetails"> {{ row.extInfo.engrave }}</span>
          <el-input
            v-else
            size="mini"
            class="content_num"
            v-model="row.extInfo.engrave"
            placeholder="请输入物料代号"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="物料代号"
        prop="materielCode"
        v-if="item.singleReport == 1"
      >
        <template slot-scope="{ row, $index }">
          <span v-if="isDetails"> {{ row.extInfo.materielCode }}</span>
          <el-input
            v-else
            size="mini"
            class="content_num"
            v-model="row.extInfo.materielCode"
            placeholder="请输入物料代号"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="客户代号"
        prop="clientCode"
        v-if="item.singleReport == 1"
      >
        <template slot-scope="{ row, $index }">
          <span v-if="isDetails"> {{ row.extInfo.clientCode }}</span>
          <el-input
            v-else
            size="mini"
            class="content_num"
            v-model="row.extInfo.clientCode"
            placeholder="请输入客户代号"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="位置"
        width="110"
        prop="feedQuantity"
        v-if="item.singleReport == 1"
      >
        <template slot-scope="{ row, $index }">
          {{ row.extInfo.position }}
        </template>
      </el-table-column>

      <el-table-column label="工序重量" prop="newWeight">
        <template slot-scope="{ row, $index }">
          <span>
            {{ row.extInfo.newWeight }} {{ row.extInfo.weightUnit }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="打包类型" prop="" v-if="item.singleReport == 0">
        <template slot-scope="{ row, $index }">
          <span style="color: #157a2c"> 批量打包 </span>
        </template>
      </el-table-column>

      <el-table-column
        label="打包数量"
        prop="feedQuantity"
        width="200"
        v-if="item.singleReport == 0"
      >
        <template slot-scope="{ row, $index }">
          <div v-if="!isWarehousing">
            <el-input
              size="mini"
              class="content_num"
              v-model="row.feedQuantity"
              disabled
            />
          </div>

          <div v-if="isWarehousing">
            <div style="color: #157a2c">{{ row.feedQuantity }}</div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="处置" prop="" width="120">
        <template slot-scope="{ row, $index }">
          <el-select
            size="mini"
            class="content_num"
            filterable
            v-model="row.extInfo.taskId"
            placeholder="请选择"
            style="width: 100px"
          >
            <el-option
              v-for="item in stepsList"
              :label="item.taskTypeName"
              :value="item.taskId"
              :key="item.taskId"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column
        label="发货(包装)码"
        prop=""
        width="200"
        v-if="item.singleReport == 1"
      >
        <template slot-scope="{ row, $index }">
          <el-input
            size="mini"
            class="content_num"
            v-model="row.extInfo.sendCode"
            placeholder="发货(包装)码"
            :disabled="isDetails"
          />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="刻码"
      v-if="dialogEngrave"
      :visible.sync="dialogEngrave"
      width="30%"
      :before-close="handleClose"
      append-to-body
    >
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="刻码区间">
          <el-input
            size="mini"
            type="number"
            v-model="form.minNumber"
            placeholder="请输入刻码最小值"
            prop="digit"
            style="width: 180px"
          />
          -
          <el-input
            size="mini"
            type="number"
            v-model="form.maxNumber"
            placeholder="请输入刻码最大值"
            prop="digit"
            style="width: 180px"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogEngrave = false">取 消</el-button>
        <el-button type="primary" @click="batchEngraveConfirm()"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="处置类型"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      append-to-body
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="处置类型">
          <el-select
            size="mini"
            filterable
            v-model="form.taskId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in stepsList"
              :label="item.taskTypeName"
              :value="item.taskId"
              :key="item.taskId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="batchConfirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getTaskInstanceList } from '@/api/produce/job';

  export default {
    props: {
      item: {
        type: Object,
        default: () => {}
      },

      list: {
        type: Array,
        default: () => []
      },

      isDetails: {
        type: Boolean,
        default: false
      },
      isWarehousing: {
        type: Boolean,
        default: false
      },
      isChoose: {
        type: Boolean,
        default: false
      },
      isEngrave: {
        type: Boolean,
        default: false
      },
      isDisposal: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        stepsList: [],
        selection: [],
        form: {
          taskId: '',
          minNumber: '',
          maxNumber: ''
        },
        dialogVisible: false,
        dialogEngrave: false,
        batchVisible: false
      };
    },

    mounted() {
      this.getTaskFn();
      if (this.list.length != 0) {
        this.list.forEach((item) => {
          item.extInfo.taskId = item.extInfo.taskId + '';
        });
      }
    },

    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },

    components: {},
    methods: {
      getTaskFn() {
        getTaskInstanceList(this.item.workOrderId).then((res) => {
          this.stepsList = res.filter((item) => {
            return item.taskId != -2;
          });
        });
      },

      batchDisposal() {
        this.form.taskId = '';
        this.dialogVisible = true;
      },

      batchEngrave() {
        this.form.minNumber = '';
        this.form.maxNumber = '';
        this.dialogEngrave = true;
      },

      batchConfirm() {
        if (!this.form.taskId) {
          this.$message({ message: '请选择处置类型', type: 'warning' });
          return false;
        }

        const data = this.stepsList.find((it) => it.taskId == this.form.taskId);

        this.list.forEach((item, index) => {
          this.$set(this.list[index].extInfo, 'taskId', this.form.taskId);
          this.$set(this.list[index].extInfo, 'taskName', data.taskTypeName);
        });

        this.$forceUpdate();

        this.dialogVisible = false;
      },

      handleClose() {
        this.dialogVisible = false;
        this.dialogEngrave = false;
        this.batchVisible = false;
      },

      batchEngraveConfirm() {
        if (!this.form.minNumber) {
          this.$message({ message: '请输入最小刻码', type: 'warning' });
          return false;
        }

        if (!this.form.maxNumber) {
          this.$message({ message: '请输入最大刻码', type: 'warning' });
          return false;
        }

        if (Number(this.form.minNumber) > Number(this.form.maxNumber)) {
          this.$message({
            message: '最小刻码不能大于最大刻码',
            type: 'warning'
          });
          return false;
        }

        this.list.forEach((item, index) => {
          this.$set(this.list[index].extInfo, 'engrave', '');
        });

        const engraveNumber =
          Number(this.form.maxNumber) - Number(this.form.minNumber) + 1;

        console.log(engraveNumber, '刻码数量');

        for (let i = 0; i < engraveNumber; i++) {
          if (this.list.length < i) return;

          this.$set(
            this.list[i].extInfo,
            'engrave',
            Number(this.form.minNumber) + i
          );
        }
        this.$forceUpdate();
        this.dialogEngrave = false;
      },

      batchDelete() {
        if (!this.selection.length) {
          this.$message.warning('请至少选择一条数据');
          return;
        }
        let ids = this.selection.map((item) => item.id || item.instanceId);
        this.$confirm('确定要删除选中的报工信息吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            // console.log(total, '总数------------------');
            ids.forEach((sitem, sindex) => {
              this.list.forEach((item, index) => {
                let id = item.id || item.instanceId;
                if (id == sitem) {
                  this.list.splice(index, 1);
                }
              });
            });
          })
          .then(() => {
            if (this.list.length == 0) {
              this.$set(this.item.workReportInfo, 'formedNum', 0);
              this.$set(this.item.workReportInfo, 'notFormedNum', 0);
            }
          })
          .catch(() => {});
      }
    }
  };
</script>

<style lang="scss" scoped>
  .content_num {
    display: flex;
    align-items: center;
    padding: 2px;
    --input-background-color: #f0f8f2;
  }
</style>
