<template>
  <el-form :model="formData" label-width="120px" ref="ruleForm" :rules="rules" v-loading="loading" class="pr-4">
    <div class="flex flex-row justify-between">
      <div class="w-full">
        <el-form-item label="短剧名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入短剧名称" />
        </el-form-item>
        <el-form-item label="集数" prop="total_episode_num">
          <el-input-number style="width:200px;" v-model="formData.total_episode_num" :step="1" step-strictly :min="1"
            placeholder="请输入集数" />
        </el-form-item>
        <el-form-item label="完结状态" prop="update_type">
          <el-radio-group v-model="formData.update_type">
            <el-radio :label="1">连载中</el-radio>
            <el-radio :label="2">完结</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道" prop="category_id">
          <el-cascader v-model="selectType" :options="cooperations" filterable clearable :change-on-select="true"
            @change="handleCascaderChange" />
          <!-- <el-cascader v-model="formData.category_id" :options="cooperations" :show-all-levels="false" /> -->
        </el-form-item>
        <el-form-item label="上架" prop="shelf_type">
          <el-radio-group v-model="formData.shelf_type">
            <el-radio :label="1">未上架</el-radio>
            <el-radio :label="2">上架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="起始集" prop="d_charge_sequence">
          <el-input-number style="width:200px;" v-model="formData.d_charge_sequence" :step="1" step-strictly :min="1"
            placeholder="请输入起始集" />
        </el-form-item>
        <el-form-item label="默认定价" prop="d_charge_coin">
          <div class="flex items-center w-full">
            <el-input-number style="width:200px;" v-model="formData.d_charge_coin" :precision="2" :step="1" :min="1"
              placeholder="请输入看剧币" />
            <el-tooltip placement="top">
              <template #content> 默认定价为默认所需看剧币<br />1元=100币 </template>
              <el-icon>
                <InfoFilled />
              </el-icon>
            </el-tooltip>
          </div>
        </el-form-item>
        <el-form-item label="所属CP方" prop="cp_name">
          <el-select class="w-full" v-model="formData.cp_name" remote filterable :remote-method="remoteMethod" clearable
            placeholder="选择所属CP方">
            <el-option v-for="item in cpList" :key="item.cp_id" :label="item.cp_name" :value="item.cp_name" />
          </el-select>
        </el-form-item>
        <el-form-item label="分成模式" prop="cp_share_type">
          <el-radio-group v-model="formData.cp_share_type">
            <el-radio :label="1">分成</el-radio>
            <el-radio :label="2">保底</el-radio>
            <el-radio :label="3">买断</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="封面" prop="cover_image">
          <my-upload acceptType=".png,.jpg,.jpeg" :isMultiple="true" @fileRemove="fileRemove" @fileSuccess="fileSuccess"
            :fileList="formData.fileList" action="/qiniu/upload/image"></my-upload>
        </el-form-item>
        <el-form-item label="简介" prop="note">
          <el-input v-model="formData.note" placeholder="请输入简介" :rows="3" autosize type="textarea" />
        </el-form-item>
      </div>
    </div>
    <div class="flex justify-end">
      <el-button type="primary" @click="submitForm(ruleForm)">{{ $t('system.confirm') }}</el-button>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
