<template>
  <div class="edit">
    <el-form :model="form" label-width="100px">
      <el-form-item label="产品名称">
        <!-- <el-input style="width: 300px" v-model="form.productName" placeholder="产品名称"></el-input> -->
        <el-select style="width: 300px" v-model="form.productName" filterable placeholder="选择产品" @change="productChange">
          <el-option v-for="item in productList" :label="item.productName" :key="item.id" :value="item.productName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="spid">
        <el-input disabled style="width: 300px" v-model="form.spid" placeholder="spid"></el-input>
      </el-form-item>
      <el-form-item label="cpid">
        <el-input disabled style="width: 300px" v-model="form.cpid" placeholder="cpid"></el-input>
        <!-- <el-select v-model="form.cpid" placeholder="cpid" style="width: 300px">
          <el-option v-for="item in cpidList" :key="item.cpid" :label="item.cpid" :value="item.cpid">
          </el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="activeType">
        <el-input disabled style="width: 300px" v-model="form.activeType" placeholder="activeType"></el-input>
      </el-form-item>
      <!-- <el-form-item label="直冲阈值">
        <el-input style="width: 300px" v-model="form.threshold" placeholder="如无阈值设置，则填0"></el-input>
        <div style="color: red">
          直冲阈值>0，开启订购自动领取会员，当日订购成功数满足阈值则开始自动领取该产品会员
        </div>
      </el-form-item> -->
      <el-form-item label="产品形态">
        <el-select v-model="form.isCompositeProduct" placeholder="请选择" style="width: 300px">
          <el-option label="单产品" :value="0" />
          <el-option label="复合产品" :value="1" />
          <el-option label="多选一" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="产品原价">
        <el-input style="width: 300px" v-model="form.originalPrice" placeholder="产品原价"></el-input>
      </el-form-item>
      <el-form-item label="产品备注">
        <el-input style="width: 300px" placeholder="产品备注" v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item label="会员信息">
        <el-input style="width: 300px" placeholder="若无，则留空" v-model="form.memberName"></el-input>
      </el-form-item>
      <el-form-item label="会员领取链接">
        <el-input style="width: 300px" placeholder="会员领取链接" v-model="productJson[0].memberUrl"></el-input>
      </el-form-item>
      <el-form-item label="激活指引">
        <el-input style="width: 500px" placeholder="激活指引" v-model="form.flowJumpUrl"></el-input>
      </el-form-item>
      <!-- <el-form-item label="分享文案">
        <el-input style="width: 500px" v-model="form.remark3" placeholder="微信分享副标题"></el-input>
      </el-form-item>
      <el-form-item label="页面背景配色">
        <el-row :gutter="10">
          <el-col :span="1">
            <el-color-picker v-model="addColors.bgc.s" show-alpha />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="订购窗配色">
        <el-row :gutter="10">
          <el-col :span="1">
            <el-color-picker v-model="addColors.bgc.ss" show-alpha />
          </el-col>
          <el-col :span="1">
            <el-color-picker v-model="addColors.bgc.ee" show-alpha />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="按钮颜色">
        <el-row :gutter="10">
          <el-col :span="1">
            <el-color-picker v-model="addColors.thc.s" />
          </el-col>
          <el-col :span="1">
            <el-color-picker v-model="addColors.thc.e" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="抢购人数配色">
        <el-row :gutter="10">
          <el-col :span="1">
            <el-color-picker v-model="productJson[0].rushC.s" />
          </el-col>
          <el-col :span="1">
            <el-color-picker v-model="productJson[0].rushC.e" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="产品说明配色">
        <el-row :gutter="10">
          <el-col :span="1">
            <el-color-picker v-model="productJson[0].proC.s" />
          </el-col>
          <el-col :span="1">
            <el-color-picker v-model="productJson[0].proC.e" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="聚合切换按钮">
        <el-row :gutter="10">
          <el-col :span="1">
            <el-color-picker v-model="productJson[0].tabC.s" />
          </el-col>
          <el-col :span="1">
            <el-color-picker v-model="productJson[0].tabC.e" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="banner">
        <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="bannerSuccess">
          <img v-if="bannerUrl !== ''" :src="bannerUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span v-if="bannerUrl !== ''" @click="bannerRemove()" style="color: #409eff; cursor: pointer">删除</span>
      </el-form-item>
      <el-form-item label="动态文件">
        <div style="display: inline-block;width:250px:height:250px" id="lottie_box"></div>
        <el-upload v-if="svgUrl === ''" class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="svgSuccess">
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span v-if="svgUrl !== ''" @click="svgRemove()" style="color: #409eff; cursor: pointer">删除</span>
      </el-form-item>
      <el-form-item label="上层素材">
        <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="bannerSuccess2">
          <img v-if="bannerUrl2 !== ''" :src="bannerUrl2" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span v-if="bannerUrl2 !== ''" @click="bannerRemove2()" style="color: #409eff; cursor: pointer">删除</span>
      </el-form-item>
      <el-form-item label="顶层素材">
        <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="bannerSuccess3">
          <img v-if="bannerUrl3!==''" :src="bannerUrl3" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span v-if="bannerUrl3!==''" @click="bannerRemove3()" style="color: #409eff; cursor: pointer">删除</span>
      </el-form-item>
      <el-form-item label="Logo">
        <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="logoSuccess">
          <img v-if="form.logoPic" :src="logoUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span v-if="form.logoPic" @click="form.logoPic = ''" style="color: #409eff; cursor: pointer">删除</span>
      </el-form-item>
      <el-form-item label="配图">
        <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="guideSuccessP">
          <img v-if="guidancePic.p" :src="guideUrlP" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span v-if="guidancePic.p" @click="guidancePic.p = ''" style="color: #409eff; cursor: pointer">删除</span>
      </el-form-item>
      <el-form-item label="产品说明图">
        <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="guideSuccessC">
          <img v-if="guidancePic.c" :src="guideUrlC" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span v-if="guidancePic.c" @click="guidancePic.c = ''" style="color: #409eff; cursor: pointer">删除</span>
      </el-form-item>
      <el-form-item label="订购按钮图">
        <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="btnSuccess">
          <img v-if="productJson[0].btnUrl" :src="productJson[0].btnUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span v-if="productJson[0].btnUrl" @click="productJson[0].btnUrl = ''" style="color: #409eff; cursor: pointer">删除</span>
      </el-form-item>
      <el-form-item label="炫彩UI">
        <el-radio v-model="productJson[0].productV" label="1">V1</el-radio>
        <el-radio v-model="productJson[0].productV" label="2">V2</el-radio>
      </el-form-item>
      <el-form-item label="动画效果">
        <el-switch v-model="productJson[0].dongHua" active-text="启用" inactive-text="不启用" active-value="1" inactive-value="0" />
      </el-form-item> -->
      <!-- 富文本编辑 -->
      <el-form-item>
        <el-tabs type="border-card" style="margin-top: 20px">
          <el-tab-pane label="产品订购说明">
            <quill-editor ref="text" class="myQuillEditor" v-model="form.orderingInfo" :options="editorOption" />
          </el-tab-pane>
          <el-tab-pane label="赠送话费说明">
            <quill-editor ref="text" v-model="form.givePhoneInfo" class="myQuillEditor" :options="editorOption" />
          </el-tab-pane>
          <el-tab-pane label="活动说明">
            <quill-editor ref="text" v-model="form.manualInfo" class="myQuillEditor" :options="editorOption" />
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-button style="width: 100%" @click="close()">取消</el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="primary" style="width: 100%" @click="sureClick">确定
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import lottie from "lottie-web";
export default {
  components: {
    quillEditor,
  },
  data () {
    return {
      lottie: {},
      id: "",
      imgapi: process.env.VUE_APP_BASE_IMG_API,
      addColors: {
        thc: {
          s: "#ffffff",
          e: "#ffffff",
        },
        bgc: {
          s: "",
          e: "",
          ss: "",
          ee: "",
        },
      },
      guidancePic: {
        p: "",
        c: "",
      },
      productJson: [{
        btnUrl: "",
        productV: "1",
        rushC: { s: "", e: "", },
        proC: { s: "", e: "", },
        tabC: { s: "", e: "" },
        memberUrl: "",
        dongHua: "0"
      }], //产品信息json
      form: {
        bannerPics: [],
        logoPic: "",
        guidancePic: "",
        spid: "", //spid
        cpid: "", //cpid
        activeType: "", //activeType
        originalPrice: "",
        isCompositeProduct: 0,
        productName: "", //产品名称
        remark: "", //产品备注
        memberName: "", //会员信息
        flowJumpUrl: "", //激活链接
        pageTitle: "", //分享标题
        shareText: "", //分享文案
        orderingInfo: "产品订购说明",
        givePhoneInfo: "赠送话费说明",
        manualInfo: "活动说明",
        themeColor: "",
        remark3: "",
        threshold: 0, //直冲阈值
        cacheSeatOne: "",
      },
      cpidList: [],
      bannerUrl: "", //banner图片
      bannerUrl2: "", //上层素材
      bannerUrl3: "", //顶层素材
      svgUrl: "", //svg文件
      imgUrl: ["", ""],
      logoUrl: "", //logo图片
      guideUrl: "", //引导图片
      editorOption: {
        placeholder: "请在这里输入",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
            [{ header: 1, }, { header: 2, }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: "ordered", }, { list: "bullet", }], // 列表
            [{ script: "sub", }, { script: "super", },], // 上下标
            [{ indent: "-1", }, { indent: "+1", },], // 缩进
            [{ size: ["small", false, "large", "huge"], },], // 字体大小
            [{ color: [], }, { background: [], },], // 字体颜色，字体背景颜色
            [{ font: [], },], // 字体
            [{ align: [], },], // 对齐方式
            ["clean"], // 清除字体样式
            ["link", "image"], // 上传图片、上传视频
          ],
        },
      },
      //产品列表
      productList: []
    };
  },
  created () {
    document.title = "产品修改";
    this.$get("/productInfo/page", {
      id: this.$route.query.id,
      pageSize: 1,
    }).then((res) => {
      let row = res.data.list[0];
      row.threshold = row.threshold ? row.threshold : 0;
      this.form = row;
      if (row.bannerPics) {
        this.imgUrl = JSON.parse(row.bannerPics);
        if (this.imgUrl[0] !== "" && this.imgUrl[0] !== null && this.imgUrl[0]) {
          this.bannerUrl = process.env.VUE_APP_BASE_IMG_URL + this.imgUrl[0];
        }
        if (this.imgUrl[2] !== "" && this.imgUrl[2] !== null && this.imgUrl[2]) {
          this.bannerUrl2 = process.env.VUE_APP_BASE_IMG_URL + this.imgUrl[2];
        }
        if (this.imgUrl[3] !== '' && this.imgUrl[3]) {
          this.bannerUrl3 = process.env.VUE_APP_BASE_IMG_URL + this.imgUrl[3];
        }
        if (this.imgUrl[1] !== "" && this.imgUrl[1] !== null && this.imgUrl[1]) {
          this.svgUrl = process.env.VUE_APP_BASE_IMG_URL + this.imgUrl[1];
          this.lottie = lottie.loadAnimation({
            container: document.getElementById("lottie_box"),
            renderer: "svg",
            loop: true,
            autoplay: true,
            path: this.svgUrl,
          });
        }
      }
      if (row.logoPic) {
        this.logoUrl = process.env.VUE_APP_BASE_IMG_URL + "/" + row.logoPic;
      }
      this.addColors.thc = {
        s: JSON.parse(row.themeColor)[0],
        e: JSON.parse(row.themeColor)[1],
      };
      this.addColors.bgc = {
        s: JSON.parse(row.bgColor)[0],
        e: JSON.parse(row.bgColor)[1],
        ss: JSON.parse(row.bgColor)[2],
        ee: JSON.parse(row.bgColor)[3],
      };
      if (JSON.parse(row.guidancePic).p) {
        this.guideUrlP =
          process.env.VUE_APP_BASE_IMG_URL + JSON.parse(row.guidancePic).p;
        this.guidancePic.p = JSON.parse(row.guidancePic).p;
      }
      if (JSON.parse(row.guidancePic).c) {
        this.guideUrlC =
          process.env.VUE_APP_BASE_IMG_URL + JSON.parse(row.guidancePic).c;
        this.guidancePic.c = JSON.parse(row.guidancePic).c;
      }
      if (row.cacheSeatOne !== null) {
        let arr = JSON.parse(row.cacheSeatOne)
        let list = []
        arr.forEach(val => {
          if (!val.tabC) {
            val.tabC = {
              s: "",
              e: ""
            }
          } else if (!val.dongHua) {
            val.dongHua = '0'
          }
          list.push(val)
        });
        this.productJson = list;
      }
    });
  },
  mounted () {
    // this.$get("/cpidInfo/page", {
    //   pageSize: 9999,
    //   pageNum: 1,
    // }).then((res) => {
    //   this.cpidList = res.data.list;
    // });
    this.getProductList()
  },
  methods: {
    // 选择产品
    productChange (e) {
      let arr = this.productList
      this.form.cpid = arr.find(val => { return e === val.productName }).cpid
      this.form.spid = arr.find(val => { return e === val.productName }).spid
      this.form.activeType = arr.find(val => { return e === val.productName }).activeType
    },
    // 获取产品列表
    getProductList () {
      this.$get("/productInfo/page", {
        pageSize: 9999,
        pageNum: 1
      }).then(res => {
        // console.log(res)
        this.productList = res.data.list
      })
    },
    sureClick () {
      this.$confirm("确定要修改吗？")
        .then((_) => {
          this.form.themeColor = JSON.stringify([
            this.addColors.thc.s,
            this.addColors.thc.e,
          ]);
          this.form.bgColor = JSON.stringify([
            this.addColors.bgc.s ? this.addColors.bgc.s : "",
            this.addColors.bgc.e ? this.addColors.bgc.e : "",
            this.addColors.bgc.ss ? this.addColors.bgc.ss : "",
            this.addColors.bgc.ee ? this.addColors.bgc.ee : "",
          ]);
          if (!this.form.threshold) this.form.threshold = 0;
          this.form.bannerPics = JSON.stringify(this.imgUrl);
          this.form.guidancePic = JSON.stringify(this.guidancePic);
          // if (this.productJson[0].dongHua === '0' && this.form.bannerUrl2 === '') {
          //   this.$message.error('请上传顶层素材!')
          //   return false
          // }
          this.form.cacheSeatOne = JSON.stringify(this.productJson);
          this.$post("/productInfo/update/" + this.form.id, this.form).then(
            (res) => {
              if (res.code === 10000) this.$message.success("修改成功");
              setTimeout(() => {
                this.editDialog = false;
              }, 400);
            }
          );
        })
        .catch((_) => {
          this.editDialog = false;
        });
    },
    close () {
      window.close();
    },
    // bannerSuccess (file) {
    //   this.bannerUrl = process.env.VUE_APP_BASE_IMG_URL + file.data;
    //   this.imgUrl[0] = file.data;
    //   // this.bannerUrl = process.env.VUE_APP_BASE_IMG_URL + file.data;
    //   // let arr = [];
    //   // arr.push(file.data);
    //   // this.form.bannerPics = JSON.stringify(arr);
    // },
    // bannerSuccess2 (file, fileList) {
    //   this.bannerUrl2 = process.env.VUE_APP_BASE_IMG_URL + file.data;
    //   this.imgUrl[2] = file.data;
    // },
    // bannerSuccess3 (file, fileList) {
    //   this.bannerUrl3 = process.env.VUE_APP_BASE_IMG_URL + file.data;
    //   this.imgUrl[3] = file.data
    // },
    // svgSuccess (file) {
    //   this.svgUrl = process.env.VUE_APP_BASE_IMG_URL + file.data;
    //   this.imgUrl[1] = file.data;
    //   this.lottie = lottie.loadAnimation({
    //     container: document.getElementById("lottie_box"),
    //     renderer: "svg",
    //     loop: true,
    //     autoplay: true,
    //     path: this.svgUrl,
    //   });
    // },
    // logoSuccess (file) {
    //   this.logoUrl = process.env.VUE_APP_BASE_IMG_URL + file.data;
    //   this.form.logoPic = file.data;
    // },
    // guideSuccessP (file) {
    //   this.guideUrlP = process.env.VUE_APP_BASE_IMG_URL + file.data;
    //   this.guidancePic.p = file.data;
    // },
    // guideSuccessC (file) {
    //   this.guideUrlC = process.env.VUE_APP_BASE_IMG_URL + file.data;
    //   this.guidancePic.c = file.data;
    // },
    // btnSuccess (file) {
    //   this.productJson[0].btnUrl = process.env.VUE_APP_BASE_IMG_URL + file.data;
    // },
    // svgRemove () {
    //   this.svgUrl = "";
    //   this.imgUrl[1] = "";
    //   let div = document.getElementById("lottie_box");
    //   div.innerHTML = "";
    // },
    // bannerRemove () {
    //   this.bannerUrl = "";
    //   this.imgUrl[0] = "";
    // },
    // bannerRemove2 () {
    //   this.bannerUrl2 = "";
    //   this.imgUrl[2] = "";
    // },
    // bannerRemove3 () {
    //   this.bannerUrl3 = ""
    //   this.imgUrl[3] = ''
    // }
  },
};
</script>

<style scopde lang="scss">
.edit {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 25px 25px;
}

.avatar-uploader {
  max-width: 260px;
  margin-right: 10px;
  display: inline-block;

  .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
}

.avatar-uploader-icon {
  background-color: #fbfdff;
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

.avatar-uploader-icon:hover {
  border-color: #409eff;
}

.avatar {
  width: 100%;
  height: 100%;
  // width: 148px;
  // height: 148px;
  display: block;
}
</style>
