<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="soldToParty">
            <div class="flex-container">
              <el-input 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
              :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.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-input :style="{ width: inputWidth_2 }" v-model="addOrderParam.kunnr" placeholder="合同号" ></el-input>
              <el-button type="text" size="small"  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 :style="{ width: inputWidth_2 }" v-model="addOrderParam.kunnr" placeholder="客户编号" ></el-input>
              <el-input :style="{ width: inputWidth_2 }" v-model="addOrderParam.kunnr" placeholder="客户编号" ></el-input>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="销售组织描述" prop="vkorg">
        <el-input
          v-model="addOrderParam.vkorg"
          placeholder="销售组织描述"
          clearable
        />
      </el-form-item>
      <el-form-item label="销售凭证类型" prop="zsdshdz">
        <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
          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
          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.kna1"
                placeholder="客户描述"
                clearable
              />
              <el-button type="text" size="small" class="flex-button">+门店地址</el-button>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注信息" prop="orderNumber">
            <el-input
              type="textarea"
              :style="{ width: inputWidth_1 }"
              :rows="2"
              placeholder="请输入内容"
              v-model="addOrderParam.orderNumber">
            </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%"  :data="orderList" :row-class-name="rowOrderIndex" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="index" width="80"/>
      <el-table-column label="物料编号" width="100" align="center" prop="kna1" />
      <el-table-column label="物料描述" width="100" align="center" prop="vdatu" />
      <el-table-column label="订单数量" width="150" align="center" prop="orderid" />
      <el-table-column label="开票价" width="150" align="center" prop="zsdywlxmb" />
      <el-table-column label="销售单位" width="150" align="center" prop="zsdshdz" />
      <el-table-column label="单位净重(KG/KM)" width="150" align="center" prop="bstkd" />
      <el-table-column label="厂价" width="150" align="center" prop="pzh" />
      <el-table-column label="开票价/厂价" width="150" align="center" prop="totalPrice3" />
      <el-table-column label="分段要求" width="150" align="center" prop="remarks" />
      <el-table-column label="备注" width="150" align="center" prop="state" />
      <el-table-column label="客户采购订单号" width="150" align="center" prop="tabindex" />
      <el-table-column label="客户采购订单行项目" width="150" align="center" prop="tabindex" />
      <el-table-column label="是否远程监造" width="150" align="center" prop="tabindex" />
      <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="handleConfirmSelection"
      @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="操作">
            <el-button type="text" size="small">选择</el-button>
          </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>
  </div>

</template>
<style scoped>
/* 根据需求设置位置上下偏移 */
.offset {
  margin-top: 0px; /* 向上偏移5像素 */
  margin-bottom: 0px; /* 向下偏移5像素 */
}
</style>
<script>
import { getOrderList, getMaterialList, getCustomList} 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: '有货备库,无货定做'}
      ],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 订单表格数据
      orderList: [],
      //是否可编辑
      isDis: false,
      customDialogParams: {
        pageNum: 1,
        pageSize: 10,
        kunnr: '',
        name1: ''
      },
      addOrderParam: {
        kna1: null,
        bstkd: null,
        zsdshdz: null,
        orderid: null,
        pzh: null,
        state: null,
        dateRange: [],
        remarks: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {

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

      ],
    };
  },
  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';
      }
    },


    /** 序号 */
    rowOrderIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },

    handleDelete() {

    },

    handleSelectionChange() {

    },

    handleUpdate() {

    },
    /**----------------传递数据-------------**/
    handleConfirmSelection(selectedItems) {
      this.selectedMaterials = selectedItems;
      this.dialogMaterialVisible = false;
      console.log(this.selectedMaterials)
    },
    /**------------dialog中请求物料列表-------------**/
    queryMaterialList(queryParams) {
      this.materialDialogData = [
        {
          uid: '1',
          prodCategory: '产品1',
          model: '型号A',
          specification: '规格1',
          voltLevel: '110V',
          measureUnit: '个'
        },
        {
          uid: '2',
          prodCategory: '产品2',
          model: '型号B',
          specification: '规格2',
          voltLevel: '220V',
          measureUnit: '台'
        },
        {
          uid: '3',
          prodCategory: '产品3',
          model: '型号C',
          specification: '规格3',
          voltLevel: '380V',
          measureUnit: '件'
        },
        // 可以继续添加更多数据
      ];
      this.materialDialogTotal = 10
    },
    /**-----------------------选择客户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;
      });
    },

  },
};
</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;
}


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

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

</style>
