<template>
  <div class="app-container">
    <el-form :model="addOrderParam" ref="addOrderParam" size="small" :inline="true" v-show="showSearch" label-width="160px">
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item label="售达方" prop="kunnr">
            <div class="flex-container">
              <el-input :disabled="true" v-model="addOrderParam.kunnr" placeholder="客户编号" :style="{ width: inputWidth_1 }"></el-input>
              <el-button type="text" size="small" @click="openCustomDialog" class="flex-button">+选择客户</el-button>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="售达方描述" prop="soldPartyDesc">
            <el-input
              :disabled="true"
              :style="{ width: inputWidth_1 }"
              v-model="addOrderParam.kna1"
              placeholder="客户描述"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item label="合同号">
            <div class="flex-container">
              <el-select :style="{ width: inputWidth_2 }" v-model="addOrderParam.hasHt" clearable>
                <el-option
                  v-for="dict in hasHtDict"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
              <el-input :style="{ width: inputWidth_2 }" :disabled="addOrderParam.hasHt === 0" v-model="addOrderParam.bstkd" placeholder="合同号" ></el-input>
              <el-button :disabled="addOrderParam.hasHt === 0" type="text" size="small" @click="openContractDialog"  class="flex-button">+选择合同</el-button>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务员编码及姓名">
            <div class="flex-container">
              <el-input :disabled="true" :style="{ width: inputWidth_2 }" v-model="addOrderParam.kunnr1" placeholder="客户编号" ></el-input>
              <el-input :disabled="true" :style="{ width: inputWidth_2 }" v-model="addOrderParam.sapname" placeholder="客户编号" ></el-input>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="销售组织描述" prop="vkorg">
        <el-input
          :disabled="true"
          v-model="addOrderParam.vkorg"
          placeholder="销售组织描述"
          clearable
        />
      </el-form-item>
      <el-form-item label="销售凭证类型" prop="auart">
        <el-select v-model="addOrderParam.auart" placeholder="销售凭证类型" clearable>
          <el-option
            v-for="dict in dict.type.sales_voucher_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="要求交货日期" prop="vdatu">
        <el-date-picker
          v-model="addOrderParam.vdatu"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="分销渠道" prop="vtweg">
        <el-input
          v-model="addOrderParam.vtweg"
          placeholder="分销渠道"
          clearable
        />
      </el-form-item>
      <el-form-item label="定价日期" prop="prsdt">
        <el-input
          :disabled="true"
          v-model="addOrderParam.prsdt"
          placeholder="定价日期"
          clearable

        />
      </el-form-item>
      <el-form-item label="业务类型" prop="zsdywlxmb">
        <el-select v-model="addOrderParam.zsdywlxmb" placeholder="业务类型" clearable>
          <el-option
            v-for="dict in dict.type.business_type_hn"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否打印" prop="isprint">
        <el-select v-model="addOrderParam.isprint" placeholder="业务类型" clearable>
          <el-option
            v-for="dict in isPrint"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="sfdz">
        <span slot="label">
           是否定制
          <el-tooltip
            effect="dark"
            placement="top"
          >
            <template slot="content">
            <div style="max-width: 600px; white-space: pre-wrap;">
              关于远程下单中“是否定制”菜单项目下的4种选项说明
              1、有发无取消：只用于现货急发销售凭证类型，一般情况下销售部处理时有货直接发无货原单做取消处理，交货单开出后无冻结情况的此类订单30分钟内可处理完成。
              2、有发无做：用于国内订单，处理流程为销售创单——财务审核订单——生产审核订单，此流程闭环需3-5小时左右。生产备货、审核完成后有货部分销售才能做后续发货处理，各类产品有货部分需当日急发的单行备注“备货”字样。
              3、定做：用于国内订单、经销商备货订单，处理流程为销售创单——（有特殊工艺的需增加技术审核，销售部OA平台发起工艺、核价流程）——财务审核订单——生产审核订单，此流程闭环需24小时左右。
              4、有货备货无货定做：用于国内订单、经销商备货订单，流程处理时效参照定做类，各类产品有货部分近期需分批发货的单行备注“备货”字样，由生产备货。
              不同选项对应的订单处理流程不同，订单流转需跨的部门不同，因此时效不一。如电线类产品缺货，选“有发无做”选项订单流转周期长，影响开单时效。上述类别当日发货涉及来款关联的，需待财务认领款项、解冻交货单后方能发出。
            </div>
          </template>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </span>
        <el-select v-model="addOrderParam.sfdz" placeholder="是否定制" clearable>
          <el-option
            v-for="dict in isCustom"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号" prop="orderNumber">
        <el-input
          :disabled="true"
          v-model="addOrderParam.orderNumber"
          placeholder="订单编号"
          clearable
        />
      </el-form-item>
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item label="送货地址">
            <div class="flex-container">
              <el-input
                :style="{ width: inputWidth_1 }"
                v-model="addOrderParam.zsdshdz"
                placeholder="送货地址"
                clearable
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注信息" prop="remarks">
            <el-input
              type="textarea"
              :style="{ width: inputWidth_1 }"
              :rows="2"
              placeholder="请输入内容"
              v-model="addOrderParam.remarks">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="openMaterialDialog"
        >选择产品</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
        >文件导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >下载模板</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-view"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >导出当前明细物料</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
        >现款业务可用发货额度、账面余额汇总</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" ></right-toolbar>
    </el-row>

    <el-table width="100%" class="materialTable"  :data="orderList" :row-class-name="rowOrderIndex" :cell-style="cellStyle">
      <el-table-column label="序号" align="center" prop="index" width="80"/>
      <el-table-column label="物料编号" width="100" align="center" prop="matnr" />
      <el-table-column label="物料描述" width="250" align="center" prop="maktx" />
      <el-table-column label="订单数量" width="150" align="center" prop="kwmeng" >
        <template v-slot="scope">
          <el-input v-model="scope.row.kwmeng" >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="开票价" width="150" align="center" prop="zsdhtj" >
        <template v-slot="scope">
          <el-input v-model="scope.row.zsdhtj" >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="销售单位" width="150" align="center" prop="vrkme" />
      <el-table-column label="单位净重(KG/KM)" width="150" align="center" prop="dwjz" />
      <el-table-column label="厂价" width="150" align="center" prop="changjia" />
      <el-table-column label="开票价/厂价" width="150" align="center" prop="kpjbl" >
        <template v-slot="scope">
          <el-input v-model="scope.row.kpjbl" c>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="分段要求" width="150" align="center" prop="fdyq" >
        <template v-slot="scope">
          <el-select v-model="scope.row.fdyq" placeholder="分段要求" clearable>
            <el-option
              v-for="dict in fdyqDict"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="250" align="center" prop="zsdsobz" >
        <template v-slot="scope">
          <el-input v-model="scope.row.zsdsobz" >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="客户采购订单号" width="150" align="center" prop="bstkdE" >
        <template v-slot="scope">
          <el-input v-model="scope.row.bstkdE" >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="客户采购订单行项目" width="150" align="center" prop="posexE" >
        <template v-slot="scope">
          <el-input v-model="scope.row.posexE" >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否远程监造" width="150" align="center" prop="zsdycjz" >
        <template v-slot="scope">
          <el-select v-model="scope.row.zsdycjz" placeholder="是否远程监造" clearable>
            <el-option
              v-for="dict in zsdycjzDict"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column fixed="right"  label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['factory:factory:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-form :model="addOrderParam" ref="addOrderParam" size="small" :inline="true" label-width="160px">
    </el-form>
    <MaterialDialog
      :visible.sync="dialogMaterialVisible"
      @confirm-selection="materialDialogConfirmSelection"
      @query="queryMaterialList"
      :materialDialogData="materialDialogData"
      :total="materialDialogTotal"
    />
    <el-dialog :visible.sync="customVisible" width="800px" @close="closeCustomDialog">
      <div slot="title"  style="margin: 0px; padding: 0px">
        <el-form :model="customDialogParams" ref="customDialogParams" size="small" :inline="true">
          <el-input style="width: 180px; margin-right: 10px" v-model="customDialogParams.kunnr" placeholder="客户编号">
          </el-input>
          <el-input style="width: 180px; margin-right: 10px" v-model="customDialogParams.name1" placeholder="客户名称">
          </el-input>
          <el-button type="primary" size="small" @click="queryCustom">查询客户</el-button>
        </el-form>
      </div>
      <div>
        <el-table
          :data="customDialogData"
          ref="customDialogData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'center', 'padding': '0px'}"
          :cell-style="{'text-align': 'center', 'padding': '5px 0px'}"
          highlight-selection-row
          border>
          <el-table-column
            label="序号"
            type="index"
            width="55">
          </el-table-column>
          <el-table-column
            width="175"
            prop="kunnr"
            label="客户编号">
          </el-table-column>
          <el-table-column
            width="450"
            prop="name1"
            label="客户名称">
          </el-table-column>
          <el-table-column
            width="75"
            prop="operation"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="chooseCustom(scope.row)" size="small">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="customDialogTotal>0"
          :total="customDialogTotal"
          :page.sync="customDialogParams.pageNum"
          :limit.sync="customDialogParams.pageSize"
          @pagination="queryCustom"
        />
      </div>
      <div style="text-align: center; padding-top: 20px">
        <el-button-group>
          <el-button type="primary" size="small" style="margin-right: 80px" @click="confirmCustomSelection">确认</el-button>
          <el-button type="warning" size="small" @click="closeCustomDialog">取消</el-button>
        </el-button-group>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="contractVisible" width="1100px" @close="closeContractDialog">
      <div slot="title"  style="margin: 0px; padding: 0px">
        <el-form :model="contractDialogParams" ref="contractDialogParams" size="small" :inline="true">
          <el-form-item label="合同编号" prop="hetongid">
            <el-input v-model="contractDialogParams.hetongid" placeholder="合同编号(选填)"></el-input>
          </el-form-item>
          <el-form-item label="客户名称" prop="customname">
            <el-input v-model="contractDialogParams.customname" placeholder="客户名称(选填)"></el-input>
          </el-form-item>
          <el-form-item label="日期(起-止)" prop="dateRange">
            <el-date-picker
              v-model="contractDialogParams.dateRange"
              style="width: 215px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="queryContract">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
          :data="contractDialogData"
          ref="contractDialogData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'center', 'padding': '0px'}"
          :cell-style="{'text-align': 'center', 'padding': '5px 0px'}"
          highlight-selection-row
          border>
          <el-table-column
            label="序号"
            type="index"
            width="55">
          </el-table-column>
          <el-table-column
            width="160"
            prop="htqdrq"
            label="合同日期">
          </el-table-column>
          <el-table-column
            width="130"
            prop="htbh2"
            label="合同号">
          </el-table-column>
          <el-table-column
            width="160"
            prop="zsdywyms"
            label="业务员">
          </el-table-column>
          <el-table-column
            width="160"
            prop="zsdname"
            label="客户">
          </el-table-column>
          <el-table-column
            width="160"
            prop="zsdhtje"
            label="合同金额">
          </el-table-column>
          <el-table-column
            width="160"
            prop="zsdbz02"
            label="备注">
          </el-table-column>
          <el-table-column
            width="75"
            prop="operation"
            label="操作">
            <el-button type="text" size="small">选择</el-button>
          </el-table-column>
        </el-table>
        <pagination
          v-show="contractDialogTotal>0"
          :total="contractDialogTotal"
          :page.sync="contractDialogParams.pageNum"
          :limit.sync="contractDialogParams.pageSize"
          @pagination="queryContract"
        />
      </div>
      <div style="text-align: center; padding-top: 20px">
        <el-button-group>
          <el-button type="primary" size="small" style="margin-right: 80px" @click="confirmContractSelection">确认</el-button>
          <el-button type="warning" size="small" @click="closeContractDialog">取消</el-button>
        </el-button-group>
      </div>
    </el-dialog>
  </div>

</template>
<style scoped>
/* 根据需求设置位置上下偏移 */
.offset {
  margin-top: 0px; /* 向上偏移5像素 */
  margin-bottom: 0px; /* 向下偏移5像素 */
}
</style>
<script>
import { getMaterialList, getCustomList, getContractList } from "@/api/hainanOrder/order";
import MaterialDialog from '@/views/components/Tools/MaterialDialog/index.vue';
export default {
  name: "AddOrder",
  dicts: ['sales_voucher_type', 'business_type_hn'],
  components:{
    'MaterialDialog' : MaterialDialog
  },
  data() {
    return {
      customVisible: false,   //选择客户dialog
      inputWidth_1: '360px', // 初始输入框宽度为 560px
      inputWidth_2: '180px',
      inputWidth_3: '600px',
      //是否打印
      isPrint: [
        {value : 1, label: '已打印'},
        {value : 0, label: '未打印'}
      ],
      //是否定制
      isCustom: [
        {value: 1, label: '有发无做'},
        {value: 3, label: '定做'},
        {value: 4, label: '有货备库,无货定做'}
      ],
      fdyqDict: [
        {value: '0', label: '选择分段'},
        {value: 2, label: '整根'},
        {value: 3, label: '其他分段'},
        {value: 1, label: "100米/卷"}
      ],
      zsdycjzDict: [
        {label: '否'},
        {value: 'X', label: '是'}
      ],
      hasHtDict: [
        {value: 0, label: '无'},
        {value: 1, label: '有'}
      ],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 订单表格数据
      orderList: [],
      //是否可编辑
      isDis: false,
      customDialogParams: {
        pageNum: 1,
        pageSize: 10,
        kunnr: '',
        name1: ''
      },
      addOrderParam: {
        vkorg: '海南富诚',
        kna1: null,
        hasHt: '',
        kunnr1: '',
        bstkd: null,
        auart: '',
        sapname: '',
        zsdshdz: null,
        vdatu: '',
        vtweg: '',
        prsdt: '',
        zsdywlxmb: '',
        isprint: '',
        sfdz: '',
        orderNumber: '',
        dateRange: [],
        remarks: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {

      },
      selectedMaterials: [],    //已选中的物料
      dialogMaterialVisible: false,   //物料dialog
      materialDialogData: [],
      materialDialogTotal: 0,
      customDialogTotal: 0,
      customDialogData: [

      ],
      //合同变量声明
      contractDialogParams: {
        pageNum: 1,
        pageSize: 10,
        hetongid: '',
        customname: '',
        dateRange: []
      },
      contractVisible: false,
      contractDialogData: [],
      contractDialogTotal: 0,

    };
  },
  created() {

  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
    this.handleResize(); // 初始化时调用一次确保宽度正确
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    /**--------------------打开选择无聊dialog-----------------**/
    openMaterialDialog() {
      this.dialogMaterialVisible = true;
    },
    /**------------------监听屏幕宽度-----------------------**/
    handleResize() {
      if (window.innerWidth <= 768) { // 假设小于等于 768px 为手机模式
        this.inputWidth_1 = '215px'; // 将输入框宽度调整为 200px
        this.inputWidth_2 = '77px';
        this.inputWidth_3 = '215px';
      } else {
        this.inputWidth_1 = '360px'; // 否则将输入框宽度调整为 560px
        this.inputWidth_2 = '180px';
        this.inputWidth_3 = '600px';
      }
    },

    /**-------表格的cell样式----------**/
    cellStyle({row, column, rowIndex, columnIndex}) {
        return ' text-align : center; padding: 0px';
    },
    /** 序号 */
    rowOrderIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },

    handleDelete() {

    },


    handleUpdate() {

    },
    /**----------------传递数据-------------**/
    materialDialogConfirmSelection(selectedItems) {
      this.orderList.push(...selectedItems);

    },
    /**------------dialog中请求物料列表-------------**/
    queryMaterialList(queryParams) {
      getMaterialList(queryParams).then(response => {
        this.materialDialogData = response.rows;
        this.materialDialogTotal = response.total;
        this.loading = false;
      });
    },
    /**-----------------------选择客户Dialog函数-------------------------**/
    closeCustomDialog() {
      this.customVisible = false;
    },
    openCustomDialog() {
      this.customVisible = true;
      this.queryCustom();
    },
    confirmCustomSelection() {
      this.customVisible = false;
    },
    queryCustom() {
      getCustomList(this.customDialogParams).then(response => {
        console.log(this.customDialogParams.pageNum)
        this.customDialogData = response.rows;
        this.customDialogTotal = response.total;
        this.loading = false;
      });
    },
    chooseCustom(row) {
      this.addOrderParam.kunnr = row.kunnr;
      this.addOrderParam.kna1 = row.name1;
      this.customVisible = false;
    },
    /**-----------------------选择合同------------------**/
    closeContractDialog() {
      this.contractVisible = false;
    },
    queryContract() {
      getContractList(this.contractDialogParams).then(response => {
        this.contractDialogData = response.rows;
        this.contractDialogTotal = response.total;
        this.loading = true;
      });
    },
    confirmContractSelection() {

    },
    openContractDialog() {
      this.contractVisible = true;
    }
  },
};
</script>

<style>

.flex-container {
  display: flex;
  align-items: center;
}

.el-dialog .el-dialog__header {
  padding-bottom: 10px !important;
}

.el-dialog .el-dialog__body {
  padding-top: 10px !important;
}

.materialTable .el-input__inner {
  margin: 5px;
  height: 25px;
  /*font-family: Roboto, serif;*/
  font-size: 12px;
  line-height: 14px;
}

.flex-input {
  flex-grow: 1;
  width: 154px;
  margin-right: 5px; /* 控制输入框和按钮之间的间距 */
}

.flex-button {
  flex-shrink: 0;
}

</style>