<template>
  <ContainerTit>
    <Container></Container>
    <div
      v-if="$accessCheck($Access.WxCodeSetUpdateSystemSettings)"
      slot="headr"
    >
      <el-button
        :disabled="parseInt(enterprise.enterpriseId) === 4"
        type="primary"
        @click="updateSystemSettings"
      >
        提交保存
      </el-button>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="200px">
      <div class="detail-tab-item">
        <p class="detail-tab-title">基本信息</p>
        <div class="detail-tab-main">
          <div
            v-if="parseInt(enterprise.enterpriseId) === 4"
            class="page-tip-div"
          >
            温馨提示：当前企业为六牛科技演示企业，不允许操作小程序配置
          </div>
          <el-form-item prop="name" label="小程序名称：">
            <el-input
              v-model="form.name"
              style="width: 350px"
              placeholder="小程序名称"
            ></el-input>
          </el-form-item>
          <el-form-item prop="account" label="小程序账号：">
            <el-input
              v-model="form.account"
              style="width: 350px"
              placeholder="小程序账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="img" label="小程序二维码：">
            <UploadQiniu
              :file-list="img_list"
              @uploadSuccess="uploadSuccess"
              @handleRemove="uploadRemove"
            />
          </el-form-item>
          <el-form-item prop="originalID" label="小程序原始ID：">
            <el-input
              v-model="form.originalID"
              style="width: 350px"
              placeholder="小程序原始ID"
            ></el-input>
          </el-form-item>
        </div>
      </div>

      <div class="detail-tab-item">
        <p class="detail-tab-title">开发者设置</p>
        <div class="detail-tab-main">
          <el-form-item prop="appid" label="AppId：">
            <el-input
              v-model="form.appid"
              style="width: 350px"
              placeholder="小程序AppId"
            ></el-input>
          </el-form-item>
          <el-form-item label="AppScrect：" prop="APPscrect">
            <el-input
              v-model="form.APPscrect"
              style="width: 350px"
              placeholder="AppScrect(小程序密钥)"
            ></el-input>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </ContainerTit>
</template>

<script>
  import UploadQiniu from "@/component/common/UploadQiniu.vue";
  import {
    getSystemSettingsInfo,
    updateSystemSettings,
    preAuthCode,
  } from "@/api/System";
  import { mapGetters } from "vuex";
  export default {
    name: "BaseSetAdd",
    components: {
      UploadQiniu,
    },
    data() {
      return {
        img_list: [],
        rules: {
          name: [
            { required: true, message: "请输入小程序名称", trigger: "blur" },
          ],
          account: [
            { required: true, message: "请输入小程序账号", trigger: "blur" },
          ],
          img: [
            {
              required: true,
              message: "请上传小程序二维码",
              trigger: "change",
            },
          ],
          originalID: [
            { required: true, message: "请输入小程序原始ID", trigger: "blur" },
          ],
          appid: [
            { required: true, message: "请输入小程序APPID", trigger: "blur" },
          ],
          APPscrect: [
            {
              required: true,
              message: "请输入小程序APPscrect",
              trigger: "blur",
            },
          ],
        },
        dataid: "",
        form: {
          name: "",
          account: "",
          img: "",
          originalID: "",
          APPscrect: "",
          appid: "",
        },
      };
    },
    computed: {
      ...mapGetters({
        enterprise: "MUser/enterprise",
      }),
    },
    created() {
      this.getSystemSettingsInfo();
    },
    methods: {
      // 选择图片
      uploadSuccess(val, res, file, fileList) {
        this.form.img = val;
      },
      uploadRemove() {
        this.form.img = "";
      },
      // 获取详情
      async getSystemSettingsInfo() {
        if (!this.$accessCheck(this.$Access.WxCodeSetGetSystemSettingsInfo)) {
          return;
        }

        const { data } = await getSystemSettingsInfo(1);

        if (data.content && data.content.img) {
          this.img_list = [
            {
              name: "",
              url: data.content.img,
            },
          ];
        } else {
          this.img_list = [];
        }

        this.form = {
          ...this.form,
          ...data.content,
        };
        this.dataid = data.id;
      },
      // 提交
      async updateSystemSettings() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            const params = {
              type: "1",
              content: {
                ...this.form,
              },
            };

            const data = await updateSystemSettings(this.dataid, {
              ...params,
            });

            this.$message.success("提交成功");
            await this.getSystemSettingsInfo();
          }
        });
      },
      //  小程序授权
      async wxOpen() {
        if (!this.dataid) {
          this.$message.warning("请先提交小程序相关信息");
          return;
        }
        const { data } = await preAuthCode();

        const wxUrl = data;
        //  打开空白页面
        window.open(wxUrl);
      },
    },
  };
</script>

<style scoped>
  .page-tit {
    font-size: 14px;
    font-weight: bold;
    padding-left: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
</style>
