<template>
  <el-form
    :model="productAppForm"
    v-form="{formItemAlign: 'left', inputsDisplay: 'block'}"
    label-width="130px"
    :data-vv-scope="formScope"
  >
    <ht-form-item label="应用名称" class="identity-input-width">
      <ht-input
        v-model="productAppForm.agentName"
        validate="required"
        placeholder="请输入应用名称"
      ></ht-input>
    </ht-form-item>
    <ht-form-item label="应用别名" class="identity-input-width">
      <ht-input
        v-model="productAppForm.alias"
        v-pinyin="productAppForm.agentName"
        placeholder="请输入应用别名"
        :validate="{
          required: true,
          regex: {
            exp: '^[a-zA-Z][a-zA-Z0-9_]*$',
            message: '只能输入字母、数字、下划线，且以字母开头'
          }
        }"
      ></ht-input>
    </ht-form-item>
    <ht-form-item prop="baseUrl" class="identity-input-width">
      <template slot="label">
        <el-tooltip placement="top">
          <div slot="content">
            格式：【http或https】+【域名】+【端口号】+【根路径】
            如：http://www.hotent.org:8282/mobile
          </div>
          <i class="icon-notes" />
        </el-tooltip>
        <span>移动端地址</span>
      </template>
      <ht-input
        v-model.trim="productAppForm.baseUrl"
        autocomplete="off"
        :validate="{required: true}"
        placeholder="请输入移动端地址"
      ></ht-input>
    </ht-form-item>
    <ht-form-item prop="pcBaseUrl" class="identity-input-width">
      <template slot="label">
        <el-tooltip placement="top">
          <div slot="content">
            格式：【http或https】+【域名】+【端口号】+【根路径】
            如：http://www.hotent.org:8281/front
          </div>
          <i class="icon-notes" />
        </el-tooltip>
        <span>pc端地址</span>
      </template>
      <ht-input
        v-model.trim="productAppForm.pcBaseUrl"
        autocomplete="off"
        :validate="{required: true}"
        placeholder="请输入pc端地址"
      ></ht-input>
    </ht-form-item>
    <ht-form-item
      label="AgentId"
      prop="agentId"
      class="identity-input-width"
      v-if="appType === 'weChatWork'"
    >
      <template slot="label">
        <el-tooltip placement="top">
          <div slot="content">
            <span>
              第三方应用id。在
              <a
                href="https://work.weixin.qq.com/wework_admin/frame#apps"
                target="_blank"
                style="color:#90c2f7;text-decoration:underline"
                >企业微信</a
              >的应用管理-进入应用详情页面下的AgentId
            </span>
          </div>
          <i class="icon-notes" />
        </el-tooltip>
        AgentId
      </template>
      <ht-input
        v-model="productAppForm.agentId"
        placeholder="请输入AgentId"
        validate="required"
      />
    </ht-form-item>
    <ht-form-item
      label="CorpId"
      prop="agentKey"
      class="identity-input-width"
      v-if="appType === 'dingtalk'"
    >
      <template slot="label">
        <el-tooltip placement="top">
          <div slot="content">
            <span>
              所属组织ID。在
              <a
                href="https://open-dev.dingtalk.com/#/corph5"
                target="_blank"
                style="color:#90c2f7;text-decoration:underline"
                >钉钉开放平台</a
              >首页-右边的CorpId
            </span>
          </div>
          <i class="icon-notes" />
        </el-tooltip>
        CorpId
      </template>
      <ht-input
        v-model="productAppForm.agentKey"
        placeholder="请输入CorpId"
        validate="required"
      />
    </ht-form-item>
    <ht-form-item
      label="应用secret"
      class="identity-input-width"
      v-if="!['dingtalk', 'flyBook'].includes(appType)"
    >
      <ht-input
        v-model="productAppForm.agentSecret"
        placeholder="请输入secret"
        validate="required"
      />
      <template slot="label">
        <el-tooltip placement="top">
          <div slot="content">
            第三方应用secret。
            <span v-if="appType === 'weChatWork'">
              在
              <a
                href="https://work.weixin.qq.com/wework_admin/frame#apps"
                target="_blank"
                style="color:#90c2f7;text-decoration:underline"
                >企业微信 </a
              >的应用管理-进入应用详情页面下的Secret
            </span>
          </div>
          <i class="icon-notes" />
        </el-tooltip>
        <span>应用secret</span>
      </template>
    </ht-form-item>
    <ht-form-item
      label="菜单名称"
      v-if="appType === 'weChatWork'"
      class="identity-input-width"
    >
      <ht-input
        v-model="productAppForm.menuName"
        placeholder="请输入菜单名称"
        validate="required"
      />
    </ht-form-item>
    <ht-form-item label="移动端菜单URL" class="identity-input-width">
      <ht-input  style="width:calc(100% - 2px);"
        v-model="productAppForm.menuUrl"
        validate="required"
        type="textarea"
        :rows="4"
        placeholder="请输入移动端菜单URL"
      />
      <el-button
        type="text"
       
        icon="el-icon-printer"
        @click="generateMenuUrl(productAppForm, 'baseUrl')"
        :disabled="!productAppForm.baseUrl"
        >一键生成</el-button
      >
      <el-button
        type="text"
        icon="icon-fuzhi"
        v-clipboard:copy="productAppForm.menuUrl"
        v-clipboard:success="
          () => {
            $message.success('内容已复制到剪切板！')
          }
        "
        v-clipboard:error="
          () => {
            $message.error('抱歉，复制失败！')
          }
        "
        >复 制</el-button
      >
    </ht-form-item>
    <ht-form-item label="PC端菜单URL" class="identity-input-width">
      <ht-input
        style="width:calc(100% - 2px);"
        v-model="productAppForm.pcMenuUrl"
        validate="required"
        type="textarea"
        :rows="4"
        placeholder="请输入PC端菜单URL"
      />
      <el-button
        type="text"
        icon="el-icon-printer"
        @click="generateMenuUrl(productAppForm, 'pcBaseUrl')"
        :disabled="!productAppForm.pcBaseUrl"
        >一键生成</el-button
      >
      <el-button
        type="text"
        icon="icon-fuzhi"
        v-clipboard:copy="productAppForm.pcMenuUrl"
        v-clipboard:success="
          () => {
            $message.success('内容已复制到剪切板！')
          }
        "
        v-clipboard:error="
          () => {
            $message.error('抱歉，复制失败！')
          }
        "
        >复 制</el-button
      >
    </ht-form-item>
  </el-form>
