<template>
  <Layout-Child class="page-scroll">
    <div class="w-7/12 mx-auto my-6">
      <app-steps
        :data="mySteps"
        :currentStep="currentStep"
        @stepOnChange="stepOnChange"
        @stepOnFinished="stepOnFinished"
      ></app-steps>
    </div>
    <div class="w-11/12 mx-auto">
      <div class="step-one" v-if="currentStep == 1">
        <app-cell
          v-model="createNFT.value_name"
          type="input"
          text="剧本名称"
          :validate="{ maxLen: 20 }"
          placeholder="请输入剧本名称"
          class="text-font-white my-3"
          @cellOnChange="(v) => setCreateNFT({ value_name: v })"
        ></app-cell>
        <app-cell
          v-model="createNFT.value_publisher"
          type="input"
          text="剧本作者"
          :validate="{ maxLen: 20 }"
          placeholder="请输入剧本作者"
          class="text-font-white my-3"
          @cellOnChange="(v) => setCreateNFT({ value_publisher: v })"
        ></app-cell>
        <app-cell
          :pickValue="mySteps"
          type="pick"
          text="剧本题材"
          placeholder="请选择剧本题材"
          class="text-font-white my-3"
          @onClick="what"
        ></app-cell>
        <div>
          <div class="my-4 text-font-gray text-sm ml-4">剧本简介</div>
          <textarea
            v-model="createNFT.value_des"
            name="des"
            id="nft-des"
            cols="30"
            maxlength="1000"
            placeholder="请输入剧本简介"
            rows="10"
            class="
              w-full
              bg-font-gray bg-opacity-20
              text-font-white
              p-3
              rounded-md
              text-sm
            "
          ></textarea>
        </div>
        <div class="fixed bottom-0 w-full left-0 z-30">
          <app-btn
            text="下一步"
            class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue"
            :disabled="validation"
            border="none"
            @btnClicked="currentStepChange(1)"
          ></app-btn>
        </div>
      </div>
      <div class="step-two" v-if="currentStep == 2">
        <app-cell
          text="剧本上传"
          class="text-font-white my-3"
          type="upload"
          placeholder="请上传剧本"
          :name="fileName"
          @cellOnChange="$router.push({ name: 'NftUpload' })"
        ></app-cell>
        <app-cell
          text="剧本HASH"
          class="text-font-white my-3"
          type="showText"
          :name="fileHash"
          @cellOnChange="getValue"
        ></app-cell>
        <app-cell
          text="平台存档"
          type="select"
          :selected="createNFT.archives"
          labelIcon="icon-wenhao"
          @clickIcon="alertPlatformSave"
          :list="archivesList"
          class="text-font-white my-3"
          @cellOnChange="(v) => (createNFT.archives = v)"
        ></app-cell>
        <app-cell
          v-if="createNFT.archives === 1"
          text="授权阅读"
          type="select"
          :selected="createNFT.grant"
          labelIcon="icon-wenhao"
          @clickIcon="alertAuthorizeRead"
          :list="grantList"
          class="text-font-white my-3"
          @cellOnChange="(v) => (createNFT.grant = v)"
        ></app-cell>
        <div class="fixed bottom-0 w-full left-0 flex flex-row z-30">
          <app-btn
            text="上一步"
            class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue"
            border="none"
            @btnClicked="currentStepChange(-1)"
          ></app-btn>
          <app-btn
            text="下一步"
            class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue"
            :disabled="validation"
            :loading="loading2"
            border="none"
            @btnClicked="currentStepChange(1)"
          ></app-btn>
        </div>
      </div>
      <div class="step-three" v-if="currentStep == 3">
        <app-cell
          text="NFT编号"
          type="showText"
          :name="publish.nftId"
          class="text-font-white my-3"
        ></app-cell>
        <app-cell
          text="剧本HASH"
          type="showText"
          :name="publish.fileHash"
          class="text-font-white my-3"
          @cellOnChange="getValue"
        ></app-cell>
        <app-cell
          text="发行人地址"
          type="showText"
          :name="publish.wallet"
          class="text-font-white my-3"
          @cellOnChange="getValue"
        ></app-cell>
        <app-cell
          key="count"
          text="数量"
          :value="1"
          :disabled="true"
          type="input-num"
          class="text-font-white my-3"
          @cellOnChange="
            (v) => {
              publish.count = v;
            }
          "
        ></app-cell>
        <div class="fixed bottom-0 w-full left-0 flex flex-row z-30">
          <app-btn
            text="上一步"
            class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue"
            border="none"
            @btnClicked="currentStepChange(-1)"
          ></app-btn>
          <app-btn
            text="发行NFT"
            class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue"
            border="none"
            :disabled="validation"
            :loading="loading3"
            @btnClicked="currentStepChange(1)"
          ></app-btn>
        </div>
      </div>
    </div>
  </Layout-Child>
