<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="800px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    title="链接"
    @update:visible="updateVisible"
  >
    <table
      class="ele-table ele-table-border ele-table-medium"
      style="margin-bottom: 20px"
    >
      <colgroup>
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
          <th>名称</th>
          <th style="text-align: center">链接</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>商品链接</td>
          <td style="text-align: center">
            <div
              style="display: inline-block; margin-right: 10px"
              class="ele-text-secondary"
              v-html="form.url"
            ></div>
            <el-button
              v-clipboard:copy="form.url"
              v-clipboard:success="onCopy"
              size="small"
            >
              复制
            </el-button>
          </td>
        </tr>
        <tr>
          <td>二维码图片</td>
          <td style="text-align: center">
            <ele-qr-code
              :value="form.url"
              :size="160"
              :image-settings="image"
            />
            <div class="ele-text-secondary">鼠标右建可复制保存</div>
          </td>
        </tr>
      </tbody>
    </table>
  </ele-modal>
</template>

<script>
  import EleQrCode from 'ele-admin/es/ele-qr-code';

  export default {
    components: { EleQrCode },
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object
    },
    data() {
      const defaultForm = {
        url: ''
      };
      return {
        level: 'L',
        size: 120,
        margin: 0,
        image: {
          src: '',
          width: 28,
          height: 28,
          x: undefined,
          y: undefined,
          excavate: false
        },
        defaultForm,
        // 表单数据
        form: { ...defaultForm },
        // 表单验证规则
        // 提交状态
        loading: false
      };
    },
    created() {
      let hostname = window.location.hostname;
      if (hostname == 'bo.liche.cn') {
        this.image.src =
          'https://qs.haodian.cn/web/images/project/Admin-ShiYu/code-logo.png';
      } else if (hostname == 'dongfeng.haodian.cn') {
        this.image.src =
          'https://qs.haodian.cn/web/images/project/Admin-ShiYu/df-code-logo.png';
      } else {
        this.image.src =
          'https://qs.haodian.cn/web/images/project/Admin-ShiYu/code-logo.png';
      }
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    methods: {
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      onCopy: function () {
        this.$message.success('复制成功！');
      }
    },
    watch: {
      visible(visible) {
        if (visible) {
          if (this.data) {
            this.$util.assignObject(this.form, {
              ...this.data
            });
          }
        }
      }
    }
  };
</script>
