<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="hospital_id">
            <el-select  remote filterable :remote-method="searchHospital"
            :loading="loading"  value-key="hospital_id" v-model="modalForm.hospital_id" placeholder="请搜索医院" size="large"
                style="width: 240px">
                <el-option v-for="item in hospitalList" :key="item.hospital_id" :label="item.hospital_name+'('+item.province+')'" :value="item.hospital_id" />
              </el-select>
            </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="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 { onBeforeMount, reactive, ref, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import userApi from "../api/user";
import { ElMessage } from "element-plus";
import { formatOrderStatus, formatRefundStatus, formatDate } from '../utils/format'

const ruleFormRef = ref(null);
const method = ref(null);
const hospitalList=ref([]);
const emit = defineEmits(['refreshList']);
const props=defineProps({
  project_platform_id:{
    type:String,
    default:''

  },
  project_id:{
    type:String,
    default:''

  }
})
const modalForm = reactive({
  project_platform_id: '',
  status:1,

})
const loading = ref(false);
const rules = reactive({
  hospital_id: [
    {
      required: true,
      message: '请选择医院名称',
      trigger: 'blur',
    }
  ],
});
const handleAdd = () => {
  
  modalForm.project_platform_id=props.project_platform_id;
  userApi.addHospital(modalForm).then((res) => {
    let result = res;
    if (result.code == 200) {
      ElMessage.success("添加成功");
      visible.value = false;
      emit('refreshList')
    }

  })
};
const searchHospital=(val)=>{
  if(!val){
    return false
  }
  loading.value=true;
  userApi.searchHospital({
    hospital_name:val
  }).then((res) => {
    let result = res;
    loading.value=false;
    if (result.code == 200) {
      hospitalList.value=result.data
    }
  })
}
const handleEdit = () => {
    modalForm.project_platform_id=props.project_platform_id;
  userApi.updateHospital(modalForm.project_platform_id, modalForm).then((res) => {
    let result = res;
    if (result.code == 200) {
      ElMessage.success("修改成功");
      visible.value = false;
      emit('refreshList')
    }

  })
};


const submit = async (form) => {
  modalForm.project_platform_id=props.project_platform_id;
  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;
  if (method.value === 'edit') {
    title.value = '编辑医院'
  } else if (method.value === 'view') {
    title.value = '新增医院'
  }
  
  nextTick(() => {
    ruleFormRef.value.resetFields();
    
    // if (method.value === 'edit') {
    //   userApi.getHospitalDetail(modalForm.project_platform_id).then((res) => {
    //     let result = res.data;
    //     Object.assign(modalForm, result);
    //   })
    // }
  })

}

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>