<template>
  <div class="authoriza">
    <template>
      <div class="head-title">
        授权自定义
      </div>
      <div class="content">
        <div style="display:flex;" flex="box:first">
          <div class="Auth_outside">
            <div flex="dir:left main:center cross:center" class="inside">
              <img v-if="addMsg.AuthUrl!=''" class="authPic" :src="getIconLink(addMsg.AuthUrl)" alt="">
              <img v-else class="authPic" :src="getIconLink(addMsg.AuthUrl)" alt="" />
            </div>
          </div>
          <div class="Auth_right">
            <el-card shadow="never">
              <div slot="header">设置</div>
              <el-form label-width="100px">
                <el-form-item label="是否开启">
                  <el-switch v-model="addMsg.IsOpenAuth" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="上传图片">
                  <el-tooltip class="item" effect="dark" content="推荐尺寸650*700" placement="bottom">
                    <el-button size="mini" @click="choicImg=true">选择文件</el-button>
                  </el-tooltip>
                  <div class="Auth_imgList" flex="main:center cross:center" v-if="addMsg.AuthUrl!=''">
                    <img :src="getIconLink(addMsg.AuthUrl)" alt="">
                    <el-button type="danger" v-if="addMsg.AuthUrl!=''" class="image-delete" size="mini"
                      icon="el-icon-close" @click.stop="addMsg.AuthUrl=''" circle></el-button>
                  </div>
                </el-form-item>
                <el-form-item label="热区">
                  <choiceArea ref="choiceArea" :multiple="true" :max="2" :pic-url="getIconLink(addMsg.AuthUrl)"
                    mode='auth' :hotspotArray="addMsg.AuthDataList" width="650px" height="700px"
                    @confirm="selectHotspot" :is-link="false">
                    <el-button size="mini">划分热区</el-button>
                  </choiceArea>
                  <div>注：需要划分两个热区：一个是登录按钮热区，一个是暂不登录按钮热区</div>
                </el-form-item>
              </el-form>
            </el-card>
            <el-button type="primary" style="margin-top:20px;padding:9px 25px" size="small" @click="saveMsg">保存
            </el-button>
          </div>
        </div>
      </div>
    </template>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import choiceArea from "../common/choiceArea.vue";
  export default {
    data() {
      return {
        choicImg: false,
        dataList: [],
        msg: {
          pageIndex: 1,
          pageSize: 15,
          Name: "",
        },
        addMsg: {
          MallBaseId: 0,
          IsOpenAuth: 0, //是否开启
          AuthUrl: this.domainManager().ImageUrl + '/Static/auth-default.png', //图片
          AuthDataList: [] //热区
        },
      };
    },
    created() {

    },
    components: {
      ChooseImg,
      choiceArea
    },
    methods: {
      GetData() {
        this.addMsg.MallBaseId = this.getLocalStorage().MallBaseId;
        this.apipost("/api/Tenant/GetMiniPrograme", {
          MallBaseId: this.addMsg.MallBaseId,
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg.IsOpenAuth = res.data.data.IsOpenAuth;
            if (res.data.data.AuthUrl) {
              this.addMsg.AuthUrl = res.data.data.AuthUrl;
            }

            if (res.data.data.AuthDataList && res.data.data.AuthDataList.length > 0) {
              this.addMsg.AuthDataList = res.data.data.AuthDataList;
            }
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //保存
      saveMsg() {
        this.apipost("/api/Tenant/SetMiniProgramMallAuth", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.GetData();
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //选择图片
      SelectId(msg) {
        this.addMsg.AuthUrl = this.getIconLink(msg.url);
        this.choicImg = false;
      },
      // 热区选择(edit)
      selectHotspot(list) {
        this.addMsg.AuthDataList = list;
        this.$refs.choiceArea.clearAll();
      },
    },
    mounted() {
      this.GetData();
    }
  };

</script>
<style>
  .authoriza .content {
    margin-top: 12px;
    box-sizing: border-box;
  }

  .authoriza .Auth_outside {
    width: 401px;
    height: 741px;
    background-color: #fff;
    border-radius: 30px;
    padding: 37px 13px;
    margin-right: 24px;
  }

  .authoriza .inside {
    width: 375px;
    height: 667px;
    background-color: #eee;
  }

  .authoriza .authPic {
    width: auto;
    height: auto;
    max-width: 750px;
    max-height: 1334px;
    transform: scale(0.5);
  }

  .authoriza .Auth_imgList {
    height: 222px;
    width: 125px;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
  }

  .authoriza .Auth_imgList img {
    max-width: 100%;
    max-height: 100%;
  }

  .authoriza .image-delete {
    position: absolute;
    right: -8px;
    top: -8px;
    padding: 4px 4px;
  }

</style>
