<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-09 09:29:29
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-13 15:21:26
 * @Description: 组件试用
-->
<template>
  <div class="algorithm-on-trial" v-if="flag">
    <detals-title title="组件试用" type="PROBATION"></detals-title>
    <div class="main">
      <div class="main-left">
        <p>{{ dataFrom.linkName }}</p>
        <p>{{ dataFrom.link }}</p>
      </div>
      <div class="main-center">
        <p>{{ dataFrom.numberName }}</p>
        <p>{{ dataFrom.number }}</p>
        <div @click="copyFunction(dataFrom.number, '复制账号')">复制账号</div>
      </div>
      <div class="main-right">
        <p>{{ dataFrom.passwordName }}</p>
        <p>{{ dataFrom.password }}</p>
        <div @click="copyFunction(dataFrom.password2, '复制密码')">
          复制密码
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
  import { ref, defineProps, watch } from 'vue'
  import { message } from 'ant-design-vue'
  let flag = ref(true)
  const props = defineProps({
    dataList: { type: Object, default: null },
  })
  const dataFrom = ref({
    linkName: '试用地址',
    link: 'http://localhost:8080/#/detailsfdddffffffffffffffdfgdfgdfdgdfgdfg',
    numberName: '试用账号',
    number: 'zhangfeihu',
    passwordName: '试用密码',
    password: '**************************',
    password2: '',
  })
  if (props.dataList.infoList) {
    let obj = props.dataList.infoList.filter(
      (item) => item.attrType === '试用地址'
    )[0]
    if (!obj) {
      flag.value = false
    } else {
      props.dataList.infoList.map((item) => {
        if (item.attrType == '试用地址') {
          dataFrom.value.link = item.attrValue
        } else if (item.attrType == '试用用户名') {
          dataFrom.value.number = item.attrValue
        } else if (item.attrType == '试用密码') {
          dataFrom.value.password2 = item.attrValue
        }
      })
    }
  }
  //复制方法
  const copyFunction = (data, name) => {
    let url = data
    let oInput = document.createElement('input')
    oInput.value = url
    document.body.appendChild(oInput)
    oInput.select() // 选择对象;
    console.log(oInput.value)
    document.execCommand('Copy') // 执行浏览器复制命令
    oInput.remove() // 执行浏览器复制命令
    message.success(name + '成功')
  }
  watch(
    () => props.dataList,
    (val) => {
      if (val) {
        let obj = val.infoList.filter((item) => item.attrType === '试用地址')[0]
        if (!obj) {
          flag.value = false
        } else {
          props.dataList.infoList.map((item) => {
            if (item.attrType == '试用地址') {
              dataFrom.value.link = item.attrValue
            } else if (item.attrType == '试用用户名') {
              dataFrom.value.number = item.attrValue
            } else if (item.attrType == '试用密码') {
              dataFrom.value.password2 = item.attrValue
            }
          })
        }
      }
    }
  )
</script>
<style lang="less" scoped>
  .algorithm-on-trial {
    padding: 0.8rem 0px 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .main {
      margin-top: 0.3rem;
      width: 13rem;
      height: 2.5rem;
      background: url('~@/assets/detailsAll/kfzj_sybg.png') no-repeat;
      display: grid;
      grid-template-columns: 33.33% 33.33% 33.33%;
      align-items: center;
      .main-left {
        border-right: 0.01rem #ffffff solid;
        padding-left: 0.7rem;
        padding-right: 1rem;
      }
      .main-center {
        padding-left: 1rem;
        padding-right: 1rem;
      }
      .main-right {
        padding-right: 0.7rem;
      }
      & > div > p:first-child {
        font-size: 0.26rem;
        color: #ffffff;
        font-weight: bold;
      }
      & > div > p:nth-child(2) {
        font-size: 0.22rem;
        color: #ffffff;
        line-height: 0.34rem;
      }
      & > div:first-child > p:last-child {
        text-decoration: underline;
        word-wrap: break-word;
        word-break: normal;
      }
      & > div > div:last-child {
        height: 0.34rem;
        width: 1.1rem;
        border: 0.01rem solid #ffffff;
        border-radius: 0.06rem;
        font-size: 0.18rem;
        color: #ffffff;
        cursor: pointer;
        text-align: center;
        line-height: 0.34rem;
      }
    }
  }
</style>
