<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <!-- <seek-page :seekList="seekList" @search="search"></seek-page> -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        :pageSize="20"
        :pageSizes="[20, 30, 40, 50, 100]"
        :height="500"
        :key="key"
        @selection-change="handleSelectionChange"
        @update:current="kk"
        @current-change="kk"
      >
        <!-- 操作列 -->
        <template v-slot:toolbar v-if="showBtn">
          <el-button
            type="primary"
            slot="reference"
            :disabled="selection.length == 0"
            @click="disposeList(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="disposeList(2, row)"
          >
            处置
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" width="35%" @close="close">
      <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 sampleTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <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
                  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>
        </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">
              <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>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消 </el-button>
        <el-button type="primary" @click="consfirm">确 定</el-button>
      </span>
    </el-dialog>

    <Edit ref="edit" @success="save" />
  </div>
</template>

<script>
import { deepClone } from '@/utils';
import Edit from './components/edit.vue';
import { getWarehouseList } from '@/api/sample';

import dictMixins from '@/mixins/dictMixins';
import { unacceptedProductStatus } from '@/utils/util';

import {
  getDetail,
  deleteUnacceptedProductDetail,
  dispose,
  removeSample
} from '@/api/sample';

import { saveData, updateData, getById, disposeApi } from '@/api/sample';
export default {
  components: {
    Edit
  },
  mixins: [dictMixins],
  data() {
    return {
      dataList: [],
      key: '',
      response: {
        dataName: 'sampleVOList'
      },
      warehouseList: [],
      disposeForm: {
        disposeType: '',
        sampleCondition: '',
        sampleDate: '',
        samplePlace: '',
        sampleRemark: '',
        producerManufacturer: '',
        depotId: '',
        depotName: '',
        keepSampleQuantity: ''
      },
      id: '',
      ids: [],
      sampleType: '',
      loading: false,
      selection: [],
      allSelectedData: [],
      disposeType: '',
      dialogVisible: false,
      current: {},
      formData: {},
      all: false,
      qualityType: null,
      sampleTypeList: [
        { value: 1, label: '返工' },
        { value: 2, label: '返修' },
        { value: 6, label: '留样' },
        { value: 8, label: '归批/回用' },
        { value: 3, label: '报废' },
        { value: 10, label: '退货' },
        { value: 7, label: '消耗' }
      ],
      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'
          }
        ]
      }
    };
  },
  computed: {
    showBtn() {
      return !this.$route.query.type;
    },
    // 表格列配置
    columns() {
      const arr = [
        {
          width: 45,
          type: 'selection',
          columnKey: 'selection',
          selectable: (row, index) => {
            return row.disposalStatus !== 2;
          },
          align: 'center'
        },
        {
          type: 'index',
          columnKey: 'index',
          align: 'center',
          label: '序号',
          width: 55,
          showOverflowTooltip: true
        },
        {
          label: '样品编码',
          prop: 'sampleCode',
          width: '150',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '物品编码',
          prop: 'categoryCode',
          width: '150',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '物品名称',
          prop: 'categoryName',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'batchNo',
          label: '批次号',
          align: 'center',
          width: '120',
          showOverflowTooltip: true
        },
        {
          label: '规格',
          prop: 'specification',
          width: '120',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '牌号',
          prop: 'brandNum',
          width: '120',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'modelType',
          label: '型号',
          align: 'center',
          width: '120',
          showOverflowTooltip: true
        },
        {
          prop: 'measureQuantity',
          label: '计量数量',
          align: 'center',
          width: '120',
          showOverflowTooltip: true
        },
        {
          prop: 'measureUnit',
          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: '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) => {
            return this.disposeTypeList[0][cellValue];
          }
        },
        {
          prop: 'qualityResults',
          label: '质检结果',
          align: 'center',
          width: '120',
          showOverflowTooltip: true,
          formatter: (row, column, cellValue) => {
            return this.qualityResultList[cellValue];
          }
        },

        {
          columnKey: 'action',
          label: '操作',
          align: 'center',
          width: 180,
          resizable: false,
          slot: 'action',
          fixed: 'right'
        }
      ];

      return this.$route.query.type ? arr.slice(0, -1) : arr;
    },
    seekList() {
      return [
        {
          label: '编码:',
          value: 'sampleCode',
          type: 'input',
          placeholder: ''
        },
        {
          label: '物品编码:',
          value: 'categoryCode',
          type: 'input',
          placeholder: ''
        },
        {
          label: '物品名称:',
          value: 'categoryName',
          type: 'input',
          placeholder: ''
        }
      ];
    },
    disposeTypeList() {
      return [
        {
          1: '返工',
          2: '返修',
          3: '报废',
          4: '降级使用',
          5: '让步接收',
          6: '留样',
          7: '消耗',
          8: '回用',
          9: '转试销',
          10: '退货'
        }
      ];
    },
    qualityResultList() {
      return { 1: '合格', 2: '不合格' };
    },
    disposalStatustList() {
      return { 0: '待处置', 1: '处置中', 2: '处置完成' };
    }
  },

  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 = '';
      }
    }
  },
  async created() {
    this.getList();
    this.warehouseList = await getWarehouseList();
    this.qualityType = this.$route.query.qualityType;
  },

  methods: {
    disposeTypeChange() {
      console.log(this.disposeForm.disposeType);
      console.log(this.current.measureQuantity)
      if (this.disposeForm.disposeType == 6) {
        this.disposeForm.keepSampleQuantity =
          this.current?.measureQuantity || '';
      }
    },
    kk() {
      console.log('fany');
    },
    handleSelectionChange(selection) {
      console.log('choose');

      this.selection = selection;
      // 更新所有选中的数据
      this.allSelectedData = [
        ...new Set([...this.allSelectedData, ...selection])
      ];
    },
    handlePageChange() {
      console.log('fan');

      // 翻页时同步选中状态
      const currentPageData = this.dataList;
      const selectedOnCurrentPage = currentPageData.filter((item) =>
        this.allSelectedData.some((selectedItem) => selectedItem.id === item.id)
      );
      this.$refs.table.setSelectedRows(selectedOnCurrentPage);
    },
    chooseWarehouse(item) {
      console.log(item);
      this.disposeForm.depotId = item.id;
      this.disposeForm.depotName = item.name;
    },
    async getList() {
      let id = this.$route.query.id;
      const arr = await getById(id);
      this.dataList = arr.sampleVOList;
    },
    // /* 表格数据源 */

    async datasource({ page, where, limit }) {
      let id = this.$route.query.id;
      // where.id = this.$route.query.id;
      const arr = await getById(id);

      return arr.sampleVOList;
    },
    reload(where) {
      console.log('reload');
      this.key = Math.random();
      this.$nextTick(() => {
        // this.datasource();
        // this.$refs.table.reRenderTable();
        // this.getList()
        // this.$refs.table.reload({ page: 1, where: where });
      });
    },
    remove(row) {
      let ids = row ? [row.id] : this.selection.map((item) => item.id);
      removeSample(ids).then((res) => {
        this.$message.success('删除' + res);
        this.reload();
        // 删除后更新 allSelectedData
        this.allSelectedData = this.allSelectedData.filter(
          (item) => !ids.includes(item.id)
        );
      });
    },
    close() {
      this.$refs.disposeForm.resetFields();
      this.dialogVisible = false;
      this.disposeType = '';
    },
    // // 处置
    disposeList(type, row) {
      if (type == 1) {
        this.all = true;
        console.log(this.selection);
      } else {
        this.id = row.id;
        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() {
      if (!this.formData.disposalStatus) {
        return;
      }
      this.$refs.edit.open(
        this.all ? this.selection : [this.current],
        this.formData.disposalStatus
      );
      this.dialogVisible = false;
    },
    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);
      disposeApi({
        disposeType: Number(data.type),
        poList: data.data
      })
        .then((res) => {
          console.log(res);
          this.$message.success('处置成功！');
          this.reload();
        })
        .catch((err) => {
          console.log(err);
        });
      this.dialogVisible = false;
      this.current = null;
    },
    async consfirm() {
      this.$refs['disposeForm'].validate(async (valid) => {
        if (valid) {
          let params = {
            disposeType: this.disposeForm.disposeType,
            poList: []
          };
          if (this.all) {
            params.poList = this.selection.map((item) => {
              return { ...item, ...this.disposeForm };
            });
          } else {
            params.poList = [
              { ...deepClone(this.current), ...this.disposeForm }
            ];
          }
          console.log(params);
          await disposeApi(params);
          this.dialogVisible = false;
          this.current = null;
          this.$message.success('处置成功！');
          this.reload();
        }
        return;
      });
      return;

      // if (this.disposeType == 6) {
      //   this.$refs['disposeForm'].validate(async (valid) => {
      //     if (valid) {
      //       const pa = { ...deepClone(this.current), ...this.disposeForm };
      //       const params = { disposeType: this.disposeType, poList: [pa] };
      //       await disposeApi(params);
      //       this.dialogVisible = false;
      //       this.current = null;
      //       this.$message.success('处置成功！');
      //       this.reload();
      //       return;
      //     } else {
      //       console.log('error submit!!');
      //       return false;
      //     }
      //   });
      //   return;
      // }
      this.$refs.edit.open(
        this.all ? this.selection : [this.current],
        this.disposeType
      );
      this.dialogVisible = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

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