<template>
  <div class="plate">
    <div class="breadcrumb">首页 / <span>我的应用</span></div>
    <div class="iptBox">
      <el-input
        class="ipt"
        prefix-icon="el-icon-search"
        placeholder="请输入应用名称"
        v-model="queryParams.appName"
        clearable
      ></el-input>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="handleAdd"
        style="height: 36px"
      >
        新建应用
      </el-button>
    </div>
    <div class="cont" v-loading="loading">
      <div
        class="card"
        v-for="(app, i) in list"
        :key="i"
        @click="handleDetail(app)"
      >
        <img class="cardImg" :src="app.coverImg ? getImg(app.coverImg) : '/images/default.png'" />
        <div class="cardTitle">{{ app.appName }}</div>
        <div class="cardText">{{ app.remark }}</div>
        <div class="anew">
          <el-tag type="info" v-if="app.status === '0'">待审核</el-tag>
          <el-tag type="success" v-if="app.status === '1'">已通过</el-tag>
          <el-tooltip :content="app.auditRemark" v-if="app.status === '2'">
            <el-tag type="warning">已驳回</el-tag>
          </el-tooltip>
          <div
            class="anewBtn"
            v-if="app.status === '2'"
            @click.stop="handleUpdate(app)"
          >
            <i class="el-icon-refresh-right"></i> 重新提交
          </div>
        </div>
        <div class="del" @click.stop="handleDel(app.id)">
          <div class="el-icon-delete-solid"></div>
        </div>
      </div>
    </div>

    <!-- 新增编辑应用弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="应用名称" prop="appName">
          <el-input
            v-model="form.appName"
            placeholder="请输入应用名称"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="应用图片" prop="coverImg">
          <image-upload v-model="form.coverImg" :isShowTip="false" :limit="1" />
          <span>建议尺寸：350px * 180px</span>
        </el-form-item>
        <el-form-item label="联系人" prop="linkMan">
          <el-input
            v-model="form.linkMan"
            placeholder="请输入联系人"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="联系电话" prop="linkPhone">
          <el-input v-model="form.linkPhone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="应用描述" prop="remark">
          <el-input
            type="textarea"
            v-model="form.remark"
            placeholder="请输入描述"
            maxlength="400"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog
      title="应用详情"
      :visible.sync="openDetail"
      width="600px"
      append-to-body
    >
      <el-form label-width="120px">
        <el-form-item label="AppId：">
          {{ form.appId }}
          <el-link
            :underline="false"
            icon="el-icon-document-copy"
            v-clipboard:copy="form.appId"
            v-clipboard:success="clipboardSuccess"
            style="margin-left: 20px"
            >复制</el-link
          >
        </el-form-item>
        <el-form-item label="AppSecret：">
          {{ form.appSecret }}
          <el-link
            :underline="false"
            icon="el-icon-document-copy"
            v-clipboard:copy="form.appSecret"
            v-clipboard:success="clipboardSuccess"
            style="margin-left: 20px"
            >复制</el-link
          >
        </el-form-item>
        <el-form-item label="应用名称：" prop="appName">
          {{ form.appName }}
        </el-form-item>
        <el-form-item label="应用图片：" prop="coverImg">
          <img
            style="width: 175px; height: 90px"
            :src="getImg(form.coverImg)"
          />
        </el-form-item>
        <el-form-item label="联系人：" prop="linkMan">
          {{ form.linkMan }}
        </el-form-item>
        <el-form-item label="联系电话：" prop="linkPhone">
          {{ form.linkPhone }}
        </el-form-item>
        <el-form-item label="应用描述：" prop="remark">
          {{ form.remark }}
        </el-form-item>
        <el-form-item label="审核状态：">
          <el-tag type="warning" v-if="form.status === '2'">已驳回</el-tag>
          <el-tag type="info" v-if="form.status === '0'">待审核</el-tag>
          <el-tag type="primary" v-if="form.status === '1'">已通过</el-tag>
        </el-form-item>
        <el-form-item label="驳回原因：" v-if="form.status === '2'">
          {{ form.auditRemark }}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listMyApp,
  addApp,
  updateApp,
  delApp,
} from "@/api/customer/application";
export default {
  name: "MyApp",
  watch: {
    queryParams: {
      deep: true,
      handler(val) {
        // console.log(val);
        this.getList();
      },
    },
  },
  data() {
    return {
      queryParams: {
        appName: null,
      },
      loading: false,
      list: [],
      open: false,
      openDetail: false, // 详情
      form: {},
      rules: {
        appName: [
          { required: true, message: "应用名称不能为空", trigger: "change" },
        ],
        coverImg: [
          { required: true, message: "请上传应用图片", trigger: "change" },
        ],
      },
      title: null,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    clipboardSuccess() {
      this.$modal.msgSuccess("复制成功");
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openDetail = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        appName: null,
        coverImg: null,
        linkMan: null,
        linkPhone: null,
        remark: null,
      };
      this.resetForm("form");
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增应用";
    },
    handleUpdate(row) {
      this.reset();
      this.open = true;
      this.form = JSON.parse(JSON.stringify(row));
      this.title = "重新提交应用";
    },
    handleDetail(row) {
      this.form = row;
      this.openDetail = true;
    },
    handleDel(id) {
      this.$confirm(
        "是否删除该应用，删除后，将无法访问该应用对应的资源？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          delApp(id).then((response) => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          });
        })
        .catch(() => {});
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(this.form);
          if (this.form.id != null) {
            updateApp(this.form).then((response) => {
              this.$modal.msgSuccess("修改应用成功");
              this.open = false;
              this.getList();
            });
          } else {
            addApp(this.form).then((response) => {
              this.$modal.msgSuccess("新增应用成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    getList() {
      this.loading = true;
      listMyApp(this.queryParams).then((response) => {
        this.loading = false;
        this.list = response.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.plate {
  padding: 20px 30px;
  box-sizing: border-box;
  width: 100%;
  min-height: 900px;
  background: #fafafa;

  .iptBox {
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 2px 12px 0px rgba(159, 192, 255, 0.14);
    border-radius: 4px;
    padding: 30px;
    box-sizing: border-box;
    margin: 30px 0;
    display: flex;
    justify-content: space-between;

    .ipt {
      width: 340px;
      height: 42px;
    }
  }

  .cont {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    // justify-content: space-between;

    .card {
      width: 375px;
      position: relative;
      background: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(159, 192, 255, 0.14);
      border-radius: 6px;
      padding: 10px 10px 22px 10px;
      box-sizing: border-box;
      margin-bottom: 30px;
      margin-right: 30px;
      cursor: pointer;

      .cardImg {
        width: 355px;
        height: 180px;
        margin-bottom: 20px;
        cursor: pointer;
      }

      .cardTitle {
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #323232;
        margin-bottom: 10px;
        width: 100%;
        height: 24px;
        overflow: hidden;
      }

      .cardText {
        width: 100%;
        height: 20px;
        overflow: hidden;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #686868;
        margin-bottom: 23px;
      }
      .anew {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .anewBtn {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2866ff;
          cursor: pointer;
        }
      }

      .del {
        cursor: pointer;
        display: flex;
        justify-content: center;
        padding-top: 14px;
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 0px 0px 0px 20px;
        position: absolute;
        right: 10px;
        top: 10px;
        .el-icon-delete-solid {
          color: #fff;
        }
      }
    }
  }
}
</style>
