<template>
  <my-drawer
    class="sop-dialog"
    :visible="visible"
    header="设备管理"
    size="85%"
    attach="body"
    :destroyOnClose="true"
    :closeOnOverlayClick="false"
    :close-btn="true"
    @close="emit('update:visible', false)"
    @confirm="emit('update:visible', false)"
    :cancel-btn="null"
    confirmBtn="关闭"
  >
    <t-collapse class="sop-step-mid" defaultExpandAll>
      <t-collapse-panel disabled>
        <template #expandIcon></template>
        <template #header>
          项目派单信息（SOP流水单号：{{ sop.sopNo }}）
        </template>
        <t-form colon label-width="72px">
          <t-row :gutter="[0, 4]">
            <t-col :span="4">
              <t-form-item label="项目单号">{{ sop.crmNo }}</t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item label="项目名称">{{ sop.crmName }}</t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item label="科目名称">{{ sop.courseName }}</t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item label="客户类型">{{
                sop.customManagerTypeStr
              }}</t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item label="客户名称">{{ sop.customName }}</t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item label="实施产品">{{
                crmInfo.productName
              }}</t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item label="服务单元">{{
                crmInfo.serviceUnitName
              }}</t-form-item>
            </t-col>
          </t-row>
        </t-form>
      </t-collapse-panel>
    </t-collapse>

    <div class="mt-10px">
      <t-tabs v-model="curStep">
        <t-tab-panel value="设备签收登记" label="设备签收登记">
          <Tab1 :sop="sop" />
        </t-tab-panel>
        <t-tab-panel value="设备去处登记" label="设备去处登记"
          ><Tab2 :sop="sop" />
        </t-tab-panel>
      </t-tabs>
    </div>
  </my-drawer>
</template>

<script lang="ts" name="DeviceManageNew" setup>
import { computed, ref, watch } from 'vue';
import Tab1 from './tab1.vue';
import Tab2 from './tab2.vue';
import { sopEditApi } from '@/api/sop';
const props = defineProps({
  visible: Boolean,
  sop: {
    type: Object,
    default() {
      return {};
    },
  },
});
const curStep = ref('设备签收登记');
const emit = defineEmits(['update:visible', 'confirm']);
const crmInfo = ref({});
watch(
  () => props.visible,
  (val) => {
    if (val) {
      sopEditApi(props.sop.id).then((res) => {
        crmInfo.value = res?.crmInfo || {};
      });
    }
  }
);
</script>
