<template>
  <div class="full-container-p24">
    <div class="df jcfe pb20">
      <el-button size="medium" type="primary" @click="modalVisable = true">
        新增项目
      </el-button>
    </div>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>PC 项目</span>
        </div>
      </template>
      <div class="df fww">
        <el-card
          v-for="(item, index) in pcData"
          :key="item._id"
          class="mr20 mb20"
          style="width: 300px"
        >
          <template #header>
            <div class="card-header df jcsb aic">
              <span>{{ item.name }}</span>
              <div>
                <el-button
                  @click="edit(item, index, item.type)"
                  size="small"
                  type="text"
                >
                  修改
                </el-button>
                <el-popconfirm
                  title="确认删除项目?"
                  @confirm="deleteItem(item._id, index, item.type)"
                >
                  <template #reference>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </div>
          </template>
          <div class="mb10 df jscb card-line aic" v-if="item.master_url">
            <div class="s-title">正式版:</div>
            <el-button size="medium" type="text" @click="goTo(item.master_url)">
              去访问
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="copy2(item.master_url)"
            >
              复制链接
            </el-button>
          </div>
          <div class="mb10 df jscb card-line aic" v-if="item.dev_url">
            <div class="s-title">测试版:</div>
            <el-button size="medium" type="text" @click="goTo(item.dev_url)">
              去访问
            </el-button>
            <el-button size="small" type="primary" @click="copy2(item.dev_url)">
              复制链接
            </el-button>
          </div>
          <div class="mb10 df jscb card-line aic" v-if="item.master_api">
            <div class="s-title">正式接口:</div>
            <el-button
              size="medium"
              type="text"
              @click="goTo(item.master_api + 'swagger-ui.html#/')"
            >
              访问文档
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="copy2(item.master_api + 'swagger-ui.html#/')"
            >
              复制接口
            </el-button>
          </div>
          <div class="mb10 df jscb card-line aic" v-if="item.dev_api">
            <div class="s-title">测试接口:</div>
            <el-button
              size="medium"
              type="text"
              @click="goTo(item.dev_api + 'swagger-ui.html#/')"
            >
              访问文档
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="copy2(item.dev_api + 'swagger-ui.html#/')"
            >
              复制接口
            </el-button>
          </div>
          <div class="mb10 df jscb card-line aic" v-if="item.desc">
            <div class="s-title">备注:</div>
            <div>{{ item.desc }}</div>
          </div>
        </el-card>
      </div>
    </el-card>
    <el-card style="margin-top: 30px">
      <template #header>
        <div class="card-header">
          <span>小程序 项目</span>
        </div>
      </template>
      <div class="df fww">
        <el-card
          v-for="(item, index) in wxData"
          :key="item._id"
          class="mr20 mb20"
          style="width: 300px"
        >
          <template #header>
            <div class="card-header df jcsb aic">
              <span>{{ item.name }}</span>
              <div>
                <el-button
                  @click="edit(item, index, item.type)"
                  size="small"
                  type="text"
                >
                  修改
                </el-button>
                <el-popconfirm
                  title="确认删除项目?"
                  @confirm="deleteItem(item._id, index, item.type)"
                >
                  <template #reference>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </div>
          </template>
          <div class="mb10 df jscb card-line aic" v-if="item.master_url">
            <div class="s-title">正式版:</div>
            <el-popover
              placement="top"
              :width="300"
              :height="300"
              trigger="hover"
            >
              <template #reference>
                <el-button type="primary" size="small">小程序码</el-button>
              </template>
              <el-image
                style="
                  width: 240px;
                  height: 240px;
                  margin: 20px auto;
                  display: block;
                "
                :src="item.master_url"
              ></el-image>
              <div class="tac" style="font-size: 24px; margin: 20px">
                正式版小程序码
              </div>
            </el-popover>
          </div>
          <div class="mb10 df jscb card-line aic" v-if="item.dev_url">
            <div class="s-title">体验版:</div>
            <el-popover
              placement="top"
              :width="300"
              :height="300"
              trigger="hover"
            >
              <template #reference>
                <el-button type="primary" size="small">显示二维码</el-button>
              </template>
              <el-image
                style="
                  width: 240px;
                  height: 240px;
                  margin: 20px auto;
                  display: block;
                "
                :src="item.dev_url"
              ></el-image>
              <div class="tac" style="font-size: 24px; margin: 20px">
                体验版二维码
              </div>
            </el-popover>
          </div>
          <div class="mb10 df jscb card-line aic" v-if="item.master_api">
            <div class="s-title">正式接口:</div>
            <el-button
              size="medium"
              type="text"
              @click="goTo(item.master_api + 'swagger-ui.html#/')"
            >
              访问文档
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="copy2(item.master_api + 'swagger-ui.html#/')"
            >
              复制接口
            </el-button>
          </div>
          <div class="mb10 df jscb card-line aic" v-if="item.dev_api">
            <div class="s-title">测试接口:</div>
            <el-button
              size="medium"
              type="text"
              @click="goTo(item.dev_api + 'swagger-ui.html#/')"
            >
              访问文档
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="copy2(item.dev_api + 'swagger-ui.html#/')"
            >
              复制接口
            </el-button>
          </div>
          <div class="mb10 df jscb card-line aic" v-if="item.desc">
            <div class="s-title">备注:</div>
            <div>{{ item.desc }}</div>
          </div>
        </el-card>
      </div>
    </el-card>
    <el-dialog
      :title="currentItemId ? '修改项目' : '新增项目'"
      v-model="modalVisable"
      width="700px"
      @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
            size="medium"
            type="primary"
            v-else
            @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
            size="medium"
            type="primary"
            v-else
            @click="upload('dev_url')"
          >
            上传
          </el-button>
        </el-form-item>
        <el-form-item label="正式接口地址" prop="master_api">
          <el-input
            v-model="ruleForm.master_api"
            type="textarea"
            placeholder="接口地址不包含 swagger 后缀"
          />
        </el-form-item>
        <el-form-item label="测试接口地址" prop="dev_api">
          <el-input
            v-model="ruleForm.dev_api"
            type="textarea"
            placeholder="接口地址不包含 swagger 后缀"
          />
        </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
              size="medium"
              type="primary"
              @click="cancel()"
              v-if="currentItemId"
            >
              取消
            </el-button>
            <el-button
              size="medium"
              type="primary"
              @click="resetForm(ruleFormRef)"
              v-else
            >
              重置
            </el-button>
            <el-button
              size="medium"
              type="primary"
              @click="update(ruleFormRef)"
              v-if="currentItemId"
            >
              提交修改
            </el-button>
            <el-button
              size="medium"
              type="primary"
              @click="submitForm(ruleFormRef)"
              v-else
            >
              创建项目
            </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";
