<template>
  <div class="issue-pass" v-loading="inSubmit">
    <div class="head" v-show="switchStatus == 'form'">发行通证</div>
    <div class="form" v-show="switchStatus == '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 type="number"  :disabled="amountDisable" v-model.number="formData.amount" placeholder="请输入通证数量"></el-input>
        </el-form-item> 
        <el-form-item label="源文件上链" prop="fileUpload">
          <el-button type="primary" @click="goUpload" v-if="!file.name">点击上传</el-button>
          <div class="file_exit" v-if="file.name">
            <div class="process_img">
                <img v-if='["mp3", "wma", "wav", "amr", "m4a" ].includes(fileType)' class="layout_icon" src="@/assets/images/newProductList/audio_icon.png" alt="">
                <img v-else-if='["wmv", "asf", "asx", "rm", "rmvb", "mpg", "mpeg", "mp4", "3gp", "mov", "m4v", "avi", "mkv", "flv", "vob" ].includes(fileType)' class="layout_icon" src="@/assets/images/newProductList/video_icon.png" alt="">
                <img v-else-if='["doc", "docx" ].includes(fileType)' class="layout_icon" src="@/assets/images/newProductList/word_icon.png" alt="">
                <img v-else-if='["png", "jpg", "jpeg", "gif" ].includes(fileType)' class="layout_icon" src="@/assets/images/newProductList/img_icon.png" alt="">
                <img v-else-if='["xls", "xlsx" ].includes(fileType)' class="layout_icon" src="@/assets/images/newProductList/excel_icon.png" alt="">
                <img v-else-if='["pdf"].includes(fileType)' class="layout_icon" src="@/assets/images/newProductList/pdf_icon.png" alt="">  
                <img v-else-if='["ppt", "pptx" ].includes(fileType)' class="layout_icon" src="@/assets/images/newProductList/ppt_icon.png" alt=""> 
                <img v-else-if='["txt"].includes(fileType)' class="layout_icon" src="@/assets/images/newProductList/txt_icon.png" alt=""> 
                <img v-else class="layout_icon" src="@/assets/images/newProductList/pass.png" alt="">  
            </div>
            <div class="file_name">{{file.name}}</div>
            <div class="reUpload" @click="switchStatus = 'upload'">
              <img src="@/assets/images/newProductList/reUpload_icon.png" alt="">
              重新上传
            </div>
            <img @click="file = {}" class="delete_file" src="@/assets/images/newProductList/cancel.png" alt="">
          </div>
        </el-form-item> 
      </el-form>
      <el-button @click="submit" type="primary" :disabled="disabled">支付并发行</el-button>
      <div class="tip_right" v-if="file.name">预计扣除次数 <span class="fee">{{fee}}</span> 次</div>
    </div>

    <div class="head upload_head" v-show="switchStatus == 'upload'">
      <div class="back_btn" @click="goForm">
        <i class="iconfont iconZUO1 header-btn_back-icon"></i>
        返回
      </div>
      源文件上链
      <div class="back_btn"></div>
    </div>
    <div class="upload" v-show="switchStatus == 'upload'">
      <UploadFileVue @uploaded="uploaded" :fileData="file"></UploadFileVue>
      <el-button class="upload_submit" @click="fileSubmit" type="primary" :disabled="!file.name">确定</el-button>
      <div class="upload_tip">
        提示：源文件上链需要支付额外的上链次数，上链次数根据源文件的大小实时计算，费用从套餐中扣除，一旦上链后无法更改，请谨慎操作。
      </div>
    </div>

    <div>

    </div>

  </div>
</template>

<script>
import UploadFileVue from "../uploadFile.vue";
import {debounce} from "@/utils/tool/debounce";
import CommonDialog from "@/components/CommonDialog.vue";
import {GO_URLS} from "@/config/URLS";

