<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { message } from 'ant-design-vue';
  import { useRouter, useRoute } from 'vue-router';
  import { handleManufacturerAdd, getManuFactureDetail, handleEditApi } from '/@/api/manufacturer';
  import { getSupplierApi, getBrandListApi } from '/@/api/manufacturer';
  import { Supplier, BrandList, ParamsAdd } from '/@/types/manufacturer';
  import moment from 'moment';

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

  const router = useRouter();

  const route = useRoute();

  const request = route.query as QueryData;

  const loading = ref(false);

  const formData = ref<ParamsAdd>({
    ghsCode: undefined,
    cooperateStatus: 1,
    brandList: [],
    dataControl: false,
    mfrName: ''
  });

  const getDetailApi = 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
      };
    }
  };

  // const options = [
  //   { label: '北京', value: '北京' },
  //   { label: '天津', value: '天津' },
  //   { label: '山东', value: '山东' },
  //   { label: '河北', value: '河北' },
  //   { label: '北京', value: '北京' },
  //   { label: '天津', value: '天津' },
  //   { label: '山东', value: '山东' },
  //   { label: '河北', value: '河北' },
  //   { label: '北京', value: '北京' },
  //   { label: '天津', value: '天津' },
  //   { label: '山东', value: '山东' },
  //   { label: '河北', value: '河北' },
  //   { label: '北京', value: '北京' },
  //   { label: '天津', value: '天津' },
  //   { label: '山东', value: '山东' },
  //   { label: '河北', value: '河北' },
  // ];

  onMounted(() => {
    getSupplier();
    getBrandList();
    getDetailApi();
  });

  const supplierList = ref<Supplier[]>();
  const getSupplier = async () => {
    const res = await getSupplierApi();
    supplierList.value = res.data;
  };

  const brandList = ref<BrandList[]>();
  const brandLoading = ref(false);
  const getBrandList = async () => {
    brandLoading.value = true;
    const res = await getBrandListApi({ brand: '' }).finally(() => (brandLoading.value = false));
    if (res.success) {
      brandList.value = res.data.filter(
        (e) => moment(e.expirationDate).valueOf() >= moment(new Date()).startOf('day').valueOf(),
      );
    }
  };

  const formRef = ref();
  const submit = () => {
    formRef.value.validate().then(async () => {
      loading.value = true;
      const requestMethod = request.supplierCode ? handleEditApi : handleManufacturerAdd
      const res = await requestMethod({
        ...(formData.value as ParamsAdd),
        brandList: Array.isArray(formData.value.brandList)
          ? formData.value.brandList.join(',')
          : '',
      }).finally(() => (loading.value = false));
      if (res.success) {
        router.push('/manufacturer/index');
        message.success(res.message);
      } else {
        message.warning(res.message);
      }
    });
  };
</script>
<template>
  <div class="manufacturer-operate">
    <div class="manufacturer-operate-top">
      <a-button @click="router.push('/manufacturer/index')">取消</a-button>
      <a-button type="primary" @click="submit" :loading="loading">提交</a-button>
    </div>

    <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData" ref="formRef">
      <a-form-item label="供货商编码" v-if="request.supplierCode">
        {{ formData.ghsCode }}
      </a-form-item>
      <a-form-item
        label="供货商名称"
        name="ghsCode"
        :rules="[
          {
            required: request.supplierCode ? false : true,
            message: '请选择供货商名称',
            trigger: 'change',
          },
        ]"
      >
        <span v-if="request.supplierCode">{{ formData.mfrName }}</span>
        <a-select
          v-else
          v-model:value="formData.ghsCode"
          style="width: 100%"
          placeholder="请选择供货商名称"
        >
          <template v-for="item in supplierList" :key="item.supplierCode">
            <a-select-option :value="item.supplierCode">{{ item.supplierName }}</a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="合作状态">
        <a-radio v-model:checked="formData.cooperateStatus" disabled>进行中</a-radio>
      </a-form-item>
      <a-form-item
        label="合作品牌"
        name="brandList"
        :rules="[{ required: true, message: '请选择合作品牌', trigger: 'change' }]"
      >
        <a-select
          v-loading="brandLoading"
          v-model:value="formData.brandList"
          mode="multiple"
          style="width: 100%"
          placeholder="请选择合作品牌"
        >
          <a-select-option v-for="(item, index) in brandList" :key="index" :value="item.brand">{{
            item.brand
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="数据控制"
        name="dataControl"
        :rules="[{ required: true, message: '请选择数据控制', trigger: 'change' }]"
      >
        <a-radio-group v-model:value="formData.dataControl">
          <a-radio :value="true">允许非厂商数据存在</a-radio>
          <a-radio :value="false">不允许非厂商数据存在</a-radio>
        </a-radio-group>
      </a-form-item>
      <!-- <a-form-item
        label="合作渠道范围"
        class="last-item"
        name="fanwei"
        :rules="[{ required: true, message: '合作渠道范围', trigger: 'change' }]"
      >
        <a-radio-group v-model:value="formData.fanwei">
          <a-radio value="3">全国</a-radio>
          <a-radio value="4">指定省市</a-radio>
        </a-radio-group>
        <a-checkbox-group
          v-if="formData.fanwei === '4'"
          v-model:value="formData.value1"
          name="checkboxgroup"
          :options="options"
        />
      </a-form-item> -->
    </a-form>
  </div>
</template>
<style lang="less" scoped>
  .manufacturer-operate {
    background-color: var(--fy-bg-white);
    padding: 16px;
    &-top {
      padding: 32px 0 16px;
      margin-bottom: 16px;
      text-align: right;
      border-bottom: 1px solid var(--fy-border-bottom-bg);

      :deep(.ant-btn-primary) {
        margin-left: 12px;
      }
    }
    :deep(.ant-form) {
      width: 30%;
    }
    // .last-item {
    //   :deep(.ant-checkbox-group) {
    //     display: flex;
    //     flex-wrap: wrap;
    //     justify-content: space-between;
    //     margin-top: 12px;
    //   }

    //   :deep(.ant-checkbox-wrapper) {
    //     flex: 0 0 calc(50% - 12px);
    //     margin-bottom: 12px;
    //     margin-right: 12px;
    //   }

    //   :deep(.ant-radio-group) {
    //     display: flex;
    //     justify-content: space-between;
    //   }

    //   :deep(.ant-radio-wrapper) {
    //     flex: 0 0 calc(50% - 12px);
    //     margin-right: 12px;
    //   }
    // }
  }
</style>
