<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <!-- <order-search @search="reload" ref="searchRef"> </order-search> -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        :pageSize="20"
        :pageSizes="[20, 30, 40, 50, 100]"
        :key="key"
        row-key="id"
      >
        <!-- 操作列 -->
        <template v-slot:toolbar v-if="showBtn">
          <el-button
            type="primary"
            slot="reference"
            :disabled="selection.length == 0"
            @click="disposeFn(1)"
            >批量处置</el-button
          >

          <el-popconfirm
            class="ele-action"
            title="确定要删除吗？"
            @confirm="remove"
            style="margin-left: 10px"
          >
            <template v-slot:reference>
              <el-button :disabled="selection.length == 0" type="danger"
                >批量删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
        <template v-slot:action="{ row }">
          <el-popconfirm
            class="ele-action"
            title="确定要删除吗？"
            v-if="row.disposalStatus !== 2"
            @confirm="remove(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
          <el-link
            slot="reference"
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            v-if="row.disposalStatus !== 2"
            @click="disposeFn(2, row)"
          >
            处置
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>

    <el-dialog
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="35%"
      @close="close"
      title="处置"
    >
      <el-form
        ref="disposeForm"
        :model="disposeForm"
        label-width="150px"
        :rules="rules"
      >
        <el-form-item label="处置方式：" prop="disposeType">
          <el-select
            v-model="disposeForm.disposeType"
            placeholder="请选择"
            style="width: 100%"
            @change="disposeTypeChange"
          >
            <el-option
              v-for="item in disposeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <template
          v-if="disposeForm.disposeType == 1 || disposeForm.disposeType == 2"
        >
          <el-form-item label="回流工序" prop="taskId" align="center">
            <el-select
              style="width: 100%"
              v-model="disposeForm.taskId"
              clearable
            >
              <el-option
                v-for="item in refluxTaskList"
                :key="item.taskId"
                :value="item.taskId"
                :label="item.taskTypeName"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>

        <template v-if="disposeForm.disposeType == 6">
          <el-row>
            <el-col :span="24">
              <el-form-item
                label="留样数量："
                prop="keepSampleQuantity"
                align="center"
              >
                <el-input
                  v-model="disposeForm.keepSampleQuantity"
                  placeholder="请输入"
                  style="width: 100%"
                >
                  <template slot="append">{{
                    current?.measureUnit
                  }}</template></el-input
                >
              </el-form-item>
            </el-col>
            <el-col :span="6"> </el-col>
          </el-row>
          <el-row style="margin-top: 12px">
            <el-col :span="24">
              <el-form-item label="留样日期：" prop="sampleDate" align="center">
                <el-date-picker
                  class="w100"
                  v-model="disposeForm.sampleDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请输入"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6"> </el-col>
          </el-row>
          <el-row style="margin-top: 12px">
            <el-col :span="24">
              <el-form-item
                label="留样条件："
                prop="sampleCondition"
                align="center"
              >
                <el-input
                  v-model="disposeForm.sampleCondition"
                  placeholder="请输入"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 12px">
            <el-col :span="24">
              <el-form-item
                label="生产商/受托生产："
                prop="producerManufacturer"
                align="center"
              >
                <el-input
                  v-model="disposeForm.producerManufacturer"
                  placeholder="请输入"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 12px">
            <el-col :span="24">
              <el-form-item
                label="留样地点："
                prop="samplePlace"
                align="center"
              >
                <el-input
                  type="textarea"
                  v-model="disposeForm.samplePlace"
                  placeholder="请输入"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 12px">
            <el-col :span="24">
              <el-form-item
                label="留样备注："
                prop="sampleRemark"
                align="center"
              >
                <el-input
                  type="textarea"
                  v-model="disposeForm.sampleRemark"
                  placeholder="请输入"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="margin-top: 12px">
            <el-col :span="24"> </el-col>
          </el-row>
        </template>

        <template
          v-if="
            disposeForm.disposeType == 3 ||
            disposeForm.disposeType == 6 ||
            disposeForm.disposeType == 9
          "
        >
          <el-form-item label="入库仓库：" prop="depotId" align="center">
            <el-select
              style="width: 100%"
              v-model="disposeForm.depotId"
              filterable
            >
              <el-option
                v-for="item in warehouseList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
                @click.native="chooseWarehouse(item)"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-form>

      <!-- <DictSelection
        dictName="不良品处理类型"
        :filterArr="all ? ['返工返修'] : []"
        v-model="current.disposalStatus"
      /> -->

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消 </el-button>
        <el-button type="primary" @click="handleDispose">确 定</el-button>
      </div>
    </el-dialog>
    <Edit ref="edit" @success="save" />
  </div>
