<template>
  <syTable
    v-bind="$attrs"
    :data="globalState.listOfInformation"
    :columns="columns"
    class="incremental"
  >
    <template #arrow="props">
      <div class="flex items-center firstLineCell">
        <div
          v-if="props.increment_num > 0"
          :class="{
            'table-td-index--an': true,
            'table-td-index--rotating':
              expandTheListIndex === props.index.$index,
          }"
          @click="expandTheList(props, props.index.$index)"
        >
          <svg
            t="1652240732581"
            class="icon"
            viewBox="0 0 1755 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="17275"
            width="20"
            height="20"
          >
            <path
              d="M1672.777143 260.096L991.524571 941.348571a146.285714 146.285714 0 0 1-206.848 0L103.424 260.096A146.285714 146.285714 0 0 1 206.848 10.386286h1362.505143a146.285714 146.285714 0 0 1 103.424 249.709714z"
              fill="#D8D8D8"
              p-id="17276"
            ></path>
          </svg>
        </div>
      </div>
      <div
        v-if="props.index.$index === expandTheListIndex"
        v-for="(item2, index2) in props.incrementList"
        :key="index2"
        class="notFirstLineCell"
      ></div>
    </template>
    <template #id="props">
      <div class="firstLineCell">{{ getIndex(props.index.$index) }}</div>
      <div
        v-if="props.index.$index === expandTheListIndex"
        v-for="(item2, index2) in props.incrementList"
        :key="index2"
        class="incremental-icon notFirstLineCell"
      >
        <i
          class="iconfont"
          :class="[item2.status === 2 ? 'iconxingzhuang2' : 'iconweixuanze']"
        ></i>
      </div>
    </template>
    <template #name="props">
      <div
        class="firstLineCell cursor-pointer whitespace-nowrap overflow-hidden overflow-ellipsis"
        @click="
          $router.push({
            path: '/editTemplate',
            query: {
              personalTemplateId: props.id,
            },
          })
        "
      >
        <syToolTip :content="props.name">
          {{ props.name }}
        </syToolTip>
      </div>
      <div
        v-if="props.index.$index === expandTheListIndex"
        v-for="(item2, index2) in props.incrementList"
        :key="index2"
        class="notFirstLineCell cursor-pointer overflow-ellipsis overflow-hidden whitespace-nowrap"
        @click="enterDetails(item2, props, props.index.$index)"
      >
        <syToolTip :content="item2.name">
          {{ item2.name }}
        </syToolTip>
      </div>
    </template>
    <template #date="props">
      <div class="">
        <div class="firstLineCell">{{ formatTime(props.update_time) }}</div>
        <div
          v-if="props.index.$index === expandTheListIndex"
          v-for="(item2, index2) in props.incrementList"
          :key="index2"
          class="notFirstLineCell"
        >
          {{ formatTime(item2.update_time) }}
        </div>
      </div>
    </template>
    <template #onChain="props">
      <div class="firstLineCell flex items-center">
        <syButton mode="content-the-above-link" v-if="props.status === 2"
          >已上链</syButton
        >
        <syButton
          mode="content-on-the-chain"
          v-if="props.status === 0"
          @click="$emit('upload', props)"
          >点击上链</syButton
        >
        <syButton v-if="props.status === 1" mode="content-status-ing"
          >上链中</syButton
        >
        <syButton
          v-if="props.status === 3"
          mode="content-status--fail"
          @click="$emit('upload', props)"
          >上链失败</syButton
        >
        <syButton v-if="props.status === 4" mode="content-the-above-link"
          >隐藏中</syButton
        >
        <syButton v-if="props.status === 5" mode="content-the-above-link"
          >已隐藏</syButton
        >
        <syButton
          v-if="props.status === 6"
          class="content-status--fail"
          @click="$emit('privacy-settings', props)"
          >隐藏失败</syButton
        >
      </div>
      <div
        v-if="props.index.$index === expandTheListIndex"
        v-for="(item2, index2) in props.incrementList"
        :key="index2"
        class="incremental-state notFirstLineCell"
      >
        <span v-if="item2.status === 2" class="state-ban">已上链</span>
        <span
          v-if="item2.status === 0"
          class="state-start"
          style="width: 70px"
          @click="$emit('incremental-chain', item2, props)"
          >点击上链</span
        >
        <span v-if="item2.status === 1" class="state-ing">上链中</span>
        <span v-if="item2.status === 3" class="state-fail">上链失败</span>
        <span v-if="item2.status === 5" class="state-ing">已隐藏</span>
      </div>
    </template>
    <template #qrcode="props">
      <div class="icon-box firstLineCell">
        <syMoreOperate
          :use-slot="true"
          teleport
          :width="135"
          :border="false"
          :disabled="props.status !== 2"
        >
          <template #default>
            <div
              class="text-center"
              @click="openQRcode(props, props.index.$index)"
            >
              <i
                class="iconfont iconerweima1"
                :class="[
                  props.status === 2
                    ? 'iconerweima--check'
                    : 'iconerweima--no-check',
                ]"
              ></i>
            </div>
          </template>
          <template #content>
            <div class="show-box text-center">
              <div class="imgbox" v-if="props.hash">
                <img :src="QRcode" />
              </div>
              <div class="imgbox" v-else>
                <img
                  src="https://f10.baidu.com/it/u=557133877,2120362237&fm=72"
                />
              </div>
              <p
                @click="
                  downloadQrCode(
                    props.hash,
                    globalState.urlList.chain_browser_url
                  )
                "
              >
                下载二维码
              </p>
              <p class="copy-address" @click="CopyAddress(props)">复制地址</p>
            </div>
          </template>
        </syMoreOperate>
      </div>
      <div
        v-if="props.index.$index === expandTheListIndex"
        v-for="(item2, index2) in props.incrementList"
        :key="index2"
        class="notFirstLineCell"
      ></div>
    </template>
    <template #query="props">
      <div class="block firstLineCell">
        <div class="icon-box">
          <syMoreOperate
            :width="156"
            :list="getSearchOperateList(props)"
            :disabled="props.status !== 2"
            :teleport="true"
            @click-item="
              (value) => handleClickSearchMoreOperateItem(value, props)
            "
          >
            <template #default>
              <i
                @click="openBlock(props, props.index.$index)"
                class="iconfont iconfangdajing1"
                :class="[
                  props.status === 2
                    ? 'iconerweima--check'
                    : 'iconerweima--no-check',
                ]"
              ></i>
            </template>
          </syMoreOperate>
        </div>
      </div>
      <div
        v-if="props.index.$index === expandTheListIndex"
        v-for="(item2, index2) in props.incrementList"
        :key="index2"
        class="notFirstLineCell"
      ></div>
    </template>
    <template #proof="props">
      <div class="firstLineCell">
        <span v-if="props.status !== 2" class="text-gray text-xs"
          >创建数字资产</span
        >
        <el-button
          class="text-btn text-xs"
          type="text"
          @click="showIssuePass(props)"
          v-else-if="props.pass_id === 0"
          >创建数字资产</el-button
        >
        <div v-else class="flex items-center">
          <span class="text-black mr-2.5 whitespace-nowrap text-xs"
            >已发行</span
          >
          <el-button
            @click="checkPass(props)"
            class="text-btn text-xs"
            type="text"
            >查询</el-button
          >
        </div>
      </div>
      <div
        v-if="props.index.$index === expandTheListIndex"
        v-for="(item2, index2) in props.incrementList"
        :key="index2"
        class="notFirstLineCell"
      ></div>
    </template>
    <template #operate="props">
      <div class="flex items-center firstLineCell">
        <syMoreOperate
          :width="156"
          :margin-left="-20"
          :list="getOperateList(props)"
          :teleport="true"
          @click-item="(value) => handleClickMoreOperateItem(value, props)"
        >
          <i
            class="iconfont iconCZ2 align-middle"
            style="font-size: 42px; margin-left: -10px"
          ></i>
        </syMoreOperate>
      </div>
      <div
        v-if="props.index.$index === expandTheListIndex"
        v-for="(item2, index2) in props.incrementList"
        :key="index2"
        class="notFirstLineCell"
        style="color: var(--sy-blue)"
      >
        <span
          class="cursor-pointer"
          @click="$emit('delete-incremental', item2)"
          :class="{
            'span-ban': item2.status === 1 || item2.status === 2,
          }"
          >删除</span
        >
        <span class="span-ban cursor-pointer">复制</span>
      </div>
    </template>
  </syTable>
  <syCommonDialog
    showMask
    type="element"
    :visible="passShow"
    :title-align-center="true"
    @closePopup="passShow = false"
    :element-dialog-props="{
      title: switchStatus === 'form' ? '创建数字资产' : '源文件上链',
    }"
    element-dialog-size="medium"
    :no-padding="true"
  >
    <template #titleLeft>
      <div
        class="back_btn cursor-pointer"
        @click="switchStatus = 'form'"
        v-if="switchStatus !== 'form'"
      >
        <i class="iconfont iconZUO1 header-btn_back-icon"></i>
        返回
      </div>
    </template>
    <template #default>
      <IssuePass
        @update="$emit('update')"
        :setStatus="(v: string) => (switchStatus = v)"
        :status="switchStatus"
        :content="curItem"
        @closePopup="passShow = false"
      ></IssuePass
    ></template>
  </syCommonDialog>
