<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { getManuFactureDetail } from '/@/api/manufacturer';
  import { ParamsAdd } from '/@/types/manufacturer';
  import { Status, DataContract } from '/@/const/manufacturer'

  type QueryData = {
    supplierCode: string | undefined;
  };

  const router = useRouter();
  const route = useRoute();

  const request = route.query as QueryData;

  const activeKey = ref('1');

  const current = ref(1);
  const total = ref(10);

  const getDetail = async () => {
    if (!request.supplierCode) return;
    const res = await getManuFactureDetail({ supplierCode: request.supplierCode });
    if (res.success) {
      formData.value = {
        ghsCode: res.data.mfrCode,
        brandList: res.data.brandList,
        cooperateStatus: res.data.cooperateStatus,
        dataControl: res.data.dataControl,
        mfrName: res.data.mfrName,
      };
    }
  };

  watch(
    () => activeKey.value,
    () => {
      getDetail();
    },
    { immediate: true },
  );

  const formData = ref<ParamsAdd>();

  const dataSource = [
    {
      name: '艾伯康（上海）贸易有限公司',
      code: 'GSH0261',
      fanwei: '北京；山东；山西；河南',
      pinpai: 'Abcam（艾伯康）',
      time: '2023-01-02 15:00:01',
    },
  ];

  const columns = [
    {
      title: '代理商编号',
      dataIndex: 'code',
      key: 'code',
    },
    {
      title: '代理商全称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '授权范围',
      dataIndex: 'fanwei',
      key: 'fanwei',
    },
    {
      title: '授权品牌',
      dataIndex: 'pinpai',
      key: 'pinpai',
    },
    {
      title: '添加时间',
      dataIndex: 'time',
      key: 'time',
    },
  ];
</script>
<template>
  <div class="manufacturer-detail">
    <div class="manufacturer-detail-top">
      <a-button type="primary" @click="router.push(`/manufacturer/operate?supplierCode=${request.supplierCode}`)">编辑</a-button>
      <a-button>操作日志</a-button>
    </div>

    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="基本信息">
        <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <a-form-item label="供货商编码"> {{formData?.ghsCode}} </a-form-item>
          <a-form-item label="供货商名称"> {{ formData?.mfrName }} </a-form-item>
          <a-form-item label="合作状态"> {{ Status[formData?.cooperateStatus as number] }} </a-form-item>
          <a-form-item label="合作品牌"> {{ Array.isArray(formData?.brandList) && formData?.brandList.join(',') }} </a-form-item>
          <a-form-item label="数据控制"> {{ DataContract[formData?.dataControl + ''] }} </a-form-item>
          <!-- <a-form-item label="合作渠道范围">
            全国 <br />
            指定省市：北京；山东；山西；河南
          </a-form-item> -->
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="2" tab="代理授权信息" force-render>
        <a-table bordered :dataSource="dataSource" :columns="columns" :pagination="false" />
        <a-pagination v-model:current="current" :total="total" show-less-items />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<style lang="less" scoped>
  .manufacturer-detail {
    background-color: var(--fy-bg-white);
    padding: 16px;

    &-top {
      padding-top: 32px;
      text-align: right;

      :deep(.ant-btn-primary) {
        margin-right: 12px;
      }
    }

    :deep(.ant-form) {
      width: 30%;
    }

    :deep(.ant-pagination) {
      text-align: right;
      margin-top: 16px;
    }
  }
</style>
