<template>
  <el-table
    :data="data"
    row-key="uid"
    border
    class="file__upload-table"
    :size="size"
  >
    <el-table-column
      label="序号"
      align="center"
      type="index"
      width="50"
    ></el-table-column>
    <el-table-column label="附件名称" min-width="120" align="center">
      <template slot-scope="{ row }">
        <span
          :class="{ 'done-subject': previewable }"
          @click="$emit('preview', row)"
        >
          {{ row.name || (row.response && row.response.fileName) }}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      v-if="calColumnShow.fileType"
      prop="type"
      align="center"
      lalign="center"
      width="60"
      label="附件类型"
    >
      <template slot-scope="{ row }">
        <span>
          {{ row.type || substringType(row.response && row.response.fileName) }}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      v-if="calColumnShow.fileSize"
      align="center"
      lalign="center"
      width="80"
      label="附件大小"
    >
      <template slot-scope="{ row }">
        {{ (row.size || (row.response && row.response.size)) | computerSize }}
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      label="上传人"
      width="100"
      prop="username"
    ></el-table-column>
    <el-table-column
      v-if="inputWriteable"
      align="center"
      label="状态"
      width="60"
    >
      <template slot-scope="{ row }">
        <!-- <el-progress
          type="circle"
          :width="25"
          :stroke-width="2"
          :percentage="row.percentage ? row.percentage : row.state ? 100 : 0"
          :status="getProgressStatus(row.state)"
        ></el-progress> -->

        <i :class="getProgressStatus(row.state)"></i>
      </template>
    </el-table-column>
    <el-table-column
      v-for="con in propConfList"
      :key="con.name"
      :prop="con.name"
      :label="con.desc"
      width="150"
      align="center"
    >
      <template slot-scope="scope">
        <ht-input
          v-model="data[scope.$index][con.name]"
          :name="con.desc"
          :permission="
            permission == 'w' || permission == 'b'
              ? con.requried
                ? 'b'
                : 'w'
              : permission
          "
        ></ht-input>
      </template>
    </el-table-column>
    <el-table-column
      v-if="inputWriteable || downloadable"
      align="center"
      :width="operateWidth"
      class-name="file-table-operate"
    >
      <template slot="header">
        <div class="file-table-operate-header">
          <span style="margin-right: 8px">操作</span>

          <el-popconfirm
            popper-class="file-table-operate-download"
            confirm-button-text="确定"
            cancel-button-text="取消"
            cancel-button-type="Primary"
            icon-color="rgb(255, 153, 0)"
            title="确定要批量下载吗？"
            @confirm="handleDownAll"
          >
            <el-button slot="reference" size="small" icon="icon-xiazai1" plain>
              批量下载
            </el-button>
          </el-popconfirm>
        </div>
      </template>
      <template slot-scope="scope">
        <el-button
          v-if="sortable && inputWriteable"
          size="small"
          plain
          type="text"
          :disabled="scope.$index < 1"
          class="file-table-operate-main"
          @click="$emit('move', scope.row, 'up')"
        >
          上移
        </el-button>
        <el-button
          v-if="sortable && inputWriteable"
          size="small"
          plain
          type="text"
          :disabled="scope.$index === data.length - 1"
          class="file-table-operate-main"
          @click="$emit('move', scope.row, 'down')"
        >
          下移
        </el-button>
        <el-button
          v-if="downloadable"
          :disabled="scope.row.status !== 'success'"
          size="small"
          plain
          type="text"
          class="file-table-operate-main"
          @click="$emit('download', scope.row)"
        >
          下载
        </el-button>
        <el-popconfirm
          v-if="inputWriteable"
          class="table-delete__button"
          title="确定要删除吗？"
          @confirm="$emit('remove', scope.row)"
        >
          <el-button
            slot="reference"
            plain
            type="text"
            size="small"
            class="file-table-operate-main"
          >
            删除
          </el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  import Locale from '@/mixins/locale'

  export default {
    name: 'FileTable',
    mixins: [Locale],
    props: {
      data: {
        type: Array,
      },
      size: {
        type: String,
        default: 'small',
        validator: function (value) {
          return ['medium', 'small', 'mini'].indexOf(value) !== -1
        },
      },
      permission: {
        type: String,
        default: 'w',
        validator: function (value) {
          return ['b', 'w', 'r', 'n'].indexOf(value) !== -1
        },
      },
      previewable: {
        type: Boolean,
        default: true,
      },
      columnShow: {
        type: Object,
      },
      propConf: [Array, String],
      inputWriteable: {
        type: Boolean,
        default: true,
      },
      downloadable: {
        type: Boolean,
        default: true,
      },
      sortable: {
        type: Boolean,
        default: true,
      },
    },

    computed: {
      operateWidth() {
        return !this.inputWriteable && !this.downloadable
          ? '70'
          : !this.inputWriteable
          ? '230'
          : this.sortable
          ? '230'
          : '110'
      },
      calColumnShow: function () {
        let defaultSetting = { fileType: true, fileSize: true }
        return { ...defaultSetting, ...this.columnShow }
      },

      propConfList() {
        const filePropConf =
          typeof this.propConf === 'string' && this.propConf
            ? JSON.parse(this.propConf)
            : this.propConf
        return (filePropConf && filePropConf.filter((item) => item.desc)) || []
      },
    },
    methods: {
      //附件状态转换为progress的状态
      getProgressStatus(status) {
        return status == 'success'
          ? 'el-icon-success centerSuccess'
          : status == 'fail'
          ? 'el-icon-error centerError'
          : 'el-icon-warning centerWarning'
        // return status == 'success'
        //   ? 'success'
        //   : status == 'fail'
        //   ? 'exception'
        //   : 'warning'
      },
      //获取指定字符串点最后一个字符
      substringType(str) {
        let valueArr = str ? str.split('.') : ''
        return valueArr[valueArr.length - 1]
      },
      handleDownAll() {
        this.$emit('downloadAll', this.data)
      },
    },
  }
</script>
<style lang="scss">
  .file-table-operate-download {
    .el-popconfirm {
      padding: 0 3px;
    }
    .el-popconfirm__main {
      text-align: center;
    }
    .el-popconfirm__action {
      display: flex;
      justify-content: space-around;
    }
  }
</style>
<style lang="scss" scoped>
  .file__upload-table {
    .el-button + .table-delete__button {
      margin-left: 10px;
    }

    .done-subject {
      cursor: pointer;
    }

    .done-subject:hover {
      color: $base-color-blue;
    }
    ::v-deep {
      .el-progress.el-progress--circle.is-success {
        .el-progress__text {
          color: #37cd58 !important;
        }
      }
      .file-table-operate {
        .cell {
          display: flex;
        }
        &-header {
          display: flex !important;
          align-items: center !important;
          .icon-xiazai1 {
            font-size: 16px;
          }
        }

        &-main {
          &:hover,
          &:active,
          &:focus {
            color: var(--themeColor);
            border-color: rgb(0, 0, 0, 0);
            background-color: transparent;
          }
        }
      }
    }
  }
  ::v-deep {
    .centerSuccess {
      font-size: 24px;
      color: #07c160;
    }
    .centerError {
      font-size: 24px;
      color: #e6a23c;
    }
    .centerWarning {
      font-size: 24px;
      color: #f56c6c;
    }
    .el-button.is-disabled {
      border: none;
      color: #bfbfbf !important;
    }
  }
</style>
