<template>
  <div style="width: 100%">
    <div style="display: flex" class="icon-tu">
      <el-upload
        class="avatar-div"
        action="#"
        :show-file-list="false"
        ref="uploadRef"
        :limit="limit"
        :key="attaments.length"
        :http-request="handlSuccess"
        :on-exceed="handleExceed"
        :multiple="multiple"
        :before-upload="beforeUpload"
        :disabled="isBindPlan"
      >
        <el-button
          icon="el-icon-plus"
          size="small"
          type="primary"
          :disabled="isBindPlan"
          >添加</el-button
        >
      </el-upload>
      <div>
        <el-button
          @click="openDucement"
          icon="el-icon-plus"
          size="small"
          type="primary"
          :disabled="isBindPlan"
          >图库</el-button
        >
      </div>
      <div class="imgs-box">
        <p v-for="(item, index) in attaments" :key="index" class="imgs-p">
          <span> {{ item.name }}</span>
          <el-link @click="delFileList(index)" type="primary" class="link"
            >删除</el-link
          >
        </p>
      </div>
    </div>
    <!--图文档弹窗 -->
    <el-dialog
      title="图文档"
      append-to-body
      :visible.sync="documentVisible"
      :before-close="closeWindows"
      width="72%"
    >
      <el-form label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="70px" label="文档名称">
              <div style="display: flex">
                <el-input size="small" v-model="documentForm.name"></el-input>
                <el-button
                  @click="search"
                  type="primary"
                  icon="el-icon-search"
                  size="small"
                  style="height: 32px; margin: 2px 10px"
                  >搜索</el-button
                >
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="2" :offset="13">
            <el-upload
              class="avatar-uploader"
              style="width: 100%"
              action="#"
              :show-file-list="false"
              :http-request="localUpload"
              :before-upload="beforeUpload"
            >
              <el-button icon="el-icon-plus" size="small" type="primary"
                >本地上传</el-button
              >
            </el-upload>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-container>
          <el-main style="max-height: 400px">
            <el-table
              ref="multipleTable"
              :data="documentData"
              tooltip-effect="dark"
              style="width: 100%"
              :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
              @current-change="handleChangeDocument"
            >
              <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
              <el-table-column label="选择" width="55">
                <template slot-scope="scope">
                  <el-radio
                    v-if="scope.row.accessUrl"
                    :label="scope.row.accessUrl"
                    v-model="radioId"
                    style="margin-left: 5px"
                    ><p></p
                  ></el-radio>
                </template>
              </el-table-column>
              <el-table-column prop="docName" label="文档名称">
              </el-table-column>
              <el-table-column
                width="100px"
                prop="fileType.name"
                label="文档类型"
              >
              </el-table-column>
              <!-- <el-table-column prop="accessUrl" label="存储路径">
              </el-table-column> -->
              <el-table-column prop="module" label="模块名"> </el-table-column>
              <el-table-column width="120" prop="system" label="系统名">
                <template slot-scope="scope">
                  {{ scope.row.system == 1 ? '资产管理系统' : '' }}
                </template>
              </el-table-column>
              <el-table-column prop="creator.name" width="120" label="上传人">
              </el-table-column>
              <el-table-column prop="createTime" width="160" label="上传时间">
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
        <el-col style="text-align: right" :span="24">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-sizes="pageSizes"
            :page-size="size"
            :current-page.sync="page"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeWindows">关 闭</el-button>
        <el-button size="small" @click="submitDocument" type="primary"
          >确 认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import pagination from './pagination';
  // import common from '@/api/data';
  export default {
    mixins: [pagination],
    props: {
      initData: {
        type: Array,
        default: () => {
          return [];
        }
      },
      module: {
        type: String,
        default: ''
      },
      multiple: {
        type: Boolean,
        default: false
      },
      limit: {
        type: Number,
        default: 1
      },
      ininObj: {
        type: Object,
        default: () => {
          return {};
        }
      },
      isBindPlan: {
        type: Boolean,
        default: () => {
          return false;
        }
      }
    },
    data() {
      return {
        attaments: [],
        // documentData: [],
        documentVisible: false, //图文档弹窗
        documentData: [], //图文档列表
        documentForm: {},
        changeDocumentData: [], //已勾选单据图文档
        radioId: ''
      };
    },
    watch: {
      initData(val) {
        if (this.multiple) {
          this.attaments = val;
        } else if (!this.attaments.length) {
          this.attaments = this.initData;
          this.module = 'test';
        }
      },

      ininObj(val) {
        if (this.attaments.length > 0) {
        } else {
          // 回显
          if (this.ininObj && this.ininObj.url) {
            // this.ininObj.type = this.ininObj.type;
            this.attaments.push(this.ininObj);
            console.log(this.attaments);
            this.$emit('getImgs', this.attaments);
          }
        }
      }
    },
    created() {
      if (this.initData.length > 0) {
        this.attaments = this.initData;
      }
    },
    mounted() {},

    methods: {
      // 清空已上传的文件列表
      clearUploadFiles() {
        this.$refs.uploadRef.clearFiles();
      },
      //打开图文档
      openDucement() {
        this.handleList();
        this.documentVisible = true;
      },
      //   获取图文档列表信息
      handleList(...arg) {
        let params = { page: this.page, size: this.size, sort: '-create_time' };
        if (arg.length > 0) {
          params = Object.assign(params, arg[0]);
        }
        common.list(params).then((res) => {
          console.log(res);
          this.documentData = res.data.items;
          this.total = res.data.total;
        });
      },
      search() {
        this.handleList(this.documentForm);
      },
      //图片添加
      handlSuccess(param) {
        // console.log(param);
        if (!this.multiple && this.attaments.length > 0) {
          return this.$message.warning('已经存在一张图片了,请先删除');
        }

        const fd = new FormData();
        fd.append('file', param.file);
        fd.append('module', this.module);
        let res = common.upload(fd);
        if (res?.success) {
          // console.log("添加上传：", res);
          let info = res.data;
          info.type = info.type.id;
          this.attaments.push(info);
          this.$emit('getImgs', this.attaments);
        }
      },
      //弹窗本地上传
      localUpload(param) {
        const fd = new FormData();
        fd.append('file', param.file);
        fd.append('module', this.module);
        let res = common.upload(fd);
        if (res.success) {
          this.page = 1;
          this.$message.success('操作成功！');
          this.handleList();
        }
      },
      // 限制上传的数量
      handleExceed(files, fileList) {
        this.$message.warning(`最多允许上传${this.limit}张图片！`);
      },
      beforeUpload() {},
      //删除附件
      delFileList(index) {
        this.attaments.splice(index, 1);
        this.$emit('getImgs', this.attaments);
      },
      //已勾选图文档
      handleChangeDocument(val) {
        if (val) {
          this.radioId = val.accessUrl;
          let arr = [];
          arr.push(val);
          console.log(arr);
          this.changeDocumentData = arr;
        }
      },
      //图文档勾选
      submitDocument() {
        let list = this.changeDocumentData.map((res) => {
          return {
            accessUrl: res.accessUrl,
            docId: res.docId,
            name: res.docName,
            size: res.fileSize,
            type: res.fileType.id,
            url: res.url
          };
        });
        if (this.multiple || this.attaments.length < 1) {
          if (this.attaments.length === this.limit) {
            return this.$message.warning(`最多允许上传${this.limit}张图片！`);
          }
          this.attaments = this.attaments.concat(list);
          this.$emit('getImgs', this.attaments);
          this.documentVisible = false;
          this.radioId = '';
        } else {
          this.$message.warning('已经存在一张图片了,请先删除');
        }
      },
      closeWindows() {
        this.radioId = '';
        this.documentVisible = false;
      }
    }
  };
</script>
<style scoped lang="scss">
  .avatar-div {
    display: inline-block;
    margin-right: 10px;
  }
  ::v-deep .upload-col .el-form-item__content {
    line-height: 1;
  }
  .icon-tu {
    width: 100%;
    .imgs-box {
      width: 60%;
      margin-top: 4px;
      .imgs-p {
        display: inline-block;
        width: 100%;
        display: flex;
        justify-content: space-between;
        span {
          display: inline-block;
          width: 80%;
          overflow: hidden;
        }
      }
    }
  }
  .imgs-box {
    margin-left: 10px;
  }
  .imgs-box .imgs-p {
    height: 30px;
    background: #f0f3f3;
    line-height: 30px;
    margin-bottom: 5px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
  }
</style>
