
<!--
  复制自 运营平台
  差异： 1. 删除商户搜索框，  2. show函数删除mchNo参数， 3.rules删除  mchNo参数
  -->
  <template>
  <a-drawer
    v-model:visible="vdata.isShow"
    :title=" vdata.isAdd ? '新增门店' : '修改门店' "
    width="90%"
    :mask-closable="false"
    @close="vdata.isShow = false"
  >
    <a-form
      ref="infoFormModel"
      :model="vdata.saveObject"
      :label-col="{span: 6}"
      :wrapper-col="{span: 15}"
      :rules="rules"
    >
      <a-row justify="space-between" type="flex">
        <a-col :span="12">
          <a-form-item label="用户号:" name="mchNo">
            <JeepaySearchInfoInput
              :disabled="!vdata.isAdd?true : false"
              v-model:value="vdata.saveObject.mchNo"
              placeholder="用户号"
              :textUpStyle="false"
              showType="MCH"
              :onlyMchName="true"
            />
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <!--          <a-form-item label="商户号:" name="mchNo">-->
          <!--            <JeepaySearchInfoInput v-model:value="vdata.saveObject.mchNo" placeholder="商户号" :textUpStyle="false" showType="MCH" :onlyMchName="true" />-->
          <!--          </a-form-item>-->
          <a-form-item label="选择商户" name="mchApplyId">
            <a-select
              :disabled="!vdata.isAdd?true : false"
              v-model:value="vdata.saveObject.mchApplyId"
              placeholder="请选择商户号"
              show-search
              @search="handleBankChange"
              :filter-option="false"
            >
              <a-select-option
                v-for="(d, index) in vdata.filteredAppInfoList"
                :key="index"
                v-model:value="d.applyId"
              >{{ d.mchShortName }}[{{ d.applyId }}]</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="门店名称:" name="storeName">
            <a-input v-model:value="vdata.saveObject.storeName" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="联系人电话" name="contactPhone">
            <a-input v-model:value="vdata.saveObject.contactPhone" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="门店LOGO" name="storeLogo">
            <JeepayUpload v-model:src="vdata.saveObject.storeLogo" bizType="applyment" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="门头照" name="storeOuterImg">
            <JeepayUpload v-model:src="vdata.saveObject.storeOuterImg" bizType="applyment" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="门店内景照" name="storeInnerImg">
            <JeepayUpload v-model:src="vdata.saveObject.storeInnerImg" bizType="applyment" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="备注：" name="remark">
            <a-input v-model:value="vdata.saveObject.remark" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-divider />

      <!-- 引入地图组件  -->
      <JeepayAmap v-if="vdata.isShow" ref="jeepayAmapRef" />
    </a-form>

    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" @click="vdata.isShow = false">
        <close-outlined />取消
      </a-button>
      <a-button type="primary" :loading="vdata.confirmLoading" @click="handleOkFunc">
        <check-outlined />保存
      </a-button>
    </div>
  </a-drawer>
</template>
  <script lang="ts" setup>
import {
  req,
  API_URL_MCH_STORE_LIST,
  API_URL_MCH_APPLYMENT_LIST
} from "@/api/manage";
import { reactive, ref, getCurrentInstance, nextTick } from "vue";

const {
  $infoBox,
  $access
} = getCurrentInstance()!.appContext.config.globalProperties;

const jeepayAmapRef = ref();
const infoFormModel = ref();

const props = defineProps({
  callbackFunc: { type: Function, default: () => {} }
});

const vdata = reactive({
  filteredAppInfoList: [] as any,
  appList: [] as any, // 应用列表
  confirmLoading: false, // 显示确定按钮loading图标
  isAdd: true, // 新增 or 修改页面标识
  isShow: false, // 是否显示弹层/抽屉
  saveObject: {} as any, // 数据对象
  recordId: null // 更新对象ID
});

const rules = {
  areaCode: [{ required: true, message: "请选择省市区", trigger: "blur" }],
  storeName: [{ required: true, message: "请输入门店名称", trigger: "blur" }],
  mchApplyId: [{ required: true, message: "请输入商户号", trigger: "blur" }]
};

function show(mchNo, record) {
  // 弹层打开事件

  if (infoFormModel.value !== undefined) {
    infoFormModel.value.resetFields();
  }
  businessList();
  vdata.isAdd = !record;

  // 数据恢复为默认数据
  vdata.saveObject = { mchNo: mchNo, lng: "", lat: "" };

  vdata.confirmLoading = false; // 关闭loading

  let initMapData: any = {};

  if (!vdata.isAdd) {
    // 修改信息 延迟展示弹层
    vdata.recordId = record.storeId;
    vdata.saveObject = record;

    vdata.isShow = true;

    // 门店包含了区域编码
    if (record.areaCode && record.areaCode.length) {
      initMapData.areacode = record.areaCode;
      initMapData.lnglat = record.lng + "," + record.lat;
      initMapData.address = record.address;
    }
    // 显示地图信息
    nextTick(() => jeepayAmapRef.value.init(initMapData));
  } else {
    vdata.isShow = true; // 立马展示弹层信息

    // 显示地图信息
    nextTick(() => jeepayAmapRef.value.init(initMapData));
  }
}

async function businessList() {
  let res = await req.list(API_URL_MCH_APPLYMENT_LIST, {
    pageNumber: 1,
    pageSize: 300,
    state: 99
  });
  console.log(res.records, "vdata.AppList");
  vdata.filteredAppInfoList = res.records;
  vdata.appList = res.records;
}
// 设置地图标点
function handleOkFunc() {
  // 点击【确认】按钮事件

  let mapData = jeepayAmapRef.value.getMapData();
  if (
    !mapData ||
    mapData.areacode.length == 0 ||
    !mapData.address ||
    !mapData.lnglat
  ) {
    return $infoBox.message.error("请选择地理位置");
  }

  if (mapData.lnglat.indexOf(",") < 0) {
    return $infoBox.message.error("请输入正确的经纬度");
  }

  infoFormModel.value.validate().then(valid => {
    vdata.confirmLoading = true; // 显示loading

    vdata.saveObject.lng = mapData.lnglat.split(",")[0];
    vdata.saveObject.lat = mapData.lnglat.split(",")[1];
    vdata.saveObject.address = mapData.address;
    vdata.saveObject.areaCode = JSON.stringify(mapData.areacode);

    // 请求HTTP
    req
      .addOrUpdate(
        vdata.isAdd ? null : vdata.recordId,
        API_URL_MCH_STORE_LIST,
        vdata.saveObject
      )
      .then(res => {
        vdata.isShow = false;
        vdata.confirmLoading = false;
        props.callbackFunc(); // 刷新列表
      })
      .catch(valid => {
        vdata.confirmLoading = false;
      });
  });
}

const handleBankChange = value => {
  vdata.filteredAppInfoList = [];
  vdata.appList.forEach((item, index) => {
    if (item.mchShortName.includes(value) || item.applyId.includes(value)) {
      vdata.filteredAppInfoList.push(vdata.appList[index]);
    }
  });
};

defineExpose({ show });
</script>
  