<!-- SOP管理=》设备入库登记页面，已不再需要该文件，因为去掉了新增按钮 -->
<!-- 此文件改为 资源保障=》设备发货管理 页面所用，逻辑也有少量更改 -->

<template>
  <my-dialog
    :visible="visible"
    @close="emit('update:visible', false)"
    header="待返还设备"
    :width="1200"
    :closeOnOverlayClick="false"
  >
    <t-form ref="formRef" :data="formData" :rules="rules" :labelWidth="0">
      <t-row :gutter="[0, 20]">
        <t-col :span="12">
          <t-form-item label="" name="deviceInOutFormList">
            <device-table
              :data="formData.deviceInOutFormList"
              :config="deviceConfig"
              :key="formData.inOutType"
            ></device-table>
          </t-form-item>
        </t-col>
      </t-row>
    </t-form>
    <template #foot>
      <t-button theme="default" @click="emit('update:visible', false)"
        >取消</t-button
      >
      <t-button theme="primary" @click="save">确定</t-button>
    </template>
  </my-dialog>
</template>
<script setup name="AddDeviceDialog">
import { computed, reactive, ref, watch } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { deviceOutInSave } from '@/api/sop';
// import DeviceTable from '../../components/dynamic-form-item/device-table/index.vue';
import DeviceTable from './device-table/index.vue';

const emit = defineEmits(['update:visible', 'success']);
const formRef = ref(null);

const props = defineProps({
  visible: Boolean,
  data: Array,
});
const formData = reactive({
  inOutType: 'IN',
  inOutTime: '',
  deviceInOutFormList: [],
  pushSupplier: true,
});

const deviceConfig = computed(() => {
  return {
    code: 'DEVICE_IN_TABLE',
    writable: true,
  };
});

watch(
  () => props.visible,
  () => {
    formData.inOutTime = Date.now();
  }
);
watch(
  () => props.data,
  () => {
    formData.deviceInOutFormList = props.data || [];
  }
);

const rules = {
  deviceInOutFormList: [
    {
      required: true,
      validator: (val) => {
        if (!val.length) {
          return {
            result: false,
            message: '请填写至少一条记录',
          };
        }
        return {
          result: true,
          type: 'success',
        };
      },
      type: 'error',
      trigger: 'change',
    },
    {
      validator: (val) => {
        if (val.some((item) => !item.basePhotoPath && !item.expressNo)) {
          return {
            result: false,
            message:
              '每一条数据的快递单拍照和快递单号至少有一项必填，请核对并编辑',
          };
        }
        return {
          result: true,
          type: 'success',
        };
      },
      type: 'error',
      trigger: 'change',
    },
  ],
};

const save = async () => {
  formData.inOutTime = Date.now();
  const valid = await formRef.value.validate();
  if (valid !== true) return;

  deviceOutInSave(formData).then(() => {
    MessagePlugin.success('操作成功');
    emit('success');
  });
};
</script>
<style lang="less" scoped>
.dynamic-table {
  width: 100%;
  margin-bottom: 15px;
  .delete-icon {
    cursor: pointer;
    &:hover {
      :deep(use) {
        fill: var(--td-brand-color);
      }
    }
  }
  :deep(.t-upload) {
    .t-upload__card-content {
      width: 80px;
      height: 50px;
    }
    .t-upload__card-name {
      display: none;
    }
    .t-upload__image-add {
      .t-icon.t-icon-add {
        margin-bottom: 0;
      }
      .t-size-s {
        display: none;
      }
    }
    .t-upload__card-container {
      width: 80px;
      height: 50px;
    }
    .t-upload__tips {
      display: none;
    }
  }
}
</style>
