<template>
  <div class="manage-container">
    <el-button type="primary" size="small" @click="handleAdd">
      添加图片
    </el-button>
    <el-container direction="horizontal">
      <el-main direction="horizontal">
        <div class="el-list">
          <div
            v-for="fit in fileData"
            :key="fit"
            style="width: 10%; float: left; margin-top: 20px; margin-left: 10px"
            class="el-item"
          >
            <el-checkbox-group
              v-model="ids"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox :value="fit.id" :label="fit.id">
                {{ fit.name }}
              </el-checkbox>
            </el-checkbox-group>
            <el-image
              style="width: 100px; height: 100px"
              :src="fileUrl + fit.icon"
              fit="cover"
              title="点击复制路径"
              @click="copyPath('' + fit.icon + '')"
            ></el-image>
          </div>
        </div>
      </el-main>
    </el-container>
    <vab-query-form v-if="fileData.length > 0">
      <vab-query-form-left-panel>
        <el-button type="primary" @click="deletes">
          {{ $t('defalult.plsc') }}
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel>
        <el-pagination
          :background="background"
          :current-page="queryForm.page"
          :layout="layout"
          :page-size="queryForm.size"
          :total="total"
          style="text-align: right"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </vab-query-form-right-panel>
    </vab-query-form>
    <material-add ref="edit"></material-add>
  </div>
</template>

<script>
import { getList, doDelete } from '@/api/material';
import materialAdd from './components/add';
import { baseURL } from '@/config';
export default {
  components: {
    materialAdd,
  },
  data() {
    return {
      layout: 'total, sizes, prev, pager, next, jumper',
      checked: false,
      checkedform: false,
      total: 0,
      background: true,
      fileUrl: baseURL + '/static/img/',
      fileData: [],
      ids: [],
      checkAll: false,
      isIndeterminate: true,
      queryForm: {
        page: 1,
        size: 20,
        name: '',
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const { data } = await getList(this.queryForm);
      this.fileData = data.items;
      this.total = data.total;
    },
    copyPath(path) {
      const url = path;
      //{{$t('defalult.xj')}}一个文本框
      const oInput = document.createElement('input');
      //赋值给文本框
      oInput.value = url;
      document.body.appendChild(oInput);
      // 选择对象;
      oInput.select();
      // 执行浏览器复制命令
      document.execCommand('Copy');
      //复制完成删除掉输入框
      oInput.remove();
      this.$message.success('复制成功');
    },
    handleCheckAllChange(val) {
      this.ids = val ? this.fileData : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length;
      console.log(value);
      this.checkAll = checkedCount === this.fileData.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.fileData.length;
    },
    deletes() {
      const ids = this.ids;
      if (ids.length == 0) {
        this.$message({
          type: 'info',
          message: '没有选中任何项',
        });
        return false;
      }
      this.deleteData(ids);
    },
    //删除
    deleteData(dis) {
      const that = this;
      this.$confirm('你确定要删除当前项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const { msg } = doDelete(dis);
          this.$message({
            type: 'success',
            message: msg == undefined ? '删除成功' : msg,
          });
          setTimeout(function () {
            that.fetchData();
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    handleAdd() {
      this.$refs['edit'].materialEdit();
    },
    handleEdit(row) {
      this.$refs['edit'].materialEdit(row);
    },
    handleQuery() {
      this.queryForm.page = 1;
      this.fetchData();
    },
    handleSizeChange(val) {
      this.queryForm.size = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.fetchData();
    },
  },
};
</script>

<style lang="scss">
.el-submenu__title:hover {
  background-color: rgba(#1890ff, 0.085) !important;
  color: hsla(208, 100%, 55%, 0.95) !important;
}
.el-dialog {
  .el-dialog__header {
    background-color: #1890ff !important;
    padding: 15px 20px;
    text-align: left !important;
    .el-dialog__title {
      color: #e8f4ff !important;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #e8f4ff !important;
    }
  }
  .el-dialog__body {
    padding: 20px !important;
    .el-form-item {
      margin-bottom: 10px !important;
      .el-input {
        width: 100% !important;
      }
      .el-select {
        width: 100% !important;
      }
      .el-cascader {
        width: 100% !important;
      }
    }
    .el-form-item:last-child {
      margin-bottom: 20px !important;
    }
  }
  .dialog-footer {
    text-align: right;
  }
}
</style>
