<template>
  <SysDialog
    top="3vh"
    class="add-customer-feeSet-customer"
    :title="getBindValue.title"
    :width="getBindValue.width"
    :height="getBindValue.height"
    :visible="dialog.visible"
    :confirm-loading="dialog.confirmLoading"
    @onClose="clearOnClose"
    @onConfirm="confirm"
  >
    <template #content>
      <!-- 设置分组内容 -->
      <el-alert 
        class="alert-info"
        v-show="isAllProductShow"
        :closable="false"
        title="该分组对所有线路都有效，修改时请注意对其他线路影响！" 
        type="error" 
      />
      <div class="flex customer-title">
        <div class="label-width"><span class="t">*</span>分组名称：</div>
        <div class="flex group-warp">
          <el-input
            v-model="customerState.groupName"
            placeholder="请输入分组名称"
            class="i-group-name"
          ></el-input>
          <div
            class="error ml-4 customer-title"
            v-show="customerState.isVerifyGroupName"
          >
            请输入分组名称!
          </div>
        </div>
      </div>
      <div class="flex customer-title" v-show="getExternalAdmin">
        <div class="label-width"><span class="t">*</span>产品名称：</div>
        <div class="flex group-warp">
          <BaseSelect
            class="i-group-name"
            v-model:modelValue="customerState.productId"
            :clearable="true"
            :options="productList"
            :disabled="getIsSingleProduct"
            placeholder="请选择产品名称"
            @change="onChangeProductId"
          />
          <span class="all-productId">
            <el-checkbox 
              v-model="customerState.isAllProduct" 
              label="全部产品" 
              size="large" 
              :disabled="getIsAllProduct"
              @change="changeAllProduct"
            />
          </span>
          <div
            class="error ml-4 customer-title"
            v-show="customerState.isVerifyProductId"
          >
            请选择产品名称!
          </div>
        </div>
      </div>
      <div class="flex customer-title">
        <div class="label-width">
          <span class="t" v-show="isShowOrgIdRules">*</span>
          分公司：
        </div>
        <div>
          <el-select
            v-model="customerState.orgId"
            :clearable="true"
            :filterable="true"
            placeholder="请选择分公司"
            class="i-group-name"
            @change="changeCustomerOrgId"
          >
            <el-option
              v-for="item in getOrgSelectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div
          class="error ml-4 customer-title"
          v-show="customerState.isVerifyOrgId"
        >
          请选择分公司!
        </div>
      </div>
      <!-- 选择客户 -->
      <div class="flex">
        <div class="flex-1 customer-left">
          <div class="customer">
            <div
              v-show="
                customerState.radioCustomer === CountryChoiseEnum.CHECK_BOX
              "
            >
              <div>
                <div class="flex align-center">
                  <el-input
                    v-model="customerState.inputCustomerZoning"
                    :clearable="true"
                    placeholder="输入单个客户或多个客户，并用（，）分隔，然后按回车键匹配勾选。"
                    style="width: 100%"
                    @keyup.enter="hanleEnterCustomer"
                  />
                  <el-button
                    type="primary"
                    class="ml-4"
                    @click="hanleEnterCustomer"
                    >匹配勾选</el-button
                  >
                </div>
                <el-checkbox
                  v-model="customerState.checkAllCustomer"
                  :indeterminate="isIndeterminateCustomer"
                  @change="handleCheckAllChange"
                >
                  全选
                </el-checkbox>
                <el-checkbox
                  v-model="customerState.isCheckAllCustomer"
                  @change="handleIsCheckAllChange"
                >
                  取消全选
                </el-checkbox>
                <el-checkbox
                  v-model="customerState.groupFilter"
                  @change="changeGroupFilter"
                >
                  默认过滤已有分组客户
                </el-checkbox>
              </div>

              <el-scrollbar height="588px">
                <div
                  v-for="item in customerState.checkCustomerList"
                  :key="item.value"
                >
                  <div class="top-placement">{{ item[0].code }}</div>
                  <el-checkbox-group 
                    v-model="customerState.customerIdList" 
                    @change="changeCheckCustomerIdList"
                  >
                    <el-checkbox
                      v-for="countryItem in item"
                      :key="countryItem.value"
                      :label="countryItem.value"
                      :checked="countryItem.checked"
                    >
                      {{ countryItem.label }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { CountryChoiseEnum } from "@/type/BaseEnum";
import { useAddCustomer } from "@/composables/customerfeeset/useAddCustomer";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import { useCustomerOrgInfo } from "@/composables/customerfeeset/useBaseModel";

//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
const getBindValue = reactive<Recordable>({
  title: "新增分组",
  width: 1200,
  height: 0,
});
const props = defineProps<{
  customerList: any;
  orgSelectList: any;
  orgId: string;
  groupSelectList: any;
}>();
// 组件事件
const emit = defineEmits(["saveFeesetCustomer", "changeProductId"]);
const { getOrgSelectList, isShowOrgIdRules } = useCustomerOrgInfo(props);
const {
  clearOnClose,
  handleCheckAllChange,
  handleIsCheckAllChange,
  hanleEnterCustomer,
  confirm,
  show,
  customerState,
  isIndeterminateCustomer,
  changeCheckCustomerIdList,
  productList,
  getExternalAdmin,
  onChangeProductId,
  changeCustomerOrgId,
  changeGroupFilter,
  isAllProductShow,
  getIsSingleProduct,
  getIsAllProduct,
  changeAllProduct
  // hanleChangeGroup,
} = useAddCustomer(onShow, onClose, setLoading, emit, props, getBindValue, isShowOrgIdRules);

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show,
});
</script>
<style lang="scss" scoped>
.add-customer-feeSet-customer {
  .alert-info {
    margin-bottom: 8px;
  }
  .min-h {
    min-height: 260px;
    line-height: 1.6;
  }

  .customer {
    padding: 5px 10px 5px 0;

    .el-checkbox {
      // display: block;
    }
  }

  .top-placement {
    position: sticky;
    top: 0;
    width: calc(100% - 20px);
    z-index: 999;
    padding: 3px 5px;
    background-color: #f2f2f2;
    color: #409eff;
  }

  .t {
    color: var(--el-color-danger);
    margin-right: 4px;
  }

  .error {
    color: var(--el-color-danger);
    font-size: 12px;
    line-height: 1;
    padding-top: 2px;
  }

  .customer-title {
    height: 32px;
    line-height: 32px;
    margin-bottom: 5px;
    .group-warp {
      flex: 1;
      .i-group-name {
        width: 214px;
      }
      .all-productId {
        display: flex;
        height: 32px;
        align-items: center;
        padding-left: 12px;
      }
    }
    .label-width {
      width: 90px;
      text-align: right;
    }
    .is-groupName {
      margin-left: 6px;
      margin-right: 10px;
    }
  }
}
</style>
