<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import type { PlatformItem, ConfigAttribute } from '../types'

const props = defineProps<{ platform: PlatformItem }>()
const modelValue = defineModel<ConfigAttribute[]>()

// 用户需知
const checked = ref(true)

// form
const formRef = ref<FormInstance>()

const configList = computed(() => {
  return props.platform.config_attributes || []
})
onMounted(() => {
  modelValue.value = modelValue.value ? Object.assign([], configList.value, modelValue.value) : configList.value
})

function showItem(data: ConfigAttribute) {
  return !!configList.value.find(item => item.prop === data.prop)
}
</script>

<template>
  <div class="step-two_content">
    <div class="content-left">
      <h2>用户需知</h2>
      <p>亲爱的系统用户，您即将进入链接页面，链接前请您认真阅读一下说明：</p>
      <p>1、您即将链接的系统属于第三方平台，关于此系统的一切内容以及疑问，本公司无法代表此系统提供官方的准确回复，建议您<strong>及时联系此系统的官方客服人员；</strong></p>
      <p>
        2、本系统是一个客户数据平台，通过链接全局客户数据，帮助企业构建第一方客户池，数据源为各个与本系统链接的第三方平台，如链接的系统出现数据异常，本公司没有权限进入该系统排查，烦请<strong
          >及时联系该系统相关技术人员协助处理。</strong
        >
      </p>
      <el-checkbox v-model="checked" label="我确认上述用户需知" size="large" />
    </div>
    <div class="content-right">
      <el-form ref="formRef" label-suffix="：" label-width="122px">
        <el-form-item label="链接类型">
          <span>{{ platform.type_name }}</span>
        </el-form-item>
        <template v-for="item in modelValue" :key="item.prop">
          <el-form-item :label="item.label" :prop="item.prop" v-if="showItem(item)">
            <el-input v-model="item.value" placeholder="请输入"></el-input>
          </el-form-item>
        </template>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss">
.step-two_content {
  display: flex;
  padding-bottom: 20px;
  .content-left {
    padding: 0 20px;
    flex: 1;
    h2 {
      font-size: 16px;
      text-align: center;
      padding: 20px 0 10px;
    }
    p {
      text-indent: 2em;
      margin-bottom: 10px;
      strong {
        font-weight: bold;
      }
    }
  }
  .content-right {
    padding-top: 20px;
    flex: 1;
  }
}
</style>
