<template>
  <el-form
    :model="ruleForm"
    status-icon
    :rules="rulesThis"
    ref="ruleForm"
    :size="'mini'"
    label-width="110px"
    class="demo-ruleForm"
  >
    <el-row>
      <el-col :span="1" class="dtitle">
        <ul style="padding: 40px 0 0 0">
          <li>固</li>
          <li>定</li>
          <li>成</li>
          <li>本</li>
        </ul></el-col
      >
      <el-col :span="23" class="dmain">
        <el-row>
          <el-col :span="8">
            <el-form-item label="证书费" prop="a1">
              <el-input
                placeholder="证书费"
                v-model="ruleForm.a1"
                type="number"
                :min="0"
                :max="9999999999.99"
                :step="2"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包装费" prop="a2">
              <el-input
                placeholder="包装费"
                v-model="ruleForm.a2"
                type="number"
                :min="0"
                :max="9999999999.99"
                :step="2"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成本工艺费" prop="a3">
              <el-input
                placeholder="成本工艺费"
                v-model="ruleForm.a3"
                type="number"
                :min="0"
                :max="9999999999.99"
                :step="2"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="加标费" prop="a4">
              <el-input
                placeholder="加标费"
                v-model="ruleForm.a4"
                type="number"
                :min="0"
                :max="9999999999.99"
                :step="2"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="打样费" prop="a5">
              <el-input
                placeholder="打样费"
                v-model="ruleForm.a5"
                type="number"
                :min="0"
                :max="9999999999.99"
                :step="2"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开模费" prop="a6">
              <el-input
                placeholder="开模费"
                v-model="ruleForm.a6"
                type="number"
                :min="0"
                :max="9999999999.99"
                :step="2"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="调样费" prop="a7">
              <el-input
                placeholder="调样费"
                v-model="ruleForm.a7"
                type="number"
                :min="0"
                :max="9999999999.99"
                :step="2"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="市场价" prop="a8">
              <el-input
                placeholder="市场价"
                v-model="ruleForm.a8"
                type="number"
                :min="0"
                :max="9999999999.99"
                :step="2"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="含税成本裸价" prop="a9">
              <el-input
                placeholder="含税成本裸价"
                v-model="ruleForm.a9"
                type="number"
                :min="0"
                :max="9999999999.99"
                :step="2"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul>
          <li>阶</li>
          <li>梯</li>
          <li>成</li>
          <li>本</li>
        </ul></el-col
      >
      <el-col :span="23" class="dmain" style="padding-left: 18px">
        <el-table
          :data="tableData"
          :size="'mini'"
          border
          stripe
          style="width: 100%"
        >
          <el-table-column prop="s1" label="起订量(>=)" />
          <el-table-column prop="s2" label="成本裸价" />
          <el-table-column prop="s3" label="成本合计" />
          <el-table-column prop="s4" label="其中运费" />
          <el-table-column prop="s5" label="使用状态" />
          <el-table-column fixed="right">
            <template slot="header" slot-scope="scope">
              <span>操作</span>
              <el-tooltip effect="dark" content="添加阶梯" placement="top">
                <i
                  class="el-icon-circle-plus-outline tb-icon fr"
                  @click="openEdit('add', {})"
                ></i>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-tooltip effect="dark" content="修改" placement="top">
                <i class="el-icon-edit tb-icon" @click="openEdit('')"></i>
              </el-tooltip>
              <el-tooltip effect="dark" content="禁/启用" placement="top">
                <i
                  class="el-icon-video-pause tb-icon"
                  @click="openEdit('')"
                ></i>
                <!-- el-icon-video-play -->
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹窗 新增/修改 -->
        <cost-form-add-edit
          :id="modelId"
          :show-model="showModel"
          :sitem="sitem"
          @refresh="refreshEdit"
          @cancel="showModel = false"
        /> </el-col
    ></el-row>
  </el-form>
</template>
   <script>
