<template>
  <div class="fullHeight project">
    <div class="fullHeight">
      <div class="rightPanel whiteBlock">
        <!-- 本项目订单 -->
        <p class="pageTitle">{{$t('message.energyManage.order.pageTitle')}}</p>
        <el-form :inline="true" ref="searchForm" :model="searchForm" size="medium">
          <!-- 订单状态 -->
          <el-form-item :label="$t('message.energyManage.order.orderStatus')" prop="state">
            <!-- 请选择 -->
            <el-select v-model="searchForm.state" filterable :placeholder="$t('message.energyManage.material.pleaseChoose')" :clearable="true">
                <el-option
                v-for="(item,index) in orderStatusArr"
                :key="index"
                :label="item"
                :value="index+1">
                </el-option>
            </el-select>
          </el-form-item>
          <!-- 供料单位 -->
            <el-form-item :label="$t('message.energyManage.waybill.feedCompany')" prop="enterpriseId">
              <el-select v-model="searchForm.enterpriseId" filterable :placeholder="$t('message.energyManage.material.pleaseChoose')" :clearable="true">
                <el-option
                v-for="item in feedUnitList"
                :key="item.id"
                :label="item.enterpriseName"
                :value="item.enterpriseId">
                </el-option>
                </el-select>
            </el-form-item>
          <el-form-item>
            <!-- 查询 -->
            <el-button type="primary" plain @click="getContractList">{{$t('message.energyManage.waybill.query')}}</el-button>
            <!-- 刷新 -->
            <el-button type="warning" plain @click="refreshFn">{{$t('message.energyManage.waybill.fresh')}}</el-button>
            <el-button type="primary" size="medium" @click="showAddOrEditDialog"
            >
            <!-- 添加订单 -->
            {{$t('message.energyManage.order.addOrder')}}
            </el-button
          >
          </el-form-item>
        </el-form>
       <div class="table_wrap whiteBlock">
        <el-table class="tables" :data="contractList">
             <el-table-column
                type="index"
                width="50"
                align="center"
                :label="$t('message.personnelPosition.beaconManage.table.index')"
                ></el-table-column>
                <!-- 订单编号 -->
                <el-table-column
                prop="orderNumber"
                :label="$t('message.energyManage.waybill.orderNumber')"
                align="center"
                >
                <template slot-scope="scope">
                    <span class="primaryText hovers" @click="editContractFn(scope.row)">
                        {{scope.row.orderNumber}}
                    </span>
                </template>
                </el-table-column>
                <!-- '状态' -->
                <el-table-column
                prop="state"
                :label="$t('message.energyManage.order.status')"
                align="center"
                >
                    <template slot-scope="scope">
                        {{orderStatusArr[scope.row.state-1]}}
                    </template>
                </el-table-column>
                <!-- '材料名称' -->
                <el-table-column
                prop="materialName"
                :label="$t('message.energyManage.material.materialName')"
                align="center"
                >
                    <template slot-scope="scope">
                        <div v-html="parseMaterailData(scope.row.materialName)"></div>
                    </template>
                </el-table-column>
                <!-- '单位' -->
                <el-table-column
                prop="computeUnit"
                :label="$t('message.energyManage.material.company')"
                align="center"
                >
                <template slot-scope="scope">
                        <div v-html="parseMaterailData(scope.row.computeUnit)"></div>
                    </template>
                </el-table-column>
                <!-- '订单数量' -->
                <el-table-column
                prop="materialNum"
                :label="$t('message.energyManage.order.orderNum')"
                align="center"
                >
                <template slot-scope="scope">
                        <div v-html="parseMaterailData(scope.row.materialNum)"></div>
                    </template>
                </el-table-column>
                <el-table-column
                prop="enterpriseName"
                :label="$t('message.energyManage.waybill.feedCompany')"
                align="center"
                ></el-table-column>
                <!-- 收货地点 -->
                <el-table-column
                prop="receivingAddr"
                :label="$t('message.energyManage.waybill.placeOfReceipt')"
                align="center"
                ></el-table-column>
                <!-- 下单人 -->
                <el-table-column
                prop="createUserAme"
                :label="$t('message.energyManage.order.orderPeople')"
                align="center"
                ></el-table-column>
                <!-- 下单时间 -->
                <el-table-column
                prop="addTime"
                :label="$t('message.energyManage.order.orderTime')"
                align="center"
                ></el-table-column>
                <!-- 到场时间 -->
                <el-table-column
                prop="arrivalTime"
                :label="$t('message.energyManage.order.arriveTime')"
                align="center"
                ></el-table-column>
            <el-table-column width="180" :label="$t('message.deviceManage.operation')" align="center">
                <template slot-scope="scope">
                    <div class="tableBtns">
                        <!-- <div @click="editContractFn(scope.row,1)" class="operationText">
                            <img src="@/assets/images/icon-edit.png" width="15px" height="15px"/>
                            <span>{{$t('message.deviceManage.edit')}}</span>
                        </div>
                        <div @click="deleteContractFn(scope.row)" class="operationText">
                            <img src="@/assets/images/icon-delete.png" width="15px" height="15px"/>
                            <span>{{$t('message.deviceManage.delete')}}</span>
                        </div> -->
                        <el-button v-if="scope.row.state==1" type="primary" size="mini" @click="placeOrderFn(scope.row)">
                        {{$t('message.energyManage.order.order')}}
                          <!-- 下单 -->
                        </el-button>
                        <el-button v-if="scope.row.state!=5" type="danger" size="mini" @click="invalidOrderFn(scope.row)">
                        {{$t('message.energyManage.order.cancellation')}}
                          <!-- 作废 -->
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                class="pagerBox"
                @size-change="SizeChange"
                @current-change="CurrentChange"
                :current-page="pagInfo.pageNo"
                :page-sizes="$store.state.PAGESIZRS"
                :page-size="pagInfo.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="Number(pagInfo.total)"
                background
        ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 添加或编辑订单弹框 -->
    <el-dialog :modal-append-to-body="false" :title="dialogTitle" :visible.sync="addOrEditDialog" width="1167px">
      <div class="dialog_content">
          <el-form
            size="medium"
            :model="contractForm"
            ref="contractForm"
            :rules="contractFormRules"
            label-width="130px"
            :inline="true"
          >
          <el-form-item :label="$t('message.energyManage.waybill.orderNumber')" prop="orderNumber">
              <el-input :disabled="contractForm.state!=1"
                v-model="contractForm.orderNumber"
                :placeholder="$t('message.companyDiagram.PleaseEnter')"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('message.energyManage.waybill.feedCompany')" prop="enterpriseId">
              <el-select :disabled="contractForm.state!=1" v-model="contractForm.enterpriseId" filterable :placeholder="$t('message.energyManage.material.pleaseChoose')">
                <el-option
                v-for="item in feedUnitList"
                :key="item.id"
                :label="item.enterpriseName"
                :value="item.enterpriseId">
                </el-option>
            </el-select>
            </el-form-item>
            <!-- '买方名称'  -->
            <el-form-item :label="$t('message.energyManage.order.buyName')" prop="buyerName">
              <el-input :disabled="contractForm.state!=1"
                v-model="contractForm.buyerName"
                :placeholder="$t('message.companyDiagram.PleaseEnter')"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('message.energyManage.waybill.placeOfReceipt')" prop="receivingAddr">
              <el-input :disabled="contractForm.state!=1"
                v-model="contractForm.receivingAddr"
                :placeholder="$t('message.companyDiagram.PleaseEnter')"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('message.energyManage.order.arriveTime')" prop="arrivalTime">
              <!-- 选择日期时间 -->
              <el-date-picker style="width:193px" :disabled="contractForm.state!=1"
                v-model="contractForm.arrivalTime"
                type="datetime"
                :placeholder="$t('message.energyManage.material.chooseDate')" value-format="yyyy-MM-dd HH:mm">
                </el-date-picker>
            </el-form-item>
            <!-- '备注信息' -->
            <el-form-item :label="$t('message.energyManage.order.remarkInfo')" prop="remarks">
              <el-input style="width:178px" type="textarea" :rows="3" :disabled="contractForm.state!=1"
                v-model="contractForm.remarks"
                :placeholder="$t('message.companyDiagram.PleaseEnter')"
              ></el-input>
            </el-form-item>
          </el-form>
        <el-tabs style="margin-bottom:5px" v-model="dialogSteps" type="card">
          <!-- 材料信息 -->
          <el-tab-pane :label="$t('message.energyManage.order.materialInfo')" name="0"></el-tab-pane>
          <!-- 附件信息 -->
          <el-tab-pane :label="$t('message.energyManage.order.accessoryInfo')" name="1"></el-tab-pane>
          <!-- 运单信息 -->
          <el-tab-pane :label="$t('message.energyManage.order.waybillInfo')" name="2" v-if="contractForm.state!=1"></el-tab-pane>
        </el-tabs>
        <div class="importMaterialBox" v-show="dialogSteps==0">
            <el-button v-if="contractForm.state==1" style="margin-bottom:15px" type="primary" size="medium" @click="importMaterial(1)"
            >
            {{$t('message.energyManage.order.chooseProjectMaterial')}}
            <!-- 选择本项目材料 -->
            </el-button
          >
          <!-- <el-button style="margin-bottom:15px" type="danger" size="medium" @click="deleteSelectMaterialFn()"
            >删除</el-button
          > -->
            <el-table class="tables" :data="orderMaterialList" height="360" style="min-height:auto">
                <el-table-column
                type="index"
                width="50"
                align="center"
                :label="$t('message.personnelPosition.beaconManage.table.index')"
                ></el-table-column>
                <el-table-column
                prop="materialName"
                :label="$t('message.energyManage.material.materialName')"
                align="center"
                ></el-table-column>
                <!-- '规格型号' -->
                <el-table-column
                prop="materialSpecifications"
                :label="$t('message.energyManage.waybill.specification')"
                align="center"
                ></el-table-column>
                <el-table-column
                prop="computeUnit"
                :label="$t('message.energyManage.material.company')"
                align="center"
                >
                <template slot-scope="scope">
                    <el-input size="mini" :disabled="contractForm.state!=1"
                        v-model="scope.row.computeUnit"
                        :placeholder="$t('message.companyDiagram.PleaseEnter')"
                    ></el-input>
                </template>
                </el-table-column>
               <el-table-column
                prop="materialNum"
                :label="$t('message.energyManage.order.orderNum')"
                align="center"
                >
                <template slot-scope="scope">
                  <!-- 描述文字 -->
                    <el-input-number :disabled="contractForm.state!=1" size="mini" v-model="scope.row.materialNum" :min="1" :label="$t('message.energyManage.order.descriptionText')"></el-input-number>
                </template>
                </el-table-column>
                <el-table-column v-if="contractForm.state==1" width="100" :label="$t('message.deviceManage.operation')" align="center">
                <template slot-scope="scope">
                    <div class="tableBtns">
                        <div @click="deleteSelectMaterialFn(scope.$index)" class="operationText">
                            <img src="@/assets/images/icon-delete.png" width="15px" height="15px"/>
                            <span>{{$t('message.deviceManage.delete')}}</span>
                        </div>
                    </div>
                </template>
            </el-table-column>
            </el-table>
        </div>
        <div class="importMaterialBox" v-show="dialogSteps==1">
            <el-upload v-if="contractForm.state==1"
                class="upload-demo"
                name="files"
                :action="$store.state.UPLOADURL"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-success="handleSuccess"
                multiple
                :file-list="orderFileList">
                <el-button size="small" type="primary">
                  <!-- 点击上传 -->
                  {{$t('message.energyManage.order.clickUpdate')}}
                </el-button>
                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
            <ul class="orderFileList">
                <li v-for="item in orderFileList" :key="item.url">
                    <span>{{item.name}}</span>
                    <el-button icon="el-icon-download" type="primary" size="mini" @click="downLoadFileFn(item.url)">
                    {{$t('message.energyManage.order.download')}}
                      <!-- 下载 -->
                    </el-button>
                </li>
            </ul>
        </div>
        <div class="importMaterialBox" v-show="dialogSteps==2">
            <el-table class="tables" :data="wayBillList" height="360" style="min-height:auto">
                <el-table-column
                type="index"
                width="50"
                align="center"
                :label="$t('message.personnelPosition.beaconManage.table.index')"
                ></el-table-column>
                <!-- 运单编号 -->
                <el-table-column
                prop="wayBillNumber"
                :label="$t('message.energyManage.waybill.billNo')"
                align="center"
                ></el-table-column>
                <el-table-column
                prop="materialName"
                :label="$t('message.energyManage.material.materialName')"
                align="center"
                ></el-table-column>
                <el-table-column
                prop="materialSpecifications"
                :label="$t('message.energyManage.waybill.specification')"
                align="center"
                ></el-table-column>
                <el-table-column
                prop="computeUnit"
                :label="$t('message.energyManage.material.company')"
                align="center"
                >
                </el-table-column>
                <!-- 运单数量 -->
               <el-table-column
                prop="wayBillNum"
                :label="$t('message.energyManage.material.wayNum')"
                align="center"
                >
                </el-table-column>
                <!-- 发货时间 -->
                <el-table-column
                prop="deliveryTime"
                :label="$t('message.energyManage.waybill.sendTime')"
                align="center"
                >
                </el-table-column>
                <!-- <el-table-column
                prop="materialNum"
                :label="'备注'"
                align="center"
                >
                </el-table-column> -->
            </el-table>
        </div>
        <div class="dialog-footer" v-if="contractForm.state==1">
            <el-button
              class="cancleBtn"
              @click="addOrEditDialog = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t("message.companyDiagram.cancel") }}
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="saveContractInfoFn(1)"
              size="medium"
              >
              {{$t('message.energyManage.order.temporaryStorage')}}
              <!-- 暂存 -->
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="saveContractInfoFn(2)"
              size="medium"
              >
              <!-- 下单 -->
              {{$t('message.energyManage.order.order')}}
            </el-button>
          </div>
          <div class="dialog-footer" v-else>
              <el-button
              class="cancleBtn"
              @click="addOrEditDialog = false"
              icon="el-icon-circle-close"
              size="medium"
              >
               {{$t('message.energyManage.order.close')}}
              <!-- 关闭 -->
            </el-button>
          </div>
      </div>
    </el-dialog>
    <!-- 用于为订单选择材料 -->
    <!-- 选择订单材料 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="$t('message.energyManage.order.chooseOrderMaterial')"
      :visible.sync="selectMaterialDialog"
      width="1167px"
    >
      <div class="dialog_content">
        <el-tabs v-model="dialogTabActiveName" @tab-click="showSelectCheck">
          <!-- 全部材料 -->
          <el-tab-pane :label="$t('message.energyManage.cate.allMaterial')" name="first">
            <div class="" style="overflow: hidden">
              <div class="system-left" style="padding: 0;height:520px">
                <vue-scroll class="treeList" style="height:100%!important">
                  <div style="padding-top: 10px">
                    <ul v-for="(name, index) in companyCateList" :key="index">
                      <li @click="changeCompanyCate(index, name, 1)"
                        :class="{
                          active:
                            index == dialogCateIndex && dialogCateIndex2 == -1,
                        }"
                      >
                        <div
                          class="clickName" style="width:100%"
                        >
                          <div class="imgbox">
                            <i
                              v-if="dialogCateIndex != index"
                              class="el-icon-caret-right"
                            ></i>
                            <i v-else class="el-icon-caret-bottom"></i>
                          </div>
                          <el-popover
                            placement="top-start"
                            v-model="name.visible"
                            :content="name.categoryName"
                          >
                            <span
                              slot="reference"
                              @mouseenter="
                                name.visible =
                                  name.categoryName.length > 9 ? true : false
                              "
                              @mouseleave="name.visible = false"
                              >{{
                                name.categoryName.length > 9
                                  ? name.categoryName.substring(0, 8) + "..."
                                  : name.categoryName
                              }}</span
                            >
                          </el-popover>
                        </div>
                      </li>
                      <ul
                        v-for="(item, i) in name.children"
                        id="child"
                        v-if="dialogCateIndex == index"
                        :key="i"
                      >
                        <li
                          :class="{
                            active:
                              i == dialogCateIndex2 && dialogCateIndex != -1,
                          }"
                          @click="changeCompanyCate(i, item, 2)"
                        >
                          <el-popover
                            placement="top-start"
                            v-model="item.visible"
                            :content="item.categoryName"
                          >
                            <div
                              slot="reference"
                              @mouseenter="
                                item.visible =
                                  item.categoryName.length > 9 ? true : false
                              "
                              @mouseleave="item.visible = false"
                              style="display: inline-block; width: 60%"
                            >
                              {{
                                item.categoryName.length > 10
                                  ? item.categoryName.substring(0, 9) + "..."
                                  : item.categoryName
                              }}
                            </div>
                          </el-popover>
                        </li>
                      </ul>
                    </ul>
                    <li
                      class="title"
                      style="text-align: center; line-height: 140px"
                      v-show="companyCateList.length == 0"
                    >
                      <!-- 暂无数据 -->
                       {{$t('message.energyManage.cate.noData')}}

                    </li>
                  </div>
                </vue-scroll>
              </div>
              <div class="system-right">
                <el-table ref="multipleTable" style="min-height:auto"
                  height="520px"
                  :data="companyMaterialList"
                  class="tables" @select="handleSelectionChange" @select-all="handleSelectionChange"
                >
                  <el-table-column
                    type="selection"
                    label=""
                    width="55"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="materialName"
                    :label="$t('message.energyManage.material.materialName')"
                    align="center"
                  >
                  </el-table-column>
                  <!-- 材料编码 -->
                  <el-table-column
                    prop="materialCode"
                    :label="$t('message.energyManage.material.materialNo')"
                    align="center"
                  ></el-table-column>
                  <!-- 计算单位 -->
                  <el-table-column
                    prop="computeUnit"
                    :label="$t('message.energyManage.material.unitOfAccount')"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="materialSpecifications"
                    :label="$t('message.energyManage.waybill.specification')"
                    align="center"
                  ></el-table-column>
                  <!-- 正负差 -->
                  <el-table-column
                    prop="materialSpecifications"
                    :label="$t('message.energyManage.material.plusOrMinus')"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span v-if="scope.row.deviationType">
                        {{ scope.row.adjustStartValue
                        }}{{ scope.row.deviationType == 1 ? "%" : $t(message.energyManage.material.weight3) }} ~
                        {{ scope.row.adjustEndValue
                        }}{{ scope.row.deviationType == 1 ? "%" : $t(message.energyManage.material.weight3) }}
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <!-- 已选材料 -->
          <el-tab-pane :label="$t('message.energyManage.material.selectMaterial')" name="second">
            <el-table height="552px" :data="multipleSelection" class="tables">
              <!-- 序号 -->
            <el-table-column
              type="index"
              :label="$t('message.energyManage.material.serialNo')"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="materialName"
              :label="$t('message.energyManage.material.materialName')"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="materialCode"
              :label="$t('message.energyManage.material.materialNo')"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="computeUnit"
              :label="$t('message.energyManage.material.unitOfAccount')"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="materialSpecifications"
              :label="$t('message.energyManage.waybill.specification')"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="materialSpecifications"
              :label="$t('message.energyManage.material.plusOrMinus')"
              align="center"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.deviationType">
                  {{ scope.row.adjustStartValue
                  }}{{ scope.row.deviationType == 1 ? "%" : $t(message.energyManage.material.weight3) }} ~
                  {{ scope.row.adjustEndValue
                  }}{{ scope.row.deviationType == 1 ? "%" : $t(message.energyManage.material.weight3) }}
                </span>
              </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column :label="$t('message.energyManage.material.operation')" align="center">
              <template slot-scope="scope">
                <el-button
                  @click="removeSelect(scope.$index)"
                  type="text"
                  size="small"
                  style="color: red"
                  icon="el-icon-delete"
                >
                  <span style="font-size: 14px">
                    <!-- 移除 -->
                    {{$t('message.energyManage.material.remove')}}
                    </span>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          </el-tab-pane>
        </el-tabs>
        <div class="dialog-footer">
            <el-button
              @click="selectMaterialDialog = false"
              size="medium"
              icon="el-icon-circle-close"
              >
              <!-- 取 消 -->
              {{$t('message.energyManage.material.cancel')}}
              </el-button
            >
            <el-button
              type="primary"
              @click="saveImportMaterial()"
              size="medium"
              icon="el-icon-circle-check"
              >
              <!-- 确 定 -->
               {{$t('message.energyManage.material.confirm')}}
              </el-button
            >
          </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {addmaterialPurchaseOrderApi,
editmaterialPurchaseOrderApi,deletematerialPurchaseOrderApi,
materialPurchaseOrderPageApi,selectProjectCooperationUnitListApi,
abandonPurchaseOrderApi,getMaterialPurchaseInfoApi,
updatePurchaseOrderApi,

materialCategoryListApi,materialRecordListApi} from "@/assets/js/api/materialManage"
export default {
  data() {
    return {
      searchSn: "",
      isAdd: true,
      dialogTitle:  this.$t('message.energyManage.order.addOrder'),/* 添加订单 */
      addOrEditDialog: false,
      dialogSteps: 0,
      contractForm: {
        "arrivalTime": "",
        "buyerName": "",
        "createUser": 0,
        "enterpriseId": '',
        "list": [],
        "projectSn": "",
        "receivingAddr": "",
        "remarks": "",
        "state": 1,
        orderNumber:''
      },
      contractFormRules: {
          orderNumber:[
              {required: true, message: this.$t('message.energyManage.material.require'), trigger: 'blur'}
          ],enterpriseId:[
              {required: true, message: this.$t('message.energyManage.material.require'), trigger: 'blur'}
          ],buyerName:[
              {required: true, message: this.$t('message.energyManage.material.require'), trigger: 'blur'}
          ],receivingAddr:[
              {required: true, message: this.$t('message.energyManage.material.require'), trigger: 'blur'}
          ],arrivalTime:[
              {required: true, message: this.$t('message.energyManage.material.require'), trigger: 'blur'}
          ]
      },
      //选择材料所用变量 --- start
      dialogCateIndex:0,
      dialogCateIndex2:-1,
      dialogTabActiveName:'first',
      selectMaterialDialog:false,
      companyCateList:[],
      companyMaterialList:[],
      multipleSelection:[],
      //选择材料所用变量 --- end
      contractList:[],
      orderMaterialList:[],
      orderFileList:[],
      pagInfo: {
          pageNo: 1,//页数
          pageSize: 10,//条数
          total: 0,//总条数
      },
      searchForm:{  
        state:'',
        enterpriseId:''
      },
      feedUnitList:[],
      orderStatusArr:this.$t('message.energyManage.order.orderStatusArr'),
      wayBillList:[]
    };
  },
  mounted() {
    this.searchSn = this.$store.state.userInfo.sn;
    this.getContractList()
    this.getFeedUnitList()
  },
  methods: {
    //   解析材料数据
    parseMaterailData(name){
        let arr=[],str=''
        if(name.indexOf('_')!=-1){
            arr=name.split('_')
        }
        arr.forEach(element => {
            str+='<p>'+element+'</p>'
        });
        return str
    },
    //显示选择材料弹框
    importMaterial(type) {
      this.multipleSelection=[];
      this.dialogCateIndex=0
      this.dialogCateIndex2=-1,
      this.dialogTabActiveName='first'
      this.loadCompanyCateList(type);
      this.selectMaterialDialog = true;
      this.$nextTick(()=>{
          this.$refs.multipleTable.clearSelection();
        })
      
    },
    //企业类别切换
    changeCompanyCate(index, data, type) {
      if (type == 1) {
        this.dialogCateIndex2 = -1;
        this.dialogCateIndex = index;
      } else {
        this.dialogCateIndex2 = index;
      }

      this.loadCompanyMaterialList(data.id);
    },
    //获取企业的材料分类
    loadCompanyCateList(type) {
      let param = {
        sn: this.pageType=='companyAdmin'?this.$store.state.userInfo.headquartersSn:this.searchSn,
      };
      materialCategoryListApi(param).then((res) => {
        this.companyCateList = res.result;
          if (this.companyCateList.length > 0) {
            this.loadCompanyMaterialList(this.companyCateList[0].id);
          }        
      });
    },
    //按企业分类获取材料列表
    loadCompanyMaterialList(id) {
      let param = {
        categoryId: id,
      };
      materialRecordListApi(param).then((res) => {
        this.companyMaterialList = res.result;
        this.showSelectCheck()
      });
    },
    handleSelectionChange(val){
    //   console.log('此次选中',val)
      this.duplicateRemoval(val,this.multipleSelection)
    },
    //表格选中去重
    duplicateRemoval(arr,arr2){
        let selectId = 0;
        if(this.dialogCateIndex2==-1){
          selectId=this.companyCateList[this.dialogCateIndex].id
        }else{
          selectId=this.companyCateList[this.dialogCateIndex].children[this.dialogCateIndex2].id
        }
        this.multipleSelection=[]
        for (let index2 = 0; index2 < arr2.length; index2++) {
          const element2 = arr2[index2];
          if(selectId==element2.categoryId){
            
          }else{
            this.multipleSelection.push(element2)
          }
        }
        this.multipleSelection=this.multipleSelection.concat(arr)
     
    },
    //表格checkbox选中
    showSelectCheck(){
      this.$nextTick(()=>{
          // 
           if(this.multipleSelection.length>0){
              this.multipleSelection.forEach(row => {
                this.companyMaterialList.forEach(element => {
                  if(element.id==row.id){
                    this.$refs.multipleTable.toggleRowSelection(element);
                  }
                });
              });
            }else{
              this.$refs.multipleTable.clearSelection();
            }
        })
    },
    //移除已选的材料
    removeSelect(index){
      this.multipleSelection.splice(index,1)
    },
    //删除选中的订单材料
    deleteSelectMaterialFn(index){
        this.orderMaterialList.splice(index,1)
    },
    //保存已选的材料到订单去
    saveImportMaterial(){
      let arr=[]
      if(this.multipleSelection.length==0){
        this.$message.error(this.$t('message.energyManage.material.pleaseChoose')+this.$t('message.energyManage.material.material'))
        return
      }else{
        this.multipleSelection.forEach(element => {
            let onoff=true
            //用于判断是不是已经在订单材料列表里面，不在则加入到列表
            this.orderMaterialList.forEach(item => {
                if(item.materialId==element.id){
                    onoff=false
                }
            });
            if(onoff){
                arr.push({
                    materialId:element.id,
                    computeUnit:element.computeUnit,
                    materialName:element.materialName,
                    materialNum:0,
                    materialSpecifications:element.materialSpecifications
                })
            }
          
        });
      }
      this.orderMaterialList=this.orderMaterialList.concat(arr)
      this.selectMaterialDialog=false
      
    },
    //显示添加订单弹框
    showAddOrEditDialog() {
      this.addOrEditDialog = true;
      this.dialogTitle=/* '添加订单' */this.$t('message.energyManage.order.addOrder')
      this.dialogSteps='0'
      this.isAdd = true;
      this.orderMaterialList=[]
      this.orderFileList=[]
      this.contractForm= {
        "arrivalTime": "",
        "buyerName": "",
        "createUser": 0,
        "enterpriseId": '',
        "list": [],
        "projectSn": "",
        "receivingAddr": "",
        "remarks": "",
        "state": 1,
        orderNumber:''
      }
      this.contractForm.buyerName=this.$store.state.currentProDetail.name
    //   this.contractForm.state=1

    //   this.$nextTick(()=>{
    //     this.$refs['contractForm'].resetFields();
    //   })
    },
    //保存订单信息
    saveContractInfoFn(state) {
        this.$refs['contractForm'].validate((valid) => {
          if (valid) {
              this.contractForm.state=state
              if(this.orderMaterialList.length==0){
                  this.$message.error(this.$t('message.energyManage.material.pleaseChoose')+this.$t('message.energyManage.material.material'))
                  return
              }
              this.contractForm.list=this.orderMaterialList
              
            this.contractForm.fileUrl=JSON.stringify(this.orderFileList)
              
            if(this.isAdd){
              this.contractForm.projectSn=this.searchSn
              this.contractForm.createUser=this.$store.state.userInfo.userId
                addmaterialPurchaseOrderApi(this.contractForm).then(res=>{
                    this.$message.success(res.message);
                    this.addOrEditDialog=false;
                    this.getContractList()
                })
            }else{
                editmaterialPurchaseOrderApi(this.contractForm).then(res=>{
                  this.$message.success(res.message);
                  this.addOrEditDialog=false;
                    this.getContractList()
                })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    SizeChange(val) {
        this.pagInfo.pageSize = val;
        this.getContractList();
    },
    CurrentChange(val) {
        this.pagInfo.pageNo = val;
        this.getContractList();
    },
    //重置合同列表的搜索参数
    refreshFn(){
      this.$refs['searchForm'].resetFields();
      this.pagInfo.pageNo=1
      this.getContractList()
    },
    //获取订单列表
    getContractList(){
      let json = this.searchForm
      json.pageNo=this.pagInfo.pageNo;
      json.pageSize=this.pagInfo.pageSize;
      json.projectSn=this.searchSn;
      materialPurchaseOrderPageApi(json).then(result => {
          this.contractList = result.result.records;
          this.pagInfo.total=result.result.total
      })
    },
  
    //显示编辑订单信息弹框
    editContractFn(item){
        getMaterialPurchaseInfoApi({purchaseOrderId:item.id}).then(res => {
          this.orderMaterialList=res.result.itemList;
          this.wayBillList=res.result.wayBillList;
          this.contractForm=res.result.purchaseOrder
          this.isAdd=false
            this.addOrEditDialog=true
            if(this.contractForm.state==1){
                this.dialogTitle=/* '编辑订单' */this.$t('message.energyManage.order.editOrder')
            }else{
                this.dialogTitle=/* '订单详细' */ this.$t('message.energyManage.order.orderDetail')
            }
            this.dialogSteps='0'
            if(this.contractForm.fileUrl){
                this.orderFileList=JSON.parse(this.contractForm.fileUrl)
            }else{
                this.orderFileList=[]
            }
        
      })
    },
    //删除订单信息
    deleteContractFn(obj){
      this.$confirm(this.$t('message.personnelPosition.beaconManage.table.confirmText') + "【" + obj.contractName + "】?", this.$t('message.personnelPosition.beaconManage.table.Tips'), {
          confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
          cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
          type: "warning",
      }).then(() => {
          deletematerialPurchaseOrderApi({id: obj.id}).then(result => {
              this.$message.success(result.message);
              this.getContractList();
              
          })
      })
    },
    //获取供料单位列表
    getFeedUnitList(){
        let data = {
        projectSn: this.searchSn,
        cooperationType: 1
      };
        selectProjectCooperationUnitListApi(data).then((res) => {
            this.feedUnitList = res.result
        });
    },

    handleRemove(file, fileList) {
        console.log(file, fileList);
        this.orderFileList = [];
        fileList.forEach(element => {
            let data = element.response.data[0]
            this.orderFileList.push({
                name:data.filename,
                url:data.imageUrl
            })
        });
      },
      handleSuccess(response, file, fileList) {
            console.log('上传成功', fileList);
            console.log(response)
            let data = response.data[0]
            this.orderFileList.push({
                name:data.filename,
                url:data.imageUrl
            })
        },
      beforeRemove(file, fileList) {
        return this.$confirm(this.$t('message.energyManage.order.confirmRemove')+file.name+'?');
      },
      //订单作废
      invalidOrderFn(obj){
          this.$confirm(this.$t('message.energyManage.order.tipText')+'?', {
                confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
                cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
                type: "warning",
            }).then(() => {
                abandonPurchaseOrderApi({id: obj.id}).then(result => {
                    this.$message.success(result.message);
                    this.getContractList();
                })
            })
      },
      //下单
      placeOrderFn(item){
          updatePurchaseOrderApi({id:item.id,state:2}).then(res=>{
                this.$message.success(res.message);
                
                this.getContractList()
            })
      },
      downLoadFileFn(url){
          window.open(this.$store.state.FILEURL+url)
      }
  },
};
</script>
<style lang="less" scoped>
.rightPanel {
  float: left;
  width: calc(100% - 330px - 20px - 30px);
  margin-left: 20px;
  padding: 20px 15px;
  height: calc(100% - 40px);
}
.dialogSteps{
    justify-content:center;
    margin-bottom: 30px;
}
.system-left {
    float: left;
    width: 330px;
    padding: 20px 15px;
    height: calc(100% - 40px);
    background-color: white;
    .treeList {
      background-color: rgba(216, 216, 216, 0.2);
      height: calc(100% - 42px) !important;
    }
    li {
      cursor: pointer;
      font-size: 16px;
      line-height: 32px;
      letter-spacing: 1px;
      font-weight: bold;
      .clickName {
        width: calc(100% - 176px);
        .imgbox {
          display: inline-block;
          margin: 0 6px 0 13px;
          font-size: 16px;
        }
      }
    }
    li:hover,
    .active {
      // background: linear-gradient(270deg, white, #b7d8ff 100%);
      background-color: rgba(81, 129, 246, 0.14);
      color: @--color-primary;
    }
    #child {
      li {
        font-size: 15px;
        padding-left: 39px;
        font-weight: normal;
      }
    }
  }
  .system-right {
    float: right;
    // margin-right: 1.5%;
    margin-left: 20px;
    width: calc(100% - 360px - 20px - 30px);
    // min-height: 620px;
    height: calc(100% - 40px);
    // border: 1px solid #e9e9e9;
    background-color: white;
    padding: 20px 15px;
  }
  .project{
  
    .rightPanel{
      width: 100%;
      margin-left: 0;
    }
  }
  .orderFileList{
      li{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
      }
  }
</style>