</template>
<script lang="ts" setup>
import { $ajax } from "@/service";
import { setIncrementList, setTheAnchor } from "@/store/mutations";
import { globalState } from "@/store/state";
import IssuePass from "./IssuePass.vue";
import {
  syTable,
  formatTime,
  syButton,
  syMoreOperate,
  getQR,
  downloadQrCode,
  openChainBrowser,
  GO_URLS,
  syCommonDialog,
  syToolTip,
} from "cqk-sy-ui";
import { ElMessage, ElButton } from "element-plus";
import { ref, watch } from "vue";
import { router } from "@/router";

const getIndex = (index: number) => {
  return (globalState.page - 1) * 10 + (index + 1);
};

const columns = [
  {
    width: "62",
    label: "",
    dataIndex: "",
    slotName: "arrow",
  },
  {
    width: "62",
    label: "序号",
    dataIndex: "id",
    slotName: "id",
  },
  {
    width: "200",
    label: "存证名称",
    dataIndex: "name",
    slotName: "name",
  },
  {
    width: "250",
    label: "操作日期",
    dataIndex: "date",
    slotName: "date",
  },
  {
    label: "上链",
    dataIndex: "onChain",
    slotName: "onChain",
  },
  {
    label: "二维码",
    dataIndex: "qrcode",
    slotName: "qrcode",
  },
  {
    label: "区块链查询",
    dataIndex: "query",
    slotName: "query",
  },
  // {
  //   label: "资产",
  //   dataIndex: "proof",
  //   slotName: "proof",
  // },
  {
    width: "100",
    label: "操作",
    dataIndex: "operate",
    slotName: "operate",
  },
];

