<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:20px; ">
          <div class="bar"></div>
          <div class="name">病例信息</div>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="病例名称：" prop="case_name">
            <el-input
              v-model="modalForm.case_name"
              style="width: 240px"
              placeholder="请输入病例名称"
            />
          </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="病例作者：" prop="case_author">
              <el-input
                v-model="modalForm.case_author"
                style="width: 240px"
                placeholder="请输入病例作者"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="病例状态：" prop="case_status">
              <el-select
                v-model="modalForm.case_status"
                clearable
                placeholder="请选择病例状态"
                style="width: 240px"
              >
                <el-option
                  label="正常"
                  :value="1"
                />
                <el-option
                  label="禁用"
                  :value="2"
                />
              </el-select>
            </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";
const ruleFormRef = ref(null);
const method = ref(null);
const hospitalList = ref([]);
const emit = defineEmits(["refreshList"]);

const modalForm = reactive({
  project_id: "",
  case_status: 2,
  case_name:'',
  case_author:''
});
const case_id = ref('');
const loading = ref(false);
const rules = reactive({
  case_name: [
    {
      required: true,
      message: "请输入病例名称",
      trigger: "blur",
    },
  ],
  case_author: [
    {
      required: true,
      message: "请输入病例作者",
      trigger: "blur",
    },
  ],
  case_status: [
    {
      required: true,
      message: "请输入病例状态",
      trigger: "change",
    },
  ],
});
const handleAdd = () => {
  userApi.addCase(modalForm).then((res) => {
    let result = res;
    if (result.code == 200) {
      ElMessage.success("添加成功");
      visible.value = false;
      emit("refreshList");
    }
  });
};

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

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,id2='') => {
  visible.value = true;
  method.value = type?type:'view';
  case_id.value=id2;
  modalForm.project_id = 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.getCaseDetail(case_id.value).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>