<!-- 选择商户以及进件渠道 -->
<template>
  <div class="gyq_container">
    <div class="gyq_content">
      <div class="row">
        <el-form :model="queryForm" inline>
          <el-form-item label="请选择用户">
            <el-input placeholder="用户号/名称/手机号" readonly @click="selectShopsDialogRef?.show()"
              v-model="queryForm.shopName">
              <template #suffix>
                <div class="center">
                  <el-icon v-if="queryForm.shopName" @click.stop="queryForm.shopName = ''">
                    <CircleCloseFilled />
                  </el-icon>
                  <el-icon @click="selectShopsDialogRef?.show()" style="cursor: pointer;">
                    <Search />
                  </el-icon>
                </div>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Plus">新增用户</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <selectShopsDialog ref="selectShopsDialogRef" @success="selectShopSuccess" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import selectShopsDialog from "./components/selectShopsDialog.vue";

const selectShopsDialogRef = ref<InstanceType<typeof selectShopsDialog> | null>(null);

const queryForm = ref({
  shopName: ""
});

// 选择商户成功回调
function selectShopSuccess(shop: any) {
  console.log('选择的商户：', shop);
  queryForm.value.shopName = shop.shopName;
}
</script>

<style scoped lang="scss">
.gyq_container {
  padding: 14px;

  .gyq_content {
    padding: 14px;
    background-color: #fff;
    border-radius: 8px;
  }
}

.row {
  &.mt14 {
    margin-top: 14px;
  }
}

.center {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>