<template>
  <div id="introduction">
    <template v-if="listData.goodsType === 1">
      <el-form-item
        label="是否提交官方审核"
        :label-width="labelWidth"
        prop="commitPeriodStatus"
      >
        <el-radio-group v-model="listData.commitPeriodStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="提交官方审核备注说明"
        :label-width="labelWidth"
        prop="commitPeriodRemark"
      >
        <el-input
          type="textarea"
          v-model="listData.commitPeriodRemark"
          placeholder="请输入官方审核备注说明"
        ></el-input>
      </el-form-item>
    </template>
    <el-form-item label="商品简介" :label-width="labelWidth" prop="introduce">
      <el-input
        type="textarea"
        v-model="listData.introduce"
        placeholder="请输入商品简介"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="适合对象"
      :label-width="labelWidth"
      prop="suitableObject"
    >
      <el-input
        type="textarea"
        v-model="listData.suitableObject"
        placeholder="请输入适合对象"
      ></el-input>
    </el-form-item>
    <el-form-item label="学员须知" :label-width="labelWidth" prop="buyNote">
      <el-input
        type="textarea"
        v-model="listData.buyNote"
        placeholder="请输入学员须知"
      ></el-input>
    </el-form-item>
    <div class="courseStyle">
      商品详情<span style="color: #999; margin-left: 6px">支持图文</span>
    </div>
    <div style="text-align: center; margin-bottom: 10px">
      <el-button
        size="mini"
        :type="active === 1 ? 'success' : ''"
        @click="active = 1"
        >PC端</el-button
      >
      <el-button
        size="mini"
        :type="active === 2 ? 'success' : ''"
        @click="active = 2"
        >手机端</el-button
      >
    </div>
    <editor
      v-show="active === 1"
      v-model="listData.pcDetailHtml"
      :min-height="300"
      :max-height="500"
      :uploadStatus="2"
    />
    <editor
      v-show="active === 2"
      v-model="listData.mobileDetailHtml"
      :min-height="300"
      :max-height="500"
      :uploadStatus="2"
    />
  </div>
</template>

<script>
import Editor from "@/components/Editor";
export default {
  components: { Editor },
  props: ["listData"],
  data() {
    return {
      labelWidth: "180px",
      active: 1,
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.courseStyle {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 14px;
  border-bottom: 2px solid rgb(179, 204, 255);
}
</style>
