<template>
  <WlPopup
    v-model="popupVisible"
    position="bottom"
    :style="{ height: '460px' }"
    round
    title="企业归属人转移"
    :headerVisible="true"
  >
    <div
      class="enterprise-transfer"
      data-weiling-mobile-ui-bc-enterprise-transfer
    >
      <Form
        @submit="onSubmit"
        ref="vanform"
        label-width="100%"
        style="height: 100%"
        class="flex flex-col"
      >
        <div class="flex-1">
          <Field
            v-model="formData.belong_user.name"
            name="更换归属人"
            label="更换归属人"
            placeholder="请选择更换归属人"
            required
            readonly
            :rules="[{ required: true, message: '更换归属人不能为空' }]"
            right-icon="arrow"
            @click="showPicker = true"
          />
          <Field
            type="text"
            name="将企业原归属人"
            label="将企业原归属人"
            required
            placeholder="将企业原归属人"
            :rules="[{ required: true, message: '请选择原企业归属人分配' }]"
          >
            <template #input>
              <RadioGroup v-model="formData.type">
                <Radio :name="1">移出该企业相关团队</Radio>
                <Radio :name="0" class="m-t-8px">更改为企业协作人</Radio>
              </RadioGroup>
            </template>
          </Field>
          <Field
            type="text"
            name="同时转移原归属人的以下企业数据"
            label="同时转移原归属人的以下企业数据"
            placeholder="同时转移原归属人的以下企业数据"
          >
            <template #input>
              <CheckboxGroup v-model="formData.checkboxList" shape="square">
                <Checkbox name="assign_business">商机</Checkbox>
                <Checkbox name="assign_clue" class="m-t-8px"
                  >联系人</Checkbox
                >
              </CheckboxGroup>
            </template>
          </Field>
        </div>
        <footer>
          <div class="flex flex-row">
            <div class="btn btn_cancel" @click="popupVisible = false">取消</div>
            <div class="btn active" @click.stop="vanform.submit">确定</div>
          </div>
        </footer>
      </Form>
    </div>
  </WlPopup>
  <WlPopup v-model:show="showPicker" round style="height: 90%" teleport="body">
    <BCEmployeeSelector
      :title="'选择员工'"
      :isMultiple="false"
      :envData="envData"
      :requestParams="{
        filter: {
          role_types: [1],
          status_set: [1],
          saas_status_set: [1],
          subscribe_status: 3,
        },
      }"
      @onConfirm="onHandleSelectStaff"
    />
  </WlPopup>
</template>

<script lang="ts">
export default {
  name: "BCEnterpriseList",
};
</script>

<script lang="ts" setup>
import { ref, watch, defineAsyncComponent } from "vue";
import { en_default_logo } from "@mobileUI/utils/cdn";
import WlPopup from "@mobileUI/components/WlPopup/src/index.vue";
import { Form, Field, Checkbox, CheckboxGroup, RadioGroup, Radio } from "vant";
const BCEmployeeSelector = defineAsyncComponent(
  () => import("@mobileUI/components/BCEmployeeSelector/src/index.vue")
);

let popupVisible = ref(false);
const emit = defineEmits(["update:modelValue", "onConfimTransfer"]);
type TData = {
  company_id: string;
  company_name: string;
  image_url: string;
  envData: any;
};
type Props = {
  modelValue: boolean;
  data: TData[];
  retract?: number;
  defaultAvatar?: string;
  envData: () => {};
};
const props = withDefaults(defineProps<Props>(), {
  data: () => [],
  retract: 2,
  defaultAvatar: en_default_logo,
  modelValue: false,
});

const formData = ref<any>({
  belong_user: {},
  type: "",
  checkboxList: [],
});

const vanform = ref(null);
const showPicker = ref(false);
const onHandleSelectStaff = (res: any) => {
  formData.value.belong_user = res;
  showPicker.value = false;
};

const onSubmit = () => {
  const { checkboxList, belong_user, type } = formData.value;
  emit("onConfimTransfer", {
    belong_user_id: belong_user?.id,
    type,
    assign_business: checkboxList?.includes("assign_business") ? 1 : 0,
    assign_clue: checkboxList?.includes("assign_clue") ? 1 : 0,
  });
  formData.value = {
    belong_user: {},
    type: "",
    checkboxList: [],
  };
  popupVisible.value = false;
};

watch(
  () => props.modelValue,
  (val) => {
    if (val) popupVisible.value = val;
  }
);

watch(
  () => popupVisible.value,
  (val) => {
    if (!val) emit("update:modelValue", false);
  }
);
</script>

<style lang="scss">
.enterprise-transfer[data-weiling-mobile-ui-bc-enterprise-transfer] {
  height: 100%;
  .van-field__label {
    margin-bottom: 6px;

    label {
      font-weight: 500;
      position: relative;
      font-size: 14px;
    }
  }

  .van-field__control::placeholder {
    font-size: 13px;
  }
  footer {
    border-top: j(1) solid var(--wl-line-color);
    padding: j(24) j(16);
    background: #fff;
    .btn {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: j(42);
      border: j(1) solid #eeeeee;
      border-radius: j(8);
      color: var(--wl-text-color-placeholder);

      &.active {
        background: var(--wl-primary-color);
        color: #ffffff;
      }

      &_cancel {
        color: #5b5b5b;
        margin-right: j(16);
      }
    }
  }
}
</style>
