<template>
  <div class="edit-add-detail">
    <div class="crumbs">
      <Breadcrumb
        :breadcrumbOpt="breadcrumbOpt"
        svg-name="#icon-vehicle"
        @breadcrumb-click="handleClose"
      />
    </div>
    <div class="form-content">
      <el-form
        ref="formInfo"
        :model="parameter"
        label-width="auto"
        label-position="right"
        :rules="rules"
      >
        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">基本信息</div>
          </div>
        </div>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="收货公司" prop="matCompanyName">
              <el-input
                clearable
                v-model="parameter.matCompanyName"
                :readonly="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货公司" prop="vendorName">
              <el-input
                clearable
                v-model="parameter.vendorName"
                :readonly="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          
          <el-col :span="12">
            <el-form-item label="发货人" prop="vendorUserName">
              <el-input
                clearable
                v-model="parameter.vendorUserName"
                placeholder="请输入发货人"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="vendorPhone">
              <el-input
                clearable
                v-model="parameter.vendorPhone"
                :readonly="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          
          <el-col :span="12">
            <el-form-item label="发货时间" prop="arrivalDate">
              <el-date-picker
                v-model="parameter.arrivalDate"
                type="date"
                value-format="yyyy-MM-dd"
                :readonly="true"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单编号" prop="purchaseOrderCode">
              <el-input
                :readonly="true"
                clearable
                v-model="parameter.purchaseOrderCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货物金额" prop="amount">
              <el-input
                :readonly="true"
                clearable
                v-model="parameter.amount"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          
          
          <!-- <el-col :span="12">
              <el-form-item label="交易服务费" prop="transactionServiceFee">
                <el-input
                  disabled
                  clearable
                  v-model="parameter.transactionServiceFee"
                  placeholder="请输入交易服务费"
                ></el-input>
              </el-form-item>
            </el-col> -->
        </el-row>
        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">物料信息</div>
          </div>
        </div>
        <el-table
          ref="singleTable"
          :data="parameter.detailList"
          style="width: 100%"
          highlight-current-row
          size="small"
          :cell-style="{'text-align': 'center'}"
          :header-cell-style="{'text-align': 'center'}"
        >
          <el-table-column fixed type="index" width="55" label="序号" />
          <el-table-column label="物料编号" min-width="150" prop="matPlatcode">
            <template slot-scope="scope">
              <el-input
                clearable
                v-model="scope.row.matPlatcode"
                :readonly="true"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="物料名称" min-width="170" prop="matName">
            <template slot-scope="scope">
              <el-input
                clearable
                v-model="scope.row.matName"
                :readonly="true"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="规格型号" min-width="170" prop="matSpec">
            <template slot-scope="scope">
              <el-input
                clearable
                v-model="scope.row.matSpec"
                :readonly="true"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="计量单位" min-width="150" prop="matUnit">
            <template slot-scope="scope">
              <el-input
                clearable
                v-model="scope.row.matUnit"
                :readonly="true"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="发货数量" min-width="200" prop="num">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.num"
                controls-position="right"
                :readonly="true"
                @input="changeNum"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="税率(%)" min-width="180" prop="taxRate">
            <template slot-scope="scope">
              <el-input
                clearable
                v-model="scope.row.taxRate"
                :readonly="true"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column label="含税单价(元)" min-width="200" prop="TaxPrice">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.TaxPrice"
                :readonly="true"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="金额(元)"
            min-width="200"
            prop="transactionPrice"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.transactionPrice"
                :readonly="true"
              ></el-input>
            </template>
          </el-table-column>
          <!-- <el-table-column
              label="服务费(%)"
              min-width="180"
              prop="transactionServiceFee"
            >
              <template slot-scope="scope">
                <el-input
                  clearable
                  v-model="scope.row.transactionServiceFee"
                  placeholder="请输入服务费(%)"
                ></el-input>
              </template>
            </el-table-column> -->
          <!-- <el-table-column
              label="服务费额(元)"
              min-width="200"
              prop="ServiceFee"
            >
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.ServiceFee"
                  controls-position="right"
                  :min="1"
                  placeholder="请输入服务费额(元)"
                ></el-input-number>
              </template>
            </el-table-column> -->

          <el-table-column
            fixed="right"
            align="right"
            width="90px"
            :index="999"
          >
            <template slot="header">
              <el-button
                size="mini"
                type="warning"
                circle
                icon="el-icon-plus"
                @click="addTable"
              />
            </template>
            <template slot-scope="scope">
              <el-button
                v-if="!scope.row.id"
                size="mini"
                type="danger"
                circle
                icon="el-icon-close"
                @click="delTable(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
        <div class="rows" style="margin-top: 10px">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">收货单处理记录</div>
          </div>
        </div>
        <div class="block" v-if="handlelog.length">
          <el-timeline>
            <el-timeline-item
              :timestamp="item.operaterTime"
              placement="top"
              v-for="(item, index) in handlelog"
              :key="index"
            >
              <el-card>
                <el-descriptions :title="item.receiptDetailName">
                  <el-descriptions-item label="原始数量">{{
                    item.oldNum
                  }}</el-descriptions-item>
                  <el-descriptions-item label="修改数量">{{
                    item.num
                  }}</el-descriptions-item>
                  <el-descriptions-item label="操作人">{{
                    item.operaterUserName
                  }}</el-descriptions-item>
                  <el-descriptions-item label="操作人所属公司"
                    >{{ item.operaterCompanyName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="操作时间">{{
                    item.operaterTime
                  }}</el-descriptions-item>
                </el-descriptions>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="block" v-else><el-empty :image-size="100"></el-empty></div>
      </el-form>
    </div>
  </div>
</template>
  
  <script>
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import salesOrder from '@/api/BasicDataManagement/salesOrder.js'
import utils from '@/utils.js'
export default {
  name: 'afterProcessingDetail',
  components: {Breadcrumb},
  data() {
    return {
      breadcrumbOpt: [{breadcrumbName: '售后处理'}, {breadcrumbName: '详情'}],
      parameter: {},
      handlelog: [],
    }
  },
  created() {
    if (this.$route.query.detailRows) {
      let row = JSON.parse(JSON.stringify(this.$route.query.detailRows))

      this.selectOne(row)
      this.selectHandlelog(row)
    }
  },
  mounted() {},
  methods: {
    selectOne(row) {
      this.$http.post('${portal}/arrival/v1/selectOne?id='+row.id).then(res=>{
        console.log(res)
        this.parameter = res.data.value
        if (!this.parameter.detailList) {
          this.parameter.detailList = []
        } else {
          this.parameter.detailList.forEach((item) => {
            item.TaxPrice = item.transactionPrice / item.num
          })
        }
      })
    },
    selectHandlelog(row) {
      salesOrder.selectHandlelog(row.id).then((res) => {
        console.log(res)
        if (res.data.value) {
          this.handlelog = res.data.value
        }
      })
    },
    // 关闭//面包屑点击
    handleClose() {
      this.$router.push({
        name: 'afterProcessing',
        params: {
          pageBean: this.$route.query.pageBean,
        },
      })
      this.parameter = {}
    },
    //详情
    detail(val) {
      if (val) {
        this.modifychoData(val)
      }
    },
    //获取详情
    modifychoData(val) {},
  },
}
</script>
  <style lang="scss" scoped>
  ::v-deep .el-form-item__label {
    width: 120px;
    font-size: 14px;
    color: #828282;
    font-weight: 500;
  }
  
  ::v-deep .el-form-item__content span {
    font-size: 14px;
    color: #000;
    font-weight: 500;
  }
  
  ::v-deep .el-form-item {
    margin-bottom: 10px;
  }
  .rows {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 16px;
    padding: 10px 0;
  
    .rows-left {
      margin-right: 10px;
  
      .rows-hr {
        width: 3px;
        height: 18px;
        background-color: #0e6eff;
        border-radius: 2px;
      }
    }
  
    .rows-title {
      .text-overflow {
        width: 100%;
        font-size: 16px;
      }
    }
  }
  ::v-deep .el-timeline-item {
    margin-left: -48px; /* 这里可以根据您的需求调整左边边距的大小 */
}
  </style>
  