/*文件列表*/
<template>
  <div>
    <transition name="marsk-fade">
      <div v-show="fileListConfig.isShow" class="marsk" />
    </transition>
    <transition name="slide-fade">
      <div class="action-limit" v-show="fileListConfig.isShow">
        <div class="title">
          <p>
            {{
              fileListConfig.operationType == 'upchain'
                ? '文件上链'
                : fileListConfig.operationType == 'download'
                ? '文件下载'
                : '文件列表'
            }}
          </p>
          <div class="operation">
            <i class="el-icon-circle-close" @click="close" />
          </div>
        </div>
        <el-table
          ref="table"
          v-loading="loading"
          stripe
          size="small"
          height="250px"
          :data="fileListConfig.fileList"
          element-loading-text="拼命加载中"
          :row-class-name="tableRowClassName"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column
            v-for="(header, index) in headerData"
            :key="index"
            align="center"
            :prop="header.prop"
            :label="header.label"
            :sortable="header.sortable"
            :width="header.prop == 'index' ? 60 : ''"
          >
            <template slot-scope="scope">
              <span v-if="header.prop == 'fileState'" slot="content">{{
                getState(scope.row[header.prop])
              }}</span>
              <span
                v-else-if="
                  header.prop == 'operation' && scope.row['fileState'] != '2'
                "
                slot="content"
                >--</span
              >
              <span
                v-else-if="
                  header.prop == 'operation' && scope.row['fileState'] == '2'
                "
                slot="content"
                class="operation"
                @click="viewChainInfo(scope.row)"
                >查看上链信息</span
              >
              <span v-else slot="content" :title="scope.row[header.prop]">{{
                scope.row[header.prop]
              }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="btn-group">
          <el-button
            type="danger"
            size="small"
            class="next-btn"
            @click.native.prevent="close"
            >关闭</el-button
          >
          <el-button
            type="success"
            size="small"
            class="next-btn"
            @click.native.prevent="refresh"
            >刷新</el-button
          >
          <el-button
            v-if="
              fileListConfig.operationType != 'download' &&
              fileListConfig.solverState == '2'
            "
            type="primary"
            size="small"
            class="next-btn"
            @click.native.prevent="upChain"
            >上链</el-button
          >
          <el-button
            v-if="
              fileListConfig.operationType != 'upchain' &&
              fileListConfig.solverState == '2'
            "
            type="info"
            size="small"
            class="next-btn"
            @click.native.prevent="download"
            >下载</el-button
          >
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { upChainState } from '@/utils/index'
import { request } from '@/utils/request'
import { parseTime } from '@/utils/index'
export default {
  name: 'FileList',
  props: {
    fileListConfig: {
      isShow: {
        type: Boolean,
        default: () => false,
      },
      operationType: {
        type: String,
        default: () => 'file',
      },
      projectId: {
        type: String,
        default: () => '',
      },
      solverState: {
        type: String,
        default: () => '',
      },
      solverNum: {
        type: String,
        default: () => '',
      },
      fileList: {
        type: Array,
        default: () => [],
      },
    },
  },
  data() {
    return {
      loading: false, // 是显示加载
      headerData: [], // 头部数据
      checkedIdList: [], // 选择项id,
      checkedUrlList: [], // 选择项url
    }
  },
  created() {
    this.addHeader() // 添加表头文字
  },
  inject: ['getFile'],
  methods: {
    // 添加表头文字
    addHeader() {
      const header = []
      header.push({ label: '序号', prop: 'index' })
      header.push({ label: '文件名', prop: 'fileName' })
      header.push({ label: '文件hash', prop: 'hashCode' })
      header.push({ label: '上链状态', prop: 'fileState' })
      header.push({ label: '上链详情', prop: 'operation' })
      this.headerData = header
    },
    // 点击关闭
    close() {
      this.fileListConfig.fileList = []
      this.checkedIdList = []
      this.checkedUrlList = []
      this.$emit('putFileList', false)
    },
    // 刷新
    refresh() {
      this.fileListConfig.fileList = ''
      this.getFile()
    },
    // 获取状态
    getState(state) {
      return upChainState(state)
    },
    // 选中行
    tableRowClassName(row, rowIndex) {
      if (row.row.operation == true) {
        return 'selected'
      } else {
        return ''
      }
    },
    // 获取选中项
    selectionChange(row) {
      this.fileListConfig.fileList.map((list) => {
        list.operation = false
      })
      this.checkedIdList = []
      this.checkedUrlList = []
      row.map((item) => {
        this.checkedIdList.push(item.fileId)
        this.checkedUrlList.push(item.fileUrl)
        this.fileListConfig.fileList.map((list) => {
          if (item.fileId == list.fileId) {
            list.operation = true
          }
        })
      })
    },
    // 查看上链信息
    viewChainInfo(data) {
      this.$emit('putFileList', data)
    },
    // 上链
    async upChain() {
      if (this.checkedIdList.length <= 0)
        return this.$message.error('请选择需要上链项！')
      const params = {
        transCode: 'C00034',
        projectId: this.fileListConfig.projectId,
        fileIds: this.checkedIdList.toString(),
      }
      request(params)
        .then((res) => {
          this.$message.success('已申请上链！')
          this.getFile()
        })
        .catch((err) => {})
    },
    formatTime(time) {
      return parseTime(time)
    },

    // 下载
    download() {
      if (this.checkedUrlList.length <= 0)
        return this.$message.error('请选择需要下载的文件！')
      this.checkedUrlList.map((url, index) => {
        let link = document.createElement('a')
        link.target = '_blank'
        link.style.display = 'none'
        link.href = url
        document.body.appendChild(link)
        link.click()
        setTimeout(() => {
          document.body.removeChild(link)
        }, 500)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';

.marsk-fade-enter-active,
.marsk-fade-leave-active {
  transition: all 0.5s;
}
.marsk-fade-enter,
.marsk-fade-leave-to {
  opacity: 0;
}
.marsk {
  @include position(fixed, 0, 0, 0, 0, 1000);
  background: rgba(4, 112, 204, 0.05);
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(7.48rem);
}
.chain-info {
  .item {
    @include flex(flex-start, flex-start);
    padding: 5px 0;
    font-size: 14px;
    color: $color_6;
    p {
      font-weight: 700;
      display: inline-block;
      @include w_h(70px);
    }
    span {
      display: inline-block;
      @include w_h(calc(100% - 70px));
      color: $color_3;
    }
  }
}
.action-limit {
  @include position(absolute, 50%, auto, 55%, auto, 1001);
  @include w_h(665px);
  transform: translate(-50%, -50%);
  background: $color_f;
  border-radius: 4px;
  box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.04);
  .title {
    @include flex();
    padding: 5px 15px;
    font-size: 18px;
    font-weight: 700;
    color: $color_3;
    background: #e6ebf0;
    .operation {
      font-size: 24px;
      color: $color_6;
      transition: all 0.3s;
      &:hover {
        cursor: pointer;
        color: $color_3;
      }
    }
  }
  .el-table {
    color: $color_9;
    .operation:hover {
      color: #2cae00;
      cursor: pointer;
    }
  }
  .btn-group {
    @include w_h();
    @include flex(center);
    margin: 30px auto;
    .next-btn {
      @include w_h(100px);
    }
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.action-limit {
  .el-table {
    .cell {
      white-space: nowrap;
      text-align: center;
    }
    th {
      color: $color_f;
      background: #004498;
    }
    td,
    th.is-leaf {
      font-size: 12px;
      border: none;
    }
    .selected {
      color: $color_3;
    }
  }
  .el-checkbox {
    &__input.is-checked .el-checkbox__inner,
    &__input.is-indeterminate .el-checkbox__inner {
      background-color: #2cae00;
      border-color: #2cae00;
    }
    &__inner {
      &:hover {
        border-color: #2cae00;
      }
    }
  }
}
</style>
