<template>
  <div>
    <div>
      <el-page-header @back="goBack" content="存货调价单"> </el-page-header>
    </div>
    <br /><br />
    <div>
      <el-form
        ref="screenForm"
        label-width="100px"
        size="small"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="单据编号">
              <el-input
                placeholder="请输入"
                disabled
                v-model="base.billId"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="调价日期">
              <el-date-picker
                v-model="base.startDate"
                type="datetime"
                disabled
                placeholder="请输入调价日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="调价部门">
              <el-input placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="调价业务员">
              <el-input placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="制单日期">
              <el-date-picker
                v-model="startDate"
                disabled
                type="datetime"
                placeholder="请输入制单日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="销售类型">
              <el-select placeholder="请选择销售类型" v-model="saleTypeId">
                <el-option
                  v-for="item in typeList"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="文件编码">
              <el-input placeholder="请输入" v-model="base.remark"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="" class="fr"> </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="mymain-container">
      <!-- 列表 -->
      <div class="table">
        <el-form v-if="!detail.length" size="small" label-position="left">
          <el-table
            v-loading="listLoading"
            :data="items"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
          >
            <el-table-column
              align="center"
              label="操作类型"
              prop="nname"
              min-width="160"
              show-overflow-tooltip
            >
              <!-- <el-button type="text" class="textColor">修改</el-button> -->
              <template slot-scope="scope">
                <el-button
                  type="text"
                  class="textColor"
                  @click="hanleDeleInd(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="销售类型"
              prop="saleTypeId"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-form-item>
                  <el-select
                    placeholder="请选择销售类型"
                    v-model="scope.row.saleTypeId"
                  >
                    <el-option
                      v-for="item in typeList"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="存货编码"
              prop="materialNumber"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.materialNumber"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="存货名称"
              prop="materialName"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.materialName"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="规格型号"
              prop="specification"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.specification"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="计量单位"
              prop="company"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.SalesType"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="批发价"
              prop="batchPrice"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.batchPrice"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="格力折扣"
              prop="retailPrice"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.retailPrice"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="返利类型"
              prop="rebateUseRate"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.rebateUseRate"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="生效日期"
              prop="startDate"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-date-picker
                    v-model="scope.row.startDate"
                    type="date"
                    placeholder="请输入调价日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="失效日期"
              prop="endDate"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-date-picker
                    v-model="scope.row.endDate"
                    type="date"
                    placeholder="请输入调价日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="是否促销价"
              prop="isPromote"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-select
                    v-model="scope.row.isPromote"
                    @change="hanleChange"
                    placeholder="请选择是否促销价"
                  >
                    <el-option
                      v-for="item in scope.row.isPromoteArr"
                      :key="item.bool"
                      :value="item.bool"
                      :label="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="数量"
              prop="qty"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.qty"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="现金钱包"
              prop="wallets"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-select
                    v-model="scope.row.isPublish"
                    @change="hanleChange"
                    placeholder="请选择现金钱包"
                  >
                    <el-option
                      v-for="item in scope.row.rebateList"
                      :key="item.bool"
                      :value="item.bool"
                      :label="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="发布"
              prop="isPublish"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-select
                    v-model="scope.row.isPublish"
                    @change="hanleChange"
                    placeholder="请选择是否发布"
                  >
                    <el-option
                      v-for="item in scope.row.isPublishArr"
                      :key="item.bool"
                      :value="item.bool"
                      :label="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <el-form :model="detail" v-else size="small" label-position="left">
          <el-table
            v-loading="listLoading"
            :data="detail"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
          >
            <el-table-column
              align="center"
              label="操作类型"
              prop="nname"
              min-width="160"
              show-overflow-tooltip
            >
              <!-- <el-button type="text" class="textColor">修改</el-button> -->
              <template slot-scope="scope">
                <el-button
                  type="text"
                  class="textColor"
                  @click="hanleDeleInd(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="销售类型"
              prop="saleTypeId"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-form-item>
                  <el-select
                    placeholder="请选择销售类型"
                    v-model="scope.row.saleTypeId"
                  >
                    <el-option
                      v-for="item in typeList"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="存货编码"
              prop="materialNumber"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.materialNumber"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="存货名称"
              prop="materialName"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.materialName"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="规格型号"
              prop="specification"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.specification"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="计量单位"
              prop="company"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.SalesType"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="批发价"
              prop="batchPrice"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.batchPrice"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="零售价"
              prop="retailPrice"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.retailPrice"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="返利使用比例"
              prop="rebateUseRate"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.rebateUseRate"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="生效日期"
              prop="startDate"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-date-picker
                    v-model="scope.row.startDate"
                    type="date"
                    placeholder="请输入调价日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="失效日期"
              prop="endDate"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-date-picker
                    v-model="scope.row.endDate"
                    type="date"
                    placeholder="请输入调价日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="是否促销价"
              prop="isPromote"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-select
                    v-model="scope.row.isPromote"
                    @change="hanleChange"
                    placeholder="请选择是否促销价"
                  >
                    <el-option
                      v-for="item in scope.row.isPromoteArr"
                      :key="item.bool"
                      :value="item.bool"
                      :label="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="数量"
              prop="qty"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.qty"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="支付钱包类型"
              prop="wallets"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-select
                    v-model="scope.row.isPublish"
                    @change="hanleChange"
                    placeholder="请选择支付钱包类型"
                  >
                    <el-option
                      v-for="item in scope.row.rebateList"
                      :key="item.bool"
                      :value="item.bool"
                      :label="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="发布"
              prop="isPublish"
              min-width="160"
              show-overflow-tooltip
              ><template slot-scope="scope">
                <el-form-item>
                  <el-select
                    v-model="scope.row.isPublish"
                    @change="hanleChange"
                    placeholder="请选择是否发布"
                  >
                    <el-option
                      v-for="item in scope.row.isPublishArr"
                      :key="item.bool"
                      :value="item.bool"
                      :label="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <el-dialog
          title="提示"
          :visible.sync="centerDialogVisible"
          width="50%"
          center
          class="dia"
        >
          <el-form
            :model="form"
            ref="form"
            label-width="80px"
            :inline="false"
            size="normal"
          >
            <el-form-item label="产品类型">
              <el-select v-model="materialId" placeholder="请选择" width="100%">
                <el-option
                  v-for="item in materialLis"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="hanleAdd">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <div class="btn-group clearfix">
      <el-button size="small">重置</el-button>
      <el-button size="small" type="primary" @click="hanleSbumit"
        >提交</el-button
      >
      <el-button
        style="float: right"
        type="primary"
        size="small"
        @click="(centerDialogVisible = true), getMaterialList()"
        >添加</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  getProductRriceAdd,
  getProductRriceConfirm,
  getProductRriceDetail,
  getProductRriceEdit,
  getProductRriceList,
  getProductRriceRevoke,
  getProductRriceSubmit,
  getTypeList,
  // getTree,
  getMaterialList,
  getRebate,
} from "@/api/basic_data/material";
import { thisTypeAnnotation } from "@babel/types";
export default {
  data() {
    return {
      listLoading: false,
      screenForm: {},
      base: {
        adminCompanyId: "",
        adminWebsitId: "",
        billId: "",
        examineNote: "",
        examineResult: true,
        examineStatus: "",
        id: null,
        operatorId: "",
        operatorName: "",
        remark: "",
        saleTypeId: "",
      },
      items: [],
      centerDialogVisible: false,
      materialLis: [],
      materialId: "",
      rebateList: [],
      typeList: [],
      saleTypeId: "",
      remark: "",
      detail: [],
      form: {},
      startDate: "",
    };
  },
  mounted() {
    let params = {
      pageNum: 1,
      pageSize: 10,
      saleCode: "",
      saleName: "",
      status: 1,
    };
    getTypeList(params).then((res) => {
      this.typeList = res.data.records;
    });
  },
  methods: {
    hanleChange(e) {
      console.log(e);
    },
    goBack() {
      this.$parent.show = 1;
    },
    indexMethod(index) {
      console.log(index);
    },
    hanleDeleInd(index) {
      this.items.splice(index, 1);
    },
    getMaterialList() {
      let rebateParams = {
        pageNum: 1,
        pageSize: 10,
        mainName: "",
        saleTypeCode: "",
        saleTypeName: "",
        status: 1,
      };
      getRebate(rebateParams).then((res) => {
        this.rebateList = res.data.records;
      });
      let params = {
        pageNum: 1,
        pageSize: 10,
        keyword: "",
      };
      getMaterialList(params).then((res) => {
        this.materialLis = res.data.records;
      });
    },
    hanleAdd() {
      this.centerDialogVisible = false;
      this.items.push({
        baseUnitId: "",
        batchPrice: "",
        billId: "",
        endDate: "",
        id: null,
        isPromote: "",
        isPublish: "",
        materialId: this.materialId,
        materialName: "",
        materialNumber: "",
        parentId: "",
        qty: "",
        rebateUseRate: "",
        retailPrice: "",
        saleTypeId: this.saleTypeId,
        specification: "",
        startDate: "",
        wallets: [
          {
            billId: "44",
            id: "",
            mainId: "",
            parentId: "",
            parentItemId: "",
          },
        ],
        rebateList: this.rebateList,
        isPublishArr: [
          {
            value: "是",
            bool: 1,
          },
          {
            value: "否",
            bool: 0,
          },
        ],
        isPromoteArr: [
          {
            value: "是",
            bool: 1,
          },
          {
            value: "否",
            bool: 0,
          },
        ],
      });
    },
    hanleSbumit() {
      const params = {
        ...this.base,
        items: this.items,
      };
      getProductRriceAdd(params).then((res) => {
        this.items = {
          baseUnitId: "32",
          batchPrice: "23",
          billId: "",
          endDate: "",
          id: null,
          isPromote: "",
          isPublish: "",
          materialId: "",
          materialName: "",
          materialNumber: "",
          parentId: "",
          qty: "",
          rebateUseRate: "",
          retailPrice: "",
          saleTypeId: "",
          specification: "",
          startDate: "",
          wallets: [],
          isPublishArr: [
            {
              value: "是",
              bool: 1,
            },
            {
              value: "否",
              bool: 0,
            },
          ],
          isPromoteArr: [
            {
              value: "是",
              bool: 1,
            },
            {
              value: "否",
              bool: 0,
            },
          ],
        };
        this.base = {
          adminCompanyId: "5454",
          adminWebsitId: "345",
          billId: "34324",
          examineNote: "234",
          examineResult: true,
          examineStatus: "2342",
          id: null,
          operatorId: "234",
          operatorName: "3223",
          remark: "2332",
          saleTypeId: "2332",
        };

        getProductRriceDetail({ id: res.data }).then((res) => {
          this.base = {
            ...res.data,
          };

          this.detail = res.data.items;
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-date-editor--date {
  width: 100%;
}
.dia .el-select--normal {
  width: 100%;
}
</style>
