<template>
  <div class="full-container-p24">
    <div class="df jcfe pb20">
      <el-button type="primary" @click="modalVisable = true"
        >新增项目</el-button
      >
    </div>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>PC 项目</span>
        </div>
      </template>
      <div class="df">
        <el-card v-for="item in pcData" :key="item._id">
          <template #header>
            <div class="card-header">
              <span>{{ item.name }}</span>
            </div>
          </template></el-card
        >
      </div>
    </el-card>
    <el-card style="margin-top: 30px">
      <template #header>
        <div class="card-header">
          <span>小程序 项目</span>
        </div>
      </template>
      <div class="df">
        <el-card v-for="item in wxData" :key="item._id">
          <template #header>
            <div class="card-header">
              <span>{{ item.name }}</span>
            </div>
          </template>
        </el-card>
      </div>
    </el-card>
    <el-dialog
      title="新增项目"
      v-model="modalVisable"
      width="550px"
      @close="resetForm"
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        style="padding-right: 20px"
      >
        <el-form-item label="项目名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入项目名称"
            style="width: 193px"
          />
        </el-form-item>
        <el-form-item label="项目类型" prop="type">
          <el-select
            v-model="ruleForm.type"
            placeholder="请选择项目类型"
            @change="typeChange"
          >
            <el-option label="PC" value="1" />
            <el-option label="小程序" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="正式版地址"
          prop="master_url"
          v-if="ruleForm.type == 1"
        >
          <el-input
            v-model="ruleForm.master_url"
            type="textarea"
            placeholder="正式版地址"
          />
        </el-form-item>
        <el-form-item
          label="测试版地址"
          prop="dev_url"
          v-if="ruleForm.type == 1"
        >
          <el-input
            v-model="ruleForm.dev_url"
            type="textarea"
            placeholder="测试版地址"
          />
        </el-form-item>
        <el-form-item
          label="正式版二维码"
          prop="master_url"
          v-if="ruleForm.type == 2"
        >
          <el-image
            v-if="ruleForm.master_url"
            :src="ruleForm.master_url"
            @click="upload('master_url')"
            style="width: 100px"
          ></el-image>
          <el-button
            v-else
            size="small"
            type="primary"
            @click="upload('master_url')"
            >上传</el-button
          >
        </el-form-item>
        <el-form-item
          label="测试版二维码"
          prop="dev_url"
          v-if="ruleForm.type == 2"
        >
          <el-image
            v-if="ruleForm.dev_url"
            :src="ruleForm.dev_url"
            @click="upload('dev_url')"
            style="width: 100px"
          ></el-image>
          <el-button
            v-else
            size="small"
            type="primary"
            @click="upload('dev_url')"
            >上传</el-button
          >
        </el-form-item>
        <el-form-item label="接口地址" prop="api_url">
          <el-input
            v-model="ruleForm.api_url"
            type="textarea"
            placeholder="接口地址"
          />
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input
            v-model="ruleForm.desc"
            type="textarea"
            placeholder="项目备注"
          />
        </el-form-item>
        <el-form-item>
          <div class="df jcfe">
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)"
              >创建项目</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { AnonymousLogin, tcb } from "apis/cloudLogin";
import _ from "lodash";
import { ElMessage, ElMessageBox } from "element-plus";
import store from "../../store";
import { chooseFile } from "../../utils/chooseFile";
const db = tcb.database();
const p = db.collection("huihenduo_projects");
const __ = db.command;
let pcData = ref([]);
let wxData = ref([]);
async function init() {
  pcData.value = [];
  wxData.value = [];
  let { data } = await p.get();
  if (data.length) {
    for (let i of data) {
      if (i.type == 1) {
        pcData.value.push(i);
      } else {
        wxData.value.push(i);
      }
    }
  }
}

let modalVisable = ref(false);
let ruleFormRef = ref(null);
let ruleForm = ref({
  api_url: "",
  desc: "",
  dev_url: "",
  master_url: "",
  name: "",
  type: "",
});
const rules = ref({
  name: [{ required: true, message: "请填写项目名称", trigger: "blur" }],
  type: [{ required: true, message: "请选择项目类型", trigger: "blur" }],
  master_url: [
    {
      required: false,
      message: `${
        ruleForm.value.type == 1 ? "请填写正式版访问地址" : "请上传正式版二维码"
      }`,
      trigger: "blur",
    },
  ],
  dev_url: [
    {
      required: false,
      message: `${
        ruleForm.value.type == 1 ? "请填写测试版访问地址" : "请上传测试版二维码"
      }`,
      trigger: "blur",
    },
  ],
  api_url: [{ required: false, message: "请填写接口地址", trigger: "blur" }],
  desc: [{ required: false, message: "请填写航次名称", trigger: "blur" }],
});
async function submitForm() {
  let res = await p.add({
    ...ruleForm.value,
    createTime: db.serverDate(),
  });
  console.log(res);
  modalVisable.value = false;
  init();
}
function resetForm() {
  ruleFormRef.value.resetFields();
}

function typeChange() {
  ruleForm.value.dev_url = "";
  ruleForm.value.master_url = "";
}

async function upload(type) {
  let filePath = await chooseFile(type);
  let { download_url } = await tcb.uploadFile({
    cloudPath: `projects/${new Date().getTime()}`,
    filePath,
  });
  ruleForm.value[type] = download_url;
}

onMounted(() => {
  init();
});
</script>

<style scoped>
.el-textarea {
  width: 380px;
}

.el-form-item {
  align-items: center;
}
</style>