import { InfoFilled } from '@element-plus/icons-vue';
import { cpManageCpList, cpOptions } from '@/api/cp/index'
import { videoStockVideoUpdate, videoStockVideoAdd, videoStockVideoCategoryList } from '@/api/video/index'
import type { FormInstance, FormRules } from 'element-plus'
const ruleForm = ref<FormInstance>()
import { onMounted, ref } from 'vue';
const props = defineProps({
  primary: String | Number,
});
const cooperations = ref([]);
const categoryList = ref([])
const formData = ref({ status: 2, miniProgramIds: [] })
const rules = reactive({
  name: [{ required: true, message: '请输入短剧名称', trigger: 'blur' }],
  note: [{ required: true, message: '请输入简介', trigger: 'blur' }],
  total_episode_num: [
    {
      required: true,
      message: '请输入集数',
      trigger: 'blur'
    }
  ],
  update_type: [
    {
      required: true,
      message: '请选择完结状态',
      trigger: 'change'
    }
  ],
  category_id: [
    {
      required: true,
      message: '请选择频道',
      trigger: 'change'
    }
  ],
  shelf_type: [
    {
      required: true,
      message: '请选择上架状态',
      trigger: 'change'
    }
  ],
  d_charge_sequence: [
    {
      required: true,
      message: '请输入起始集',
      trigger: 'blur'
    }
  ],
  d_charge_coin: [
    {
      required: true,
      message: '请输入默认定价',
      trigger: 'blur'
    }
  ],
  cp_name: [
    {
      required: true,
      message: '请选择所属CP方',
      trigger: 'change'
    }
  ],
  cp_share_type: [
    {
      required: true,
      message: '请选择分成模式',
      trigger: 'change'
    }
  ],
  cover_image: [
    {
      required: true,
      message: '请上传封面',
    }
  ],
});
const selectType = ref([])
const loading = ref(false)
const handleCascaderChange = (val: any) => {
  console.log(val, 'valval');
  if (val) {
    // 获取最后一级选项的值
    const lastOptionValue = val[val.length - 1];
    console.log('最后一级选项的值：', lastOptionValue, selectType.value);
    // 更新 selectedOptions 的值
    formData.value.category_id = lastOptionValue;
  } else {
    delete formData.value.category_id
  }
}
const remoteMethod = (query: string) => {
  if (query) {
    initCpOtion({ cp_name: query })
  } else {
    initCpOtion({})
  }
}
const fileSuccess = (e) => {
  console.log(e);
  formData.value.cover_image = e;
}
const fileRemove = (e) => {
  console.log(e);
  formData.value.cover_image = '';
}
const initCpOtion = (params: object) => {
  cpOptions(params).then(res => {
    cpList.value = res.data;
  })
}

const submitForm = (formEl: FormInstance | undefined) => {
  console.log(formData.value, 'formData.valueformData.value');
  if (!formEl) return;
  formEl
    .validate(valid => {
      if (valid) {
        let api;
        let params = {
          "name": formData.value.name,
          "total_episode_num": formData.value.total_episode_num,
          "update_type": formData.value.update_type,
          "category_id": formData.value.category_id,
          "shelf_type": formData.value.shelf_type,
          "d_charge_sequence": formData.value.d_charge_sequence,
          "d_charge_coin": formData.value.d_charge_coin,
          "cp_name": formData.value.cp_name,
          "cp_share_type": formData.value.cp_share_type,
          "cover_image": formData.value.cover_image,
          "note": formData.value.note
        };
        if (props.primary) {
          api = videoStockVideoUpdate
          params.id = formData.value.id
        } else {
          api = videoStockVideoAdd
        }
        api(params).then(res => {
          console.log(res);
          ElMessage.success(res.message)
          emit('close')
        })
      } else {
        loading.value = false;
      }
    })
    .then(() => { });
}

if (props.primary) {
  formData.value = JSON.parse(JSON.stringify(props.primary))
  formData.value.fileList = [{ uid: props.primary.id, url: props.primary.cover_image }]
  selectType.value = formData.value.category_id
}
const initType = () => {
  videoStockVideoCategoryList().then(res => {
    console.log(res);
    cooperations.value = res.data
    if (formData.value.channel == 1) {
      categoryList.value = cooperations.value.length > 0 ? cooperations.value[0]?.list : []
    } else if (formData.value.channel == 2) {
      categoryList.value = cooperations.value.length > 0 ? cooperations.value[1]?.list : []
    }
  })
}
initType()
const emit = defineEmits(['close']);
const cpList = ref();
onMounted(() => {
  initCpOtion({})
});
</script>
