<template>
  <d2-container v-loading="isLoading">
    <div class="addHouser-container">
      <el-form :model="form"
               label-width="120px"
               ref="form"
               :rules="rules">
        <el-form-item label="客户名称："
                      prop="customerName">
          <el-select v-model="form.customerName"
                     placeholder="请选择"
                     class="filter-item-same-width">
            <el-option v-for="item in customerNameList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="产品类型："
                      prop="productType">
          <el-select v-model="form.productType"
                     placeholder="请选择"
                     @change="getAllModel"
                     class="filter-item-same-width">
            <el-option v-for="item in typeList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="产品型号："
                      prop="productModel">
          <el-select v-model="form.productModel"
                     placeholder="请选择"
                     class="filter-item-same-width">
            <el-option v-for="item in allModelList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="付费模式："
                      prop="paymentModel">
          <el-select v-model="form.paymentModel"
                     placeholder="请选择"
                     class="filter-item-same-width">
            <el-option v-for="item in paymentModelList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="计划采购数量："
                      prop="projectedNumber">
          <el-input v-model="form.projectedNumber"
                    placeholder="请填写"
                    autocomplete="off"
                    maxlength="50"
                    :show-word-limit="true"
                    class="filter-item-same-width" />
        </el-form-item>

        <el-form-item label="预计交货时间："
                      prop="estimatedDeliveryTime">
          <el-date-picker v-model="form.estimatedDeliveryTime"
                          type="date"
                          value-format="yyyy-MM-dd hh:mm:ss"
                          :picker-options="pickerOptions"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注："
                      prop="">
          <el-input v-model="form.remark"
                    placeholder="请填写"
                    autocomplete="off"
                    maxlength="30"
                    :show-word-limit="true"
                    class="filter-item-same-width" />

        </el-form-item>
      </el-form>
    </div>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary"
                 style="margin-left: 150px"
                 :loading="ifSubmit"
                 @click="submit('form')">保存</el-button>
    </span>
  </d2-container>
</template>

<script>
import { mapState, mapActions } from "vuex";
import {
  addPurchaseOrder,
  getProductType,
  getOneProduct,
  editProduct,
  getCustomerName,
  getAllModel,
  getPurchaseOrderPaymentModel,
} from "@/libs/common/constant";
import { selectList, generateTiemList, weekList } from "@/utils/json";
import dayjs from "dayjs";
export default {
  data() {
    return {
      isLoading: false,
      form: {
        customerName: "",
        productType: "",
        productModel: "",
        paymentModel: "",
        projectedNumber: "",
        estimatedDeliveryTime: "",
      },
      ifSubmit: false,
      typeList: [],
      customerNameList: [],
      allModelList: [],
      paymentModelList: [],
      // 禁用今天之前的日期
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      // 编辑
      editId: this.$route.params.id,
      rules: {
        customerName: [{ required: true, message: "请填写", trigger: "blur" }],
        projectedNumber: [
          { required: true, message: "请填写", trigger: "blur" },
        ],
        estimatedDeliveryTime: [
          { required: true, message: "请填写", trigger: "blur" },
        ],
        productType: [{ required: true, message: "请选择", trigger: "change" }],
        productModel: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        paymentModel: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        productType: [{ required: true, message: "请选择", trigger: "change" }],
        productType: [{ required: true, message: "请选择", trigger: "change" }],
      },
    };
  },
  async created() {
    // 获取 字典 数据
    await this.getConstant();
    if (this.editId) {
      // 传过来 openid  获取 详情
      this.isLoading = true;
      await this.getOneProduct(this.editId);
    }
  },
  computed: {
    // 获取 此页面 路径
    ...mapState("d2admin/page", ["current"]),
  },
  methods: {
    ...mapActions("d2admin/page", ["close", "add"]),
    // 获取 字典数据
    async getConstant() {
      await this.getProductType();
      await this.getCustomerName();
      await this.getPurchaseOrderPaymentModel();
    },
    selectList(myJson, a) {
      return selectList(myJson, a);
    },
    weekLista() {
      return weekList;
    },
    generateTiemList() {
      return generateTiemList();
    },
    // 获取 产品 类型
    async getProductType() {
      const res = await this.$api.GET(`${getProductType.url}`);
      this.typeList = this.selectList(res);
    },
    // 获取 客户 名称
    async getCustomerName() {
      const res = await this.$api.GET(`${getCustomerName.url}`);
      this.customerNameList = this.selectList(res);
      console.log(this.customerNameList);
    },
    // 获取 产品 型号
    async getAllModel() {
      const res = await this.$api.GET(
        `${getAllModel.url}${this.form.productType}`
      );
      this.allModelList = this.selectList(res);
    },
    // 获取 付费模式
    async getPurchaseOrderPaymentModel() {
      const res = await this.$api.GET(`${getPurchaseOrderPaymentModel.url}`);
      this.paymentModelList = this.selectList(res);
    },
    async cancel() {
      var tagName = this.current;
      await this.close({ tagName });
      this.$router.push("/purchaseOrderList");
    },
    submit(detail) {
      if (this.ifSubmit) {
        return;
      }
      this.ifSubmit = true;
      this.$refs[detail].validate(async (valid) => {
        if (valid) {
          try {
            // 提交前 处理 数据
            // 拼接 营业时间 转换 时间
            // var data = await this.arrangeData();
            // 判断 参数 确定是修改还是 添加
            if (this.editId) {
              console.log(this.form, "编辑提交的参数");
              //  提交接口
              this.form.openId = this.editId;
              const res = await this.$api.POST(`${editProduct.url}`, this.form);
            } else {
              console.log(this.form, "添加提交的参数");
              // 提交 接口
              await this.addPurchaseOrder(this.form);
            }
            await this.cancel();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          } catch (error) {}
        } else {
          console.log("error submit!!");
          this.ifSubmit = false;
          return false;
        }
      });
    },
    // 添加 产品
    async addPurchaseOrder(data) {
      const res = await this.$api.POST(`${addPurchaseOrder.url}`, data);
      console.log(res, "添加产品接口成功的返回");
    },
    // 编辑
    // 获取 详情
    async getOneProduct(openId) {
      const res = await this.$api.GET(`${getOneProduct.url}${openId}`);
      console.log(res);
      this.form = res;
      this.isLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
