<template>
  <div>
    <div style="margin:15px 0;display: inline-block;">
      <span>地址名：</span>
      <el-input
        style="width: 180px;"
        clearable
        placeholder="请输入地址名"
        v-model="search.addressDetail"
      ></el-input
      >&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div style="margin:15px 0;display: inline-block;">
      <span>创建时间：</span>
      <el-date-picker
        v-model="search.createTime"
        type="datetimerange"
        unlink-panels
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker
      >&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div style="position: relative;display: inline-block;margin: 10px 0px;">
      <span>是否启用：</span>
      <el-select
        v-model="search.status"
        placeholder="请选择"
        style="width:150px;"
      >
        <el-option label="启用" :value="1"></el-option>
        <el-option label="禁用" :value="0"></el-option> </el-select
      >&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div style="position: relative;display: inline-block;margin: 10px 0px;">
      <span>骑手站点：</span>
      <el-select
        v-model="search.stationId"
        placeholder="请选择骑手站点"
        style="width:250px;"
      >
        <el-option
          v-for="item in stationList"
          :key="item.id"
          :label="item.stationName"
          :value="item.id"
        >
        </el-option> </el-select
      >&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div style="display: inline-block;">
      <el-button
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="select"
        >查询
      </el-button>
      <el-button
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="cleans"
        >重置
      </el-button>
    </div>
    <div style="margin:5px 0 15px 0;">
      <el-button
        :disabled="!isAuth('deliveryAddress:import')"
        size="mini"
        type="primary"
        icon="document"
        @click="daoruCheck"
        >导入
      </el-button>
      <el-button
        :disabled="!isAuth('deliveryAddress:export')"
        style="margin-left:15px;"
        size="mini"
        type="warning"
        icon="document"
        @click="exportList"
      >
        导出Excel
      </el-button>
      <el-button
        :disabled="!isAuth('deliveryAddress:add')"
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="addAddress"
        >新增
      </el-button>
    </div>
    <!-- <div style="margin:5px 0 15px 0;">
      <span style="font-size: 17px;">是否开启校内地址：</span>
      <el-switch
        v-model="switchValue"
        @change="switchType"
        :active-value="1"
        :inactive-value="0"
      >
      </el-switch>
    </div> -->
    <el-table v-loading="tableDataLoading" :data="tableData.list">
      <!-- <el-table-column type="selection">  @selection-change="changeFun"
			</el-table-column> -->
      <el-table-column prop="id" label="编号" width="80"></el-table-column>
      <el-table-column prop="stationName" label="骑手站点"> </el-table-column>
      <el-table-column prop="province" label="省"> </el-table-column>
      <el-table-column prop="city" label="市"> </el-table-column>
      <el-table-column prop="district" label="区/县"> </el-table-column>
      <el-table-column prop="addressDetail" label="地址名"> </el-table-column>
      <el-table-column prop="lng" label="经度"> </el-table-column>
      <el-table-column prop="lat" label="纬度"> </el-table-column>
      <el-table-column prop="deliveryFee" label="地址配送费" width="150">
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="150"> </el-table-column>
      <el-table-column prop="enableFlag" label="是否启用" width="80">
        <template slot-scope="scope">
          <el-switch
            :disabled="!isAuth('deliveryAddress:update')"
            v-model="scope.row.status"
            @change="changeType($event, scope.row)"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="160">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            :disabled="!isAuth('deliveryAddress:update')"
            @click="updates(scope.row)"
            style="margin: 3px;"
            >修改
          </el-button>
          <el-button
            size="mini"
            type="danger"
            :disabled="!isAuth('deliveryAddress:delete')"
            @click="deleteuser(scope.row)"
            style="margin: 3px;"
            v-if="scope.row.id != 14"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 10px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="limit"
        :current-page="page"
        layout="total,sizes, prev, pager, next"
        :total="tableData.totalCount"
      >
      </el-pagination>
    </div>

    <el-dialog :title="addTitle" :visible.sync="addDialog" center width="600px">
      <el-form :model="addForm">
        <el-form-item label="骑手站点：" :label-width="formLabelWidth">
          <el-select
            v-model="addForm.stationId"
            style="width:250px;"
            placeholder="请选择骑手站点"
          >
            <el-option
              v-for="item in stationList"
              :key="item.id"
              :label="item.stationName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市：" :label-width="formLabelWidth">
          <el-cascader
            :key="componentKey"
            style="width:250px"
            size="large"
            :options="options"
            ref="cascaderAddr"
            v-model="storeAddre"
            :placeholder="storeAddreStr"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="详情地址名：" :label-width="formLabelWidth">
          <el-input
            v-model="addForm.addressDetail"
            style="width: 250px"
            placeholder="请输入详情地址名"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址经度：" :label-width="formLabelWidth">
          <el-input
            v-model="addForm.lng"
            style="width: 250px"
            placeholder="请输入地址经度"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址纬度：" :label-width="formLabelWidth">
          <el-input
            v-model="addForm.lat"
            style="width: 250px"
            placeholder="请输入地址纬度"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址配送费：" :label-width="formLabelWidth">
          <el-input
            v-model="addForm.deliveryFee"
            style="width: 250px"
            placeholder="请输入套餐内容"
          ></el-input>
        </el-form-item>

        <el-form-item label="排序：" :label-width="formLabelWidth">
          <el-input-number
            v-model="addForm.sort"
            label="描述文字"
            :min="0"
            style="width: 150px;"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="是否启用：" :label-width="formLabelWidth">
          <el-switch
            v-model="addForm.status"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div style="display: flex;flex-direction: row-reverse;">
        <el-button type="primary" @click="amendAddress">确 定</el-button>
        <el-button @click="addDialog = false" style="margin-right: 20px;"
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <!-- 导出限制 -->
    <el-dialog
      custom-class="export"
      :visible.sync="exportVisible"
      center
      :title="exportTitle"
      :close-on-click-modal="false"
    >
      <div class="con" v-show="exportFlag == 1">
        <img src="../../assets/img/error.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >当前导出条数超过50000条，暂不支持导出</span
        >
        <span style="font-size:14px;color: #808080;"
          >（注：数据中的图片、附件只能以链接的形式导出）</span
        >
      </div>
      <div class="con" v-show="exportFlag == 2">
        <img class="gundong" src="../../assets/img/loading.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >导出中...</span
        >
        <span style="font-size:14px;color: #808080;"
          >（注：请到个人导出记录查看并下载）</span
        >
      </div>
      <div class="con" v-show="exportFlag == 3">
        <img src="../../assets/img/success.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >导出成功</span
        >
        <span style="font-size:14px;color: #808080;"
          >（注：请到个人导出记录查看并下载）</span
        >
      </div>
      <div class="con" v-show="exportFlag == 4">
        <img class="gundong" src="../../assets/img/loading.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >版本迭代中，导出暂时无法使用</span
        >
      </div>
      <div class="btn">
        <el-button type="primary" @click="exportAffirm">确定</el-button>
      </div>
    </el-dialog>

    <!-- 导入 -->
    <el-dialog
      custom-class="daoru"
      :visible.sync="daoruVisible"
      center
      title="导入收货地址"
      :close-on-click-modal="false"
      width="700px"
    >
      <div style="margin-bottom: 55px;">
        <el-button
          style="margin-bottom: 20px;"
          type="warning"
          @click="daoruTemplate"
          >导入模板下载</el-button
        >
        <el-upload
          class="upload-demo"
          drag
          ref="upload"
          v-model="daoruFile"
          :http-request="daoruChange"
          action="#"
          :before-upload="daoruBeforeUpload"
          :on-remove="handleRemove"
        >
          <!-- <el-button type="primary">点击上传</el-button> -->
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传execl文件
          </div>
        </el-upload>
      </div>
      <div class="btn" style="display: flex;flex-direction: row-reverse;">
        <el-button type="primary" @click="daoruAffirm">确定</el-button>
        <el-button @click="daoruCancel" style="margin-right: 20px;"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import quillConfig from "../allocation/quill-config.js";
