<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-card>
        <div slot="header" class="card-title">{{$t('拆单申请')}}-{{orderData.orderNo||''}}</div>
        <div class="btn-header">
          <span class="card-title">{{$t('原单信息')}}</span>
          <div>
             <span v-if="orderData.abnormalState!=0" class="red">{{$t('异常无法拆单')}}</span>
             <el-button v-else type="primary" @click="addSplit" :disabled="orderData.inWarehouseState==207">{{$t('新建拆单')}} </el-button>
          </div>
        </div>
        <el-descriptions :column="4">
            <el-descriptions-item :label="$t('唛头')">
                {{orderData.marks?orderData.marks:$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('已到箱数/总箱数')">
                <span>{{orderData.sumNum||0}}/{{orderData.costVO?orderData.costVO.totalNum:0}}</span>
            </el-descriptions-item>
            <el-descriptions-item :label="$t('订单状态')">
              <!-- <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="orderData.status" /> -->
              {{orderData.abnormalState!=0?$t('异常'):$t('正常')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('送货日期')">
              {{orderData.deliveryDate||$t('无')}}
            </el-descriptions-item>
          <el-descriptions-item :label="$t('运输方式')">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />
          </el-descriptions-item>
          <el-descriptions-item :label="$t('始发地')" >
               {{orderData.logisticsInfoDto?orderData.logisticsInfoDto.startTitleZh:$t('无')}}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('目的地')" :span="2">
             {{orderData.logisticsInfoDto?orderData.logisticsInfoDto.destTitleZh:$t('无')}}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('发货人姓名')">
              {{orderData.consignorVO?orderData.consignorVO.name||$t('无'):$t('无')}}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('发货公司')">
              {{orderData.consignorVO?orderData.consignorVO.company||$t('无'):$t('无')}}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('发货电话')">
                {{!orderData.consignorVO?$t('无'):!orderData.consignorVO.phone?$t('无'):(checkCode(orderData.consignorVO.countryCode)+orderData.consignorVO.phone)}}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="4">
            <el-descriptions-item :label="$t('收货人姓名')">
                {{orderData.consigneeVO?orderData.consigneeVO.name||$t('无'):$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货公司')">
                {{orderData.consigneeVO?orderData.consigneeVO.company||$t('无'):$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货电话')">
              {{!orderData.consigneeVO?$t('无'):!orderData.consigneeVO.phone?$t('无'):(checkCode(orderData.consigneeVO.countryCode)+orderData.consigneeVO.phone)}}
            </el-descriptions-item>
        </el-descriptions>

    </el-card>
    <el-card class="card">
      <!-- 列表 -->
      <div slot="header" class="card-title">{{$t('货物信息')}}</div>
      <el-table id='table' v-loading="loading"  border :data="orderData.orderItemVOList"  :summary-method="getSummaries" show-summary>
        <el-table-column :label="$t('序号')" align="center" prop="id" type="index" width="60">
          <template slot-scope="scope" >
              <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('品名')" align="center">
          <template slot-scope="scope">
             <el-row>{{scope.row.prodTitleEn}}</el-row>
             <el-row>{{scope.row.prodTitleZh}}</el-row>
          </template>
        </el-table-column>
        <el-table-column :label="$t('填单货物属性')" align="center" width="200">
            <template slot-scope="scope">
              <el-row>
                <span>{{$t('品牌')}}：
                  <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.brandType" />
                </span>
              </el-row>
              <el-row>
                <span>{{$t('箱数')}}：{{scope.row.num||$t('未填')}}</span>
              </el-row>
              <el-row>
                <span>{{$t('体积')}}：{{scope.row.volume||$t('未填')}}m³</span>
              </el-row>
              <el-row>
                <span>{{$t('重量')}}：{{scope.row.weight||$t('未填')}}kg</span>
              </el-row>
            </template>
        </el-table-column>
        <el-table-column :label="$t('入库货物属性')" align="center" width="400">
            <template slot-scope="scope">
              <el-row v-if="scope.row.warehouseInInfoVO">
                <span>{{$t('规格')}}：{{scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.boxGauge:0}}</span>
              </el-row>
              <el-row v-if="scope.row.warehouseInInfoVO">
                <span>{{$t('品牌')}}：
                  <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.brandType" />
                </span>
                <span style="margin-left: 10px;">{{$t('箱数')}}：{{!scope.row.warehouseInInfoVO?0:scope.row.warehouseInInfoVO.cartonsNum}}</span>
                <span style="margin-left: 10px;">{{$t('体积')}}：{{!scope.row.warehouseInInfoVO?0:scope.row.warehouseInInfoVO.volume}}m³</span>
                <span style="margin-left: 10px;">{{$t('重量')}}：{{!scope.row.warehouseInInfoVO?0:scope.row.warehouseInInfoVO.weight}}kg</span>
              </el-row>
              <el-row v-if="!scope.row.warehouseInInfoVO">
                <span>{{$t('暂时没有入仓信息')}}</span>
              </el-row>
            </template>
        </el-table-column>
        <el-table-column :label="$t('最后操作时间')" align="center">
        <template slot-scope="scope">
                <span>{{parseTime(scope.row.updateTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('状态')" align="center">
           <template slot-scope="scope">
             <!-- {{orderData.abnormalState!=0?$t('异常'):$t('正常')}} -->
               <dict-tag :type="DICT_TYPE.ORDER_ITEM_STATUS" :value="scope.row.itemStatus" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="card" v-if="splitData.length>0">
      <!-- 列表 -->
      <div slot="header" class="card-title">{{$t('拆单信息')}}</div>
      <div v-for="(item, index) in splitData" :key="index">
        <div class="btn-header">
          <div>
            <p class="card-info">
              <span class="card-title">
              {{item.orderNo}}
              </span>
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="item.transportId" />
              <span>{{$t('发往')}}：{{importCityName(item.dstWarehouseId)}}</span>
            </p>
          </div>
          <div>
             <el-button v-if="index==0" disabled type="primary" @click="addShop(index)">{{$t('放入')}}</el-button>
               <el-button v-if="index!=0" type="primary" @click="addShop(index)">{{$t('放入')}}</el-button>
              <el-button v-if="index==0" disabled type="primary" plain @click="deleteSplit(item.id)">{{$t('删除')}}</el-button>
              <el-button v-if="index!=0" type="primary" plain @click="deleteSplit(item.id)">{{$t('删除')}}</el-button>
          </div>
        </div>
        <el-table v-if="item.orderSplitItemBackVOList"  border :data="item.orderSplitItemBackVOList">
          <el-table-column :label="$t('序号')" align="center" prop="id" type="index">
            <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('中文名')" align="center" prop="prodTitleZh" />
          <el-table-column :label="$t('英文名')" align="center" prop="prodTitleEn" />
          <el-table-column :label="$t('品牌')" align="center">
            <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.brandType" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('体积')" align="center" >
            <template slot-scope="scope">
                 <span>{{scope.row.volume}}m³</span>
              </template>
          </el-table-column>
          <el-table-column :label="$t('重量')" align="center">
            <template slot-scope="scope">
                   <span>{{scope.row.weight}}kg</span>
                </template>
            </el-table-column>
          <el-table-column :label="$t('箱数')" align="center">
            <template slot-scope="scope">
                   <span>{{scope.row.num}}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('操作')" align="center">
              <template slot-scope="scope">
                <el-button v-if="index==0" disabled size="mini" type="text" icon="el-icon-delete" @click="removeShop(scope.row.id)">{{$t('移出')}}</el-button>
               <el-button v-else size="mini" type="text" icon="el-icon-delete" @click="removeShop(scope.row.id)">{{$t('移出')}}</el-button>
              </template>
            </el-table-column>
        </el-table>
      </div>
    </el-card>
    <work-flow xmlkey="split_order" v-model="selectedUsers"></work-flow>
    <div slot="footer" class="card footer_btn" v-if="orderData.abnormalState==0">
        <el-button  v-if="orderData.inWarehouseState!=207" type="primary" @click="submitForm">{{$t('提交申请')}}</el-button>
        <el-button v-if="orderData.inWarehouseState!=207" plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('取消')}}</el-button>
        <el-button v-if="orderData.inWarehouseState==207" type="primary" @click="$router.push(`/bpm/process-instance/detail?id=`+orderApprovalBackVO.formId)">{{$t('审核中')}}</el-button>
        <el-button v-if="orderData.inWarehouseState==207" plain type="primary" @click="dialogVisible = true">{{$t('取消审核')}}</el-button>
        <el-button v-if="orderData.inWarehouseState==207" plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('返回')}}</el-button>
    </div>
     <!-- 对话框(添加 / 修改) -->
        <el-dialog :title="$t('新建拆单')" :visible.sync="open" width="400px" append-to-body>
          <el-form ref="formSplit" :model="form" :rules="rules" label-width="80px">
            <el-row>
              <el-form-item :label="$t('运输方式')+':'">
                 <dict-selector :clearable="true" :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="form.transportId" formatter="number"/>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item :label="$t('目的仓库')+':'" >
                  <el-select v-model="form.destWarehouseId" :placeholder="$t('请选择目的仓库')" clearable>
                   <el-option v-for="item in importCityList" :label="item.titleZh" :value="item.id" :key="item.id" ></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item :label="$t('出货渠道')" v-if="getDictData(DICT_TYPE.ECW_TRANSPORT_TYPE, form.transportId).cssClass == 'channel'" >
                <el-select v-model="form.channelId" :placeholder="$t('请选择出货渠道')" clearable>
                     <el-option :disabled="getDictData(DICT_TYPE.ECW_TRANSPORT_TYPE, form.transportId).cssClass != 'channel'" v-for="item in channelData" :key="item.channelId" :label="item.nameZh" :value="item.channelId"/>
                 </el-select>
              </el-form-item>
            </el-row>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="haddleAdd">{{$t('确定')}}</el-button>
            <el-button @click="cancel">{{$t('取消')}}</el-button>
          </div>
        </el-dialog>
        <!-- 对话框(添加 / 修改) -->
           <el-dialog :title="$t('放入品名')" :visible.sync="shopOpen" width="500px" append-to-body>
             <el-form ref="shopForm" :model="shopForm" :rules="shopRules" label-width="120px">
               <el-row>
                <el-form-item :label="$t('中文品名')+':'" v-if="splitData.length>0">
                   <el-select v-model="shopForm.pordid" :placeholder="$t('请选择中文品名')"  @change="changeProdTitleZh" clearable>
                    <el-option v-for="item in splitData[0].orderSplitItemBackVOList" :label="item.prodTitleZh" :value="item.id" :key="item.prodTitleZh" ></el-option>
                   </el-select>
                 </el-form-item>
               </el-row>
               <el-row>
                <el-form-item :label="$t('英文品名')+':'" v-if="splitData.length>0">
                     <el-select v-model="shopForm.pordid" :placeholder="$t('请选择英文品名')"  @change="changeProdTitleZh" clearable>
                      <el-option v-for="item in splitData[0].orderSplitItemBackVOList" :label="item.prodTitleEn" :value="item.id" :key="item.prodTitleEn" ></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item :label="$t('剩余箱数')+':'">
                    {{shopForm.sum||0}}
                 </el-form-item>
                 <el-form-item :label="$t('放入箱数')+':'">
                    <el-input-number v-model="shopForm.num" @change="numChange" controls-position="right"  :min="1" :max="shopForm.sum"></el-input-number>
                 </el-form-item>
                 <el-form-item v-if="quantityshow" :label="$t('放入数量')+'('+$t('个')+')'+':'">
                    <el-input-number v-model="shopForm.quantity" controls-position="right"  :min="1" :max="quantitySum"></el-input-number>
                 </el-form-item>
                 <el-form-item :label="$t('备注信息')+':'">
                    <el-input v-model="shopForm.remarks"></el-input>
                 </el-form-item>
               </el-row>
             </el-form>
             <div slot="footer" class="dialog-footer">
               <el-button type="primary" @click="shopAdd">{{$t('确定')}}</el-button>
               <el-button @click="shopCancel">{{$t('取消')}}</el-button>
             </div>
           </el-dialog>
           <el-dialog
             :title="$t('提示')"
             :visible.sync="dialogVisible"
             width="30%">
             <span class="cancel_notice">{{$t('拆单申请正在审核中，你确定取消拆单申请吗？')}}</span>
             <div class="cancel_content">
               <span>{{$t('取消原因：')}}</span>
               <el-input v-model="reason" :placeholder="$t('请输入取消原因')"></el-input>
             </div>

             <span slot="footer" class="dialog-footer">
               <el-button @click="dialogVisible = false">{{$t('取消')}}</el-button>
               <el-button type="primary" @click="cancelSplit">{{$t('确定')}}</el-button>
             </span>
           </el-dialog>
  </div>
</template>

<script>
import {getDictData, getDictDatas,DICT_TYPE} from '@/utils/dict'
import {getSplitList,splitApply,createSplit,cancelApply,createSplitItem,deleteSplitItem,deleteSplit,quantitycheck} from "@/api/ecw/orderHandle"
import {getWarehouseList} from '@/api/ecw/warehouse'
import {getChannelList} from '@/api/ecw/channel'
import WorkFlow from '@/components/WorkFlow'
import {getOrder} from '@/api/ecw/order'


export default {
  name: "SplitApply",
  components: {
    WorkFlow
  },
  data() {
    return {
      checked:false,
      reason:'',
      dialogVisible:false,
      orderData:{},
      splitData:[],
      orderApprovalBackVO:{},
      splitIndex:0,
      channelData:[],
      tradeCityList:[],
      multipleSelection:[],
      loading:false,
      open:false,
      form:{

      },
      importCityList:[],
      selectedUsers:[],
      shopOpen:false,
      quantityshow:false,
      shopForm:{},
      // 表单校验
      rules: {
        transportId: [{ required: true, message: this.$t("请选择运输方式"), trigger: "change" }],
        warehouseIds: [{ required: true, message: this.$t("请选择目的仓库"), trigger: "change" }],
        channelId: [{ required: true, message: this.$t("请选择出货渠道"), trigger: "change" }],
      },
      // 表单校验
      shopRules: {
        prodTitleZh: [{ required: true, message: this.$t("请选择中文品名"), trigger: "change" }],
        prodTitleEn: [{ required: true, message: this.$t("请选择英文品名"), trigger: "change" }],
      },
      queryParams:{
        orderId:7,
        lang:0
      },
      query:{
        page:1,
        rows:20
      },
      splitItemIndex:0,
      quantitySum:0
    };
  },
  created() {
    this.getChannel()
    getWarehouseList().then(res => {
      this.tradeCityList = res.data
      this.importCityList = this.tradeCityList.filter(item => item.type == 1)
    })
    if (this.$route.query.orderId) {
      this.queryParams.orderId = this.$route.query.orderId
    }
    this.getList()
    this.getOrder()
  },
  watch: {
  //监听table这个对象
      tableData: {
        // 立即监听
        immediate: true,
        handler() {
          this.$nextTick(() => {
            const tds = document.querySelectorAll(
              "#table .el-table__footer-wrapper tr>td"
            );
            // colSpan合并列
            tds[1].colSpan = 5;
            tds[1].style.textAlign = "left";
            tds[2].style.display = "none";
            tds[3].style.display = "none";
            tds[4].style.display = "none";
            tds[5].style.display = "none";
          });
        },
      },
    },
  computed:{
    getDictData(){
        return (type, value) => getDictData(type, value) || {}
    },
    getDictDatas(){
        return getDictDatas
    }
  },
  methods: {
    checkCode(data){
      if(data.indexOf('+')==-1){
      	return '+'+data
      }
      return data
    },
    getOrder(){
      this.loading = true;
      getOrder(this.queryParams.orderId).then(response => {
        this.orderData = response.data
        this.query.destWarehouseId = response.data.logisticsInfoDto.startWarehouseId
        this.loading = false

      });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getSplitList(this.queryParams).then(response => {
        this.splitData = response.data.orderSplitBackVOList
        if(response.data.orderApprovalBackVO){
            this.orderApprovalBackVO = response.data.orderApprovalBackVO
        }

        this.loading = false;
      });
    },
    getChannel(){
      getChannelList().then(res=>this.channelData = res.data)
    },
    changeDest(){
      this.query.warehouseIds = this.form.destWarehouseId
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex==this.orderData.orderItemVOList.length) {
        if (columnIndex === 1) {
          return [2, 3];
        } else if (columnIndex > 1) {
          return [0, 0];
        }
      }
    },
    getSummaries(){
      const sums = [];

      sums[0] = this.$t('小计')
      if(!this.orderData || !this.orderData.orderItemVOList ||this.orderData.length==0){
        return sums
      }
      var orderSum = 0
      var orderV = 0
      var orderW = 0
      var leviteSum = 0
      var leviteV = 0
      var leviteW = 0
      this.orderData.orderItemVOList.forEach((column, index) => {
          orderSum += column.num
          orderV += column.volume
          orderW += column.weight
          leviteSum += column.warehouseInInfoVO?column.warehouseInInfoVO.cartonsNum:0
          leviteV += column.warehouseInInfoVO?column.warehouseInInfoVO.volume:0
          leviteW += column.warehouseInInfoVO?column.warehouseInInfoVO.weight:0
      });
      sums[1] = this.$t('下单统计')+' '+ orderSum+' '+this.$t('箱')+' '+ orderV.toFixed(2) +' m³ ' + orderW + ' kg ' + ' '+this.$t('入仓统计：')+ leviteSum+' '+this.$t('箱')+' '+ leviteV.toFixed(2) +' m³ ' + leviteW + ' kg'

      return sums;
    },

    importCityName(id){
        var arr = this.tradeCityList.filter(item => item.id == id)
        return arr.length>0?arr[0].titleZh:this.$t('无')
    },
    submitForm(){
      if(this.splitData.length==0){
         this.$modal.msgError(this.$t("请先新建拆单"))
         return
      }
      // if(this.selectedUsers.length==0){
      //    this.$modal.msgError("请选择抄送人")
      //    return
      // }
      var params = {
        orderId:this.queryParams.orderId,
        copyUserId:this.selectedUsers
      }
      splitApply(params).then(res=>{
        this.$modal.msgSuccess(this.$t("申请成功"));
        this.$store.dispatch('tagsView/delCurrentView')
      })
    },
    addShop(index){
      this.splitItemIndex = index
      this.shopOpen = true

    },
    addSplit(){
      this.form.transportId = this.orderData.transportId
      this.form.destWarehouseId = this.orderData.destWarehouseId
      if(this.orderData.logisticsInfoDto&&this.orderData.logisticsInfoDto.destTitleZh){
        this.form.destWarehouseId = this.importCityList.find(item=>item.titleZh==this.orderData.logisticsInfoDto.destTitleZh).id
        if(this.orderData.logisticsInfoDto&&this.orderData.logisticsInfoDto.channelId){
          this.form.channelId = this.orderData.logisticsInfoDto.channelId
          }
      }
      this.open = true
    },
    changeProdTitleZh(val){
        var list = []
        list = this.splitData[0].orderSplitItemBackVOList.filter(item=>item.id == val)
        this.shopForm.sum = list[0].num
        this.quantitySum = list[0].quantity
        this.shopForm.orderItemId = list[0].orderItemId
        this.shopForm.prodTitleEn = list[0].prodTitleEn
        this.shopForm.prodTitleZh = list[0].prodTitleZh
        var orderItemData = this.orderData.orderItemVOList.find(item=>item.orderItemId==this.shopForm.orderItemId)
        var params = {
          'seaFreightVolume':orderItemData.seaFreightVolume,
          'clearanceFreightVolume':orderItemData.clearanceFreightVolume
        }
        console.log(orderItemData)
        this.numcheck(params)
    },
    numcheck(params){
      quantitycheck(params).then(res=>{
        this.quantityshow = res.data
      })
    },
    numChange(){
      var sum =  parseInt(this.quantitySum/this.shopForm.num)
      this.$set(this.shopForm,'quantity',sum)
    },
    changeProdTitleEn(){
        var list = []
        list = this.splitData[0].orderSplitItemBackVOList.filter(item=>item.prodTitleEn == this.shopForm.prodTitleEn)
        this.shopForm.sum = list[0].num
        this.quantitySum = list[0].quantity
        this.shopForm.prodTitleZh = list[0].prodTitleZh
    },
    haddleAdd(){
      let that = this
      if(!that.form.transportId){
        that.$message.error(this.$t("请选择运输方式"));
        return
      }
      if(!that.form.destWarehouseId){
        that.$message.error(this.$t("请选择目的仓库"));
        return
      }
      // if(!this.form.channelId){
      //   this.$modal.msgError("请选择出货渠道");
      // }
      var params = {
          dstWarehouseId: that.form.destWarehouseId,
          parentOrderId: that.orderData.orderId,
          parentOrderNo: that.orderData.orderNo,
          transportId: that.form.transportId,
          channelId:that.form.channelId
      }
      createSplit(params).then(res=>{
        that.getList()
      })
      that.open = false
    },
    cancel(){
      this.open = false
      this.form = {}
    },
    shopAdd(){
      this.$refs["shopForm"].validate(valid => {
        if (!valid) {
          return;
        }
      })
      var params = {
        num:this.shopForm.num,
        orderItemId:this.shopForm.orderItemId,
        orderSplitId:this.splitData[this.splitItemIndex].id,
        remarks:this.shopForm.remarks
      }
      createSplitItem(params).then(res=>{
        this.$message.success(this.$t("放入成功"));
        this.getList()
        this.shopForm = {}
      })
      this.shopOpen = false
    },
    removeShop(id){
      let that = this
      that.$confirm(that.$t('是否移除货物吗?')).then(function () {
        deleteSplitItem(id).then(res=>{
          that.$message.success(that.$t("移除成功"));
           that.getList()
        })
      })
    },
    cancelSplit(){
      let that = this
      if(!that.reason){
        that.$message.error(that.$t("请输入取消原因"));
        return
      }
        cancelApply({orderId:that.queryParams.orderId,reason:that.reason}).then(res=>{
          that.$message.success(that.$t("取消成功"));
          that.$store.dispatch('tagsView/delCurrentView')
        })
    },
    shopCancel(){
      this.shopOpen = false
      this.shopForm = {}
    },
    /** 删除按钮操作 */
    deleteSplit(id) {
      let that = this
      that.$confirm(that.$t('是否确认删除新拆的订单吗?')).then(function () {
        deleteSplit(id).then(res=>{
          that.$message.success(that.$t("删除成功"));
           that.getList()
        })
      })
    },
  }
}
</script>
<style scoped>
  .card-title{
      font-size: 18px;
      font-weight: bold;
       margin-top: 10px;
  }
  .card-info{
    font-size: 16px;
  }
  .card{
    margin-top: 20px;
  }
  .btn-header{
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
  }
  .red{
    color:#ff3430;
    font-size: 15px;
  }
  .footer_btn{
    padding-bottom: 60px;
  }
  .cancel_notice{
    font-size: 16px;
    font-weight: 600;
  }
  .cancel_content{
    display: flex;
    align-items: center;
    padding-top: 20px;
  }
  .cancel_content span{
    width: 100px;
  }
</style>