<template>
  <basic-container>
    <div class="avue-crud" v-loading="loadingObj.pageLoading">
      <div v-h5uShow="!search">
        <!-- 查询模块 -->
        <el-form :inline="true" :model="query" class="header_search">
          <el-form-item label="入库批次:">
            <el-input v-model="query.receiptBatch" placeholder="请输入入库批次"></el-input>
          </el-form-item>
          
          <el-form-item label="入库时间:">
            <!-- <el-input v-model="query.receiptDate" placeholder="请输入入库时间"></el-input> -->
            <el-date-picker
              class="w100"
              v-model="query.receiptDate"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :shortcuts="shortcuts"
              value-format="YYYY-MM-DD"
              clearable
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="客户名称:">
            <el-input v-model="query.customerName" placeholder="请输入客户名称"></el-input>
          </el-form-item>
          <!-- 查询按钮 -->
          <el-form-item class="el-btn">
            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
            <el-button icon="el-icon-delete" @click="searchReset">清 空</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-row>
        <div class="avue-crud__header">
          <!-- 头部左侧按钮模块 -->
          <div class="avue-crud__left">
            <!--            <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新 增</el-button>-->
            <!-- 导入 -->
            <el-button type="danger" icon="el-icon-plus" @click="handleImport" plain>
              导 入
            </el-button>

            <!-- 导出 -->
            <el-button type="danger" icon="el-icon-bottom" @click="handleExportInfo" plain>
              导出
            </el-button>

            <!-- 打印 -->
            <el-button type="primary" icon="Printer" @click="handlePrint"> 打 印 </el-button>
            <!--            <el-button type="danger" icon="el-icon-delete" @click="handleDelete" plain>删 除</el-button>-->
          </div>
          <!-- 头部右侧按钮模块 -->
          <div class="avue-crud__right">
            <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
            <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
          </div>
        </div>
      </el-row>
      <el-row>
        <!-- 列表模块 -->
        <tablecmt
          ref="tableNode"
          :columnList="columnList"
          :tableData="data"
          :loading="loading"
          @inputTxt="inputsc"
          @timeCheck="timesc"
          @btnCheck="btnsc"
          @selectCheck="selectsc"
          @selection="selectionChange"
        >
          <template #default="slotProps">
            <el-text type="primary" text icon="el-icon-view" @click="handleViewAdd(slotProps.scope)"
              >查看</el-text
            >
            <el-text
              type="primary"
              text
              icon="el-icon-edit"
              v-if="slotProps.scope.row.conditions != '3'"
              @click="handleEditOwn(slotProps.scope)"
              >编辑</el-text
            >
            <el-text
              type="primary"
              text
              icon="el-icon-edit"
              v-if="slotProps.scope.row.conditions != '3'"
              @click="handleEnter(slotProps.scope)"
              >入库</el-text
            >

            <el-dropdown>
              <el-text type="primary" text>
                更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-text>
              <template #dropdown>
                <el-dropdown-menu>
                  <!-- <el-dropdown-item v-if="slotProps.scope.row.conditions != '3'">
                    <el-text @click="rowDel(slotProps.scope)">删除</el-text>
                  </el-dropdown-item> -->
                  <el-dropdown-item>
                    <el-text @click="handleDrawer(slotProps.scope)">物品清单</el-text>
                  </el-dropdown-item>
                  <!-- <el-dropdown-item v-if="slotProps.scope.row.conditions != '3'">
                    <el-text @click="handleEnter(slotProps.scope)">入库</el-text>
                  </el-dropdown-item>-->
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </tablecmt>
      </el-row>

      <el-row>
        <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
          <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
          <!-- 分页模块 -->
          <el-pagination
            align="right"
            background
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="page.currentPage"
            :page-sizes="[30, 50, 80, 120]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>
        </div>
      </el-row>
      <!-- 表单模块 -->
      <el-dialog
        :title="title"
        v-model="box"
        width="50%"
        :before-close="beforeClose"
        append-to-body
      >
        <el-form :disabled="view" ref="form" :model="form" label-width="80px">
          <!-- 表单字段 -->
          <el-form-item label="入库批次" prop="receiptBatch">
            <el-input v-model="form.receiptBatch" placeholder="请输入入库批次" />
          </el-form-item>
          <el-form-item label="入库时间" prop="receiptDate">
            <el-input v-model="form.receiptDate" placeholder="请输入入库时间" />
          </el-form-item>
          <el-form-item label="客户名称" prop="customerName">
            <el-input v-model="form.customerName" placeholder="请输入客户名称" />
          </el-form-item>
          <el-form-item label="门店名称" prop="storeName">
            <el-input v-model="form.storeName" placeholder="请输入门店名称" />
          </el-form-item>
          <el-form-item label="订单单号" prop="orderNumber">
            <el-input v-model="form.orderNumber" placeholder="请输入订单单号" />
          </el-form-item>
          <el-form-item label="运单号" prop="waybillNumber ">
            <el-input v-model="form.waybillNumber" placeholder="请输入运单号" />
          </el-form-item>
          <el-form-item label="所在仓库" prop="warehouse">
            <el-input v-model="form.warehouse" placeholder="请输入所在仓库" />
          </el-form-item>
          <el-form-item label="物流车次" prop="trainNumber">
            <el-input v-model="form.trainNumber" placeholder="请输入物流车次" />
          </el-form-item>
          <el-form-item label="入库车牌" prop="licensePlate">
            <el-input v-model="form.licensePlate" placeholder="请输入入库车牌" />
          </el-form-item>
          <el-form-item label="服务类型" prop="serviceType">
            <el-input v-model="form.serviceType" placeholder="请输入服务类型" />
          </el-form-item>
          <el-form-item label="来源" prop="source">
            <el-input v-model="form.source" placeholder="请输入来源" />
          </el-form-item>
          <el-form-item label="入库状态" prop="condition">
            <el-input v-model="form.condition" placeholder="请输入入库状态" />
          </el-form-item>
          <el-form-item label="入库总件数" prop="totalInput">
            <el-input v-model="form.totalInput" placeholder="请输入入库总件数" />
          </el-form-item>
        </el-form>
        <!-- 表单按钮 -->
        <template #footer>
          <span v-if="!view" class="dialog-footer">
            <el-button type="primary" icon="el-icon-circle-check" @click="handleSubmit"
              >提 交</el-button
            >
            <el-button icon="el-icon-circle-close" @click="box = false">取 消</el-button>
          </span>
        </template>
      </el-dialog>
      <el-dialog title="库存品数据导入" append-to-body v-model="excelBox" width="555px">
        <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
          <template #excelTemplate>
            <el-button type="primary" @click="handleTemplate">
              点击下载<i class="el-icon-download el-icon--right"></i>
            </el-button>
          </template>
        </avue-form>
      </el-dialog>
      <el-drawer
        title="物品详细"
        append-to-body
        size="60%"
        v-model="drawer"
        :direction="direction"
        :before-close="handleDrawerClose"
      >
        <WarehouseWarehousingDetailSub
          :mainId="warehouseWarehousingEntryId"
        ></WarehouseWarehousingDetailSub>
      </el-drawer>
    </div>
  </basic-container>

  <!-- 打印 -->
  <MyPrint :html="html" v-model="PrintVisted" width="80%" :isShowExport="false" />

  <edittablehead
    @closce="showdrawer"
    :drawerShow="drawerShow"
    :columnList="columnList"
    v-model="columnList"
  ></edittablehead>