const emit = defineEmits([
  "privacy-settings",
  "increment",
  "create-copy",
  "delete-goods",
  "upload",
  "incremental-chain",
  "delete-incremental",
  "update",
]);

const checkQR = ref(-1);
const QRcode = ref("");
const checkBlock = ref(-1);
const checkSet = ref(-1);
const passShow = ref(false);
const curItem = ref({});
const expandTheListIndex = ref(-1);

const dialogTitle = ref("创建数字资产");
const switchStatus = ref("form");

watch(
  () => globalState.listOfInformation,
  (newV, oldV) => {
    expandTheListIndex.value = -1;
    if (globalState.theAnchor != -1) {
      expandTheList(newV[globalState.theAnchor], globalState.theAnchor);
    }
  }
);

const showIssuePass = (item: any) => {
  curItem.value = item;
  passShow.value = true;
};

const operateList = [
  {
    name: "隐私设置",
    value: "隐私设置",
    status: [2, 6],
    click(item: any) {
      emit("privacy-settings", item);
      checkSet.value = -1;
    },
  },
  {
    name: "增量更新",
    value: "增量更新",
    status: [2],
    click(item: any) {
      emit("increment", item);
      checkSet.value = -1;
    },
  },
  {
    name: "创建副本",
    value: "创建副本",
    click(item: any) {
      emit("create-copy", item);
      checkSet.value = -1;
    },
  },
  {
    name: "删除",
    value: "删除",
    click(item: any) {
      emit("delete-goods", item);
      checkSet.value = -1;
    },
  },
];

// 展开增量数据列表
const expandTheList = async (item: any, index: number) => {
  if (expandTheListIndex.value === index) {
    expandTheListIndex.value = -1;
    return false;
  }
  const res = await $ajax({
    type: "post",
    url: GO_URLS.incrementList,
    params: {
      base_hash: item.hash,
      page: 1,
      page_size: 10,
    },
  });
  if (res) {
    let list = res.data.results;
    setIncrementList({ list, index });
    expandTheListIndex.value = index;
  }
};

const getOperateList = (item: any) => {
  return operateList.filter((i) => {
    if (i.status) {
      return i.status.includes(item.status);
    }
    return true;
  });
};

const enterDetails = (
  item2: { status: number; id: any },
  item: { id: any; name: any },
  index: any
) => {
  if (item2.status === 1) return false;
  setTheAnchor(index);
  router.push({
    path: "/editTemplate",
    query: {
      personalTemplateId: item.id, //父级id
      personalTemplateName: item.name, // 父级name
      childId: item2.id, // 当前存证id
    },
  });
};

const handleClickMoreOperateItem = (value: string, props: any) => {
  operateList.find((i) => i.value === value)?.click(props);
};

const searchOpearteList = [
  {
    name: "查看区块链",
    value: "查看区块链",
    click(props: any) {
      openChainBrowser(props.hash, globalState.urlList.chain_browser_url);
    },
  },
  {
    name: "复制存证地址",
    value: "复制存证地址",
    click(props: any) {
      CopyAddress(props);
    },
  },
];

const getSearchOperateList = (item: any) => {
  return searchOpearteList;
};

const handleClickSearchMoreOperateItem = (value: string, props: any) => {
  searchOpearteList.find((i) => i.value === value)?.click(props);
};

