<template>
  <el-form
    ref="ruleform"
    :model="spendreimbursementform"
    :label-position="labelPosition"
    :rules="rules"
  >
    <el-main>
      <!-- 第一个样式 -->
      <el-descriptions
        class="contract-description-form"
        title="发票信息"
        :column="3"
        border
      >
        <el-descriptions-item labelClassName="required" label="报销项目">
          <!-- projectId -->
          <el-form-item prop="projectId">
            <el-select
              placeholder="请选择"
              :style="{ width: '100%' }"
              v-model.trim="spendreimbursementform.projectId"
            >
              <el-option
                :label="item.projectName"
                v-for="item in collectProject"
                :key="item.projectId"
                :value="item.projectId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <!-- summary -->
        <el-descriptions-item labelClassName="required" label="摘要">
          <el-form-item prop="summary">
            <el-input v-model.trim="spendreimbursementform.summary"></el-input>
          </el-form-item>
        </el-descriptions-item>
        <!-- enclosureNumber -->
        <el-descriptions-item labelClassName="required" label="附件数量">
          <el-form-item prop="enclosureNumber">
            <el-input
              v-model.number="spendreimbursementform.enclosureNumber"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <!-- tripReason -->
        <el-descriptions-item labelClassName="required" label="出差理由">
          <el-form-item prop="tripReason">
            <el-input
              v-model.trim="spendreimbursementform.tripReason"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <!-- fromPlace -->
        <el-descriptions-item labelClassName="required" label="出发地点">
          <el-form-item prop="fromPlace">
            <el-input
              v-model.trim="spendreimbursementform.fromPlace"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item labelClassName="required" label="目的地点">
          <!-- purposePlace -->
          <el-form-item prop="purposePlace">
            <el-input
              v-model.trim="spendreimbursementform.purposePlace"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item labelClassName="required" label="经过地点">
          <!-- transitPlace -->
          <el-form-item prop="transitPlace">
            <el-input
              v-model.trim="spendreimbursementform.transitPlace"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item labelClassName="required" label="交通工具">
          <!-- vehicle -->
          <el-form-item prop="vehicle">
            <el-input
              v-model.trim="spendreimbursementform.vehicle"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item labelClassName="required" label="申请时间">
          <!-- applyTime -->
          <el-form-item prop="applyTime">
            <el-date-picker
              v-model.trim="spendreimbursementform.applyTime"
              type="date"
              style="width: 90%"
              @change="formtime3"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-descriptions-item>
        <!-- receiveSubsidy -->
        <el-descriptions-item labelClassName="required" label="是否领取补贴">
          <el-form-item prop="receiveSubsidy">
            <el-switch
              v-model.trim="values"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeswitch(values)"
            >
            </el-switch>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item labelClassName="required" label="伙食补贴(元)">
          <!-- foodAllowance -->
          <el-form-item prop="foodAllowance">
            <el-input
              v-model.trim="spendreimbursementform.foodAllowance"
              :disabled="
                spendreimbursementform.receiveSubsidy == 1 ? false : true
              "
              @change="addnum(spendreimbursementform)"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item labelClassName="required" label="公杂补贴(元)">
          <!-- publicMiscellaneousSubsidy -->
          <el-form-item prop="publicMiscellaneousSubsidy">
            <el-input
              v-model.trim="spendreimbursementform.publicMiscellaneousSubsidy"
              :disabled="
                spendreimbursementform.receiveSubsidy == 1 ? false : true
              "
              @change="addnum(spendreimbursementform)"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>

        <el-descriptions-item
          labelClassName="required"
          label="火车/汽车/轮船费(元)"
        >
          <!-- tripCost -->
          <el-form-item prop="tripCost">
            <el-input
              v-model.trim="spendreimbursementform.tripCost"
              @change="addnum(spendreimbursementform)"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item labelClassName="required" label="飞机票(元)">
          <!-- planeTicket -->
          <el-form-item prop="planeTicket">
            <el-input
              v-model.trim="spendreimbursementform.planeTicket"
              @change="addnum(spendreimbursementform)"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          labelClassName="required"
          label="过路过桥汽油费(元)"
        >
          <!-- trafficCost -->
          <el-form-item prop="trafficCost">
            <el-input
              v-model.trim="spendreimbursementform.trafficCost"
              @change="addnum(spendreimbursementform)"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item labelClassName="required" label="住宿费(元)">
          <!-- lodgingCost -->
          <el-form-item prop="lodgingCost">
            <el-input
              v-model.trim="spendreimbursementform.lodgingCost"
              @change="addnum(spendreimbursementform)"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item labelClassName="required" label="保险费(元)">
          <!-- insuranceCost -->
          <el-form-item prop="insuranceCost">
            <el-input
              v-model.trim="spendreimbursementform.insuranceCost"
              @change="addnum(spendreimbursementform)"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item labelClassName="required" label="其他费用(元)">
          <!-- otherCost -->
          <el-form-item prop="otherCost">
            <el-input
              v-model.trim="spendreimbursementform.otherCost"
              @change="addnum(spendreimbursementform)"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>

        <el-descriptions-item
          :span="1"
          labelClassName="required"
          label="申报总金额(小写)(元)"
        >
          <!-- applyTotalAmountSmall -->
          <el-form-item prop="applyTotalAmountSmall">
            <el-input
              v-model.trim="spendreimbursementform.applyTotalAmountSmall"
              @change="
                convertCurrency(spendreimbursementform.applyTotalAmountSmall)
              "
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          :span="2"
          labelClassName="required"
          label="申报总金额(大写)"
        >
          <!-- applyTotalAmountLarge -->
          <el-form-item prop="applyTotalAmountLarge">
            <el-input
              disabled
              v-model.trim="spendreimbursementform.applyTotalAmountLarge"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>

        <el-descriptions-item
          :span="2"
          labelClassName="required"
          label="出差时间"
        >
          <!-- startTime -->
          <el-form-item prop="startTime">
            <el-date-picker
              v-model.trim="timeSlot"
              @change="formtime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item labelClassName="required" label="发票号码">
          <!-- invoiceIdList -->
          <el-form-item prop="invoiceIdList">
            <el-select
              v-model.trim="spendreimbursementform.invoiceIdList"
              multiple
              filterable
              default-first-option
              placeholder="请选择"
              @change="Selectmoney()"
            >
              <el-option
                v-for="item in getinvoivelist"
                :key="item.invoiceId"
                :label="item.number"
                :value="item.invoiceId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-descriptions-item>

        <el-descriptions-item :span="3" label="随行人员(*名字需要用逗号隔开*)">
          <el-input
            type="textarea"
            :rows="2"
            v-model.trim="peopleListName"
          ></el-input>
        </el-descriptions-item>

        <el-descriptions-item :span="3" label="备注">
          <!-- remarks -->
          <el-form-item prop="remarks">
            <el-input
              type="textarea"
              :rows="2"
              v-model.trim="spendreimbursementform.remarks"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item :span="3" label="无票据说明">
          <!-- nobillExplain -->
          <el-form-item prop="nobillExplain">
            <el-input
              type="textarea"
              :rows="2"
              v-model.trim="spendreimbursementform.nobillExplain"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>

        <el-descriptions-item :span="3" label="附件上传">
          <!-- 附件上传 -->
          <el-form-item>
            <el-upload
              class="upload-demo"
              drag
              :action="action1"
              ref="enclosureUpload"
              :data="enclosurelist"
              :headers="fileUploadHeader"
              :auto-upload="false"
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
    </el-main>
    <el-footer>
      <el-button type="primary" @click="submitForm()">提交</el-button>
      <el-button @click="resetForm()">重置</el-button>
      <el-button @click="back()">返回</el-button>
    </el-footer>
  </el-form>
