<template>
  <my-dialog
    :visible="visible"
    @close="emit('update:visible', false)"
    header="新增设备出入库信息"
    :width="1100"
    :closeOnOverlayClick="false"
  >
    <t-form ref="formRef" :data="formData" :rules="rules" :labelWidth="120">
      <t-row :gutter="[0, 20]">
        <t-col :span="6">
          <t-form-item label="设备出入库选择">
            <t-radio-group v-model="formData.inOutType" style="width: 100%">
              <t-radio value="OUT">出库</t-radio>
              <t-radio value="IN">入库</t-radio>
            </t-radio-group>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="设备出入库时间" name="inOutTime">
            <t-date-picker
              v-model="formData.inOutTime"
              style="width: 100%"
              value-type="time-stamp"
              enable-time-picker
              format="YYYY-MM-DD HH:mm"
              :time-picker-props="{ format: 'HH:mm' }"
            />
          </t-form-item>
        </t-col>
        <t-col :span="12">
          <t-form-item label="设备出入库登记" name="deviceInOutFormList">
            <device-table
              v-model="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';

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

const props = defineProps({
  visible: Boolean,
});
const formData = reactive({
  inOutType: 'OUT',
  inOutTime: '',
  deviceInOutFormList: [],
});

const deviceConfig = computed(() => {
  return {
    code: formData.inOutType === 'OUT' ? 'DEVICE_OUT_TABLE' : 'DEVICE_IN_TABLE',
    writable: true,
  };
});

watch(
  () => props.visible,
  () => {
    formData.inOutType = 'OUT';
    formData.inOutTime = '';
    formData.deviceInOutFormList = [];
  }
);
watch(
  () => formData.inOutType,
  () => {
    formData.deviceInOutFormList = [];
  }
);
const rules = {
  inOutTime: [
    {
      required: true,
      message: '设备出入库时间必选',
      type: 'error',
      trigger: 'change',
    },
  ],
  deviceInOutFormList: [
    {
      validator: (val) => {
        if (!val.length) {
          return {
            result: false,
            message: '请填写至少一条记录',
          };
        }
        return {
          result: true,
          type: 'success',
        };
      },
      type: 'error',
      trigger: 'change',
    },
  ],
};

const save = async () => {
  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>
