<template>
  <el-row>
    <el-col :span="12" :offset="6">
      <el-form :rules="rules" :model="formData" ref="dataForm">
        <el-form-item prop="taobaoId">
          <el-input placeholder="输入淘宝旺旺账号" clearable v-model="formData.taobaoId"></el-input>
          <el-button type="primary" @click="onSubmit">立即查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col>
      <p class="TT-label">用户基本信息</p>
      <div class="TT-avatar">
        <p>用户头像</p>
        <div class="avatar">
          <img :src="accountInfo.touxiang" alt="">
        </div>
      </div>
      <table class="basic_table">
        <tbody>
        <tr>
          <td class="key">旺旺号：</td>
          <td class="value">{{ accountInfo.zhanghao }}</td>
          <td class="key">性别：</td>
          <td class="value">{{ accountInfo.xingbie }}</td>
          <td class="key">买家信誉：</td>
          <td class="value">{{ accountInfo.xinyu }}</td>
          <td class="key">认证：</td>
          <td class="value">{{ accountInfo.renzheng }}</td>
        </tr>
        <tr>
          <td class="key">会员级别：</td>
          <td class="value">{{ accountInfo.taobaojibie }}</td>
          <td class="key">活跃度：</td>
          <td class="value">{{ accountInfo.huoyuedu }}</td>
          <td class="key">好评率：</td>
          <td class="value">{{ accountInfo.haopinlv }}</td>
          <td class="key">每周平均信誉点击：</td>
          <td class="value">{{ accountInfo.zhouxinyu }}</td>
        </tr>
        <tr>
          <td class="key">每月平均信誉点击：</td>
          <td class="value">{{ accountInfo.yuexinyu }}</td>
          <td class="key">淘龄（年）：</td>
          <td class="value">{{ accountInfo.taoling }}</td>
          <td class="key">淘气值：</td>
          <td class="value">{{ accountInfo.taoqizhi }}</td>
          <td class="key">注册地区：</td>
          <td class="value">{{ accountInfo.diqu }}</td>
        </tr>
        <tr>
          <td class="key">注册时间：</td>
          <td class="value">{{ accountInfo.zhuceshijian }}</td>
          <td class="key">最后登录：</td>
          <td class="value">{{ accountInfo.zuihoudenglu }}</td>
          <td class="key">信誉月涨幅：</td>
          <td class="value">{{ accountInfo.xinyuyuezhangfu }}</td>
        </tr>
        </tbody>
      </table>
      <div class="remark">
        温馨提示：一周信用点数超过20点(常购物的买家大号除外)，有可能这个号被淘宝列入黑名单，他再拍的东西有可能会被认为虚假交易，<span style="color: red;">卖家会有降权危险</span></div>
    </el-col>
    <el-col>
      <div class="query">
        <p class="TT-label">查询次数</p>
        <span style="color: red; font-size: 12px;">（此用户旺旺号被查询的次数）</span>
        <table class="query_table">
          <tbody>
          <tr>
            <td class="key">当天</td>
            <td class="key">最近3天</td>
            <td class="key">最近7天</td>
            <td class="key">最近30天</td>
          </tr>
          <tr>
            <td class="value">{{ accountInfo.zuijin1count}}</td>
            <td class="value">{{ accountInfo.zuijin3count }}</td>
            <td class="value">{{ accountInfo.zuijin7count }}</td>
            <td class="value">{{ accountInfo.zuijin30count }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </el-col>
    <el-col>
      <div class="info">
        <p class="TT-label">举报信息</p>
        <table class="report_table">
          <tbody>
          <tr>
            <td class="key">差评</td>
            <td class="key">打假</td>
            <td class="key">违规</td>
            <td class="key">降权</td>
            <td class="key">找茬</td>
            <td class="key">抽检</td>
            <td class="key">退款</td>
            <td class="key">其他</td>
          </tr>
          <tr>
            <td class="value">{{ accountInfo.chapin }}</td>
            <td class="value">{{ accountInfo.dajia }}</td>
            <td class="value">{{ accountInfo.weigui }}</td>
            <td class="value">{{ accountInfo.jiangquan }}</td>
            <td class="value">{{ accountInfo.zhaocha }}</td>
            <td class="value">{{ accountInfo.choujian }}</td>
            <td class="value">{{ accountInfo.tuikuan }}</td>
            <td class="value">{{ accountInfo.qita }}</td>
          </tr>
          </tbody>
        </table>
        <div class="remark">
          温馨提示： 请根据上述被标记情况做分辨；谨慎交易，避免不必要的麻烦！
        </div>
      </div>
    </el-col>
    <el-col>
      <div class="safety">
        <p class="TT-label">安全评估</p>
        <table class="safety_table ">
          <tbody>
          <tr>
            <td class="key">综合评分：</td>
            <td class="value">{{ accountInfo.zonghepinfen }}</td>
            <td class="key">安全等级：</td>
            <td class="value">{{ accountInfo.anquanjibie }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'toolsCredit',
  data () {
    return {
      formData: {
        taobaoId: '' // 测试ID：tb27400835
      },
      isDisabled: false,
      rules: {
        taobaoId: [{ required: true, message: '输入淘宝旺旺账号', trigger: 'blur' }]
      },
      accountInfo: {}
    }
  },
  methods: {
    onSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return
        }
        if (this.isDisabled) {
          return
        }
        this.isDisabled = true
        this.$http({
          url: this.$http.adornUrl('/tb/yanhao'),
          method: 'post',
          data: this.$http.adornData({
            taobaoId: this.formData.taobaoId
          })
        }).then(({ data }) => {
          this.isDisabled = false
          if (data.status) {
            this.accountInfo = data.data
            return
          }
          this.$message.error(data.msg)
        }).catch(() => {
          this.isDisabled = false
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$--color-primary: #3E8EF7;
/deep/ .el-form-item {
  .el-form-item__content {
    display: flex;
    align-items: center;

    input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border: 1px solid $--color-primary;
    }

    button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}

.TT-label {
  height: 25px;
  background-color: #0099FF;
  color: #fff;
  display: inline-block;
  padding: 5px 10px;
  width: fit-content;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  line-height: 16px;
  font-size: 16px;
}

.TT-avatar {
  display: flex;

  .avatar {
    width: 120px;
    height: 120px;
    margin-left: 10px;
    overflow: hidden;
  }

  img {
    display: block;
    width: 100%;
  }
}

table {
  width: 100%;
  border-collapse: collapse;

  td {
    border: 1px solid #0099FF;
    height: 42px;
    width: 120px;
  }

  .key {
    background-color: #E6F1F8;
    text-align: center;
    width: 80px;
  }

  .value {
    text-align: center;
  }
}


.remark {
  color: #555555;
  padding: 7px;
  font-size: 14px;
  background-color: #FBF1E7;
}

.query {
  margin-top: 30px;
  margin-bottom: 45px;
}

.info {
  margin-bottom: 45px;

  .content {
    height: 60px;
    width: 100%;
    border: 1px solid #E5E5E5;
    display: flex;
    font-size: 14px;
    padding: 17px;
    justify-content: flex-start;
  }

  .item {
    padding-right: 15px;
  }
}


.safety {
  margin-bottom: 45px;
}
</style>
