<template>
  <a-modal
    v-model:visible="state.visible"
    title="商户配置"
    width="90%"
    :on-before-ok="onSubmit"
  >
    <a-form :model="formData" layout="vertical">
      <a-row :gutter="10">
        <a-col :span="18">
          <a-form-item label="通道" field="singleRoadUid" required>
            <a-select v-model="formData.singleRoadUid">
              <a-option
                v-for="(road, index) in roadData"
                :key="index"
                :value="road.roadUid"
                :label="road.roadName"
              />
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="2">
          <a-form-item
            label="自动结算"
            field="autoSettle"
            :label-col-props="{ span: 10, offset: 0 }"
            :wrapper-col-props="{ span: 12, offset: 0 }"
            required
          >
            <a-switch
              v-model="formData.autoSettle"
              checked-value="yes"
              unchecked-value="no"
            />
          </a-form-item>
        </a-col>
        <a-col :span="2">
          <a-form-item
            label="自动代付"
            field="autoPayfor"
            :label-col-props="{ span: 10, offset: 0 }"
            :wrapper-col-props="{ span: 12, offset: 0 }"
            required
          >
            <a-switch
              v-model="formData.autoPayfor"
              checked-value="yes"
              unchecked-value="no"
            />
          </a-form-item>
        </a-col>
        <a-col :span="2">
          <a-form-item
            label="执行策略"
            field="submitStrategy"
            :label-col-props="{ span: 10, offset: 0 }"
            :wrapper-col-props="{ span: 12, offset: 0 }"
            required
          >
            <a-select v-model="formData.submitStrategy">
              <a-option value="DIRECT">直连</a-option>
              <a-option value="POOL">轮询</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider />
      <a-form-item
        label="平台利率"
        field="singleRoadPlatformRate"
        :label-col-props="{ span: 2, offset: 0 }"
        :wrapper-col-props="{ span: 22, offset: 0 }"
        required
      >
        <rate-table v-model="formData.singleRoadPlatformRate" />
      </a-form-item>
      <a-row :gutter="4">
        <a-col :span="6">
          <a-form-item
            label="代理净利率"
            field="singleRoadAgentRate"
            :label-col-props="{ span: 12, offset: 0 }"
            :wrapper-col-props="{ span: 12, offset: 0 }"
            required
          >
            <a-input-number
              v-model="formData.singleRoadAgentRate"
              :precision="2"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            label="轮询通道"
            field="rollRoadCode"
            :label-col-props="{ span: 12, offset: 0 }"
            :wrapper-col-props="{ span: 12, offset: 0 }"
            required
          >
            <a-select v-model="formData.rollRoadCode">
              <a-option
                v-for="(road, index) in roadPoolData"
                :key="index"
                :value="road.roadPoolCode"
                :label="road.roadPoolName"
              />
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            label="轮询平台净利率"
            field="rollRoadPlatformRate"
            :label-col-props="{ span: 12, offset: 0 }"
            :wrapper-col-props="{ span: 12, offset: 0 }"
            required
          >
            <a-input-number
              v-model="formData.rollRoadPlatformRate"
              :precision="2"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            label="轮询代理净利率"
            field="rollRoadAgentRate"
            :label-col-props="{ span: 12, offset: 0 }"
            :wrapper-col-props="{ span: 12, offset: 0 }"
            required
          >
            <a-input-number
              v-model="formData.rollRoadAgentRate"
              :precision="2"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider />
      <a-form-item label="禁用范围" field="restrictArea">
        <a-select
          v-model="formData.restrictArea"
          field="restrictArea"
          placeholder="请选择禁用范围"
          multiple
        >
          <a-option
            v-for="(item, index) in areaOpetions"
            :key="index"
            :value="item"
            :label="item"
          />
        </a-select>
      </a-form-item>
      <a-row>
        <a-col :span="3">
          <a-form-item
            label="限制代理"
            field="isRestrictAgent"
            tooltip="需要使用注入脚本"
            :label-col-props="{ span: 14, offset: 0 }"
            :wrapper-col-props="{ span: 8, offset: 0 }"
            required
          >
            <a-switch v-model="formData.isRestrictAgent" />
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item
            label="限制卡密"
            field="isRestrictCardPass"
            :label-col-props="{ span: 14, offset: 0 }"
            :wrapper-col-props="{ span: 8, offset: 0 }"
            required
          >
            <a-switch v-model="formData.isRestrictCardPass" />
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item
            label="限制IP"
            field="isRestrictIp"
            :label-col-props="{ span: 14, offset: 0 }"
            :wrapper-col-props="{ span: 8, offset: 0 }"
            required
          >
            <a-switch v-model="formData.isRestrictIp" />
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item
            label="限制设备"
            field="isRestrictDevice"
            tooltip="需要使用注入脚本"
            :label-col-props="{ span: 14, offset: 0 }"
            :wrapper-col-props="{ span: 8, offset: 0 }"
            required
          >
            <a-switch v-model="formData.isRestrictDevice" />
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item
            :label-col-props="{ span: 14, offset: 0 }"
            :wrapper-col-props="{ span: 8, offset: 0 }"
            label="限制局域网IP"
            field="isRestrictInternalIp"
            required
          >
            <a-switch v-model="formData.isRestrictInternalIp" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import {
  addMerchantDeploy,
  getMerchantDeployDetail,
  merchantDeployAddRecord,
  queryAllRestrictArea,
  updateMerchantDeploy
} from '@/api/merchant-deploy';
import { simpleRoad, getSimpleRoad } from '@/api/road';
import { getSimpleRoadPool, simplePoolRoad } from '@/api/road_pool';
import { onMounted, reactive, ref, watch } from 'vue';
import RateTable from './components/rate-table.vue';