</template>

<script lang="ts">
import { Dialog } from "vant";
import Vue from "vue";
import { mapMutations, mapState } from "vuex";

export default Vue.extend({
  data() {
    return {
      a: "",
      createNFT: {
        value_name: "",
        value_publisher: "",
        value_picker: [],
        value_des: "",
        archives: 0,
        grant: 0,
        categoryType: NaN,
      },
      publish: {
        nftId: "",
        id: NaN,
        fileHash: "",
        wallet: "",
        count: 1,
      },
      archivesList: [
        { value: 0, name: "不存档" },
        { value: 1, name: "加密存档" },
      ],
      grantList: [
        { value: 0, name: "不需要授权" },
        { value: 1, name: "需要授权" },
      ],
      categoryTypes: [] as any[],
      mySteps: [
        {
          text: "基本信息",
        },
        {
          text: "加密上链",
        },
        {
          text: "NFT发行",
        },
      ],
      currentStep: 1,
      loading2: false,
      loading3: false,
    };
  },
  components: {
    "Layout-Child": () => import("@/layout/Child.vue"),
    "app-steps": () => import("@/components/common/Steps.vue"),
    "app-cell": () => import("@/components/common/Cell.vue"),
    "app-btn": () => import("@/components/common/Btn.vue"),
  },
  async mounted() {
    const list = await this.$service.nftService.getCategory();
    this.categoryTypes = list;
    this.createNFT.categoryType = (list.length !== 0 && list[0].id) || NaN;
    this.setState({
      pickedList: [],
    });
  },
  computed: {
    ...mapState("create", {
      fileHash: "fileHash",
      fileName: "fileName",
      file: "file",
      pickedList: "pickedList",
    }),
    validation(): boolean {
      let disabled = true;
      const { value_name, value_publisher } = this.createNFT;
      if (this.currentStep === 1) {
        if (
          value_name &&
          value_publisher &&
          this.$store.state.create.pickedList.length !== 0
        ) {
          disabled = false;
        }
      } else if (this.currentStep === 2) {
        if (this.fileHash && this.fileName) {
          disabled = false;
        }
      } else if (this.currentStep === 3) {
        disabled = !(this.publish.count > 0);
      }
      return disabled;
    },
    categoryTypes2(): any[] {
      return this.categoryTypes.map((item: any) => {
        return {
          name: item.categoryName,
          value: item.id,
        };
      });
    },
  },
  methods: {
    ...mapMutations("create", {
      setState: "SET_STATE",
    }),
    setCreateNFT(obj: any) {
      this.createNFT = {
        ...this.createNFT,
        ...obj,
      };
    },
    alertPlatformSave() {
      Dialog.alert({
        title: "提示",
        message: `1、选择加密存档后，您的剧本将由平台审核保管，您可以授权是否给其他人查看；
2、选择不存档后，您的剧本将由自己保管，您可以通过私下发送给其他用户查看；`,
      });
    },
    alertAuthorizeRead() {
      Dialog.alert({
        title: "提示",
        message: `1、选择作者授权阅读，剧本需要您本人授权后方可查看；
2、选择无需授权，剧本可公开阅读。`,
      });
    },
    addStep() {
      this.currentStep++;
    },
    stepOnFinished(e: boolean) {
      console.log(e, "finished");
    },
    stepOnChange(e: string) {
      console.log(e, "change");
    },
    getValue(val: string) {
      console.log(val);
    },
    what(item: Function) {
      item(this.$router.push("/Nft/create/pick"));
    },
    async currentStepChange(val: number) {
      if (this.currentStep === 2 && val === 1) {
        this.loading2 = true;
        let mistake = false;
        try {
          const { id, nftId, wallet, fileHash } =
            await this.$service.nftService.save(
              this.createNFT.value_publisher,
              1,
              this.fileHash,
              this.createNFT.archives,
              this.createNFT.value_name,
              this.createNFT.value_des,
              this.pickedList.map((i: any) => i.text as string).toString(),
              this.file,
              this.createNFT.grant
            );
          this.publish.fileHash = fileHash;
          this.publish.nftId = nftId;
          this.publish.id = id;
          this.publish.wallet = wallet;
        } catch (err) {
          mistake = true;
        }
        this.loading2 = false;
        if (mistake) return;
      } else if (this.currentStep === 3 && val === 1) {
        this.loading3 = true;
        try {
          await this.$service.nftService.publish({
            fileHash: this.fileHash,
            id: this.publish.id,
            wallet: this.publish.wallet,
            nftId: this.publish.nftId,
          });
          this.$router.back();
        } catch (err) {
          console.log(err);
        }
        this.loading3 = false;
      }
      if (this.currentStep < this.mySteps.length + 1) {
        this.currentStep += val;
      }
    },
  },
});
</script>
