<template>
  <div>
    <el-dialog v-model="visible" :z-index="99" :title="title" width="100%" align-center fullscreen>
      <el-form :inline="true" :rules="rules"  :disabled="method=='look'" :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="platform_id">
              <el-select v-model="modalForm.platform_id" placeholder="请选择平台" size="large" style="width: 240px" @change="changePlatform">
                <el-option v-for="item in platformList" :key="item.platform_id" :label="item.platform_name" :value="item.platform_id
                  " />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="阅读时长(秒)：" prop="read_duration">
              <el-input v-model="modalForm.read_duration" style="width: 240px" placeholder="请输入阅读时长" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="项目福利：" prop="is_welfare">
              <el-switch v-model="modalForm.is_welfare" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="modalForm.is_welfare == 1">
          <el-col :span="8">
            <el-form-item label="单个病例总积分：" prop="single_case_score" :rules="[
              {
                required: true,
                message: '请输入单个病例总积分',
                trigger: 'blur'
              }
            ]">
              <el-input min="0" type="number" v-model="modalForm.single_case_score" style="width: 240px"
                placeholder="请输入单个病例总积分" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="modalForm.is_welfare == 1">
          <el-col :span="8">
            <el-form-item label="完成阅读奖励积分：" prop="complete_read" :rules="[
              {
                required: true,
                message: '请输入完成阅读奖励积分',
                trigger: 'blur'
              }
            ]">
              <el-input min="0" type="number" v-model="modalForm.complete_read" style="width: 240px"
                placeholder="请输入完成阅读奖励积分" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="modalForm.is_welfare == 1">
          <el-col :span="8">
            <el-form-item label="阅读时间满足奖励积分：" prop="complete_read_time" :rules="[
              {
                required: true,
                message: '请输入阅读时间满足奖励积分',
                trigger: 'blur'
              }
            ]">
              <el-input min="0" type="number" v-model="modalForm.complete_read_time" style="width: 240px"
                placeholder="请输入阅读时间满足奖励积分" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="modalForm.is_welfare == 1">
          <el-col :span="8">
            <el-form-item label="首次优质留言奖励积分：" prop="first_high_quality" :rules="[
              {
                required: true,
                message: '请输入首次优质留言奖励积分',
                trigger: 'blur'
              }
            ]">
              <el-input min="0" type="number" v-model="modalForm.first_high_quality" style="width: 240px"
                placeholder="请输入首次优质留言奖励积分" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="modalForm.is_welfare == 1">
          <el-col :span="8">
            <el-form-item label="再次优质留言奖励积分：" prop="once_more_high_quality" :rules="[
              {
                required: true,
                message: '请输入满减条件金额',
                trigger: 'blur'
              }
            ]">
              <el-input min="0" type="number" v-model="modalForm.once_more_high_quality" style="width: 240px"
                placeholder="请输入再次优质留言奖励积分" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="开启白名单：" prop="is_white">
              <el-switch v-model="modalForm.is_white" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="modalForm.is_white == 1">
          <el-col :span="8">
            <el-form-item label="白名单类型：" prop="white_type" :rules="[
              {
                required: true,
                message: '请选择白名单类型',
                trigger: 'blur'
              },

            ]">
              <el-select v-model="modalForm.white_type" placeholder="请选择白名单类型：" size="large" style="width: 240px">
                <el-option v-for="item in whiteList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <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>


      </el-form>
      

      <!-- <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 emit = defineEmits(['refreshList']);
const props = defineProps({
  project_id: {
    type: String,
    default: ''
  },
})
const modalForm = reactive({
  platform_id: '',
  platform_name:'',
  project_id: '',
  status: 1,
  is_welfare: 0,
  is_white: 0,
  read_duration: '',
  single_case_score: null,
  complete_read: null,
  complete_read_time: null,
  first_high_quality: null,
  once_more_high_quality: null,
  white_type: null,

})
const whiteList = ref([{
  id: 1,
  name: '医院',
}, {
  id: 2,
  name: '医生',
}, {
  id: 3,
  name: '动态',
}]);
const rules = reactive({
  platform_id: [
    {
      required: true,
      message: '请输入平台名称',
      trigger: 'blur',
    }
  ],
  is_white: [
    {
      required: true,
      message: '请选择是否开启白名单',
      trigger: 'change',
    }
  ],
  read_duration: [
    {
      required: true,
      message: '请输入阅读时长',
      trigger: 'blur',
    }
  ],
  is_welfare: [
    {
      required: true,
      message: '请选择是否有福利项目',
      trigger: 'change',
    }
  ],
});
const platformList = ref([]);
const getList = async () => {
  const res = await userApi.getAllPlatformList();
  platformList.value = res.data;

}
const changePlatform = (val) => {
  platformList.value.forEach((item) => {
    if (item.platform_id == val) {
      modalForm.platform_name = item.platform_name;
    }
  })

};
const handleAdd = () => {
  modalForm.project_id = props.project_id;
  userApi.addPlatform(modalForm).then((res) => {
    let result = res;
    if (result.code == 200) {
      ElMessage.success("添加成功");
      ruleFormRef.value.resetFields();
      clearForm();
      visible.value = false;
      emit('refreshList')
    }

  })
};
const handleEdit = () => {
  userApi.updatePlatform(modalForm.project_id, modalForm).then((res) => {
    let result = res;
    if (result.code == 200) {
      ElMessage.success("修改成功");
      visible.value = false;
      ruleFormRef.value.resetFields();
      clearForm
      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 clearForm=()=>{
  modalForm.platform_id = '';
  modalForm.platform_name='';
  modalForm.status= 1;
  modalForm.is_welfare= 0;
  modalForm.is_white=0;
  modalForm.read_duration='';
  modalForm.single_case_score=null;
  modalForm.complete_read= null;
  modalForm.complete_read_time= null;
  modalForm.first_high_quality= null;
  modalForm.once_more_high_quality=null;
  modalForm.white_type=null;
};
const cancelOrder = () => {

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

}

const init = (type, id) => {
  visible.value = true;
  method.value = type;
  modalForm.project_id = id;
  if (method.value === 'edit') {
    title.value = '编辑平台'
  } else if (method.value === 'view') {
    title.value = '新建平台'
  } else if (method.value === 'look') {
    title.value = '查看平台'
  }
  getList()
  nextTick(() => {
    ruleFormRef.value.resetFields();
    clearForm();
    if (method.value === 'edit' 
      || method.value === 'look'
    ) {
      userApi.getPlatformDetail(modalForm.project_id).then((res) => {
        let result = res.data;
        Object.assign(modalForm, result);
        modalForm.class_id = result.base_class

      })
    }
  })

}

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>