import { regionData } from "element-china-area-data";
export default {
  name: "news",
  components: {
    quillEditor
  },
  data() {
    return {
      limit: 10,
      page: 1,
      tableDataLoading: false,
      search: {
        addressDetail: "",
        createTime: "",
        status: "",
        stationId: ""
      },
      stationList: [],
      tableData: {
        list: []
      },
      switchValue: 0,

      formLabelWidth: "100px",
      addDialog: false,
      addTitle: "新增收货地址",
      options: regionData,
      componentKey: 0,

      storeAddre: [],
      storeAddreStr: "",

      province: "",
      city: "", //市
      district: "", //区
      addForm: {
        id: "",
        stationId: "", //站点id不能为空
        deliveryFee: "", //配送费用不能小于0
        addressDetail: "", //地址详情不能为空
        lng: "", //经度不能为空
        lat: "", //维度不能为空
        status: "", //启用状态;1启用、0禁用
        sort: "" //排序不能为空
      },

      // 导出限制
      exportTitle: "导出错误",
      exportVisible: false,
      exportFlag: 1, //1 超出限制  2导出中

      daoruVisible: false,
      daoruFile: []
    };
  },
  methods: {
    switchType() {},

    stationsData() {
      this.$http({
        url: this.$http.adornUrl("admin/riderStation/selectStationList"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          size: 1000
        })
      }).then(({ data }) => {
        console.log(data, "骑手站点");
        let returnData = data.data.list;
        this.stationList = returnData;
      });
    },
    // 多选
    changeFun(val) {},

    handleSizeChange(val) {
      this.limit = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },
    // 查询
    select() {
      this.page = 1;
      this.dataSelect();
    },
    // 重置
    cleans() {
      this.page = 1;
      this.search = {
        addressDetail: "",
        createTime: "",
        status: "",
        stationId: ""
      };
      this.dataSelect();
    },
    // 是否启用
    changeType(flag, row) {
      console.log(flag, row);
      this.$http({
        url: this.$http.adornUrl("admin/inside-address/updateStatus"),
        method: "post",
        data: this.$http.adornData({
          id: row.id,
          status: flag //启用状态;1启用、0禁用
        })
      }).then(({ data }) => {
        console.log(data, "新增收货地址");
        if (data.msg == "success") {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.dataSelect();
            }
          });
        }
      });
    },

    // 获取省市区
    handleChange(value) {
      console.log(value);

      value = this.$refs["cascaderAddr"].currentLabels;
      this.province = value[0];
      this.city = value[1];
      this.district = value[2];
      if (this.city == "市辖区") {
        this.city = this.province;
      }
      console.log(this.$refs["cascaderAddr"].currentLabels);
    },

    // 删除
    deleteuser(row) {
      let delid = [row.id];
      this.$confirm(`确定删除此收货地址?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("admin/inside-address/delete"),
            method: "post",
            // data: delid
            data: this.$http.adornData(delid)
          }).then(({ data }) => {
            if (data.msg == "success") {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.dataSelect();
                }
              });
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                duration: 1500,
                onClose: () => {}
              });
            }
          });
        })
        .catch(() => {});
    },
    // 获取数据列表
    dataSelect() {
      this.tableDataLoading = false;
      this.$http({
        url: this.$http.adornUrl("admin/inside-address/pages"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page,
          limit: this.limit,
          addressDetail: this.search.addressDetail,
          status: this.search.status,
          stationId: this.search.stationId,
          startTime: this.search.createTime[0],
          endTime: this.search.createTime[1]
        })
      }).then(({ data }) => {
        console.log(data, "收货地址列表");
        if (data.msg == "success") {
          this.tableDataLoading = false;
          let returnData = data.data;
          this.tableData = returnData;
        } else {
          this.$message({
            message: data.msg,
            type: "warning",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    // 新增收货地址
    addAddress() {
      this.addTitle = "新增收货地址";
      this.storeAddreStr = "请选择省市区";
      this.storeAddre = [];
      this.addForm = {
        id: "",
        stationId: "", //站点id不能为空
        deliveryFee: "", //配送费用不能小于0
        province: "", //省份不能为空
        city: "", //城市不能为空
        district: "", //区县不能为空
        addressDetail: "", //地址详情不能为空
        lng: "", //经度不能为空
        lat: "", //维度不能为空
        status: "", //启用状态;1启用、0禁用
        sort: "" //排序不能为空
      };
      this.addDialog = true;
    },

    // 编辑
    updates(row) {
      console.log(row);
      this.addTitle = "编辑收货地址";
      this.storeAddre = [];
      this.addForm = {
        id: row.id,
        stationId: row.stationId, //站点id不能为空
        deliveryFee: row.deliveryFee, //配送费用不能小于0
        province: row.province, //省份不能为空
        city: row.city, //城市不能为空
        district: row.district, //区县不能为空
        addressDetail: row.addressDetail, //地址详情不能为空
        lng: row.lng, //经度不能为空
        lat: row.lat, //维度不能为空
        status: row.status, //启用状态;1启用、0禁用
        sort: row.sort //排序不能为空, //排序不能为空
      };
      this.province = row.province;
      this.city = row.city;
      this.district = row.district;
      this.addDialog = true;
      this.storeAddreStr = `${row.province}/${row.city}/${row.district}`;
    },

    // 确定收货地址
    amendAddress() {
      if (this.addForm.stationId == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "站点不能为空",
          type: "warning"
        });
        return;
      }
      if (this.addForm.deliveryFee == "" && this.addForm.deliveryFee < 0) {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "配送费不能为空且不能小于0",
          type: "warning"
        });
        return;
      }
      if (this.addForm.addressDetail == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "地址详情不能为空",
          type: "warning"
        });
        return;
      }
      if (this.addForm.lng == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "经度不能为空",
          type: "warning"
        });
        return;
      }
      if (this.addForm.lat == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "纬度不能为空",
          type: "warning"
        });
        return;
      }
      if (this.addForm.id) {
        this.$http({
          url: this.$http.adornUrl("admin/inside-address/update"),
          method: "post",
          data: this.$http.adornData({
            id: this.addForm.id,
            stationId: this.addForm.stationId, //站点id不能为空
            deliveryFee: this.addForm.deliveryFee, //配送费用不能小于0
            province: this.province, //省份不能为空
            city: this.city, //城市不能为空
            district: this.district, //区县不能为空
            addressDetail: this.addForm.addressDetail, //地址详情不能为空
            lng: this.addForm.lng, //经度不能为空
            lat: this.addForm.lat, //维度不能为空
            status: this.addForm.status, //启用状态;1启用、0禁用
            sort: this.addForm.sort //排序不能为空
          })
        }).then(({ data }) => {
          console.log(data, "新增收货地址");
          if (data.msg == "success") {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.addDialog = false;
                this.dataSelect();
              }
            });
          } else {
            this.$message({
              message: data.msg,
              type: "error",
              duration: 1500,
              onClose: () => {
                this.addDialog = false;
                this.dataSelect();
              }
            });
          }
        });
      } else {
        this.$http({
          url: this.$http.adornUrl("admin/inside-address/add"),
          method: "post",
          data: this.$http.adornData({
            stationId: this.addForm.stationId, //站点id不能为空
            deliveryFee: this.addForm.deliveryFee, //配送费用不能小于0
            province: this.province, //省份不能为空
            city: this.city, //城市不能为空
            district: this.district, //区县不能为空
            addressDetail: this.addForm.addressDetail, //地址详情不能为空
            lng: this.addForm.lng, //经度不能为空
            lat: this.addForm.lat, //维度不能为空
            status: this.addForm.status, //启用状态;1启用、0禁用
            sort: this.addForm.sort //排序不能为空
          })
        }).then(({ data }) => {
          console.log(data, "新增收货地址");
          if (data.msg == "success") {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.addDialog = false;
                this.dataSelect();
              }
            });
          } else {
            this.$message({
              message: data.msg,
              type: "error",
              duration: 1500,
              onClose: () => {
                this.addDialog = false;
                this.dataSelect();
              }
            });
          }
        });
      }
    },

    exportList() {
      console.log(this.tableData.totalCount, "导出条数");
      this.exportTitle = "导出";
      // this.exportFlag = 4;
      this.exportVisible = true;
      if (this.tableData.totalCount >= 50000) {
        this.exportTitle = "导出错误";
        this.exportFlag = 1;
      } else {
        this.exportTitle = "导出";
        this.exportFlag = 2;
        this.exportVisible = true;
        var userId = this.$cookie.get("userId");
        this.$http({
          url: this.$http.adornUrl("admin/export/exportShippingAddress"),
          method: "get",
          // responseType: "blob",
          params: this.$http.adornParams({
            // 'page': page,
            // 'size': this.size,
            userId: userId,
            addressDetail: this.search.addressDetail,
            status: this.search.status,
            stationId: this.search.stationId,
            startTime: this.search.createTime[0],
            endTime: this.search.createTime[1]
          })
        }).then(({ data }) => {
          console.log(data, "导出");
          if (data.code == 0) {
            this.exportTitle = "导出成功";
            this.exportFlag = 3;
          }
          // let blob = new Blob([data], {
          //   type:
          //     "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          // });
          // if (window.navigator.msSaveOrOpenBlob) {
          //   navigator.msSaveBlob(blob);
          // } else {
          //   let url = window.URL.createObjectURL(blob);
          //   let elink = document.createElement("a");
          //   elink.download = "订单列表.xlsx";
          //   elink.style.display = "none";
          //   elink.href = url;
          //   document.body.appendChild(elink);
          //   elink.click();
          //   document.body.removeChild(elink);
          // }
        });
      }
    },
    exportAffirm() {
      this.exportVisible = false;
    },

    daoruCheck() {
      this.daoruVisible = true;
      this.daoruFile = [];
      this.$nextTick(() => {
        this.$refs.upload.clearFiles();
      });
    },
    // 导入模板下载
    daoruTemplate() {
      this.$http({
        url: this.$http.adornUrl(
          "admin/inside-address/downloadInsideAddressExcel"
        ),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        console.log(data, "导出");
        const link = document.createElement("a");
        link.href = data.data;
        // link.download = "模板文件.xlsx"; // 设置下载后的文件名
        link.target = "_blank"; // 在新标签页中打开
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
    // 确定导入
    daoruAffirm() {
      console.log(this.daoruFile, "导入收货地址");

      let formData = new FormData();
      formData.append("file", this.daoruFile);
      this.$http({
        url: this.$http.adornUrl("admin/inside-address/import"),
        method: "post",
        // headers: {
        //   'Content-Type': 'multipart/form-data'
        // },
        data: formData
      }).then(({ data }) => {
        console.log(data, "导入收货地址");
        if (data.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.addDialog = false;
              this.dataSelect();
            }
          });
        } else {
          this.$message({
            message: data.msg,
            type: "error",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    daoruCancel() {
      this.daoruVisible = false;
      this.$refs.upload.clearFiles();
    },
    // 导入文件
    daoruChange(file) {
      console.log(file, "上传成功");
      this.daoruFile = file.file;
    },
    daoruBeforeUpload(file) {
      console.log(file, "上传之前");
      // 检查文件类型
      const isExcel =
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.type === "application/vnd.ms-excel";

      // 检查文件数量
      const isSingleFile = this.daoruFile ? this.daoruFile.length === 0 : true;

      if (!isExcel) {
        this.$message.error("只能上传Excel文件！");
        return false;
      }

      if (!isSingleFile) {
        this.$message.error("只能上传一个文件！");
        return false;
      }

      return true;
      // return this.$processImage(this, file, false); // 导入图片处理
    },
    // 文件移除处理
    handleRemove(file, fileList) {
      this.daoruFile = [];
    }
  },
  mounted() {
    this.dataSelect();
    this.stationsData();
  }
};
</script>

<style>
.imgs {
  position: relative;
  border-radius: 6px;
  width: 148px;
  height: 148px;
  margin-right: 10px;
  display: inline-block;
}
.times {
  position: relative;
  border: 1px dashed rgba(206, 214, 222, 1);
  width: 28px;
  height: 28px;
  border-radius: 3px;
  background: rgba(245, 246, 247, 1);
  margin-right: 10px;
  display: inline-block;
}

.dels {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.dels .el-icon-delete {
  line-height: 148px;
  padding-left: 58px;
  font-size: 25px;
  color: #fff;
}

.imgs:hover .dels {
  width: 100%;
  height: 100%;
  background: #000;
  display: block;
  opacity: 0.5;
}

.bqList {
  padding: 4px 14px;
  margin: 4px;
  border: 1px solid #efefef;
  font-size: 12px;
  color: #999;
  border-radius: 4px;
  margin-right: 15px;
}

.delss {
  display: none;
  position: relative;
}

.delss .el-icon-delete {
  position: absolute;
  top: 0;
}

.bqList:hover .delss {
  display: initial;
  opacity: 0.5;
}

.tj {
  padding: 6px !important;
  margin: 4px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.el-upload--picture-card {
  vertical-align: unset !important;
}
.tianshang {
  margin-left: 690px;
  margin-top: -20px;
  width: 69px;
  height: 26px;
  opacity: 1;
  border-radius: 5px;
  background: rgba(62, 142, 247, 1);
  font-size: 12px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}

/* 导出限制 */
.export {
  width: 500px;
}
.export .con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.export .con .gundong {
  animation: gundong 3s linear infinite;
}
@keyframes gundong {
  /* from表示动画的开始位置，也可以使用0%来表示。 */
  from {
    transform: rotate(0deg);
  }
  /* to表示动画的结束位置，也可以使用100%来表示。 */
  to {
    transform: rotate(360deg);
  }
}
.export img {
  width: 70px;
}
.export .btn {
  display: flex;
  flex-direction: row-reverse;
}
</style>