</template>

<script>
  import OrderSearch from './components/detail-search.vue';
  import Edit from './components/edit.vue';
  import { getWarehouseLists } from '@/api/produce/index';

  import dictMixins from '@/mixins/dictMixins';
  import { unacceptedProductStatus } from '@/utils/util';
  import { deepClone } from '@/utils';
  import { disposeApi, refluxTask } from '@/api/unacceptedProduct';

  import {
    getDetail,
    deleteUnacceptedProductDetail,
    dispose,
    getById
  } from '@/api/unacceptedProduct/index';
  export default {
    components: {
      OrderSearch,
      Edit
    },
    mixins: [dictMixins],
    data() {
      return {
        key: '',
        warehouseList: [],
        rules: {
          disposeType: [
            { required: true, message: '请选择处置方式', trigger: 'change' }
          ],
          depotId: [
            { required: true, message: '请选择仓库', trigger: 'change' }
          ],

          keepSampleQuantity: [
            {
              validator: (rule, value, callback) => {
                if (
                  this.disposeForm.disposeType === 6 &&
                  this.current &&
                  this.current.measureQuantity !== undefined
                ) {
                  const inputVal = Number(value);
                  const maxVal = Number(this.current.measureQuantity);
                  if (inputVal > maxVal) {
                    return callback(new Error(`不能超过原计量数量${maxVal}`));
                  }
                }
                callback();
              },
              trigger: 'blur'
            }
          ]
        },
        disposeType: '',
        disposeForm: {
          disposeType: '',
          sampleCondition: '',
          sampleDate: '',
          samplePlace: '',
          sampleRemark: '',
          producerManufacturer: '',
          depotId: '',
          depotName: '',
          taskId: '',
          keepSampleQuantity: ''
        },
        loading: false,
        selection: [],
        dialogVisible: false,
        current: {},
        formData: {},
        all: false,
        qualityType: null,
        allList: [
          { value: 1, label: '返工' },
          { value: 2, label: '返修' },
          { value: 3, label: '报废' },
          { value: 4, label: '降级使用' },
          { value: 5, label: '让步接收' },
          { value: 6, label: '留样' },
          { value: 7, label: '消耗' },
          { value: 8, label: '回用/归批' },
          { value: 9, label: '转试销' },
          { value: 10, label: '退货' }
        ],
        //来料
        disposalStatusListType: [
          {
            value: 5,
            label: '让步接收'
          },
          {
            value: 9,
            label: '退货'
          }
        ],
        //生产
        disposalStatusList: [
          {
            value: 1,
            label: '返工'
          },
          {
            value: 2,
            label: '返修'
          },
          {
            value: 3,
            label: '报废'
          },
          {
            value: 4,
            label: '降级使用'
          },
          {
            value: 5,
            label: '让步接收'
          },
          {
            value: 6,
            label: '留样'
          },
          {
            value: 7,
            label: '消耗'
          },
          {
            value: 8,
            label: '回用'
          }
        ],
        refluxTaskList: []
      };
    },
    computed: {
      showBtn() {
        return !this.$route.query.type;
      },
      disposeList() {
        if (this.$route.query.qualityType == 1) {
          return this.allList.filter((item) => [5, 10].includes(item.value));
        }

        if (
          this.$route.query.qualityType == 2
        ) {
          return this.allList.filter(
            (item) => item.value !== 8
          );
        }

        if (
          this.$route.query.qualityType == 3
        ) {
          return this.allList.filter(
            (item) => item.value !== 8 && item.value !== 10
          );
        } else {
          return this.allList;
        }
      },
      // 表格列配置
      columns() {
        const arr = [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            reserveSelection: true,
            align: 'center',
            selectable: (row, index) => {
              return row.disposalStatus !== 2; //
            }
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            label: '样品编码',
            prop: 'sampleCode',
            width: '150',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryCode',
            label: '物品编码',
            width: '150',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryName',
            label: '物品名称',
            width: '150',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '规格',
            prop: 'specification',
            width: '120',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            label: '牌号',
            align: 'center'
          },
          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            width: '120',
            showOverflowTooltip: true
          },
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center',
            width: '120',
            showOverflowTooltip: true
          },
          {
            prop: 'weight',
            label: '重量',
            align: 'center',
            width: '120',
            showOverflowTooltip: true
          },
          {
            prop: 'weightUnit',
            label: '重量单位',
            align: 'center',
            width: '120',
            showOverflowTooltip: true
          },
          {
            prop: 'engrave',
            label: '刻码',
            align: 'center'
          },
          // {
          //   prop: 'unqualifiedQuantity',
          //   label: '数量',
          //   align: 'center',
          //   width: 60
          // },
          // { label: '包装数量', prop: 'packingQuantity', align: 'center' },
          // { label: '包装单位', prop: 'packingUnit', align: 'center' },
          { label: '计量数量', prop: 'measureQuantity', align: 'center' },
          { label: '计量单位', prop: 'measureUnit', align: 'center' },
          // { label: '物料代号', prop: 'materielDesignation', align: 'center' },
          // { label: '客户代号', prop: 'clientCode', align: 'center' },
          {
            prop: 'produceRoutingName',
            label: '工艺路线',
            align: 'center'
          },
          {
            prop: 'produceTaskName',
            label: '工序',
            align: 'center'
          },
          {
            prop: 'unqualifiedReason',
            label: '原因',
            align: 'center'
          },
          {
            prop: 'disposeTime',
            label: '处置时间',
            align: 'center',
            width: '180',
            showOverflowTooltip: true
          },
          {
            prop: 'disposalStatus',
            label: '处置状态',
            align: 'center',
            width: '120',
            showOverflowTooltip: true,
            formatter: (row, column, cellValue) => {
              return this.disposalStatustList[cellValue ? cellValue : 0];
            }
          },
          {
            prop: 'disposeType',
            label: '处置类型',
            align: 'center',
            width: '120',
            showOverflowTooltip: true,
            formatter: (row, column, cellValue) => {
              console.log(this.allList.find((item) => item.value == cellValue));

              return this.allList.find((item) => item.value == cellValue)
                ?.label;
            }
          },

          // {
          //   prop: 'type',
          //   label: '处置类型',
          //   align: 'center',
          //   // slot: 'SlottingType'
          //   formatter: (row, column, cellValue) => {
          //     return this.getDictValue('不良品处理类型', cellValue + '');
          //   }
          // },
          // {
          //   prop: 'status',
          //   label: '状态',
          //   align: 'center',
          //   formatter: (row, column, cellValue) => {
          //     return unacceptedProductStatus(cellValue);
          //   }
          // },

          {
            columnKey: 'action',
            label: '操作',
            width: 150,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action',
            showOverflowTooltip: true
          }
        ];
        return this.$route.query.type ? arr.slice(0, -1) : arr;
      },
      disposalStatustList() {
        return { 0: '待处置', 1: '处置中', 2: '处置完成' };
      }
    },
    async created() {
      this.qualityType = this.$route.query.qualityType;
      this.warehouseList = await getWarehouseLists();
      if (this.$route.query.workOrderCode) {
        this.getRefluxTask();
      }

      console.log(this.disposeList, 'disposeListdisposeList');

      // console.log(this.warehouseList, 'this.warehouseList');
    },

    methods: {
      disposeTypeChange() {
        console.log(this.disposeForm.disposeType);
        console.log(this.current.measureQuantity);
        if (this.disposeForm.disposeType == 6) {
          this.disposeForm.keepSampleQuantity =
            this.current?.measureQuantity || '';
        }
      },
      // /* 表格数据源 */
      async datasource({ page, where, limit }) {
        let id = this.$route.query.id;
        const arr = await getById(id);
        // where.unqualifiedProductsId = this.$route.query.id;
        return arr.poList;
      },

      async getRefluxTask() {
        await refluxTask({
          workOrderCode: this.$route.query.workOrderCode
        }).then((res) => {
          this.refluxTaskList = res;
        });
      },

      reload(where) {
        this.key = Math.random();
        // this.$nextTick(() => {
        //   if (this.$refs.searchRef && this.$refs.searchRef.reload)
        //     this.$refs.searchRef.reload({ page: 1, where: where });
        // });
      },
      remove(row) {
        let ids = row ? [row.id] : this.selection.map((item) => item.id);
        deleteUnacceptedProductDetail(ids).then((res) => {
          this.$message.success('删除' + res);
          this.getList();
        });
      },
      close() {
        this.$refs.disposeForm.resetFields();
        this.dialogVisible = false;
        this.disposeType = '';
        this.all = false;
        this.formData.disposalStatus = '';
      },
      // // 处置
      disposeFn(type, row) {
        if (type == 1) {
          this.all = true;
        } else {
          this.current = row;
          console.log(this.current, 'row');
        }
        this.formData = { ...row };
        this.dialogVisible = true;
        // let ids = this.current ? [this.current.id] : this.selection.map((item) => item.id);
      },
      async handleDispose() {
        this.$refs['disposeForm'].validate(async (valid) => {
          if (valid) {
            let params = {
              disposeType: this.disposeForm.disposeType,
              poList: [],
              refluxTask: null
            };
            if (this.all) {
              params.poList = this.selection.map((item) => {
                return { ...item, ...this.disposeForm };
              });
            } else {
              params.poList = [
                { ...deepClone(this.current), ...this.disposeForm }
              ];
            }

            if (this.disposeForm.taskId) {
              params.refluxTask = this.refluxTaskList.find(
                (item) => item.taskId == this.disposeForm.taskId
              );
            }

            console.log(params);
            await disposeApi(params);
            this.dialogVisible = false;
            this.current = null;
            this.$message.success('处置成功！');
            this.reload();
            return;
          } else {
            return false;
          }
          return;
        });

        return;
      },
      validate() {},
      async save(data) {
        if (data.data && data.data.length > 0) {
          data.data.forEach((item) => {
            item['fid'] = item.id || this.current.id;
          });
        }
        let ids =
          data.type == 1 ? [this.current.id] : data.data.map((item) => item.id);
        await dispose({
          id: ids,
          disposeType: Number(data.type),
          poList: data.data
        });
        this.dialogVisible = false;
        this.current = null;
        this.$message.success('处置成功！');
        this.reload();
      },
      chooseWarehouse(item) {
        console.log(item);
        this.disposeForm.depotId = item.id;
        this.disposeForm.depotName = item.name;
      }
    },
    watch: {
      'disposeForm.disposeType': {
        handler(newVal, oldVal) {
          if (newVal == 6) {
            this.rules.depotId = [];
          } else {
            this.rules.depotId = [
              { required: true, message: '请选择仓库', trigger: 'change' }
            ];
          }
          this.disposeForm.sampleCondition = '';
          this.disposeForm.sampleDate = '';
          this.disposeForm.samplePlace = '';
          this.disposeForm.sampleRemark = '';
          this.disposeForm.producerManufacturer = '';
          this.disposeForm.depotId = '';
          this.disposeForm.depotName = '';
          this.disposeForm.taskId = '';
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .unacceptedProductSelect {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
