<script lang="ts" name="rc-select" setup>
import type { FormCreateProps } from '@form-create/element-ui'
import { nextTick, onMounted, ref } from 'vue'
interface Item {
  value: string
  label: string
}
const props = defineProps<{
  formCreateInject: FormCreateProps
}>()

const seniority = ref(false)
const selectTag = ref<Item>({ value: '', label: '' })
const centerDialogVisible = ref(false)
const radio1 = ref<string>('')
const radioList = ref<Item[]>([])
// props.formCreateInject?.api?.activeRule
const onSwitchChange = (val: boolean) => {
  // 设置客户画像字段
  if (val) {
    props.formCreateInject!.api!.activeRule.synchronize_field = {
      field_name: selectTag.value.label,
      synchronize_to: selectTag.value.value,
    }
  } else {
    props.formCreateInject!.api!.activeRule.synchronize_field = null
  }
}

const onBeforeClose = (done: () => void) => {
  radio1.value = selectTag.value.value || ''
  done()
}

const onSave = () => {
  centerDialogVisible.value = false
  radioList.value.find((item) => item.value === radio1.value)
  selectTag.value = radioList.value.find((item) => item.value === radio1.value)!
  onSwitchChange(true)
}

onMounted(() => {
  window.__QIANKUN__REQUSET__.CustomrForm._getUserPortrait().then(
    (res: { data: Record<string, string> }) => {
      if (!res.data) return
      const list = []
      for (const key in res.data) {
        list.push({
          value: key,
          label: res.data[key],
        })
      }
      radioList.value = list
    },
  )
  nextTick(() => {
    // 这里是为了获取到父组件传递过来的值
    const activeRule = props.formCreateInject?.api?.activeRule
    if (!activeRule) return
    seniority.value = !!activeRule?.synchronize_field
    if (!seniority.value) return
    selectTag.value = {
      label: activeRule?.synchronize_field?.field_name,
      value: activeRule?.synchronize_field?.synchronize_to,
    }
    radio1.value = selectTag.value.value
  })
})
</script>
<template>
  <div class="rc-switch">
    <div class="edit">
      <el-switch v-model="seniority" @change="onSwitchChange" />
      <span>自动同步至客户画像</span>
    </div>
    <div class="aaatip" v-if="seniority">
      <span>开启后，将同步至【客户画像-{{ selectTag.label }}】</span
      ><el-text
        class="mx-1"
        type="primary"
        style="cursor: pointer"
        @click="centerDialogVisible = true"
        >修改</el-text
      >
    </div>
  </div>
  <!-- <el-icon><Bell /></el-icon> -->
  <el-dialog
    destroy-on-close
    v-model="centerDialogVisible"
    :before-close="onBeforeClose"
    title="同步客户画像设置"
    center
  >
    <div class="body">
      <div class="t">
        <el-icon color="#1890ff"><BellFilled style="height: 40px" /></el-icon>
        <div>
          <div>1、请选择将表单信息同步至一下客户画像字段</div>
          <div>2、建议避免多个元素设置相同画像字段,以免造成同步信息混乱</div>
        </div>
      </div>
      <div class="tags">
        <div class="title">基本信息</div>
        <el-radio-group v-model="radio1">
          <div class="el-radio" v-for="item in radioList" :key="item.value">
            <el-radio :value="item.value" size="small" border>{{ item.label }}</el-radio>
          </div>
        </el-radio-group>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSave">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}
.rc-switch {
  display: flex;
  flex-direction: column;
}

.edit {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aaatip {
  color: #999;
}

.t {
  display: flex;
  gap: 10px;
  background-color: #f1f8fe;
  padding: 10px;
  align-items: center;
}

.body {
  margin: 20px;
}

.tags {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.title {
  font-weight: 600;
  font-size: 16px;
}
</style>
