<template>
  <div class="issue-pass">
    <div class="head">发行通证</div>
    <div class="form">
      <div class="content">
        <img src="../../assets/images/newProductList/pass.png" alt="">
        已选择 <span class="pass-name">{{content.name}}</span>
      </div>
      <el-form :rules="rules" :model="formData">
        <el-form-item label="通证名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入通证名称"></el-input>
        </el-form-item>
        <el-form-item label="通证类型" prop="type">
          <el-select v-model="formData.type" placeholder="请选择通证类型">
            <el-option key="FT" label="FT" value="0"></el-option>
            <el-option key="NFT" label="NFT" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通证数量" prop="amount">
          <el-input :disabled="amountDisable" v-model.number="formData.amount" placeholder="请输入通证数量"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="submit" type="primary" :disabled="disabled">确定</el-button>
    </div>
  </div>
</template>

<script>
import {debounce} from "@/utils/tool/debounce";
import {GO_URLS} from "@/config/URLS";

export default {
  name: "IssuePass",
  props: ['content'],
  data() {
    return {
      formData: {
        name: '',
        type: '',
        amount: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入通证名称', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择通证类型', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '请输入通证数量', trigger: 'blur' }
        ],
      },
      amountDisable: false
    }
  },
  watch: {
    'formData.type': {
      handler(val) {
        if (Number(val) === 1) {
          this.$set(this.formData, 'amount', 1);
          this.amountDisable = true;
        } else {
          this.$set(this.formData, 'amount', '');
          this.amountDisable = false;
        }
      }
    }
  },
  computed: {
    disabled() {
      return this.formData.name === '' ||
          this.formData.type === '' ||
          Number(this.formData.amount) <= 0 ||
          this.formData.amount === ''
    }
  },
  methods: {
    submit: debounce(async function() {
      const params = Object.assign(
          {},
          this.formData,
          {proof_id: this.content.id}
      )
      params.type = Number(params.type);
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.pass,
        params
      });
      if (!res) return;
      this.$emit('update');
      this.$message.success('发行通证成功')
      this.$emit('closePopup');
    }, 500, false)
  }
}
</script>

<style scoped lang="less">
.issue-pass {
  width: 592px;
  height: 413px;
  background: #FFFFFF;
  border-radius: 4px;
  .head {
    line-height: 60px;
    font-size: 18px;
    font-weight: 600;
    color: #353535;
    text-align: center;
    border-bottom: 1px solid #F0F1F5;
  }
  .form {
    padding: 17px 37px 67px 38px;

    .content {
      width: 517px;
      height: 56px;
      background: #F8F8F8;
      border-radius: 4px;
      font-size: 14px;
      line-height: 56px;
      color: #A6A6A6;
      display: flex;
      align-items: center;
      margin-bottom: 14px;

      img {
        width: 30px;
        height: 30px;
        margin-left: 22px;
        margin-right: 11px;
      }

      .pass-name {
        color: #000000;
        margin-left: 20px;
      }

    }

    /deep/.el-form-item {
      margin-bottom: 17px;

      .el-form-item__label {
        line-height: 35px;
        &:before {
          margin-right: 10px;
        }
        padding-right: 22px;
      }
      .el-form-item__content {
        height: 35px;
        line-height: 35px;

        .el-input {
          width: 420px;
          height: 35px;
          line-height: 35px;

          .el-input__inner {
            height: 35px;
            line-height: 35px;
          }
        }
      }
      .el-form-item__error {
        padding-left: 94px;
      }
      .el-input__icon {
        line-height: 35px;
      }
    }
    /deep/.el-button--primary {
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding: 0;
      //background-color: #3f79fe;
    }
  }


}

</style>
