<template>
  <div>
    <el-dialog v-model="visible" :z-index="99" :title="title" width="500px" align-center >
      <el-form :inline="true" :rules="rules" :model="modalForm" class="demo-form-inline" ref="ruleFormRef">
        <div class="barbox" style="margin-top: -10px;margin-bottom: 20px;">
          <div class="bar"></div>
          <div class="name">项目信息</div>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="项目名称：" prop="project_name">
              <el-input v-model="modalForm.project_name" style="width: 240px" placeholder="项目名称" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="阅读时长(min)：" prop="project_subtitle">
              <el-input v-model="modalForm.project_subtitle" style="width: 240px" placeholder="请输入副标题" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="项目福利：" prop="price">
              <el-switch v-model="hasGift" />
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="背景图：" prop="project_image">
              <div style="display:flex;align-items: center;">
                <el-image  v-if="modalForm.project_image" style="width: 100px; height: 100px;margin-right: 10px;" fit="cover" :src="modalForm.project_image" :preview-src-list="srcList">
                </el-image>
                <el-upload class="upload-demo" accep="image/*" :limit="1" :show-file-list="false" ref="upload" :auto-upload="true" :before-upload="beforeUpload" :http-request="handleOss">
                  <el-button size="default" type="primary" style="width:100px">点击上传</el-button>
                </el-upload>
              </div>
            </el-form-item>
          </el-col>
         
        </el-row>
     
       
        <!-- <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="单个病例总福利：" prop="price">
              <el-input min="0" type="number" v-model="modalForm.price" style="width: 240px" placeholder="请输入价格" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="完成阅读奖励：" prop="price">
              <el-input min="0" type="number" v-model="modalForm.price" style="width: 240px" placeholder="请输入价格" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="阅读时间满足奖励：" prop="price">
              <el-input min="0" type="number" v-model="modalForm.price" style="width: 240px" placeholder="请输入价格" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="首次优质留言奖励：" prop="price">
              <el-input min="0" type="number" v-model="modalForm.price" style="width: 240px" placeholder="请输入价格" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="再次优质留言奖励：" prop="price">
              <el-input min="0" type="number" v-model="modalForm.price" style="width: 240px" placeholder="请输入价格" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="开启白名单：" prop="price">
              <el-switch v-model="hasGift" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="白名单奖励：" prop="base_class">
              <el-select multiple value-key="class_id" v-model="modalForm.class_id" placeholder="请选择分类" size="large"
                style="width: 240px">
                <el-option v-for="item in class_list" :key="item.class_id" :label="item.class_name" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
       
        
      
      </el-form>
      <el-divider />
      <div class="barbox">
        <div class="bar"></div>
        <div class="name">操作</div>
      </div>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="" style="padding-left:30px">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="submit(ruleFormRef)">
              确定
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </div>
    </template> -->
    </el-dialog>
    <el-dialog v-model="dialogVisible" title="温馨提示" width="400">
      <span>确定取消该订单？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmCancel">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import {reactive, ref, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import userApi from "../api/user";
import { ElMessage,dayjs} from "element-plus";
import { formatOrderStatus, formatRefundStatus, formatDate } from '../utils/format'

const ruleFormRef = ref(null);
const hasGift=ref(false);
const method = ref(null);
const srcList=ref([]);
const upload=ref(null);
const emit = defineEmits(['refreshList']);
const modalForm = reactive({
  project_id: '',
  Platform_id:'',
  project_status:0,

})
const rules = reactive({
  project_name: [
    {
      required: true,
      message: '请输入项目名称',
      trigger: 'blur',
    }
  ],
  project_image: [
    {
      required: true,
      message: '请上传背景图',
      trigger: 'blur',
    }
   
  ],
});
const handleAdd = () => {
  userApi.addItem(modalForm).then((res) => {
    let result = res;
    if (result.code == 200) {
      ElMessage.success("添加成功");
      visible.value = false;
      emit('refreshList')
    }

  })
};
const handleEdit = () => {
  userApi.updateItem(modalForm.project_id, modalForm).then((res) => {
    let result = res;
    if (result.code == 200) {
      ElMessage.success("修改成功");
      visible.value = false;
      emit('refreshList')
    }

  })
};
const generateRandomNumber=()=> {
				let randomNumber = Math.floor(1000 + Math.random() * 9000);
				return randomNumber;
	};
 const getImageFormat=(imageUrl)=>{
			  const lastDotIndex = imageUrl.lastIndexOf('.');
			  if (lastDotIndex !== -1) {
			    return imageUrl.substring(lastDotIndex + 1);
			  }
			  return 'unknown';
			};
