<script setup>
import { useMapStore } from '@/stores/map'
import { useConnection } from '../composables/useConnection'
import { useIndustry } from '../composables/useIndustry'
import {
  getNameByValue,
  materialMethodList,
  materialUsageList,
  materialUsersList,
  materialPictureStyleList,
} from '@/utils/dictionary'
import AppUpload from '@/components/base/AppUpload.vue'

const props = defineProps(['data'])

const materialType = useMapStore().getMapValuesByKey('experiment_marketing_material_type')
const { connectionList } = useConnection()
const { industryList } = useIndustry()

const typeName = computed(() => {
  return getNameByValue(props.data.type, materialType)
})
</script>

<template>
  <el-dialog title="查看资料信息" width="800px">
    <el-form label-suffix="：" inline class="info-form">
      <el-form-item label="内容名称">{{ data.name }}</el-form-item>
      <el-form-item label="内容类型">{{ typeName }}</el-form-item>
      <el-form-item label="创作方式">{{ getNameByValue(data.way, materialMethodList) }}</el-form-item>
    </el-form>
    <el-divider></el-divider>
    <el-form label-suffix="：" label-width="120" ref="formRef">
      <template v-if="data.way != 3">
        <template v-if="data.type == 2 && data.way == 1">
          <!-- 图片AI -->
          <el-form-item label="图片风格" prop="extend_info.picture_style">
            <el-radio-group :modelValue="data.extend_info.picture_style">
              <el-radio v-for="item in materialPictureStyleList" :key="item.id" :value="item.value">{{
                item.label
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="人物描述" prop="extend_info.person_des">
            <el-input type="textarea" :rows="3" :modelValue="data.extend_info.person_des" />
          </el-form-item>
          <el-form-item label="场景描述" prop="extend_info.scene_des">
            <el-input type="textarea" :rows="3" :modelValue="data.extend_info.scene_des" />
          </el-form-item>
          <el-form-item label="突出重点信息描述" prop="extend_info.important_info_desc">
            <el-input type="textarea" :rows="3" :modelValue="data.extend_info.important_info_desc" />
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="所属行业" prop="industry_id">
            <el-select :model-value="data.industry_id">
              <el-option
                v-for="item in industryList"
                :key="item.id"
                :label="item.name"
                :value="item.id + ''"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="使用场景" prop="scenario_type">
            <el-radio-group :model-value="data.scenario_type">
              <el-radio v-for="item in materialUsageList" :key="item.id" :value="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="使用人员" prop="personnel_type">
            <el-radio-group :model-value="data.personnel_type">
              <el-radio v-for="item in materialUsersList" :key="item.id" :value="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="内容投放渠道" prop="channel">
            <el-radio-group :model-value="data.channel">
              <el-radio v-for="item in connectionList" :key="item.id" :value="item.id">{{ item.type_name }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="关键点" prop="key_points">
            <el-input
              type="textarea"
              :rows="4"
              :model-value="data.key_points"
              placeholder="请输入内容的核心内容或者关键点，多个请使用英文“,”号进行隔离。" />
          </el-form-item>
        </template>
      </template>
      <el-form-item :label="`${typeName}资源`" prop="content">
        <template v-if="data.type == 1">
          <!-- 文本 -->
          <el-input type="textarea" :rows="12" :model-value="data.content"></el-input>
        </template>
        <template v-if="['2', '6', '7', '8'].includes(data.type)">
          <!-- 图片|二维码|小程序｜卡券 -->
          <AppUpload :model-value="data.content" accept="image/*" disabled></AppUpload>
        </template>
        <template v-if="data.type == 3">
          <!-- 语音 -->
          <div>
            <audio :src="data.content" controls v-if="data.content"></audio>
          </div>
        </template>
        <template v-if="data.type == 4">
          <!-- 视频 -->
          <div>
            <video controls :src="data.content" style="width: 100%" v-if="data.content"></video>
          </div>
        </template>
        <template v-if="data.type == 5">
          <el-input :model-value="data.content" placeholder="请输入">
            <template #prepend>https://</template>
            <template #append v-if="data.content">
              <a :href="data.content" target="_blank">查看</a>
            </template>
          </el-input>
        </template>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="$emit('update:modelValue')">关闭</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.info-form {
  display: flex;
  justify-content: space-evenly;
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
