<!-- 客服设置 -->
<template>
  <div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100" label-position="right">
      <el-form-item label="企业ID" prop="weworkId">
        <el-input v-model="form.weworkId" placeholder="请输入企业ID" style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item label="接入链接" prop="weworkUrl">
        <el-input v-model="form.weworkUrl" placeholder="请输入接入链接" style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="detail">
          <h3>如何获取企业</h3>
          <p>1.登录【企业微信管理后台】(<el-link type="primary" target="_blank"
              href="https://work.weixin.qq.com">work.weixin.qq.com</el-link>)</p>
          <p>2.获取企业ID：登录后，进入【我的企业>>企业信息>>企业ID】</p>
          <el-image :src="imgs[0]" style="width: 600px;height: auto;" :preview-src-list="imgs"
            :initial-index="0"></el-image>
          <h3>如何获取接入链接</h3>
          <p>1. 登录【企业微信管理后台】(<el-link type="primary" target="_blank"
              href="https://work.weixin.qq.com">work.weixin.qq.com</el-link>)。
          </p>
          <p>2.找到《微信客服》应用，路径：【应用管理>> 应用管理>>应用>>微信客服】</p>
          <el-image :src="imgs[1]" style="width: 600px;height: auto;" :preview-src-list="imgs"
            :initial-index="1"></el-image>
          <p>3.进入《微信客服》，找到《创建账号》按钮，点击后进入页面完成创建。（具体的接待时间、接待人员等商家可自行配置）</p>
          <el-image :src="imgs[2]" style="width: 600px;height: auto;" :preview-src-list="imgs"
            :initial-index="2"></el-image>
          <p>4.创建成功后，再次点击刚刚创建的账号，进入后复制《接入链接》粘贴过来即可；特别说明，账号可选用已创建的账号；</p>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="submitHandle">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import ShopApi from "@/api/account/shop";

const imgs = [
  "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/06f236d656be479284833a166a5b98c1.png",
  "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/96f3c5c4c1f940c390eef901bcd11a14.png",
  "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/5dbbd3a7d31c4bef8af57c6679421dd5.png",
];

const formRef = ref();
const loading = ref(false);
const form = ref({
  id: '',
  weworkId: "",
  weworkUrl: "",
});

const rules = {
  weworkId: [{ required: true, message: "请输入企业ID", trigger: "blur" }],
  weworkUrl: [{ required: true, message: "请输入接入链接", trigger: "blur" }],
};

// 提交表单
function submitHandle() {
  formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true;
        await ShopApi.edit(form.value);
        ElNotification({
          title: "成功",
          message: "保存成功",
          type: "success",
        });
      } catch (error) {
        console.log(error);
      }
      loading.value = false;
    } else {
      return false;
    }
  });
}


// 获取店铺信息
async function getShopInfo() {
  try {
    const res = await ShopApi.get()
    form.value.id = res.id;
    form.value.weworkId = res.weworkId;
    form.value.weworkUrl = res.weworkUrl;
  } catch (error) {
    console.log(error);
  }
}

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

<style scoped lang="scss">
.detail {
  p {
    margin-bottom: 10px;
  }

  .img {
    width: 600px;
    border-radius: 4px;
  }
}
</style>