</template>

<script>
import sys from '@/api/portal.js'
export default {
  props: {
    appType: String,
    formScope: {
      type: String,
      default: 'productAppForm'
    },
    productAppForm: {}
  },
  data() {
    return {
      // productAppForm: {
      //   agentName: '',
      //   alias: '',
      //   baseUrl: '',
      //   agentId: '',
      //   agentKey: '',
      //   menuName: '',
      //   menuUrl: '',
      //   agentSecret:''
      // },
    }
  },
  created() {
    if (!this.productAppForm.agentName) {
      this.$set(this.productAppForm, 'agentName', '')
      this.$set(this.productAppForm, 'alias', '')
    }
  },
  methods: {
    getFormData() {
      return this.productAppForm
    },
    generateMenuUrl(item, url) {
      var corpId = item.corpId
      if (this.appType == 'dingtalk') {
        corpId = item.agentKey
      }
      var baseUrlType = url == 'baseUrl'?'mobile':'pc'
      sys.generateMenuUrl(item.id, corpId, item[url], baseUrlType).then(
        data => {
          if (data.state) {
            this.$set(
              this.productAppForm,
              url == 'baseUrl' ? 'menuUrl' : 'pcMenuUrl',
              data.value
            )
          } else {
            this.$message.error(data.message || '获取失败')
          }
        },
        error => {
          this.$message.error(error || '获取失败')
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped></style>