<template>
  <div>
    <!-- 抽屉组件 -->
    <a-drawer
      title="项目详情"
      placement="right"
      :closable="true"
      :open="visible"
      @close="onClose"
      width="600px"
    >
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="详细信息">
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">项目名称：</span>{{ detail.projectName }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">所属合同：</span>{{ detail.contractName }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">项目编号：</span>{{ detail.projectCode }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">项目类别：</span>{{ detail.projectType }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">项目故障大类：</span>{{ detail.faultCategory }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div
                ><span class="titleLabel">接单超期时间：</span>{{ detail.orderTakingOverTime }}</div
              >
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">接单超期扣款：</span>{{ detail.orderTakingCost }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">处理超期时间：</span>{{ detail.handleOverTime }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">处理超期扣款：</span>{{ detail.handleCost }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div
                ><span class="titleLabel">关联项目数量：</span
                >{{ detail.relatedProjectAmount }}</div
              >
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">项目概要：</span>{{ detail.projectContent }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">项目图标：</span>{{ detail.icon }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">项目附件：</span>{{ detail.attachment }}</div>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </a-drawer>
  </div>
</template>

<script>
  import { reactive, ref } from 'vue';
  // import { getInfo } from './api';
  export default {
    setup() {
      //抽屉详情
      let detail = reactive({
        projectName: '',
        contractName: '',
        projectCode: '',
        projectType: '',
        faultCategory: '',
        orderTakingOverTime: '',
        orderTakingCost: '',
        handleOverTime: '',
        handleCost: '',
        relatedProjectAmount: null,
        projectContent: '',
        icon: '',
        attachment: [],
      });

      // 打开抽屉的方法
      const visible = ref(false);
      // const showDrawer = async(id) => {
      //   const data = await getInfo(id)
      //   for(let i in detail){
      //     detail[i] = data[i]
      //   }
      //   visible.value = true;
      //   console.log(detail)
      // };
      const showDrawer = () => {
        visible.value = true;
      };
      // 关闭抽屉的方法
      const onClose = () => {
        visible.value = false;
      };
      const activeKey = ref('1');

      return {
        visible,
        showDrawer,
        onClose,
        activeKey,
        detail,
      };
    },
  };
</script>

<style scoped>
  /* 可选样式调整 */
  .ant-btn {
    margin: 20px;
  }

  /* .singerDetail{
  margin-bottom: 10px;
} */
  div {
    margin-bottom: 10px;
  }

  .timeText {
    margin: 0 0 40px 20px;
    color: red;
  }

  .titleLabel {
    color: gray;
  }
</style>