const props = defineProps({
  uid: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  },
  deployId: {
    type: Number,
    default: 0
  }
});

const emits = defineEmits(['update:visible', 'close']);

const generateFormData = (): merchantDeployAddRecord => {
  return {
    submitStrategy: 'DIRECT',
    merchantUid: props.uid,
    singleRoadUid: '',
    singleRoadPlatformRate: [],
    singleRoadAgentRate: 0,
    rollRoadCode: '',
    rollRoadPlatformRate: 0,
    rollRoadAgentRate: 0,
    autoPayfor: 'no',
    autoSettle: 'no',
    restrictArea: [],
    isRestrictAgent: false,
    isRestrictCardPass: false,
    isRestrictInternalIp: false,
    isRestrictIp: false,
    isRestrictDevice: false
  };
};

const formData = ref<merchantDeployAddRecord>(generateFormData());
const roadData = ref<simpleRoad[]>([]);
const roadPoolData = ref<simplePoolRoad[]>([]);
const areaOpetions = ref<string[]>([]);

const state = reactive<{ visible: boolean }>({
  visible: props.visible
});

const fetchRoadData = async () => {
  const {
    data: { list }
  } = await getSimpleRoad();
  roadData.value = list;
};

const fetchRoadPoolData = async () => {
  const {
    data: { list }
  } = await getSimpleRoadPool();
  roadPoolData.value = list;
};

const fetchLatestData = async (id: number) => {
  const { data } = await getMerchantDeployDetail({ id });
  if (data.autoPayfor === '') {
    data.autoPayfor = 'no';
  }
  if (data.autoSettle === '') {
    data.autoSettle = 'no';
  }
  formData.value = { ...data };
};

watch(
  () => props.visible,
  (newValue: boolean) => {
    state.visible = newValue;
    if (newValue) {
      fetchRoadData();
      fetchRoadPoolData();
      if (props.deployId === 0) {
        formData.value = generateFormData();
      } else {
        fetchLatestData(props.deployId);
      }
    }
  }
);

watch(
  () => state.visible,
  (newValue: boolean) => {
    emits('update:visible', newValue);
  }
);

const onSubmit = async (): Promise<boolean> => {
  formData.value.merchantUid = props.uid;
  try {
    if (props.deployId !== 0) {
      await updateMerchantDeploy({ id: props.deployId, ...formData.value });
    } else {
      await addMerchantDeploy(formData.value);
    }
    formData.value = generateFormData();
    emits('update:visible', false);
    emits('close');
    return true;
  } catch (error) {
    return false;
  }
};

onMounted(() => {
  queryAllRestrictArea().then(res => {
    areaOpetions.value = res.data.list;
  });
});
</script>

<style lang="less" scoped>
.rate-table {
  width: 100%;
}
</style>
