<template>
  <div id="">
    <el-dialog
      :visible.sync="dialogVisible"
      width="1160px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">模板</div>
        <div class="rightBoxs">
          <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
        </div>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        ><el-form-item label="模板名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="模板配置">
          <div id="content">
            <modelView
              ref="modelView"
              :modelData="modelData"
              @changeModelData="changeModelData"
            ></modelView>
            <div class="right">
              <div class="lis">
                <el-checkbox v-model="modelData.title.checked"
                  >标题：</el-checkbox
                ><el-input v-model="modelData.title.name"></el-input
                ><el-color-picker
                  v-model="modelData.title.css.color"
                  show-alpha
                ></el-color-picker>
                <el-input
                  placeholder="请输入字体大小"
                  v-model="modelData.title.css.fontSize"
                >
                  <template slot="prepend">字体大小</template></el-input
                >
              </div>
              <div class="lis">
                <el-checkbox v-model="modelData.background.checked"
                  >背景图：</el-checkbox
                ><el-select
                  v-model="modelData.background.name"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in backImgList"
                    :key="index"
                    :label="item.name"
                    :value="item.url"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="lis">
                <el-checkbox v-model="modelData.goods.checked"
                  >商品图：</el-checkbox
                ><label for="goods"
                  ><i class="btn">{{
                    modelData.goods.name ? "更换商品图" : "上传商品图"
                  }}</i></label
                ><input
                  style="display: none"
                  id="goods"
                  type="file"
                  @change="uploadImg"
                />
              </div>
              <div class="lis">
                <el-checkbox v-model="modelData.distribution.checked"
                  >分销码</el-checkbox
                >
                <el-checkbox v-model="modelData.cardCode.checked"
                  >电子名片码</el-checkbox
                >
              </div>
              <div class="lis">
                <el-checkbox v-model="modelData.distributionText.checked"
                  >分销码说明：</el-checkbox
                ><el-input
                  type="textarea"
                  :rows="2"
                  v-model="modelData.distributionText.name"
                ></el-input
                ><el-color-picker
                  v-model="modelData.distributionText.css.color"
                  show-alpha
                ></el-color-picker>
                <el-input
                  placeholder="请输入字体大小"
                  v-model="modelData.distributionText.css.fontSize"
                >
                  <template slot="prepend">字体大小</template></el-input
                >
              </div>

              <div class="lis">
                <el-checkbox v-model="modelData.cardCodeText.checked"
                  >电子名片码说明：</el-checkbox
                ><el-input
                  type="textarea"
                  :rows="2"
                  v-model="modelData.cardCodeText.name"
                ></el-input
                ><el-color-picker
                  v-model="modelData.cardCodeText.css.color"
                  show-alpha
                ></el-color-picker>
                <el-input
                  placeholder="请输入字体大小"
                  v-model="modelData.cardCodeText.css.fontSize"
                >
                  <template slot="prepend">字体大小</template></el-input
                >
              </div>
              <div class="lis">
                <el-checkbox v-model="modelData.advertise.checked"
                  >广告语：</el-checkbox
                ><el-input
                  type="textarea"
                  :rows="4"
                  v-model="modelData.advertise.name"
                ></el-input
                ><el-color-picker
                  v-model="modelData.advertise.css.color"
                  show-alpha
                ></el-color-picker>
                <el-input
                  placeholder="请输入字体大小"
                  v-model="modelData.advertise.css.fontSize"
                >
                  <template slot="prepend">字体大小</template></el-input
                >
              </div>
              <div class="lis">
                <el-checkbox v-model="modelData.mechanism.checked"
                  >机构：</el-checkbox
                ><el-input v-model="modelData.mechanism.name"></el-input
                ><el-color-picker
                  v-model="modelData.mechanism.css.color"
                  show-alpha
                ></el-color-picker>
                <el-input
                  placeholder="请输入字体大小"
                  v-model="modelData.mechanism.css.fontSize"
                >
                  <template slot="prepend">字体大小</template></el-input
                >
              </div>
            </div>
          </div> </el-form-item
        ><el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group> </el-form-item
        ><el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            v-model="ruleForm.remark"
            :rows="4"
          ></el-input> </el-form-item
      ></el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button
          type="primary"
          :loading="disabledBtn"
          @click="submit('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import modelView from "@/components/modelView";