</template>
  
<script>
import {
  insert,
  selectTypeitem,
  selectProjectitem,
  selectProjectpeople,
} from "@/api/spendreimbursement.js";
import { selectAllBystatus } from "@/api/project";
import { money } from "@/utils/myValidate";
export default {
  created() {
    this.fileUploadHeader["X-Token"] = this.$store.getters.token;
    this.spendreimbursementform.companyId = this.$store.getters.companyId;
    this.spendreimbursementform.userId = this.$store.getters.urId;
    this.action1 = process.env.VUE_APP_BASE_API + "/file/updataEnclosures";
    this.Selectinsertlsit();
    this.reimebursementtypeItem();
    this.reimebursementprojectItem();
    this.reimebursementprojectpeopleItem();
  },
  data() {
    return {
      fileUploadHeader: {
        "X-Token": null,
      },
      peopleListName: "",
      // 文字对齐方式
      labelPosition: "left",
      // 图片提交地址
      action1: null,
      //附件提交附带参数
      enclosurelist: {
        Id: null,
        companyId: null,
        enclosureDescribe: "",
        status: 3,
        userId: null,
      },
      dialogFormVisible: false,
      labelPosition: "left",
      values: false,
      timeSlot: null,
      userId: [],
      // 收集的是页面表单的数据
      spendreimbursementform: {
        invoiceIdList: [], //发票信息
        tripRersonnel: [], //随行人员
        companyId: null,
        summary: "",
        enclosureNumber: "",
        tripReason: "",
        typeId: "",
        fromPlace: "",
        remarks: "",
        purposePlace: "",
        transitPlace: "",
        startTime: "",
        endTime: "",
        applyTime: "",
        receiveSubsidy: 0,
        vehicle: "",
        foodAllowance: 0,
        publicMiscellaneousSubsidy: 0,
        tripCost: 0,
        planeTicket: 0,
        trafficCost: 0,
        lodgingCost: 0,
        insuranceCost: 0,
        otherCost: 0,
        nobillExplain: "",
        applyTotalAmountLarge: "",
        applyTotalAmountSmall: null,
        projectId: "",
        companyId: null,
        // 天数
        days: null,
        userId: null,
        tripStatus: 0,
        enclosureDescribe: "", //附件描述
      },
      peopletripid: null,
      // 收集报销类型进行展示
      collectType: [],
      // 收集项目名称进行展示
      collectProject: [],
      // 收集随从人员进行展示
      collectProjectpeople: [],
      getinvoivelist: [],

      // 附件上传
      fileTypepdf: false, //判断合同文件是否存在

      // 验证规则
      rules: {
        invoiceIdList: [{ required: true, message: "此项不能为空！" }],
        summary: [{ required: true, message: "此项不能为空！" }],
        enclosureNumber: [
          { required: true, message: "此项不能为空！" },
          { type: "number", message: "格式不正确！" },
        ],
        tripReason: [{ required: true, message: "此项不能为空！" }],
        typeId: [
          {
            required: true,
            message: "此项不能为空！",
            trigger: "change",
          },
        ],

        fromPlace: [{ required: true, message: "此项不能为空！" }],
        purposePlace: [{ required: true, message: "此项不能为空！" }],
        transitPlace: [{ required: true, message: "此项不能为空！" }],
        applyTotalAmountLarge: [{ required: true, message: "此项不能为空！" }],
        applyTotalAmountSmall: [{ validator: money, trigger: "blur" }],
        applyTime: [
          {
            required: true,
            message: "请选择日期！",
            trigger: "change",
          },
        ],
        planeTicket: [{ required: true, message: "此项不能为空！" }],
        vehicle: [{ required: true, message: "此项不能为空！" }],
        foodAllowance: [{ validator: money, trigger: "blur" }],
        publicMiscellaneousSubsidy: [{ validator: money, trigger: "blur" }],
        tripCost: [{ validator: money, trigger: "blur" }],
        planeTicket: [{ validator: money, trigger: "blur" }],
        trafficCost: [{ validator: money, trigger: "blur" }],
        lodgingCost: [{ validator: money, trigger: "blur" }],
        insuranceCost: [{ validator: money, trigger: "blur" }],
        otherCost: [{ validator: money, trigger: "blur" }],
        projectId: [
          {
            required: true,
            message: "此项不能为空！",
            trigger: "change",
          },
        ],
        startTime: [{ required: true, message: "此项不能为空！" }],
        endTime: [{ required: true, message: "此项不能为空！" }],
      },
    };
  },
  methods: {
    // 根据发票号码查询金额
    Selectmoney() {
      let sum = 0;
      let list = [];
      this.spendreimbursementform.invoiceIdList.forEach((item) => {
        this.getinvoivelist.forEach((e) => {
          if (item == e.invoiceId) {
            list.push({ money: e.mone });
          }
        });
      });
      list.forEach((val) => {
        sum += val.money;
      });
      this.spendreimbursementform.applyTotalAmountSmall = sum;
      this.convertCurrency(sum);
      return sum;
    },
    //查询发票编号
    Selectinsertlsit() {
      let param = {
        companyId: this.$store.getters.companyId,
        status: 0,
        type: 2,
        userId: this.$store.getters.info.userId,
      };
      selectAllBystatus(param)
        .then(async (res) => {
          if (res.success) {
            this.getinvoivelist = res.data;
          } else {
            this.$message.error(res.msg);
            if (res.code == 4) {
              //执行退出功能
              await this.$store.dispatch("user/logout");
              this.$router.push(`/login?redirect=${this.$route.fullPath}`);
            }
          }
        })
        .catch((error) => {
          this.$message.error("获取发票编号失败");
          this.back();
        });
    },
    // 添加数据的方法
    submitForm() {
      this.$refs.ruleform.validate((valid) => {
        if (valid) {
          // 除发票以外所有的金额
          let sum1 = this.addnum(this.spendreimbursementform);
          // console.log(sum1);
          // 申报总金额
          let sum2 = this.spendreimbursementform.applyTotalAmountSmall;
          if (sum1 == sum2) {
            // 判断随行人员 是否为空
            if (this.peopleListName == "") {
              // 如果为空 就用默认的人员
              this.spendreimbursementform.tripRersonnel[0] =
                this.$store.getters.name;
            } else {
              this.spendreimbursementform.tripRersonnel = [];
              let k = this.peopleListName.split("，");
              let m = this.$store.getters.name;
              k.forEach((e) => {
                this.spendreimbursementform.tripRersonnel.push(m, e);
              });
            }
            insert(this.spendreimbursementform).then((res) => {
              if (res.success) {
                // 上传附件
                this.enclosurelist.Id = res.data;
                this.enclosurelist.companyId =
                  this.spendreimbursementform.companyId;
                this.enclosurelist.enclosureDescribe =
                  this.spendreimbursementform.enclosureDescribe;
                this.enclosurelist.userId = this.spendreimbursementform.userId;
                this.$refs.enclosureUpload.submit();
                this.$message.success("添加成功！");
                this.back();
              } else {
                this.$message.error(res.msg);
                if (res.code == 4) {
                  //执行退出功能
                  this.$store.dispatch("user/logout");
                  this.$router.push(`/login?redirect=${this.$route.fullPath}`);
                }
              }
            });
          } else {
            this.$message.warning("发票金额不同，无法提交");
          }
        }
      });
    },
    // 报销类型
    reimebursementtypeItem() {
      const params = {
        companyId: this.$store.getters.companyId,
      };
      selectTypeitem(params).then((res) => {
        if (res.success) {
          this.collectType = res.data;
        } else {
          this.$message.error(res.msg);
          if (res.code == 4) {
            //执行退出功能
            this.$store.dispatch("user/logout");
            this.$router.push(`/login?redirect=${this.$route.fullPath}`);
          }
        }
      });
    },
    // 项目类型
    reimebursementprojectItem() {
      const params = {
        companyId: this.$store.getters.companyId,
      };
      selectProjectitem(params).then((res) => {
        if (res.success) {
          this.collectProject = res.data;
        } else {
          this.$message.error(res.msg);
          //业务逻辑
          if (res.code == 4) {
            //执行退出功能
            this.$store.dispatch("user/logout");
            this.$router.push(`/login?redirect=${this.$route.fullPath}`);
          }
        }
      });
    },
    // 查询随从人员
    reimebursementprojectpeopleItem() {
      const params = {
        companyId: this.$store.getters.companyId,
      };
      selectProjectpeople(params).then(async (res) => {
        if (res.success) {
          this.collectProjectpeople = res.data;
        } else {
          this.$message.error(res.msg);
          //业务逻辑
          if (res.code == 4) {
            //执行退出功能
            await this.$store.dispatch("user/logout");
            this.$router.push(`/login?redirect=${this.$route.fullPath}`);
          }
        }
      });
    },
    // 弹窗按钮
    addBtn1() {
      this.deletestaus = true;
      this.dialogFormVisible = true;
    },
    // 开关选项
    changeswitch(values) {
      if (values == true) {
        this.spendreimbursementform.receiveSubsidy = 1;
      } else {
        this.spendreimbursementform.receiveSubsidy = 0;
      }
    },
    // 返回上一级
    back() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push("/spendreimbursementList");
    },
    //申请时间处理
    formtime3(val) {
      if (val != null) {
        let time = this.timestampToTime(val);
        this.spendreimbursementform.applyTime = time;
      }
    },
    // 计算天数
    DateDiff(sDate1, sDate2) {
      //sDate1和sDate2是2006-12-18格式
      var oDate1, oDate2, iDays;

      oDate1 = new Date(sDate1); //转换为12-18-2006格式

      oDate2 = new Date(sDate2);

      iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
      return iDays;
    },
    //开始结束 时间的处理  计算天数
    formtime(val) {
      if (val == null) {
        this.spendreimbursementform.startTime = null;
        this.spendreimbursementform.endTime = null;
      } else {
        this.spendreimbursementform.startTime = this.timestampToTime(val[0]);
        this.spendreimbursementform.endTime = this.timestampToTime(val[1]);
        let time = this.DateDiff(
          this.spendreimbursementform.startTime,
          this.spendreimbursementform.endTime
        );
        this.spendreimbursementform.days = time;
      }
    },
    //时间处理
    timestampToTime(value) {
      var date = value;
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    //重置
    resetForm() {
      this.$refs.ruleform.resetFields();
    },
    // 删除附件
    handleRemove(file) {
      const index = this.fileList.findIndex((item) => item.uid === file.uid);
      if (index >= 0) {
        const deleteFile = this.fileList.splice(index, 1);
        if (deleteFile.length) {
          this.deleteFiles.push(deleteFile[0]);
        }
      }
    },
    // 大小写
    convertCurrency(money) {
      //汉字的数字
      var cnNums = new Array(
        "零",
        "壹",
        "贰",
        "叁",
        "肆",
        "伍",
        "陆",
        "柒",
        "捌",
        "玖"
      );
      //基本单位
      var cnIntRadice = new Array("", "拾", "佰", "仟");
      //对应整数部分扩展单位
      var cnIntUnits = new Array("", "万", "亿", "兆");
      //对应小数部分单位
      var cnDecUnits = new Array("角", "分", "毫", "厘");
      //整数金额时后面跟的字符
      var cnInteger = "整";
      //整型完以后的单位
      var cnIntLast = "元";
      //最大处理的数字
      var maxNum = 999999999999999.9999;
      //金额整数部分
      var integerNum;
      //金额小数部分
      var decimalNum;
      //输出的中文金额字符串
      var chineseStr = "";
      //分离金额后用的数组，预定义
      var parts;
      if (money == "") {
        return "";
      }
      money = parseFloat(money);
      if (money >= maxNum) {
        //超出最大处理数字
        this.$message.warning("你输入的数字太大了");
        return "";
      }
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast;
      }
      //转换为字符串，分离小数和整数部分
      money = money.toString();
      //00000
      if (money.indexOf(".") == -1) {
        //说明money是整数
        integerNum = money;
        decimalNum = "";
      } else {
        //说明money是小数
        //1.12   [1,12]
        parts = money.split(".");
        integerNum = parts[0];
        decimalNum = parts[1].substr(0, 4);
      }

      //获取整型部分转换
      if (parseInt(integerNum, 10) > 0) {
        var zeroCount = 0;
        //2222 4
        var IntLen = integerNum.length;
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1);
          var p = IntLen - i - 1;
          //q是确定单位
          // 10000
          var q = p / 4;
          var m = p % 4;
          if (n == "0") {
            zeroCount++;
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0];
            }
            //归零
            zeroCount = 0;
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q];
          }
        }
        chineseStr += cnIntLast;
      }
      //小数部分
      if (decimalNum != "") {
        var decLen = decimalNum.length;
        for (var i = 0; i < decLen; i++) {
          var n = decimalNum.substr(i, 1);
          if (n != "0") {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
          }
        }
      }
      if (chineseStr == "") {
        chineseStr += cnNums[0] + cnIntLast + cnInteger;
      } else if (decimalNum == "") {
        chineseStr += cnInteger;
      }
      this.spendreimbursementform.applyTotalAmountLarge = chineseStr;
    },
    // 浮点数加法
    addnum(data) {
      const obj = { ...data };
      let a1 = parseFloat(obj.foodAllowance);
      let a2 = parseFloat(obj.publicMiscellaneousSubsidy);
      let a3 = parseFloat(obj.tripCost);
      let a4 = parseFloat(obj.planeTicket);
      let a5 = parseFloat(obj.trafficCost);
      let a6 = parseFloat(obj.lodgingCost);
      let a7 = parseFloat(obj.insuranceCost);
      let a8 = parseFloat(obj.otherCost);
      let sum = parseFloat(a1 + a2 + a3 + a4 + a5 + a6 + a7 + a8).toFixed(2);
      // console.log(sum);
      // 转换大小写
      this.convertCurrency(sum);
      return a1 + a2 + a3 + a4 + a5 + a6 + a7 + a8;
    },
  },
};
</script>
  
<style rel="stylesheet/scss" scoped lang="scss">
.file-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 250px;
  padding: 0 5px;
}
.avator {
  width: 10%;
  font-size: 32px;
  color: #d75b5b;
}
.file-content {
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 10px;
}
.file-operate {
  width: 15%;
  font-size: 16px;
  display: flex;
  justify-content: space-around;
  align-items: center;

  span {
    cursor: pointer;
  }
}
</style>