<template>
  <el-dialog
    :title="'修改关联商品价格'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="handlereset"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="100px"
    >
      <el-form-item label="目录名称" prop="title">
        {{ dataForm.title }}
        <!-- <el-input
          v-model=""
          placeholder="目录名称"
          disabled
        ></el-input> -->
      </el-form-item>

      <el-row>
        <el-col :span="12">
          <el-form-item label="类型" prop="type">
            <div v-if="dataForm.type == 0">免费</div>
            <div v-if="dataForm.type == 1">普通收费</div>
            <div v-if="dataForm.type == 2">超v课程</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="目录价格" prop="type">
            <span
              >半年：

              <span style="font-weight: bold;margin-right: 20px;">
                ￥{{ dataForm.halfFee }}</span
              >
            </span>
            <span
              >全年：
              <span style="font-weight: bold;">
                ￥{{ dataForm.fee }}</span
              ></span
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-col :span="6">
            <el-form-item label="商品原价" prop="halfFee">
              <span style="color: rgb(255, 91, 54);font-weight: bold;">
                ￥
                {{ dataForm.yearType == 0 ? dataForm.halfFee : dataForm.fee }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="修改后价格" prop="halfFee">
              <el-input
                v-model="dataForm.currentFee"
                placeholder="修改价格"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div
              style="height: 40px;display: flex;
            align-items: center;justify-content: flex-end;"
            >
              <el-switch
                v-model="dataForm.yearType"
                active-color="#13ce66"
                :active-value="1"
                :inactive-value="0"
                active-text="全年"
                inactive-text="半年"
                @change="handleChangeYearType"
              >
              </el-switch>
            </div>
          </el-col>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
        <el-form-item label="关联商品" prop="splits">
          <el-radio-group v-model="dataForm.productId">
            <el-radio
              :label="item.productId"
              border
              v-for="(item,i) in goodsList"
              :key="i"
              style="width: 100%;"
              >{{ item.productName }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handlereset">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import global from "../../common/common.vue"; //引入共用组间
export default {
  data() {
    return {
      // 1111
      linkList: [{ label: "半年", value: 0 }, { label: "一年", value: 1 }],
      baseUrl: global.baseUrl,
      goodsList: [],
      currentGoodsList: [],
      visible: false,
      typeList: [
        {
          //类型0免费1普通收费2超v课程
          dictType: 0,
          dictValue: "免费"
        },
        {
          dictType: 1,
          dictValue: "普通收费"
        },
        {
          dictType: 2,
          dictValue: "超v课程"
        }
      ],
      needCreateList: [
        {
          ////是否同步创建商品0否1是
          dictType: 0,
          dictValue: "否"
        },
        {
          dictType: 1,
          dictValue: "是"
        }
      ],
      medicaldesBookTypeList: [
        {
          dictType: 1,
          dictValue: "中医基础"
        },
        {
          dictType: 2,
          dictValue: "中医经典"
        },
        {
          dictType: 3,
          dictValue: "各家学说"
        },
        {
          dictType: 4,
          dictValue: "中医临床"
        },
        {
          dictType: 5,
          dictValue: "文学"
        },
        {
          dictType: 6,
          dictValue: "哲学"
        }
      ],
      props: {
        dictType: "",
        dictValue: ""
      },
      gushuList: [],
      authorList: [],
      restaurants: [],
      author: "",
      publisherList: [],
      fileList: [],
      fileListNovel: [],
      dialogImageUrl: "",
      dialogVisible: false,
      dataForm: {
        oldFee: 0
      },
      splitsTypeList: [],
      dataRule: {}
    };
  },
  created() {
    this.getBookList();
    this.loadAll();
  },
  mounted() {
    // this.restaurants = this.loadAll();
  },
  methods: {
    handleChangeYearType(e) {
      this.$forceUpdate()
      // this.productId = "";
      console.log("e at line 235:", e);
      if (e == 0) {
        
        // this.dataForm.oldFee = this.dataForm.halfFee;
        // this.dataForm.currentFee = JSON.parse(JSON.stringify(this.dataForm.halfFee));
      } else if (e == 1) {
      
        // this.dataForm.oldFee = this.dataForm.fee;
        // this.dataForm.currentFee = JSON.parse(JSON.stringify(this.dataForm.fee));
      }
    },
    changeType(e) {
      console.log("e at line 256:", e);
      if (e == 0) {
        this.dataForm.content = "";
      } else {
        this.dataForm.url = "";
      }
    },
    init(row, courseid) {
      console.log("row2", row);
      this.dataForm = { ...row } || {};
      this.dataForm.courseId = courseid || "";
      this.visible = true;
      // this.dataForm.currentFee = this.dataForm.halfFee;
      // this.dataForm.old = this.dataForm.halfFee;
      this.dataForm.yearType = 0;
      this.$forceUpdate();
      if (row.productList && row.productList.length > 0) {
        this.goodsList = [...row.productList];
        // this.currentGoodsList = this.goodsList.filter(e =>
        //   e.productName.includes("半年")
        // );
      }
    },
    // 表单提交
    dataFormSubmit() {
      console.log("11111", this.dataForm.medicaldesBookType);
      // if (this.dataForm.medicaldesBookType.length == 0) {
      //   this.$message.error("请选择图书类型");
      //   return
      // }
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (!this.dataForm.currentFee) {
            this.$message.error("请输入价格");
            return;
          }
          if (!this.dataForm.productId) {
            this.$message.error("请选择关联的商品");
            return;
          }
          this.$http({
            url: this.$http.adornUrl("/master/course/changeCatalogueFee"),
            method: "post",
            data: this.$http.adornData({
              catalogueId: this.dataForm.id,
              type: this.dataForm.yearType, //0半年1全年
              fee: this.dataForm.currentFee,
              productId: this.dataForm.productId

              // courseId: this.dataForm.courseId || undefined,
              // id: this.dataForm.id || undefined,
              // title: this.dataForm.title,
              // type: this.dataForm.type, //类型0免费1普通收费2超v课程
              // halfFee: this.dataForm.halfFee, //半年价格
              // fee: this.dataForm.fee, //全年价格
              // sort: this.dataForm.sort,
              // needCreate: this.dataForm.needCreate //是否同步创建商品0否1是
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    handlePicSuccess(res, file) {
      if (res.msg == "success") {
        this.dataForm.images = res.url;
        this.$message.success("上传成功");
      } else {
        this.$message.error("上传失败");
      }
    },
    //图书分类
    getBookList() {
      this.$http({
        url: this.$http.adornUrl("/book/sysdictdata/selectByType/book_type"),
        method: "get"
        // params: this.$http.adornParams({
        //   'type': 'book_type',
        // })
      }).then(({ data }) => {
        console.log(data);
        // this.bookList = data.dataList
      });

      // 获取图书拆分类型
      this.$http({
        url: this.$http.adornUrl("/book/sysdictdata/selectByType/splitsType"),
        method: "get"
      }).then(({ data }) => {
        this.splitsTypeList = data.dataList;
      });

      // 获取古书
      this.$http({
        url: this.$http.adornUrl("/book/book/getAncientBooks"),
        method: "post"
      }).then(({ data }) => {
        this.gushuList = data.books;
      });
    },
    handleRemove(file) {
      this.dataForm.images = "";
    },
    handlePictureCardPreview(file) {
      this.dataForm.images = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    handlereset() {
      (this.fileList = []), (this.fileListNovel = []), (this.visible = false);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemoveNovel(file) {
      this.dataForm.novel = "";
    },
    handleNovelSuccess(file) {
      this.dataForm.novel = file.url;
    },
    // querySearch(queryString, cb) {
    //     var restaurants = this.restaurants;
    //     var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
    //     // 调用 callback 返回建议列表的数据
    //     console.log(results)
    //     cb(results);
    // },
    // createFilter(queryString) {
    //     return (restaurant) => {
    //       return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
    //     };
    // },
    loadAll() {
      this.$http({
        url: this.$http.adornUrl("/book/author/bookAuthorList"),
        method: "get"
      }).then(({ data }) => {
        this.authorList = data.list;
      });
      this.$http({
        url: this.$http.adornUrl("/book/publisher/publisherList"),
        method: "get"
      }).then(({ data }) => {
        this.publisherList = data.list;
      });
    }
    // handleSelect(item) {
    //   this.dataForm.authorId = item.id
    //     console.log(item);
    //   }
  }
};
</script>
<style lang="less" scoped>
/deep/.el-radio.is-bordered + .el-radio.is-bordered {
  margin-left: 0 !important;
  margin-top: 10px !important;
}
</style>