export default {
  components: { modelView },
  data() {
    return {
      dialogVisible: false,
      disabledBtn: false,
      //   弹窗数据
      ruleForm: {},
      rules: {
        name: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
        remark: [{ required: false, message: "请输入备注", trigger: "blur" }],
      },
      backImgList: [],
      modelData: {
        background: {
          name: "",
          type: 0,
          css: {
            top: "0px",
            left: "0px",
            width: "375px",
            height: "667px",
            position: "absolute",
          },
        },
        title: {
          name: "",
          type: 1,
          top: 38,
          left: 1,
          width: 373,
          height: 50,
          css: {
            textAlign: "center",
            fontSize: "30px",
            margin: "0px",
          },
        },
        goods: {
          name: "",
          type: 2,
          top: 126,
          left: 28,
          width: 330,
          height: 330,
          css: {
            width: "100%",
            height: "100%",
          },
        },
        distribution: {
          name: "",
          type: 3,
          top: 476,
          left: 114,
          width: 121,
          height: 121,
          css: {
            width: "100%",
            height: "100%",
          },
        },
        distributionText: {
          name: "",
          type: 1,
          top: 597,
          left: 114,
          width: 121,
          height: 44,
          css: {
            fontSize: "16px",
            margin: "0px",
            lineHeight: "normal",
          },
        },
        cardCode: {
          name: "",
          type: 3,
          top: 476,
          left: 244,
          width: 121,
          height: 121,
          css: {
            width: "100%",
            height: "100%",
          },
        },
        cardCodeText: {
          name: "",
          type: 1,
          top: 597,
          left: 244,
          width: 121,
          height: 44,
          css: {
            fontSize: "16px",
            margin: "0px",
            lineHeight: "normal",
          },
        },
        advertise: {
          name: "",
          type: 1,
          top: 490,
          left: 0,
          width: 102,
          height: 96,
          css: {
            lineHeight: "normal",
            fontSize: "20px",
            margin: "0px",
          },
        },
        mechanism: {
          name: "",
          type: 1,
          top: 623,
          left: 0,
          width: 375,
          height: 44,
          css: {
            fontSize: "16px",
            textAlign: "center",
            margin: "0px",
          },
        },
      },
    };
  },
  created() {
    this.getPosterBackgroundImgList();
  },
  methods: {
    //获取模板底图
    getPosterBackgroundImgList() {
      this.$api.inquiredistributionposterimagelist().then((res) => {
        this.backImgList = res.data;
      });
    },
    showBox(e) {
      if (e) {
        this.$nextTick(() => {
          this.ruleForm = {
            name: e.name,
            posterTempId: e.posterTempId,
            posterUrl: e.posterUrl,
            remark: e.remark,
            status: e.status,
          };
          this.modelData = JSON.parse(e.posterConfig);
        });
      } else {
        this.$nextTick(() => {
          this.modelData = {
            background: {
              checked: true,
              name: "",
              type: 0,
              css: {
                top: "0px",
                left: "0px",
                width: "375px",
                height: "667px",
                position: "absolute",
              },
            },
            title: {
              checked: true,
              name: "",
              type: 1,
              top: 38,
              left: 1,
              width: 373,
              height: 50,
              css: {
                textAlign: "center",
                fontSize: "30px",
                margin: "0px",
                lineHeight: "36px",
              },
            },
            goods: {
              checked: true,
              name: "",
              type: 2,
              top: 126,
              left: 28,
              width: 330,
              height: 330,
              css: {
                width: "100%",
                height: "100%",
              },
            },
            distribution: {
              checked: true,
              name: "",
              type: 3,
              top: 476,
              left: 114,
              width: 121,
              height: 121,
              css: {
                width: "100%",
                height: "100%",
              },
            },
            distributionText: {
              checked: true,
              name: "",
              type: 1,
              top: 597,
              left: 114,
              width: 121,
              height: 44,
              css: {
                fontSize: "16px",
                margin: "0px",
                lineHeight: "normal",
              },
            },
            cardCode: {
              checked: true,
              name: "",
              type: 3,
              top: 476,
              left: 244,
              width: 121,
              height: 121,
              css: {
                width: "100%",
                height: "100%",
              },
            },
            cardCodeText: {
              checked: true,
              name: "",
              type: 1,
              top: 597,
              left: 244,
              width: 121,
              height: 44,
              css: {
                fontSize: "16px",
                margin: "0px",
                lineHeight: "normal",
              },
            },
            advertise: {
              checked: true,
              name: "",
              type: 1,
              top: 490,
              left: 0,
              width: 102,
              height: 96,
              css: {
                fontSize: "20px",
                margin: "0px",
                lineHeight: "normal",
              },
            },
            mechanism: {
              checked: true,
              name: "",
              type: 1,
              top: 623,
              left: 0,
              width: 375,
              height: 44,
              css: {
                fontSize: "16px",
                textAlign: "center",
                margin: "0px",
                lineHeight: "normal",
              },
            },
          };
          this.ruleForm = {};
        });
      }
      this.dialogVisible = true;
    },
    close() {
      this.$refs["ruleForm"].clearValidate();
      this.dialogVisible = false;
    },
    submit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.disabledBtn = true;
          this.ruleForm.posterUrl = await this.$refs.modelView.changeFile();
          this.ruleForm.posterConfig = JSON.stringify(this.modelData);
          this.$api[
            this.ruleForm.posterTempId
              ? "editdistributionposter"
              : "distributionpostersave"
          ](this.ruleForm)
            .then((res) => {
              this.dialogVisible = false;
              console.log(this.$parent);
              this.$parent.search();
            })
            .finally(() => {
              this.disabledBtn = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    changeModelData(data) {
      const { name, left, top, width, height } = data;
      for (let k in this.modelData) {
        if (k === name) {
          this.$set(this.modelData[name], "left", left);
          this.$set(this.modelData[name], "top", top);
          if (width >= 0) {
            this.$set(this.modelData[name], "width", width);
          }
          if (height >= 0) {
            this.$set(this.modelData[name], "height", height);
          }
        }
      }
    },
    uploadImg(e) {
      var self = this;
      var file = e.target.files[0];
      if (file === undefined) {
        self.$set(self.modelData.goods, "name", "");
        e.target.value = "";
        return;
      }
      if (file.size > 0.8 * 1024 * 1024) {
        self.$message.error("图片不得大于800kb");
        e.target.value = "";
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "gif"
      ) {
        self.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
        e.target.value = "";
        return;
      }
      this.$upload
        .upload(file, 0)
        .then((res) => {
          this.$set(self.modelData.goods, "name", res);
        })
        .finally(() => {
          e.target.value = "";
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 400;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  border-radius: 8px;
  color: #ffffff;
  background-color: #1890ff;
  border-color: #1890ff;
  padding: 10px 20px;
  font-size: 14px;
  font-style: normal;
}
.header_img {
  & > .imageStyBoxShow {
    border-radius: 50%;
    overflow: hidden;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border: 1px solid #999;
  }
  .btns {
    border: 1px solid #333;
    color: #333;
    padding: 4px 6px;
    font-style: normal;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
  }
}
.title_i {
  text-align: center;
  font-size: 12px;
  color: rgba(134, 144, 156, 1);
}

#content {
  display: flex;
  & > .right {
    & > .lis {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      & > .el-input {
        // width: 200px;
      }
    }
  }
}
</style>