export default {
  name: "IssuePass",
  props: ['content'],
  components: {
    UploadFileVue,
    CommonDialog
  },
  data() {
    return {
      formData: {
        name: '',
        type: '',
        amount: ''
      },
      uploadFile: {},
      rules: {
        name: [
          { required: true, message: '请输入通证名称', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择通证类型', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '请输入通证数量', trigger: 'blur' },
        ],
        fileUpload: [
          { required: false, message: '点击上传', trigger: 'blur' }
        ],
      },
      amountDisable: false,
      switchStatus: 'form',
      chainSelectAction: [
        {
          value: 0,
          text: 'Chain33',
          disabled: false
        },
        {
          value: 1,
          text: 'IPFS',
          disabled: true
        },
      ],
      chainSelected: 0,
      file: {},
      fileType: '',
      chainType: '',
      fileUrl: '',
      fileHash: '',
      fee: '',
      inSubmit: 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 || isNaN(Number(this.formData.amount)) ||
          this.formData.amount === ''
    },
    uploadDisabled(){
      return !this.uploadFile.fileUrl
    }
  },
  methods: {
    goUpload(){
      this.switchStatus = 'upload'
    },
    goForm(){
      this.switchStatus = 'form'
    },
    uploaded(payload){
      if(payload.file.name) {
        this.file = payload.file
        this.fileType = payload.fileType
        this.chainType = payload.chainType
        this.fee = payload.fee
      } else {
        this.file = {}
        this.fileType = ''
        this.chainType = ''
        this.fee = ''
      }
    },
    fileSubmit(){
      if(this.file.name) {
        this.goForm()
      }
    },
    submit: debounce(async function() {
      this.inSubmit = true
      /**如果有文件，则先文件上链 */
      if(this.file.name) {
        const fd = new FormData()
        fd.append('file_type', this.fileType)
        fd.append('chain_type', this.chainType)
        fd.append('file_data', this.file)
        const res = await this.$ajax({
          type: "post",
          url: GO_URLS.uploadChain,
          params: fd
        });
        if(!res) {
          this.inSubmit = false
          return
        } else {
          this.fileUrl = res.data.url
          this.fileHash = res.data.hash
        }
      }
      /**文件上链成功后再发行通证 */
      const params = Object.assign(
          {},
          this.formData,
          {proof_id: this.content.id},
          {file_type: this.fileType, file_url: this.fileUrl}
      )
      params.type = Number(params.type);
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.pass,
        params
      });
      this.inSubmit = false
      if (!res) return;
      this.$emit('update');
      this.$message.success('发行通证成功')
      this.$emit('closePopup');
      this.inSubmit = false
    }, 500, false)
  }
}
</script>

<style scoped lang="less">
.issue-pass {
  width: 592px;
  min-height: 450px;
  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;
  }
  .upload_head {
    display: flex;
    justify-content: space-between;
    padding: 0 34px;
    .back_btn {
      width: 62px;
      font-weight: 400;
      font-size: 16px;
      cursor: pointer;
      .header-btn_back-icon {
        color: #D2D2D2;
        font-size: 14px;
        margin-right: 5px
      }
    }
  }
  .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;
          input::-webkit-outer-spin-button,
　　      input::-webkit-inner-spin-button { -webkit-appearance: none; }
　　      input[type="number"]{ -moz-appearance: textfield; }

          .el-input__inner {
            height: 35px;
            line-height: 35px;
          }
        }
        .el-button--primary {
          width: 30%;
          height: 35px;
          line-height: 35px;
          padding: 0;
          //background-color: #3f79fe;
        }
      }
      .el-form-item__error {
        padding-left: 94px;
      }
      .el-input__icon {
        line-height: 35px;
      }
      .file_exit {
        display: flex;
        align-items: center;
        .process_img {
          display: flex;
          align-items: center;
          img {
            width: 24px;
            height: 24px;
          }
        }
        .file_name {
          margin-left: 10px;
          color: #3F79FE;
          font-size: 12px;
          max-width: 50%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .reUpload {
          display: flex;
          align-items: center;
          margin-left: 10px;
          color: #8E8D8D;
          font-size: 12px;
          cursor: pointer;
          img {
            margin-right: 3px;
          }
        }
        .delete_file {
          margin-left: 10px;
          cursor: pointer;
        }
      }
    }
    /deep/.el-button--primary {
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding: 0;
      //background-color: #3f79fe;
    }
  }
  .upload {
    padding: 17px 37px 67px 38px;
    .upload_submit {
      margin-top: 28px;
      width: 100%;
    }
    .upload_tip {
      margin-top: 12px;
      color: #FF8311;
      line-height: 20px;
      font-size: 12px;
    }
  }
  .tip_right {
    text-align: center;
    font-size: 12px;
    margin-top: 10px;
    color: #1C2323;
    .fee {
      color: #F6AD00;
      font-size: 16px;
      font-weight: bold;
    }
  }
}

</style>
