<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="80%"
    center
    append-to-body
    :show-close="false"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
  >
    <div
      v-loading="loading"
      element-loading-text="拼命加载中......请稍等"
      class="dialog-commodity-edit"
    >
      <div class="product-enable" v-if="commodityInfo">
        <el-switch v-model="commodityInfo.enable"> </el-switch>
        <span class="label">是否启用</span>
      </div>

      <product-base-info ref="productBaseInfo"></product-base-info>

      <h4>已添加的服务：</h4>
      <el-table
        border
        stripe
        v-if="commodityInfo"
        :data="commodityInfo.featureItemList"
      >
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="featureName"
          label="服务名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="featureLevel"
          label="服务级别"
          width="160"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="服务终止条件"
          width="240"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!--  1:时间限制  2:数量限制  3：无限制，只需购买开通即可 -->
            <div v-if="scope.row.limitType == 1">
              <el-input-number
                :controls="false"
                :min="1"
                :max="120"
                v-model="scope.row.addValue"
                disabled
              ></el-input-number>
              <span> 月</span>
            </div>
            <div v-if="scope.row.limitType == 2">
              <el-input-number
                :controls="false"
                :min="1"
                :max="1000000"
                v-model="scope.row.addValue"
                disabled
              ></el-input-number>
              <span> 次</span>
            </div>
            <div v-if="scope.row.limitType == 3">
              无限制，开通即可
            </div>
          </template>
        </el-table-column>
      </el-table>

      <br />

      <div>
        <el-button type="primary" class="action-button" @click="handleSubmit">
          提交修改
        </el-button>
        <el-button class="action-button" @click="handleClose">
          取 消
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import ProductBaseInfo from "@/pages/commodity/add/components/base-info.vue";
import CommodityService from "@/api/commodity";

export default {
  name: "DialogCommodityEdit",
  components: {
    ProductBaseInfo,
  },
  data() {
    return {
      loading: false,
      title: "商品详情",
      visible: false,

      // open 传入；
      commodityInfo: null,
    };
  },
  methods: {
    /**
     * 打开弹窗；
     */
    open(commodityInfo) {
      this.visible = true;
      this.$nextTick(() => {
        this.commodityInfo = commodityInfo;
        this.$refs.productBaseInfo.setInfo(commodityInfo);
      });
    },

    handleClose() {
      this.visible = false;
      this.$emit("close");
    },

    handleSubmit() {
      const baseInfo = this.$refs.productBaseInfo.getInfo();
      if (!baseInfo) {
        return false;
      }

      const args = Object.assign(this.commodityInfo, baseInfo);
      // 第二次提交问题；
      if (typeof args.featureItems === "string") {
        // featureItems 服务器返回为 JSON 字符串；
        args.featureItems = JSON.parse(args.featureItems);
      }

      const _this = this;
      _this.loading = true;
      CommodityService.save(args)
        .then((val) => {
          _this.$message.success(val.msg);
        })
        .catch((err) => {
          _this.$message.error(err);
        })
        .finally(() => {
          _this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-commodity-edit {
  .product-enable {
    margin-top: 16px;
    margin-bottom: 24px;

    .label {
      margin-left: 8px;
    }
  }

  .action-button {
    font-size: 16px;
    font-weight: 600;
    margin-top: 8px;
  }

  ::v-deep.el-tabs__item {
    font-size: 18px;
    font-weight: 700;
  }
}
</style>