const checkPass = (item: any) => {
  window.open(
    `${globalState.urlList.chain_browser_url}/trace_token?goods_id=${item.pass_id}&evm_tx_hash=${item.pass_hash}&from=client`
  );
};
const openQRcode = async (item: any, index: number) => {
  console.log(item.status !== 2);
  if (item.status != 2) return;
  checkQR.value = index;
  QRcode.value =
    (await getQR(item.hash, globalState.urlList.chain_browser_url)) || "";

  document.addEventListener("mousedown", onHindMenu);
};

const onHindMenu = () => {
  checkQR.value = -1;
  checkBlock.value = -1;
  checkSet.value = -1;
  QRcode.value = "";
  document.removeEventListener("mousedown", onHindMenu);
};

const CopyAddress = (item: any) => {
  var input = document.createElement("input"); // 直接构建input
  input.value = item.hash; // 设置内容
  document.body.appendChild(input); // 添加临时实例
  input.select(); // 选择实例内容
  let issafariBrowser =
    /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
  if (issafariBrowser) {
    //safari浏览器单独处理
    input.setSelectionRange(0, 9999);
  }
  document.execCommand("Copy"); // 执行复制
  document.body.removeChild(input);
  ElMessage({
    message: "复制成功，请右键粘贴使用",
    type: "success",
  });
};

const openBlock = (item: any, index: any) => {
  if (item.status != 2) return;
  checkBlock.value = index;
  document.addEventListener("mousedown", onHindMenu);
};
</script>
<style lang="scss" scoped>
.back_btn {
  white-space: nowrap;
  width: 62px;
  font-weight: 400;
  font-size: 16px;
  cursor: pointer;
  .header-btn_back-icon {
    color: #d2d2d2;
    font-size: 14px;
    margin-right: 5px;
  }
}
.iconerweima--check {
  color: var(--sy-blue);
  cursor: pointer;
}
.iconerweima--no-check {
  cursor: no-drop;
  color: #b6b5ba;
}
.show-box {
  position: absolute;
  width: 135px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.13);
  overflow: hidden;
  font-size: 12px;
  color: rgba(155, 155, 155, 1);
  line-height: 17px;
  p {
    padding: 0;
    margin: 0;
    cursor: pointer;
  }
  .copy-address {
    padding-top: 6px;
    padding-bottom: 12px;
  }
  .imgbox {
    margin-left: 15px;
    margin-top: 12px;
    margin-bottom: 6px;
    width: 106px;
    height: 106px;
    padding: 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.set-menu {
  z-index: 1;
  position: absolute;
  top: 46px;
  right: 2px;
  margin: 0;
  list-style: none;
  padding: 0;
  width: 148px;
  border-radius: 2px;
  border: 1px solid #e7e7e7;
  background: #fff;
  line-height: 40px;
  font-size: 14px;
  text-align: left;
  & > li {
    cursor: pointer;
    padding-left: 31px;
    &:hover {
      background: rgba(245, 246, 250, 1);
    }
  }
}

.table-td-index--an {
  color: #e8e8e8;
  cursor: pointer;
  transform: rotate(-90deg);
  transition: transform 0.3s ease-in-out;
  i {
    font-size: 12px;
  }
}
.table-td-index--rotating {
  transform: rotate(0deg);
}
.iconerweima--check {
  color: var(--sy-blue);
  cursor: pointer;
}
.iconerweima--no-check {
  cursor: no-drop;
  color: #b6b5ba;
}
.text-gray {
  color: #c4c4c4;
}
.text-black {
  color: #353535;
}
.text-btn {
  color: var(--sy-blue) !important;
  font-size: 12px;
  font-weight: normal;
  outline: none !important;
  border: none !important;
}

.incremental-icon {
  height: 30px;
  color: var(--sy-blue);
  i {
    font-size: 12px;
  }
}

.incremental-state {
  span {
    font-size: 12px;
    color: rgba(196, 196, 196, 1);
    width: 70px;
    display: inline-block;
    text-align: center;
  }
  .state-start {
    font-size: 12px;
    color: rgba(63, 121, 254, 1);
    cursor: pointer;
  }
  .state-ban {
    cursor: no-drop;
  }
  .state-ing {
    cursor: no-drop;
    color: #ffad0a;
  }
  .state-fail {
    color: #f12f2f;
    cursor: pointer;
  }
}

.firstLineCell {
  height: calc(51px - 16px);
  line-height: calc(51px - 16px);
  margin-top: 6.5px;
  margin-bottom: 6.5px;
}
.notFirstLineCell {
  margin-top: 5px;
  height: 30px;
  line-height: 30px;
  background-color: #fafafb;
  margin-left: -12px;
  margin-right: -12px;
  padding-left: 12px;
  padding-right: 12px;
  &:last-of-type {
    margin-bottom: 6px;
  }
}

.span-ban {
  color: rgba(250, 250, 251, 1);
}
</style>
