<template>
  <div class="edit-add-detail">
    <div class="crumbs">
      <Breadcrumb
        :breadcrumbOpt="breadcrumbOpt"
        svg-name="#icon-bill"
        @breadcrumb-click="handleClose"
      />
    </div>
    <div class="form-content">
      <div class="company-information">
        <el-form
          ref="formInfo"
          :model="parameter"
          label-position="right"
          label-width="auto"
        >
          <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="8">
              <el-form-item label="订单编码">
                <el-input
                  :readonly="true"
                  clearable
                  v-model="parameter.orderCode"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="采购方">
                <el-input
                  :readonly="true"
                  clearable
                  v-model="parameter.matCompanyName"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供货方">
                <el-input
                  :readonly="true"
                  clearable
                  v-model="parameter.matCompanyName"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="不含税总金额(元)" prop="orderAmount">
                <el-input
                  clearable
                  v-model="parameter.orderAmount"
                  :readonly="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="含税总金额(元)" prop="taxInvalue">
                <el-input
                  clearable
                  v-model="parameter.taxInvalue"
                  :readonly="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单时间" prop="orderCreatedate">
                <el-input
                  :readonly="true"
                  clearable
                  v-model="parameter.orderCreatedate"
                ></el-input>
              </el-form-item>
            </el-col>
            
          </el-row>
          <el-row :gutter="24">
            
          </el-row>
          <el-row :gutter="24">
            
            <el-col :span="8">
              <el-form-item label="合同名称" prop="contractName">
                <el-input
                  :readonly="true"
                  clearable
                  v-model="parameter.contractName"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单状态" prop="status">
                <el-tag v-if="parameter.status == 3">已确认</el-tag>
                <el-tag type="danger" v-if="parameter.status == 2"
                  >未确认</el-tag
                >
              </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.detailsList"
            style="width: 100%"
            highlight-current-row
            :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="100" prop="matCode">
            </el-table-column>
            <el-table-column label="物料名称" min-width="100" prop="matName">
            </el-table-column>
            <el-table-column label="规格型号" min-width="100" prop="matSpec">
            </el-table-column>
            <el-table-column label="计量单位" min-width="100" prop="matUnit">
            </el-table-column>
            <el-table-column label="预计数量" min-width="100" prop="matNum">
            </el-table-column>
            <el-table-column
              label="含税单价(元)"
              min-width="80"
              prop="taxInprice"
            >
            </el-table-column>
            <el-table-column
              label="含税金额(元)"
              min-width="90"
              prop="taxInvalue"
            >
            </el-table-column>
            <el-table-column
              label="不含税单价(元)"
              min-width="80"
              prop="orderPrice"
            >
            </el-table-column>
            <el-table-column
              label="不含税金额(元)"
              min-width="90"
              prop="orderAmount"
            >
            </el-table-column>
            <el-table-column label="税率(%)" min-width="80" prop="taxRate">
            </el-table-column>
            <el-table-column label="税额(元)" min-width="80" prop="taxValue">
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </div>
    <div
      slot="footer"
      class="footer"
      v-if="parameter.status === 2 || parameter.status === 1"
    >
      <el-button @click="handleClose" v-if="parameter.status == 2">{{
        $t('domestic.cancel')
      }}</el-button>
      <el-button
        icon="el-icon-user"
        type="danger"
        plain
        size="small"
        @click="handleSure(row)"
        v-if="parameter.status == 2"
        >确认订单</el-button
      >
      <el-button
        type="primary"
        plain
        @click="handlesent()"
        v-if="parameter.status === 1"
        >发布</el-button
      >
      <el-button
        type="primary"
        plain
        @click="handleEdit()"
        v-if="parameter.status === 1"
        >编辑</el-button
      >
    </div>
  </div>
</template>
  
  <script>
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import purchaseOrder from '@/api/BasicDataManagement/purchaseOrder.js'
import utils from '@/utils.js'
export default {
  name: 'orderMangeDetail',
  components: {Breadcrumb},
  data() {
    return {
      breadcrumbOpt: [{breadcrumbName: '订单管理'}, {breadcrumbName: '详情'}],
      parameter: {},
    }
  },
  created() {
    this.parameter = this.$route.query.detailRows
    this.detail(this.parameter)
  },
  mounted() {},
  methods: {
    handleSure() {
      this.$confirm('确定要确认订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        purchaseOrder.batchConfirmation(this.parameter.id).then((res) => {
          if (res.data.state) {
            this.$message.success('确认订单成功！')
            this.$router.go(-1)
          }
        })
      })
    },
    // 发布
    handlesent() {
      this.$confirm('确定要发布吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        purchaseOrder.batchSent(this.parameter.id).then((res) => {
          if (res.data.state) {
            this.$message.success('发布成功！')
            this.$router.go(-1)
          }
        })
      })
    },
    // 编辑
    handleEdit() {
      this.$router.push({
        name: 'purchaseOrderAddDialog',
        query: {editRows: this.parameter, pageBean: this.params},
      })
    },
    // 关闭//面包屑点击
    handleClose() {
      this.$router.push({
        name: 'orderMange',
        params: {
          pageBean: this.$route.query.pageBean,
        },
      })
      this.parameter = {}
    },
    //详情
    detail(val) {
      if (val) {
        this.modifychoData(val)
      }
    },
    //获取详情
    modifychoData(val) {
      this.$http.post('${portal}/bizPurchaseOrder/v1/selectOne?id='+val.id).then(res=>{
        if(res.data.state){
          this.parameter = res.data.value
        }
      })
    },
  },
}
</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;
      }
    }
  }
  </style>
  