<template>
  <div id="productInformation">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="年份" prop="year">
          <el-date-picker
            v-model="listData.year"
            type="year"
            value-format="yyyy"
            placeholder="请选择年份"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="供应方（服务）" prop="supplyId" :key="13">
          <el-select
            v-model="listData.supplyId"
            placeholder="请选择供应方（服务）"
          >
            <el-option
              v-for="(item, index) in paysupply"
              :key="index"
              :label="`${item.supplyName}(${item.serveName})`"
              :value="item.supplyId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品类型" prop="goodsType">
          <el-select
            v-model="listData.goodsType"
            placeholder="请选择商品类型"
            @change="changeTypes"
            disabled
          >
            <el-option
              v-for="(item, index) in goodsTypeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教育类型" prop="educationTypeId">
          <el-select
            v-model="listData.educationTypeId"
            placeholder="请选择教育类型"
            disabled
          >
            <el-option
              v-for="(item, index) in educationType"
              :key="index"
              :label="item.educationName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="业务层次"
          prop="businessId"
          v-if="listData.educationTypeId"
        >
          <el-select
            v-model="listData.businessId"
            disabled
            placeholder="请选择业务层次"
          >
            <el-option
              v-for="(item, index) in newCourTypeOptions"
              :key="index"
              :label="item.projectName + '-' + item.businessName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="院校" prop="schoolId" v-if="listData.businessId" :key="14">
          <el-select v-model="listData.schoolId" placeholder="请选择院校">
            <el-option
              v-for="(item, index) in newSchoolOption"
              :key="index"
              :label="item.schoolName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="majorId" v-if="listData.businessId" :key="15">
          <el-select v-model="listData.majorId" placeholder="请选择专业">
            <el-option
              v-for="(item, index) in newMajorOption"
              :key="index"
              :label="item.categoryName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科目" prop="subjectIds" v-if="listData.businessId">
          <el-select
            v-model="listData.subjectIds"
            placeholder="请选择科目"
            multiple
            collapse-tags
            @change="clearList"
          >
            <el-option
              v-for="(item, index) in newSubjectOption"
              :key="index"
              :label="item.subjectName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsName">
          <el-input
            :style="`max-width: ${inputWidth}px`"
            v-model="listData.goodsName"
          ></el-input>
        </el-form-item>
        
        <el-form-item label="是否外链商品" prop="externalLinkStatus">
          <el-radio-group v-model="listData.externalLinkStatus" @change="activeExternalLinkStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品外链" prop="externalLink">
          <el-input
            :style="`max-width: ${inputWidth}px`"
            v-model.trim="listData.externalLink"
            @change="judgeUrl"
          ></el-input>
        </el-form-item>
        <el-form-item
          :key="listData.goodsType ? listData.goodsType : 10"
          label="学时"
          prop="classHours"
        >
         <el-input-number
            :controls="false"
            :style="`max-width: ${inputWidth}px`"
            v-model="listData.classHours"
            :precision="2"
            :min="0"
          ></el-input-number> </el-form-item
      ></el-col>
      <el-col :span="12">
        <el-form-item label="商品封面" prop="coverUrl">
          <div class="goodsImage_Style">
            <div class="imageStyBox" v-if="!listData.coverUrl">
              <label for="uplose">
                <i class="el-icon-circle-plus-outline iconStsz"></i
              ></label>
              <input
                ref="file"
                type="file"
                style="display: none"
                id="uplose"
                @change="getImgFile"
              />
            </div>
            <el-image
              v-else
              class="imageStyBoxShow"
              :src="$methodsTools.splitImgHost(listData.coverUrl)"
              :preview-src-list="[
                $methodsTools.splitImgHost(listData.coverUrl),
              ]"
            >
            </el-image>
            <div class="labelMsg">
              注：请上传小于300kb，尺寸为750*440的图片，支持gif、jpg、jpeg、png等类型
            </div>
          </div>
          <el-button
            v-if="listData.coverUrl"
            type="danger"
            size="mini"
            class="margin-top: 20px;"
            @click="clearImgs"
            >删除</el-button
          >
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: ["listData", "submitStatusInfo"],
  data() {
    return {
      goodsTypeOptions: [
        {
          label: "视频",
          value: 1,
        },
        {
          label: "题库",
          value: 2,
        },
        {
          label: "补考",
          value: 3,
        },
        {
          label: "前培",
          value: 4,
        },
        {
          label: "直播",
          value: 6,
        },
      ], //商品类型
      newCourTypeOptions: [], //业务层次
      newSchoolOption: [], //院校
      newMajorOption: [], //专业
      newSubjectOption: [], //科目
      inputWidth: 217,
    };
  },
  watch: {
    /**
     * 教育类型切换
     */
    "listData.educationTypeId"(val) {
      // this.$set(this.listData, "businessId", "");
      if (val) {
        this.getBusinessList(val);
      }
    },
    /**
     * 业务层次切换
     */
    "listData.businessId"(val) {
      // this.$set(this.listData, "schoolId", "");
      // this.$set(this.listData, "majorId", "");
      // this.$set(this.listData, "handoutsId", "");
      // this.$bus.$emit("sendBybus");
      // this.$bus.$emit("sendBybusBank");
      if (val) {
        // this.$bus.$emit("clearValidateFunc");
        this.getInitBabelList(val);
         if (this.listData.goodsType === 1) {
          this.$bus.$emit("getCheckRequired", val);
        } else {
          this.$bus.$emit("getCheckQuitRequired", val);
        }
      }
    },
  },
  computed: { ...mapGetters(["paysupply", "educationType"]) },
  methods: {
    //校验外链格式
    judgeUrl() {
      var regUrl = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
      let flag = new RegExp(regUrl).test(val);
      if (!flag) {
        this.$message({
          type: "warning",
          message: "请输入正确的外链地址格式",
          duration: 2000,
        });
        this.listData.externalLink = "";
        return 0;
      }
      return 1;
    },
    activeExternalLinkStatus(e){
      this.$emit('activeExternalLinkStatus',e)
    },
    /**
     *科目切换清楚列表
     */
    clearList() {
      this.$bus.$emit("sendBybus");
      this.$bus.$emit("sendBybusBank");
    },
    /**
     * 商品类型切换
     */
    changeTypes(val) {
      // this.$set(this.listData, "examNumber", 0); //考试次数
      // this.$set(this.listData, "doNumber", 0); //刷题次数
      // this.$set(this.listData, "studyCount", 1); //学习次数
      // this.$set(this.listData, "handoutsId", ""); //讲义ID
      // this.$set(this.listData, "serviceTimeType", ""); //学习服务期类型
      // this.$set(this.listData, "serviceTimeNum", ""); //学习服务期年月日
      // this.$set(this.listData, "studyTimeArrays", []); //学习服务期具体时间
      // this.$set(this.listData, "makeGoodsId", ""); //补考/前培参数
      // this.$set(this.listData, "makeGoodsName", ""); //补考/前培参数
      // this.$set(this.listData, "makeGoodsCode", ""); //补考/前培参数
      // this.$set(this.listData, "timeArrays", [
      //   new Date().getTime(),
      //   new Date().getTime() + 365 * 1 * 24 * 3600 * 1000,
      // ]); //商品有效期
      // if (this.listData.goodsType == 2) {
      //   this.$set(
      //     this.listData,
      //     "coverUrl",
      //     "oss/images/file/20220518/1652864709142.png"
      //   );
      // } else {
      //   this.$set(
      //     this.listData,
      //     "coverUrl",
      //     "oss/images/avatar/20211013/1634097664410_1397766697"
      //   );
      // } //封面
      // if (val === 1) {
      //   this.$bus.$emit("sendBybus");
      // }
      // if (val === 2) {
      //   this.$bus.$emit("sendBybusBank");
      // }
      // this.$bus.$emit("clearValidateFunc");
    },
    /**
     * 根据条件获取业务层次列表
     */
    getBusinessList(val) {
      this.$api
        .inquirebusinessList({ status: 1, educationId: val })
        .then((res) => {
          this.newCourTypeOptions = res.rows;
        });
    },
    /**
     * 根据条件获取院校、专业列表
     */
    getInitBabelList(val) {
      /**
       * 院校
       */
      this.$api
        .inquireUserSchool({ status: 1, businessId: val })
        .then((res) => {
          this.newSchoolOption = res.rows;
        });
      /**
       * 专业
       */
      this.$api
        .inquireCourseMajor({ status: 1, businessId: val })
        .then((res) => {
          this.newMajorOption = res.rows;
        });
      /**
       * 科目
       */
      this.$api
        .inquireCourseSubject({ status: 1, businessId: val })
        .then((res) => {
          this.newSubjectOption = res.rows;
        });
    },
    /**
     * 上传商品封面
     */
    getImgFile(e) {
      var self = this;
      var file = e.target.files[0];
      if (file === undefined) {
        self.$set(self.listData, "coverUrl", "");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      let typeList = ["jpg", "png", "jpeg", "gif"];
      if (!typeList.includes(type[0])) {
        self.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
        e.target.value = "";
        return;
      }
      if (file.size > 0.3 * 1024 * 1024) {
        self.$message.error("图片不得大于300kb");
        return;
      }
      this.$upload.upload(file, 2).then((res) => {
        self.$set(self.listData, "coverUrl", res);
        self.$bus.$emit("validateCoverUrl");
      });
    },
    /**
     * 删除商品封面
     */
    clearImgs() {
      this.$set(this.listData, "coverUrl", "");
      this.$bus.$emit("validateCoverUrl");
    },
  },
};
</script>

<style lang="less" scoped>
.goodsImage_Style {
  display: flex;
}
.imageStyBox {
  width: 300px;
  height: 150px;
  border: 2px dashed #999;
  border-radius: 28px;
  line-height: 150px;
  text-align: center;
  flex-shrink: 0;
  margin-right: 10px;
}
.imageStyBoxShow {
  width: 300px;
  height: 150px;
  flex-shrink: 0;
  margin-right: 10px;
}
.iconStsz {
  font-size: 40px;
  color: #67c23a;
  cursor: pointer;
}
.labelMsg {
  color: #999;
  font-size: 13px;
}
</style>
