<script setup>
import { Plus, Minus } from '@element-plus/icons-vue'
import AppUpload from '@/components/base/AppUpload.vue'
import { useMemberAttrs } from '../composables/useData'

import { useMemberStore } from '../stores/member'
import { useCheckStep } from '../composables/useData'
const { isCheck } = useCheckStep(3)
const memberStore = useMemberStore()

const { memberAttrs } = useMemberAttrs()

const emit = defineEmits(['submit', 'next'])

const rules = reactive({
  sex: [{ required: true, message: '请输入', trigger: 'blur' }],
  source: [{ required: true, message: '请输入', trigger: 'blur' }]
})

function handleAdd() {
  memberStore.addAttr({ attr_id: '', attr_content: '', attr_file: '' })
}
function handleRemove(item) {
  memberStore.removeAttr(item.id)
}

const formRef = ref(null)
async function handleValidate() {
  return formRef.value.validate()
}

function genFormData() {
  return { type: 3, detail: { step3: { ...memberStore.member } } }
}

async function handleSubmit() {
  await handleValidate()
  emit('submit', genFormData())
}

async function handleNext() {
  await handleValidate()
  emit('next', genFormData(), isCheck.value)
}
</script>

<template>
  <div>
    <div class="h2-title">
      <h2>用户分析</h2>
      <div>
        <el-button type="primary"><router-link :to="`/user?experiment_id=${$route.query.experiment_id}`" target="_blank">用户个人画像</router-link></el-button>
        <el-button type="primary">
          <router-link :to="`/analyze/user?experiment_id=${$route.query.experiment_id}`" target="_blank">用户整体画像</router-link>
        </el-button>
      </div>
    </div>
    <el-form label-width="150" label-suffix="：" :model="memberStore.member" :rules="rules" ref="formRef" :disabled="isCheck">
      <el-form-item label="用户性别分析" prop="sex">
        <div class="custom-form-item">
          <div class="custom-form-item-left">
            <el-input type="textarea" v-model="memberStore.member.sex" show-word-limit maxlength="200" :rows="5"></el-input>
          </div>
          <div class="custom-form-item-right">
            <AppUpload v-model="memberStore.member.sex_file"></AppUpload>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="用户数据来源分析" prop="source">
        <div class="custom-form-item">
          <div class="custom-form-item-left">
            <el-input type="textarea" v-model="memberStore.member.source" show-word-limit maxlength="200" :rows="5"></el-input>
          </div>
          <div class="custom-form-item-right">
            <AppUpload v-model="memberStore.member.source_file"></AppUpload>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="用户属性分析">
        <ul>
          <li v-for="(item, index) in memberStore.member.attrs" :key="index">
            <div class="custom-form-item">
              <div class="custom-form-item-left">
                <el-select-v2 v-model="item.attr_id" :options="memberAttrs" :props="{ label: 'name', value: 'id' }" style="width: 200px"></el-select-v2>
                <el-input type="textarea" v-model="item.attr_content" show-word-limit maxlength="200" :rows="5" style="margin-top: 10px"> </el-input>
              </div>
              <div class="custom-form-item-right">
                <AppUpload v-model="item.attr_file"></AppUpload>
                <el-button type="primary" :icon="Minus" @click="handleRemove(item)"></el-button>
              </div>
            </div>
          </li>
        </ul>
        <el-button type="primary" :icon="Plus" @click="handleAdd"></el-button>
      </el-form-item>
    </el-form>
    <div class="market-step-footer">
      <el-button @click="handleSubmit" :disabled="isCheck">保存</el-button>
      <el-button type="primary" @click="handleNext">下一步</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.el-card {
  background-color: #eef2f6;
}
h4 {
  text-align: center;
}
ul {
  width: 100%;
}
li {
  border-bottom: 1px solid #eef2f6;
  padding-bottom: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  column-gap: 20px;
}
.custom-form-item {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  :deep(.avatar-uploader) {
    width: 115px;
    height: 115px;
  }
  .uploader {
    line-height: 0;
  }
}
.custom-form-item-left {
  flex: 1;
}
.custom-form-item-right {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