import asyncRequest from "@/apis/service/goodStore/active";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
import costFormAddEdit from "./costFormAddEdit";
export default {
  name: "activeAdd",
  mixins: [resToken],
  components: {
    costFormAddEdit,
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "activeAdd"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      showModel: false,
      modelId: "000",
      sitem: {},
      size: "small",
      rulesThis: this.rules,
      activeName: "1",
      loading: false,
      tableData: [{ id: 1, s1: "1", s2: "-", s3: "-", s4: "-", s5: "0" }],
      rules: {
        a1: [
          {
            required: true,
            message: "证书费应为合法数字",
            trigger: "blur",
          },
        ],
        a2: [
          {
            required: true,
            message: "包装费应为合法数字",
            trigger: "blur",
          },
        ],
        a3: [
          {
            required: true,
            message: "成本工艺费应为合法数字",
            trigger: "blur",
          },
        ],
        a4: [
          {
            required: true,
            message: "加标费应为合法数字",
            trigger: "blur",
          },
        ],
        a5: [
          {
            required: true,
            message: "打样应为合法数字",
            trigger: "blur",
          },
        ],
        a6: [
          {
            required: true,
            message: "开模费应为合法数字",
            trigger: "blur",
          },
        ],
        a7: [
          {
            required: true,
            message: "调样费应为合法数字",
            trigger: "blur",
          },
        ],
        a8: [
          {
            required: true,
            message: "市场价应为合法数字",
            trigger: "blur",
          },
        ],
        a9: [
          {
            required: true,
            message: "含税成本裸价应为合法数字",
            trigger: "blur",
          },
        ],
      },
      ruleForm: {},
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.loading = true;
      this.resetFormData();
      this.rulesThis = this.rules;
      await this.resetForm();
      this.loading = false;
    },
    handleClick(row) {
      console.log(row);
    },
    refreshEdit(e) {
      console.log(e);
    },
    openEdit(type, sitem) {
      this.sitem = sitem;
      this.modelId = type;
      this.showModel = true;
    },
    async initData() {
      this.loading = true;
      let res = await asyncRequest.detail({ id: this.id });
      this.loading = false;
      if (res.code === 0) {
        await this.resetForm(res.data);
      }
    },
    async resetForm() {
      // 重置
      await this.$nextTick(async () => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.resetFormData();
        }
      });
    },
    resetFormData() {
      this.ruleForm = {
        a1: "",
        a2: "",
        a3: "",
        a4: "",
        a5: "",
        a6: "",
        a7: "",
        a8: "",
        a9: "",
        b1: [],
      };
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let change = false;
          this.mock.forEach((v1) => {
            if (v1.change && v1.change.length > 0) {
              change = true;
            }
          });
          if (!change) {
            this.ruleForm.spec = "规格！";
            return;
          } else {
            this.ruleForm.spec = "";
            let table = false;
            let hasnot = false;
            let stock = [];
            this.right.specList.forEach((v1) => {
              if (v1) {
                v1.forEach((v2) => {
                  if (v2 && v2.limit && v2.limit.length > 0) {
                    let list = [];
                    v2.limit.forEach((v3) => {
                      if (v3.num != 0 && v3.price != 0) {
                        table = true;
                        list.push(v3);
                      }
                      if (
                        (v3.num != 0 && v3.price == 0) ||
                        (v3.num == 0 && v3.price !== 0)
                      ) {
                        hasnot = true;
                      }
                    });
                    if (list.length > 0) {
                      let model = Object.assign({}, v2);
                      model.limit = list;
                      stock.push(model);
                    }
                  }
                });
              }
            });

            if (hasnot) {
              this.ruleForm.table =
                "起订量与成本价需成对填写，未成对请设为零！";
            } else {
              if (!table) {
                this.ruleForm.table = "至少填写一堆起订量与成本价！";
              } else {
                this.ruleForm.table = "";
                this.loading = true;
                let obj = JSON.parse(JSON.stringify(this.ruleForm));
                obj.stock = stock;
                obj.catid = obj.catid[obj.catid.length - 1];
                obj.image = obj.image.join();
                //split(",");
                console.log(obj);
                let res = {};
                if (this.id === "add") {
                  delete obj["id"];
                  res = await asyncRequest.add(obj);
                } else {
                  res = await asyncRequest.update(obj);
                }
                this.loading = false;
                if (res.code === 0) {
                  let title = this.id === "add" ? "添加成功" : "修改成功";
                  this.$notify.success({
                    title,
                    message: "",
                  });
                  // 刷新
                  this.$emit("refresh");
                }
              }
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
   <style lang="scss" scoped>
</style>
   