<template>
  <div id="configureContentParameters">
    <el-form-item
      v-if="
        listData.goodsType === 1
          ? rules['studyCount'][0].status
          : listData.goodsType === 3 || listData.goodsType === 4
          ? true
          : false
      "
      :label="listData.goodsType === 3 ? '补考次数' : '学习次数'"
      prop="studyCount"
      style="margin-top: 10px"
    >
      <el-input
        :style="`max-width:${inputWidth}px;`"
        v-model="listData.studyCount"
      ></el-input>
    </el-form-item>
    <template v-if="listData.goodsType === 1">
      <el-form-item
        v-if="rules['examNumber'][0].status"
        label="考试次数"
        style="margin-top: 12px"
        prop="examNumber"
      >
        <el-input
          :style="`max-width:${inputWidth}px;`"
          v-model="listData.examNumber"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="前培(刷题)机会"
        style="margin-top: 12px"
        prop="doNumber"
        v-if="rules['doNumber'][0].status"
      >
        <el-input
          :style="`max-width:${inputWidth}px;`"
          v-model="listData.doNumber"
        ></el-input>
      </el-form-item>
    </template>
    <el-form-item
      v-if="
        listData.goodsType === 1 && rules['serviceTimeType'][0].status
          ? true
          : listData.goodsType === 2 || listData.goodsType === 6
          ? true
          : false
      "
      class="positions"
      label="学习服务期"
      style="margin-top: 12px"
      prop="serviceTimeType"
    >
      <el-select
        v-model="listData.serviceTimeType"
        placeholder="请选择学习服务期类型"
        @change="initServiceFun"
      >
        <el-option
          v-for="(item, index) in styleType"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-form-item
        class="inline_block"
        v-if="
          listData.serviceTimeType === 1 ||
          listData.serviceTimeType === 2 ||
          listData.serviceTimeType === 3
        "
        label-width="140px"
        label="购买那刻开始计算"
        prop="serviceTimeNum"
      >
        <el-input
          class="timeInputSty"
          v-model="listData.serviceTimeNum"
        ></el-input>
        <span style="margin-left: 6px">{{
          listData.serviceTimeType === 1
            ? "年"
            : listData.serviceTimeType === 2
            ? "月"
            : listData.serviceTimeType === 3
            ? "天"
            : ""
        }}</span>
      </el-form-item>
      <el-form-item
        class="inline_block"
        v-if="listData.serviceTimeType === 4"
        label-width="10px"
        prop="studyTimeArrays"
      >
        <el-date-picker
          v-model="listData.studyTimeArrays"
          type="datetimerange"
          value-format="timestamp"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeDataTimeStudy(listData.studyTimeArrays)"
        >
        </el-date-picker>
      </el-form-item>
    </el-form-item>
  </div>
</template>

<script>
export default {
  props: ["listData", "rules"],
  data() {
    return {
      inputWidth: 217,
      styleType: [
        {
          label: "按年限",
          value: 1,
        },
        {
          label: "按月限",
          value: 2,
        },
        {
          label: "按天限",
          value: 3,
        },
        {
          label: "按具体时间区间",
          value: 4,
        },
      ],
    };
  },
  methods: {
    /**
     * 重置学习服务期时间值
     */
    initServiceFun() {
      this.$set(this.listData, "serviceTimeNum", "");
      this.$set(this.listData, "studyTimeArrays", []);
      this.$bus.$emit("initTimeVal");
    },
    changeDataTimeStudy(arr) {
      if (arr && arr[0] === arr[1]) {
        this.$message.warning("开始时间与结束时间不允许相同");
        this.$set(this.listData, "studyTimeArrays", []);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.timeInputSty {
  width: 90px;
}
/deep/.el-input__inner {
  text-align: center;
}
.inline_block {
  display: inline-block;
}
</style>