</template>

<script>
import {
  getList,
  getDetail,
  add,
  update,
  remove,
  $_getBillLadingExport,
  postWarehouseWarehousingEntryPrintBatch,
} from '@/api/warehouse/warehouseWarehousingEntry';
import option from '@/option/warehouse/warehouseWarehousingEntry';
import { mapGetters, mapMutations } from 'vuex';
import WarehouseWarehousingDetailSub from '@/views/warehouse/warehousingentry/warehouseWarehousingDetailSub.vue';
import { exportBlob } from '@/api/common';
import { getToken } from '@/utils/auth';
import {
  downloadXls,
  handleClearTableQuery,
  setNodeHeight,
  getObjType,
  handleSelectQuery,
  handleInputQuery,
} from '@/utils/util';
import dayjs from 'dayjs';
import { getDictionaryBiz } from '@/api/system/dict';

export default {
  components: {
    WarehouseWarehousingDetailSub,
  },
  data() {
    return {
      drawerShow: false,
      columnList: [
        {
          prop: '',
          label: '序号',
          type: 0,
          values: '',
          width: 55,
          checkarr: [],
          fixed: true,
        },
        {
          label: '入库批次',
          prop: 'receiptBatch',
          type: 2,
          values: '',
          width: '180',
          checkarr: [],
          fixed: true,
          sortable: true,
          head: false,
        },
        {
          label: '入库时间',
          prop: 'receiptDate',
          type: 1,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '客户名称',
          prop: 'customerName',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '门店名称',
          prop: 'storeName',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        // {
        //   label: "物流单号",
        //   prop: "waybillNumber ",
        //   type: 2,
        //   values: '',
        //   width: '130',
        //   checkarr: [],
        //   fixed: false,
        //   sortable: true,
        // },
        {
          label: '所在仓库',
          prop: 'warehouse',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '订单自编号',
          prop: 'orderNumber',
          type: 2,
          values: '',
          width: '220',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '物流单号',
          prop: 'trainNumber',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '入库车牌',
          prop: 'licensePlate',
          type: 1,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '服务类型',
          prop: 'serviceType',
          type: 3,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '存放位置备注',
          prop: 'positions',
          type: 3,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '状态',
          prop: 'conditionsName',
          type: 3,
          values: '',
          width: '130',
          checkarr: [
            {
              value: '1',
              label: '待确定',
            },
            {
              value: '2',
              label: '部分确定',
            },
            {
              value: '3',
              label: '已确定',
            },
          ],
          fixed: false,
          sortable: true,
        },
        {
          label: '备注',
          prop: 'remark',
          type: 1,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: '',
          label: '操作',
          type: 6,
          values: '',
          width: '200',
          checkarr: [],
          fixed: 'right',
          hide: true,
        },

        // 更多列的配置...
      ],
       /** 时间快捷选择设置 */
      shortcuts: [
        {
          text: '最近一周',
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
          },
        },
        {
          text: '最近一个月',
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
          },
        },
        {
          text: '最近三个月',
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return [start, end];
          },
        },
      ],
      height: 0,
      excelBox: false,
      excelForm: {},
      // 主键
      warehouseWarehousingEntryId: '',
      // 弹框标题
      title: '',
      // 是否展示弹框
      box: false,
      // 是否展示抽屉
      drawer: false,
      // 抽屉方向
      direction: 'rtl',
      // 是否显示查询
      search: true,
      // 加载中
      loading: true,
      // 是否为查看模式
      view: false,
      // 查询信息
      query: {},
      // 分页信息
      page: {
        currentPage: 1,
        pageSize: 30,
        total: 0,
      },
      // 表单数据
      form: {},
      // 选择行
      selectionList: [],
      // 表单配置
      option: option,
      // 表单列表
      data: [],
      distributionType: [],
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '数据上传',
            prop: 'excelFile',
            type: 'upload',
            drag: true,
            loadText: '数据上传中，请稍等',
            span: 24,
            propsHttp: {
              res: 'data',
            },
            tip: '请上传 .xls,.xlsx 标准格式文件',
            action: '/api/logpm-warehouse/warehouseWarehousingEntry/import-WarehousingEntry',
          },
          /*{
            label: '数据覆盖',
            prop: 'isCovered',
            type: 'switch',
            align: 'center',
            width: 80,
            dicData: [
              {
                label: '否',
                value: 0,
              },
              {
                label: '是',
                value: 1,
              },
            ],
            value: 0,
            slot: true,
            rules: [
              {
                required: true,
                message: '请选择是否覆盖',
                trigger: 'blur',
              },
            ],
          },*/
          {
            label: '模板下载',
            prop: 'excelTemplate',
            formslot: true,
            span: 24,
          },
        ],
      },
      /** loading */
      loadingObj: {
        /** 页面loading */
        pageLoading: false,
      },
      /** 打印 */
      html: '',
      PrintVisted: false,
    };
  },
  watch: {
    'excelForm.isCovered'() {
      if (this.excelForm.isCovered !== '') {
        const column = this.findObject(this.excelOption.column, 'excelFile');
        column.action = `/api/logpm-warehouse/warehouseWarehousingEntry/import-WarehousingEntry?isCovered=${this.excelForm.isCovered}`;
      }
    },
    // 监听 $route 对象的变化
    $route(to, from) {
      // 当路由变化时执行的代码
      this.onLoad(this.page);
    },
  },

  mounted() {
    this.init();
  },
  computed: {
    ...mapGetters(['permission']),
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
    },
  },
  methods: {
    // 导出功能
    async handleExportInfo() {
      try {
        this.loadingObj.pageLoading = true;

        let row = {};
        // if (this.query.startDate) {
        //   row.startDate = this.query.startDate[0]; //开始时间
        //   row.endDate = this.query.startDate[1]; //结束时间
        // }
        // if (this.query.serviceNumber) {
        //   row.serviceNumber = this.query.serviceNumber; //服务号
        // }
        // 日库批次
        if (this.query.receiptBatch) {
          row.receiptBatch = this.query.receiptBatch;
        }
        // 日期
        if (this.query.receiptDate) {
          row.receiptDate = this.query.receiptDate;
        }
        if (!!this.ids) {
          row.ids = this.ids; //根据DI来查询
        } else {
          row.ids = ''; //查询全部
        }
        const res = await $_getBillLadingExport(row);

        if (res.status !== 200) return;

        downloadXls(res.data, '入库数据.xlsx');
      } catch (error) {
        console.log('error :>> ', error);
      } finally {
        this.loadingObj.pageLoading = false;
      }
    },

    /** 打印 */
    async handlePrint() {
      if (this.selectionList.length === 0) return this.$message.warning('请选择需要打印的数据');
      try {
        this.loadingObj.pageLoading = true;

        this.html = '';

        const res = await postWarehouseWarehousingEntryPrintBatch({
          ids: this.selectionList.map(val => val.id).join(','),
          type: 1,
        });

        const { code, data } = res.data;
        if (code !== 200 || getObjType(data) !== 'array' || data.length === 0) return;

        for (let i = 0; i < data.length; i++) {
          const value = data[i];
          this.html += value.templateHtml;
        }
        console.log('data :>> ', data);
        this.PrintVisted = true;
        console.log('this.html :>> ', this.html);
      } catch (error) {
        console.log('error :>> ', error);
      } finally {
        this.loadingObj.pageLoading = false;
      }
    },

    showdrawer(value) {
      this.drawerShow = value;
    },

    selectionsc(value) {
      console.log(value);
    },
    delectsolt(scope) {
      const { row } = scope;
      console.log(row);
    },
    editsolt(scope) {
      const { row } = scope;
      console.log(row);
    },
    btnsc(index, row) {
      console.log(index, row);
    },
    selectsc(index, row) {
      handleSelectQuery(index, row, this.query);
      this.onLoad(this.page);
    },
    timesc(index, row) {
      console.log(index, row);
      if (!!index) {
        index = dayjs(index).format('YYYY-MM-DD');
      }
      this.query[row.prop] = index;
      if (!index) {
        delete this.query[row.prop];
      }
      this.onLoad(this.page);
    },
    inputsc(index, row) {
      handleInputQuery(index, row, this.query);
      this.onLoad(this.page);
    },
    handleEditOwn(row) {
      this.$router.push({
        path: '/warehouse/warehousingentry/warehouseWarehouseingAddReceipt',
        query: {
          id: row.row.id,
          name: row.row.customerName + ' — 编辑',
          type: '2',
        },
      });
    },
    handleEnter(row) {
      this.$router.push({
        path: '/warehouse/warehousingentry/warehouseWarehouseingAddReceipt',
        query: {
          id: row.row.id,
          name: row.row.customerName + ' — 确认',
          type: '3',
        },
      });
    },
    handleViewAdd(row) {
      console.log(',,.,..,', row);
      this.$router.push({
        path: '/warehouse/warehousingentry/warehouseWarehouseingAddReceipt',
        query: {
          id: row.row.id,
          name: row.row.customerName + ' — 明细',
          type: '1',
        },
      });
      // getDetail(row.id).then(res => {
      //   this.form = res.data.data;
      // });
    },

    //下载模板
    handleTemplate() {
      console.log('下载模板！！！');
      exportBlob(
        `/api/logpm-warehouse/warehouseWarehousingEntry/export-warehouseWarehousingTemplate?${
          this.website.tokenHeader
        }=${getToken()}`
      ).then(res => {
        // console.log("下载过后的数据！！！！！",res.data);
        downloadXls(res.data, '入库物品数据模板.xlsx');
        // window.open("http://192.168.10.100:9000/htlogpm/upload/20230926/f40fc92786ace87e993399454d4468f1.xlsx",'_blank')
      });
    },
    handleImport() {
      this.excelBox = true;
    },
    // 文件上传后的回调
    uploadAfter(res, done, loading, column) {
      if (!res) {
        this.$message.success('导入成功！！！');
      }
      // window.console.log("执行看了",res,column);
      window.console.log('column', column);
      this.excelBox = false;
      this.refreshChange();
      done();
    },
    refreshChange() {
      this.onLoad(this.page);
    },

    init() {
      this.height = this.setPx(document.body.clientHeight - 340);
      getDictionaryBiz('distribution_type').then(res => {
        // console.log("...",res.data.data);
        this.distributionType = res.data.data;
        this.columnList[9].checkarr = res.data.data.map(item => {
          item.value = item.dictKey;
          item.label = item.dictValue;
          return item;
        });
      });
      this.onLoad(this.page);
    },
    searchHide() {
      this.search = !this.search;

      setNodeHeight(this.$refs.tableNode.$el, '', true);
    },
    searchChange() {
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.currentPage = 1;
      handleClearTableQuery(this.columnList);
      this.onLoad(this.page);
    },
    handleSubmit() {
      if (!this.form.id) {
        add(this.form).then(() => {
          this.box = false;
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
      } else {
        update(this.form).then(() => {
          this.box = false;
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
      }
    },
    handleAdd() {
      this.title = '新增';
      this.form = {};
      this.box = true;
    },
    handleEdit(row) {
      this.title = '编辑';
      this.box = true;
      getDetail(row.id).then(res => {
        this.form = res.data.data;
      });
    },
    handleView(row) {
      this.title = '查看';
      this.view = true;
      this.box = true;
      getDetail(row.id).then(res => {
        this.form = res.data.data;
      });
    },
    handleDrawer(row) {
      this.warehouseWarehousingEntryId = row.row.id;
      this.drawer = true;
    },
    handleDrawerClose() {
      this.warehouseWarehousingEntryId = '';
      this.drawer = false;
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.selectionClear();
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    beforeClose(done) {
      done();
      this.form = {};
      this.view = false;
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      // this.$refs.table.clearSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      console.log(currentPage,'currentPage');
      
      this.onLoad(this.page);
      console.log(this.page.currentPage,'this.page.currentPage');
      
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page);
    },
    onLoad(page=this.page, params = {}) {
      this.loading = true;

      const submitData = {query:page, warehouseWarehousingEntry: {...params, ...this.query} }

      if (getObjType(submitData.warehouseWarehousingEntry.receiptDate) === 'array' && submitData.warehouseWarehousingEntry.receiptDate.length > 0) {
        submitData.warehouseWarehousingEntry.receiptDateStart = submitData.warehouseWarehousingEntry.receiptDate[0]
        submitData.warehouseWarehousingEntry.receiptDateStartEnd = submitData.warehouseWarehousingEntry.receiptDate[1]
      }
  
      delete submitData.warehouseWarehousingEntry.receiptDate
      
      // 获取列表数据
      getList(submitData).then(res => {
        console.log(res,'res+++');
        
        const data = res.data.data;
        console.log('data :>> ', data);
        this.page.total = data.total;
        data.records.forEach(i => {
          if (i.conditions == '1') {
            i.conditionsName = '待确定';
          }
          if (i.conditions == '2') {
            i.conditionsName = '部分确定';
          }
          if (i.conditions == '3') {
            i.conditionsName = '已确定';
          }
          this.distributionType.forEach(a => {
            // console.log("aa",a,i.serviceType);
            if (i.serviceType == a.dictKey) {
              i.serviceType = a.dictValue;
            }
          });
        });
        this.data = data.records;
        this.loading = false;
        // this.selectionClear();
      });
    },
  },
};
</script>
<style scoped lang="scss">
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.fr-fo {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.el-btn {
  margin-right: 0;
}
</style>
