<template>
  <div class="finance-exam-one-form">
    <el-table
      :data="tableData"
      stripe
      border
      :size="'mini'"
      style="width: 100%"
    >
      <el-table-column
        prop="skuCode"
        label="商品编码"
        show-overflow-tooltip
        width="170"
      />
      <el-table-column
        prop="good_name"
        label="商品名称"
        show-overflow-tooltip
      />
      <el-table-column prop="is_activity" label="是否使用活动价" width="220px">
        <template slot-scope="scope">
          <el-select v-model="scope.row.is_activity" placeholder="是否使用活动价" size="mini">
              <el-option value="1" label="是" />
              <el-option value="0" label="否" />
          </el-select>
        </template>
      </el-table-column>

     <el-table-column prop="settle_price" label="结算金额" width="120px">
        <template slot-scope="scope">
            <digital-input
              :values="scope.row.settle_price"
              :placeholder="'结算金额'"
              :min="0"
              :max="100000000000"
              :position="'right'"
              :precision="2"
              :size="'mini'"
              :controls="false"
              :append="'元'"
              @reschange="budget_total_change($event,scope)"
            />
        </template>
      </el-table-column>

      <el-table-column
        prop="activity_stock"
        label="活动库存"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="moq_num"
        label="起订量"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="cost_price"
        label="成本单价(元)"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="sale_price"
        label="非活动价(元)"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="activity_price"
        label="活动价(元)"
        width="100"
        show-overflow-tooltip
      />

      <el-table-column fixed="right" width="80">
        <template slot="header" slot-scope="scope">
          <span>操作</span>
        </template>
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="编辑成本" placement="top">
            <i class="el-icon-edit tb-icon" @click="openModal(scope.row)"></i>
          </el-tooltip>
          <el-tooltip effect="dark" content="查看商品信息" placement="top">
            <i
              class="el-icon-view tb-icon"
              @click="showGoodModelFun(scope.row.skuCode)"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <set-active-price-form
      :sitem="sfinditem"
      :showModel="showModel"
      @refresh="editRefresh"
      @cancel="showModel = false"
    />
    <show-good-data-modal
      :show-model="showGoodModel"
      :skuCode="showGoodId"
      @cancel="showGoodModel = false"
    />
    <el-col
      :span="24"
      style="
        text-align: right;
        padding: 15px 0 15px 0;
        border-top: 1px solid #dcdfe6;
      "
    >
      <el-button :size="'mini'" type="primary" @click="submitForm"
        >保 存
      </el-button>
    </el-col>
  </div>
</template>
   <script>
import asyncRequest from "@/apis/service/goodStore/active";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
import setActivePriceForm from "./set-active-price-form";
import showGoodDataModal from "@/components/show-good-data-modal";

export default {
  name: "financeExamOneForm",
  mixins: [resToken],
  props: ["id", "type", "sitem", "newTime"],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
  },
  components: {
    setActivePriceForm,
    showGoodDataModal,
  },
  data() {
    return {
      status: "",
      loading: false,
      showModel: false,
      showGoodModel: false,
      showGoodId: "",
      sfinditem: {},
      tableData: [],
    };
  },
  watch: {
    newTime: function (val) {
      if (val) {
        this.initForm();
      }
    },
  },
  mounted() {
    this.initForm();
  },
  methods: {
    budget_total_change(e,scope){
      scope.row.settle_price = e + "";
    },
    async initForm() {
      this.loading = true;
      this.resetFormData();
      this.loading = false;
    },
    editRefresh(e) {
      this.showModel = false;
      const { skuCode, activity_price } = JSON.parse(JSON.stringify(e));
      const aindex = this.tableData.findIndex((eis) => eis.skuCode === skuCode);
      if (aindex !== -1) {
        this.tableData[aindex].activity_price = activity_price;
        this.$set(this.tableData, aindex, this.tableData[aindex]);
      }
    },
    showGoodModelFun(skuCode) {
      this.showGoodModel = true;
      this.showGoodId = skuCode;
    },
    openModal(e) {
      this.sfinditem = JSON.parse(JSON.stringify(e));
      this.showModel = true;
    },
    resetFormData() {
      this.tableData = [];
      const { info, status } = this.sitem;
      this.status = status || "";
      this.tableData =
        info && info.length > 0 ? JSON.parse(JSON.stringify(info)) : [];
    },

    async submitForm() {
      if (!this.loading) {
        this.loading = true;
        const { activity_code } = this.sitem;
        let ruleForm = {
          activity_code: activity_code || "",
          good_list: [],
        };
        let list = JSON.parse(JSON.stringify(this.tableData));
        let newlist = [];
        list.forEach((e) => {
          let item = {
            id: e.id,
            activity_price: e.activity_price,
            is_activity:e.is_activity,
            settle_price:e.settle_price
          };
          newlist.push(item);
        });

        ruleForm.good_list = JSON.parse(JSON.stringify(newlist));
        let res = await asyncRequest.setActivity(ruleForm);
        this.loading = false;
        if (res && res.code === 0) {
          this.$notify.success({
            title: "提交成功！",
            message: "",
          });
          // 刷新
          this.$emit("refresh", true);
        }
      }
    },
  },
};
</script>
   <style lang="scss" scoped>
.activeAdd {
  .activeAdd-title {
    border-top: 1px solid #ebeef5;
    span {
      height: 50px;
      line-height: 50px;
      font-family: "微软雅黑", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16fpx;
      text-align: left;
    }
  }
  /deep/ .ddiv {
    border-top: 1px solid #dcdfe6;
  }
  /deep/ .dtitle {
    width: 40px;
    text-align: center;
    height: 100%;
    min-height: 100%;
    ul {
      padding: 20px 0 0 0;
    }
  }
  /deep/ .dmain {
    padding: 20px 0 0 0;
    width: calc(100% - 40px);
    border-left: 1px solid #dcdfe6;
  }
}
</style>
   