const beforeUpload=(file)=>{
  console.log(file)  
  if (file.size >= 10 * 1024 * 1024) {
       ElMessage.warning("图片大小不能超过10M");
       return  false
  };
  if(!(/\.(jpg|jpeg|png|gif|webp)(?:\?.*)?$/i.test(file.name))){
    ElMessage.warning("图片格式不正确");
    return  false
  }

    return  true
};
 const handleOss=(file)=> {
     let File = file.file;
     console.log(File)
     userApi.getOssSign({
					scene: 1
				}).then(rep => {
					if (rep.code == 200) {
						let {
							access_id,
							dir,
							policy,
							signature,
							host
						} = rep.data;
						let filename = File.name;
						let time = dayjs().format("YYYYMMDDHHmmss");
						let random = generateRandomNumber();
						let imgType='.'+getImageFormat(filename);
            // let formData={
						// 		key: dir + time + random +imgType ,
						// 		OSSAccessKeyId: access_id,
						// 		policy,
						// 		signature,
						// 		success_action_status: '200',
						// 	};
            let formData = new FormData();
            formData.append('OSSAccessKeyId', access_id);
            formData.append('policy', policy);
            formData.append('signature', signature);
            formData.append('key', dir + time + random +imgType);
            formData.append('file', File, filename);
            formData.append('success_action_status',200);
             
              userApi.ossUpload(host,formData).then(res => {
             
                 ElMessage.success('上传成功')
									modalForm.project_image=host+"/"+ dir + time + random + imgType;
                 srcList.value = [modalForm.project_image]
                 upload.value.clearFiles()

							}).catch((err) => {
                console.log(err)
              })
			};
   });
 }

const submit = async (form) => {
  await form.validate((valid, fields) => {
    if (valid) {
      method.value === 'edit' ? handleEdit() : handleAdd()
    } else {
      console.log('error submit!', fields)
    }

  });
}
const visible = ref(false);
const dialogVisible = ref(false);
const title = ref('订单详情')
const route = useRoute();
const router = useRouter();


const cancelOrder = () => {

};
const confirmCancel = () => {
  dialogVisible.value = false;
  cancelOrder()

}

const init = (type, id) => {
  visible.value = true;
  method.value = type;
  modalForm.project_id = id;
  modalForm.class_id=[];
  if (method.value === 'edit') {
    title.value = '编辑项目'
  } else if (method.value === 'view') {
    title.value = '新建项目'
  }

  nextTick(() => {
    ruleFormRef.value.resetFields();
    modalForm.class_brief = '';
    if (method.value === 'edit') {
         userApi.getProjectDetail(modalForm.project_id).then((res) => {
        let result = res.data;
        Object.assign(modalForm, result);
        srcList.value = [result.project_image]

      })
    }
  })

}

defineExpose({
  init
});
</script>

<style lang="scss" scoped>
.demo-form-inline{
  ::v-deep .el-radio--large{
       height: 30px;
  }
}
.barbox {
  margin: 10px 0;
  display: flex;
  align-items: center;

  .bar {
    width: 4px;
    height: 25px;
    background: var(--el-color-primary);
  }

  .name {
    margin-left: 8px;
    font-size: 16px;
  }
}
</style>