import copy from "copy-to-clipboard";

const db = tcb.database();
const p = db.collection("huihenduo_projects");
const __ = db.command;
let pcData = ref([]);
let wxData = ref([]);
async function init() {
  let { data } = await p
    .where({
      deleted: __.neq(false),
    })
    .get();
  pcData.value = [];
  wxData.value = [];
  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 currentItemId = ref(0);
let currentItemIndex = ref(-1);
let ruleFormRef = ref(null);
let ruleForm = ref({
  master_api: "",
  dev_api: "",
  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",
    },
  ],
  master_api: [{ required: false, message: "请填写接口地址", trigger: "blur" }],
  dev_api: [{ required: false, message: "请填写接口地址", trigger: "blur" }],
  desc: [{ required: false, message: "请填写航次名称", trigger: "blur" }],
});
async function submitForm() {
  let res = await p.add({
    ...ruleForm.value,
    createTime: db.serverDate(),
  });
  modalVisable.value = false;
  init();
}
function resetForm() {
  currentItemId.value = 0;
  ruleForm.value = {};
  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;
}

function edit(item) {
  modalVisable.value = true;
  currentItemId.value = item._id;
  let { name, type, master_url, dev_url, master_api, dev_api, desc } = item;
  ruleForm.value = {
    name,
    type,
    master_url,
    dev_url,
    master_api,
    dev_api,
    desc,
  };
}

function cancel() {
  modalVisable.value = false;
  ruleForm.value = {};
  currentItemId.value = 0;
}

async function update() {
  let res = await p.doc(currentItemId.value).update({
    ...ruleForm.value,
  });
  modalVisable.value = false;
  init();
}

async function deleteItem(id, index, type) {
  let res = await p.doc(id).remove();
  modalVisable.value = false;
  init();
}

function goTo(url) {
  window.open(url, "_blank");
}

function copy2(url) {
  console.log(url);
  copy(url);
}

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

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

.el-form-item {
  align-items: center;
}

.s-title {
  flex: 0 0 auto;
  width: 80px;
}

.card-line > div {
  color: #555;
  font-size: 15px;
}
</style>
