<template>
  <div class="product-service-info">
    <el-row :gutter="20">
      <el-col :span="8">
        <h4>可选服务列表</h4>
        <el-card shadow="never">
          <div slot="header">
            <el-row :gutter="10">
              <el-col :span="20">
                <el-input
                  placeholder="请输入搜索关键字"
                  clearable
                  v-model="search.name"
                  style="width: 100%"
                ></el-input>
              </el-col>

              <el-col :span="4">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="handleSearch"
                >
                  搜索
                </el-button>
              </el-col>
            </el-row>
          </div>

          <el-scrollbar style="height: 210px;">
            <div
              v-for="(item, index) in search.resultList"
              :key="index"
              class="item"
            >
              <el-checkbox
                v-model="item.checked"
                @change="handleSelectedService(item)"
              >
                {{ item.featureName }}
              </el-checkbox>
            </div>
          </el-scrollbar>
        </el-card>
      </el-col>

      <el-col :span="16">
        <h4>已添加的服务</h4>
        <el-table
          border
          stripe
          height="321px"
          style="width: 100%"
          :data="selectedServices"
        >
          <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="featureLevelChn"
            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"
                ></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"
                ></el-input-number>
                <span> 次</span>
              </div>
              <div v-if="scope.row.limitType == 3">
                无限制，开通即可
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="80" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button @click="handleDel(scope.row)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CommodityService from "@/api/commodity";

export default {
  name: "ProductServiceInfo",
  data() {
    return {
      search: {
        name: "", // 服务名称
        resultList: [],
        resultPagination: {
          currentPage: 1,
          pageSizes: [10, 30, 50, 100],
          pageSize: 10,
          total: 0,
        },
      },
      selectedServices: [], // 已选择的服务项目
    };
  },
  mounted() {
    this.callFindServices();
  },
  methods: {
    /**
     * 查询服务；
     */
    handleSearch() {
      this.callFindServices();
    },

    /**
     * “请选择服务列表”用户选择改变；
     */
    handleSelectedService(service) {
      if (service && service.checked) {
        if (this.selectedServices) {
          var findItem = this.selectedServices.find((item) => {
            return item.featureId === service.featureId;
          });
          if (findItem) {
            this.$message.warning("服务已选择！");
          } else {
            this.selectedServices.push(service);
          }
        } else {
          this.selectedServices = [service];
        }
      } else {
        this.handleDel(service);
      }
    },

    /**
     * 移除已选择服务;
     */
    handleDel(row) {
      if (row && this.selectedServices) {
        const findItemIndex = this.selectedServices.findIndex((item) => {
          return item.featureId === row.featureId;
        });
        if (findItemIndex > -1) {
          var tempList = [...this.selectedServices];
          tempList.splice(findItemIndex, 1);
          this.selectedServices = tempList;
        }
      }
      // 服务列表勾选状态
      if (row && this.search.resultList) {
        const findItemIndex = this.search.resultList.findIndex((item) => {
          return item.featureId === row.featureId;
        });
        if (findItemIndex > -1) {
          this.search.resultList[findItemIndex].checked = false;
        }
      }
    },

    callFindServices() {
      this.loading = true;
      let _this = this;
      CommodityService.findServices({
        featureName: this.search.name,
        pageNum: 1,
        pageSize: 1000,
      })
        .then((val) => {
          _this.search.resultPagination.total = val.data.total;
          _this.search.resultPagination.pageSize = val.data.size;
          _this.search.resultPagination.currentPage = val.data.current;
          _this.search.resultList = val.data.records;
        })
        .catch((err) => {
          _this.$message.error(err);
        })
        .finally(() => {
          _this.loading = false;
        });
    },

    /**
     * 获取“商品服务”信息；
     * 选择服务检查不通过，返回 false;
     */
    getInfo() {
      /**
       * 选择服务检查：
       * 1. 至少选择一项服务；
       * 2. 服务终止条件必填；
       */
      const tempSelectedServices = this.selectedServices || [];
      if (tempSelectedServices.length === 0) {
        this.$message.error("商品服务信息不合法，请添加至少一项产品服务！");
        return false;
      } else {
        const featureItems = [];
        for (const item of tempSelectedServices) {
          let tempItem = {
            featureId: item.featureId,
            featureName: item.featureName,
            limitType: item.limitType,
            itemDesc: item.featureDesc,
          };

          if (item.limitType === "1") {
            if (!item.addValue) {
              this.$message.error("商品服务信息不合法，请输入服务终止条件！");
              return false;
            }
            tempItem.unit = "M";
            tempItem.addValue = item.addValue;
          } else if (item.limitType === "2") {
            if (!item.addValue) {
              this.$message.error("商品服务信息不合法，请输入服务终止条件！");
              return false;
            }
            tempItem.unit = "N";
            tempItem.addValue = item.addValue;
          } else {
            tempItem.unit = "Y";
            tempItem.addValue = 999;
          }

          featureItems.push(tempItem);
        }

        return featureItems;
      }
    },

    /**
     * 重置“商品服务”信息；
     */
    resetInfo() {
      this.selectedServices = [];

      // 可选服务列表的勾选状态移除；
      const canServicelist = this.search.resultList || [];
      if (canServicelist.length > 0) {
        canServicelist.forEach((item) => {
          item.checked = false;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.product-service-info {
  margin-bottom: 18px;

  .item {
    padding: 8px 0;
  }

  ::v-deep.el-scrollbar__wrap {
    overflow: auto;
  }
}
</style>
