<template>
  <div class="issue-pass" v-loading="inSubmit">
    <div class="form" v-show="status == 'form'">
      <div class="content">
        <img
          src="/images/newProductList/pass.png"
          alt=""
        />
        已选择 <span class="pass-name">{{ content.name }}</span>
      </div>
      <el-form class="elForm" :rules="rules" :model="formData">
        <el-form-item label="资产名称" prop="name">
          <syDialogInput
            v-model:value="formData.name"
            placeholder="请输入资产名称"
          ></syDialogInput>
        </el-form-item>
        <el-form-item label="资产类型" prop="type">
          <sySelect v-model="formData.type" placeholder="请选择资产类型">
            <sy-option key="FT" label="FT" value="0"></sy-option>
            <sy-option key="NFT" label="NFT" value="1"></sy-option>
          </sySelect>
        </el-form-item>
        <el-form-item label="资产数量" prop="amount">
          <syDialogInput
            type="number"
            :disabled="amountDisable"
            v-model:value.number="formData.amount"
            placeholder="请输入资产数量"
          ></syDialogInput>
        </el-form-item>
        <el-form-item label="源文件上链" prop="fileUpload">
          <Button
            type="primary"
            @click="goUpload"
            v-if="!file.name"
            class="clickUpload"
            mode="elementBtn"
            >点击上传</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="/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="/images/newProductList/video_icon.png"
                alt=""
              />
              <img
                v-else-if="['doc', 'docx'].includes(fileType)"
                class="layout_icon"
                src="/images/newProductList/word_icon.png"
                alt=""
              />
              <img
                v-else-if="['png', 'jpg', 'jpeg', 'gif'].includes(fileType)"
                class="layout_icon"
                src="/images/newProductList/img_icon.png"
                alt=""
              />
              <img
                v-else-if="['xls', 'xlsx'].includes(fileType)"
                class="layout_icon"
                src="/images/newProductList/excel_icon.png"
                alt=""
              />
              <img
                v-else-if="['pdf'].includes(fileType)"
                class="layout_icon"
                src="/images/newProductList/pdf_icon.png"
                alt=""
              />
              <img
                v-else-if="['ppt', 'pptx'].includes(fileType)"
                class="layout_icon"
                src="/images/newProductList/ppt_icon.png"
                alt=""
              />
              <img
                v-else-if="['txt'].includes(fileType)"
                class="layout_icon"
                src="/images/newProductList/txt_icon.png"
                alt=""
              />
              <img
                v-else
                class="layout_icon"
                src="/images/newProductList/pass.png"
                alt=""
              />
            </div>
            <div class="file_name">{{ file.name }}</div>
            <div class="reUpload" @click="setStatus('upload')">
              <img
                src="/images/newProductList/reUpload_icon.png"
                alt=""
              />
              重新上传
            </div>
            <img
              @click="file = {}"
              class="delete_file"
              src="/images/newProductList/cancel.png"
              alt=""
            />
          </div>
        </el-form-item>
      </el-form>
      <Button
        @click="submit"
        type="primary"
        :disabled="disabled"
        mode="elementBtn"
        >支付并发行</Button
      >
      <div class="tip_right" v-if="file.name">
        预计扣除次数 <span class="fee">{{ fee }}</span> 次
      </div>
    </div>
    <div class="upload" v-show="status == 'upload'">
      <UploadFileVue @uploaded="uploaded" :fileData="file"></UploadFileVue>
      <Button
        class="w-full"
        style="height: 40px; margin-top: 28px"
        @click="fileSubmit"
        type="primary"
        mode="elementBtn"
        :disabled="!file.name"
        >确定</Button
      >
      <div class="upload_tip">
        提示：源文件上链需要支付额外的上链次数，上链次数根据源文件的大小实时计算，费用从套餐中扣除，一旦上链后无法更改，请谨慎操作。
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import UploadFileVue from "./uploadFile.vue";
import { ElMessage } from "element-plus";
import {
  debounce,
  GO_URLS,
  syButton,
  syDialogInput,
  sySelect,
  syOption,
} from "cqk-sy-ui";
import { defineComponent } from "vue";

import { ElInput, ElForm, ElButton, ElFormItem } from "element-plus";
import { $ajax } from "@/service";

export default defineComponent({
  name: "IssuePass",
  props: ["content", "setStatus", "status"],
  components: {
    Button: syButton,
    UploadFileVue,
    "el-form": ElForm,
    "el-form-item": ElFormItem,
    "el-input": ElInput,
    "el-button": ElButton,
    syDialogInput,
    sySelect,
    syOption,
  },
  data() {
    return {
      formData: {
        name: "",
        type: "",
        amount: "" as string | number,
      },
      uploadFile: {} as any,
      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,
      chainSelectAction: [
        {
          value: 0,
          text: "Chain33",
          disabled: false,
        },
        {
          value: 1,
          text: "IPFS",
          disabled: true,
        },
      ],
      chainSelected: 0,
      file: {} as any,
      fileType: "",
      chainType: "",
      fileUrl: "",
      fileHash: "",
      fee: "",
      inSubmit: false,
    };
  },
  watch: {
    "formData.type": {
      handler(val) {
        if (Number(val) === 1) {
          this.formData.amount = 1;
          this.amountDisable = true;
        } else {
          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.setStatus("upload");
    },
    goForm() {
      this.setStatus("form");
    },
    uploaded(payload: any) {
      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: any) {
        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 $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 $ajax({
          type: "post",
          url: GO_URLS.pass,
          params,
        });
        this.inSubmit = false;
        if (!res) return;
        this.$emit("update");

        ElMessage.success("创建数字资产成功");
        this.$emit("closePopup");
        this.inSubmit = false;
      },
      500,
      false
    ),
  },
});
</script>

<style lang="scss">
.form {
  .clickUpload {
    width: 30%;
  }
  .el-form-item {
    margin-bottom: 20px;

    .el-form-item__label {
      line-height: 35px;
      &:before {
        margin-right: 10px;
      }
      padding-right: 22px;
    }
    .el-form-item__content {
      .el-input {
        input::-webkit-outer-spin-button,
        　　 input::-webkit-inner-spin-button {
          -webkit-appearance: none;
        }
        　　 input[type="number"] {
          -moz-appearance: textfield;
        }
      }
    }
    .el-form-item__error {
      padding-left: 0px;
    }
    .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: var(--sy-blue);
        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;
      }
    }
  }
  .el-button--primary {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0;
  }
}
</style>
<style scoped lang="scss">
.issue-pass {
  background: #ffffff;
  .head {
    line-height: 60px;
    font-size: 18px;
    font-weight: 600;
    color: #353535;
    text-align: center;
    border-bottom: 1px solid #f0f1f5;
  }

  .form {
    padding: 20px 37px 0px 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: 20px;

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

      .pass-name {
        color: #000000;
        margin-left: 20px;
      }
    }
    .elForm {
      width: 100%;
    }
  }
  .upload {
    padding: 17px 37px 0px 38px;
    .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>
