<template>
  <div class="homeIndex">
    <div class="head">
      <div class="main-container">
        <div class="homeIndexTop">
          <div class="hoindexImgdiv">
            <img src="../assets/img/logo.png" alt="" style="height:30px">
          </div>
          <div class="hoindexRight">
            <el-dropdown>
              <span class="el-dropdown-link" style="color:#fff;font-size:16px">
                <i class="iconfont icon-iconzh1"></i>
                {{currentUserMsg.Account}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="loginOut()">注销</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div style="font-size: 20px;margin-top: 35px;">管理中心</div>
        <div class="tabHead" style="font-size: 14px;">
          <span @click="SelectTab1(1)" :class="tab1==1 ? 'active' :''">账户管理</span>
          <span @click="SelectTab1(2)" :class="tab1==2 ? 'active' :''">小程序商城</span>
          <span @click="SelectTab1(3)" :class="tab1==3 ? 'active' :''" style="display:none;">设置</span>
        </div>
      </div>

    </div>
    <div style="width:100%;margin-top:20px">
      <div class="main-container">
        <div v-show="tab1==1" class="content">
          <div style="background:#fff" class="radius tab2Div"><span class="spanactive">我的账户</span></div>
          <div style="background:#f3f3f3;height:20px"></div>
          <div style="background:#fff" class="radius">
            <el-row>
              <el-col class="userinfo" :span="12">
                <p class="title">用户名</p>
                <p class="Spannumber">{{currentUserMsg.Account}}</p>
                <img class="imgbg" src="../assets/img/user.png" alt="">
              </el-col>
              <el-col class="userinfo" :span="12">
                <p class="title">手机号</p>
                <p class="Spannumber"> {{currentUserMsg.MobilePhone}}
                  <img @click="dialogVisible=true" style="width:16px;height:16px" src="../assets/img/change.png" alt="">
                </p>
                <img class="imgbg" src="../assets/img/mobile.png" alt="">
              </el-col>
            </el-row>
            <el-row>
              <el-col class="userinfo" :span="12">
                <p class="title">可创建小程序数量</p>
                <p class="Spannumber">{{currentUserMsg.CreateMiniPrograme}}</p>
                <img class="imgbg" src="../assets/img/number.png" alt="">
              </el-col>
              <el-col class="userinfo" :span="12">
                <p class="title">账号有效期</p>
                <p class="Spannumber">{{currentUserMsg.AccountStatus}}</p>
                <img class="imgbg" src="../assets/img/end_time.png" alt="">
              </el-col>
            </el-row>
          </div>

        </div>
        <div v-show="tab1==2" class="content">
          <div style="background:#fff" class="radius tab2Div">
            <span @click="SelectTab2(1)" :class="tab2==1 ? 'spanactive' :''">小程序商城管理</span>
            <span @click="SelectTab2(2)" :class="tab2==2 ? 'spanactive' :''">回收站</span>
          </div>
          <div style="background:#f3f3f3;height:20px"></div>
          <div v-show="tab2==1" class="radius">
            <div style="margin-bottom:20px">
              <div class="searchInput">
                <el-input style="display:inline-block;width:170px;" placeholder="请输入内容" v-model="qMsg.MallName"
                  size="small" clearable>
                </el-input>
                <span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
              </div>
              <el-button @click="creatDig=true" size="small" type="primary">添加小程序商城</el-button>
              <span style="margin-left: 20px;font-size:14px;position: relative;top: 2px;">
                <span style="color:#BCBCBC;">可创建小程序商城数量</span>
                <span style="color: rgb(73, 169, 255);padding: 0px 5px;">1</span>
              </span>
            </div>
            <el-table :data="tableData" border style="width: 100%;margin-bottom:20px">
              <el-table-column prop="MallBaseId" label="编号" width="60">
              </el-table-column>
              <el-table-column prop="name" label="商城名称" width="155">
                <template slot-scope="scope">
                  <p style="color:#409EFF">{{scope.row.MallName}}</p>
                  <p>账号:{{scope.row.Account}}</p>
                  <p>
                    手机:<span style="color:rgb(144, 147, 153)">{{scope.row.MobilePhone}}</span>
                  </p>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="数据统计" show-overflow-tooltip :render-header="renderHeader"
                width="155">
              </el-table-column>
              <el-table-column prop="EffectiveDateStr" label="有效期" width="170">
              </el-table-column>
              <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="info" plain>编辑 </el-button>
                  <el-button size="mini" type="info" plain>回收</el-button>
                  <el-button size="mini" type="info" plain>版权</el-button>
                  <el-button size="mini" type="info" plain>禁用</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination style="text-align:right" background @current-change="handleCurrentChange"
              v-if="tableData&&tableData.length>0" :current-page.sync="qMsg.pageIndex"
              layout="total,prev, pager, next, jumper" :page-size="qMsg.pageSize" :total="qMsg.total">
            </el-pagination>
          </div>
          <!-- 回收站 -->
          <div v-show="tab2==2" class="radius" style="padding:0">
            <p style="font-size:14px;padding:18px 20px;border-bottom: 1px solid #EBEEF5;box-sizing: border-box;">回收站列表
            </p>
            <div style="margin-bottom:20px;padding: 15px 20px;">
              <div class="searchInput" style="width:250px;">
                <el-input style="display:inline-block;width:225px;" placeholder="请输入商城名称或用户名搜索" v-model="val"
                  size="small" clearable>
                </el-input>
                <span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
              </div>

            </div>
            <div style="padding: 15px 20px;">
              <el-table :data="tableData" border style="width: 100%;margin-bottom:20px">
                <el-table-column prop="MallBaseId" label="编号" width="60">
              </el-table-column>
              <el-table-column prop="name" label="商城名称" width="155">
                <template slot-scope="scope">
                  <p style="color:#409EFF">{{scope.row.MallName}}</p>
                  <p>账号:{{scope.row.Account}}</p>
                  <p>
                    手机:<span style="color:rgb(144, 147, 153)">{{scope.row.MobilePhone}}</span>
                  </p>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="数据统计" show-overflow-tooltip :render-header="renderHeader"
                width="155">
              </el-table-column>
              <el-table-column prop="EffectiveDateStr" label="有效期" width="170">
              </el-table-column>
                <el-table-column prop="address" label="操作">
                  <template>
                    <el-button size="mini" type="info" plain>恢复</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination style="text-align:right" background layout="prev, pager, next" :total="1000">
              </el-pagination>
            </div>

          </div>

        </div>
        <div v-show="tab1==3" class="content">
          <div style="background:#fff" class="radius tab2Div">
            <span @click="SelectTab3(1)" :class="tab3==1 ? 'spanactive' :''">账户上传管理</span>
            <span @click="SelectTab3(2)" :class="tab3==2 ? 'spanactive' :''">清理缓存</span>
            <span @click="SelectTab3(3)" :class="tab3==3 ? 'spanactive' :''">小程序设置</span>
          </div>
          <div style="background:#f3f3f3;height:20px"></div>
          <div v-show="tab3==1" class="radius">
            <div style="margin-bottom:20px">
              <el-button @click="addAdress" size="small">添加存储位置</el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%;margin-bottom:20px">
              <el-table-column prop="ID" label="存储位置">
              </el-table-column>
              <el-table-column prop="address" label="默认存储">
              </el-table-column>
              <el-table-column prop="address" label="操作">
                <template>
                  <el-button size="mini" type="info" plain>编辑</el-button>
                  <el-button size="mini" type="info" plain>回收</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-show="tab3==2" class="radius" style="font-size:14px;padding:0">
            <div style="padding: 15px 20px;">
              <el-checkbox v-model="val">数据存储</el-checkbox>
              <p style="line-height: 1.4;color: rgb(144, 147, 153);padding:12px 0 30px 0">程序处理过程产生的缓存数据，用于提高运行速度。</p>
              <el-checkbox v-model="val">临时文件</el-checkbox>
              <p style="line-height: 1.4;color: rgb(144, 147, 153);padding:12px 0 30px 0">二维码海报等生成的临时文件</p>
              <el-checkbox v-model="val">更新文件</el-checkbox>
              <p style="line-height: 1.4;color: rgb(144, 147, 153);padding:12px 0 30px 0">系统/插件更新下载的临时文件。</p>
            </div>
            <div style="background:#f3f3f3;padding-top:20px">
              <el-button type="primary" size="small">确认清理</el-button>
            </div>
          </div>
          <div v-show="tab3==3" class="radius" style="font-size:14px;">
            <p>域名设置</p>
            <div class="uploadBig">
              小程序业务域名校验文件
              <el-upload class="uploadDiv" :http-request="UploadImage" :multiple="true" accept=".txt"
                :show-file-list="false" action>
                <el-button style="margin-left:30px" slot="trigger" size="small">选取文件</el-button>
              </el-upload>
            </div>
            <p style="padding:0 0 50px 295px">仅支持上传 .txt 格式文件</p>
          </div>
        </div>
      </div>

    </div>
    <div style="text-align: center;line-height: 60px;color: #000;font-size:12px">由成都微途科技有限公司提供技术支持</div>
    <!-- 修改手机号 -->
    <el-dialog title="修改手机号" :visible.sync="dialogVisible" width="400px">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
        <el-form-item label="新手机号" prop="name">
          <el-input style="width:234px" size="small" v-model="addMsg.name"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="name">
          <el-input style="width:150px;margin-right:8px" size="small" v-model="addMsg.name"></el-input>
          <el-button type="primary" size="small">获取验证码</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 创建商城 -->
    <el-dialog title="创建商城" :visible.sync="creatDig" width="440px">
      <el-form :model="creatMsg" :rules="creatMsgrules" ref="creatMsg" label-width="100px">
        <el-form-item label="商城名称" prop="MallName">
          <el-input size="small" v-model="creatMsg.MallName"></el-input>
        </el-form-item>
        <el-form-item label="商城有效期" prop="MallValidate">
          <el-date-picker v-model="creatMsg.MallValidate" :disabled="creatMsg.isChecked" value-format="yyyy-MM-dd"
            style="width:220px;margin-right:8px" type="date" placeholder="选择日期时间"></el-date-picker>
          <el-checkbox v-model="creatMsg.isChecked">永久</el-checkbox>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="creatDig = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm('creatMsg')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 存储位置编辑 -->
    <el-dialog title="存储位置编辑" :visible.sync="dialogEdit" top="5%" width="800px">
      <el-form class="editMsg" :model="editMsg" :rules="editMsgrules" ref="editMsg" label-width="0px">
        <el-form-item label-width="80px" label="存储位置" prop="name">
          <el-radio v-model="editMsg.type" label="1">腾讯云COS</el-radio>
          <el-radio v-model="editMsg.type" label="2">七牛云存储</el-radio>
        </el-form-item>
        <template v-if="editMsg.type==1">
          <el-form-item prop="name">
            <p><span class="cred">*</span>空间名称111（Bucket）</p>
            <el-input v-model="addMsg.name"></el-input>
            <div>示例：<span class="cred">xxxxxx-125000000</span></div>
          </el-form-item>
          <el-form-item prop="name">
            <p><span class="cred">*</span>所属地域</p>
            <el-input v-model="addMsg.name"></el-input>
            <div>示例: <span class="cred">ap-shanghai</span> 或 <span class="cred">ap-shenzhen</span> 或 <span
                class="cred">ap-xxxxxx</span></div>
          </el-form-item>
          <el-form-item>
            <p>自定义域名</p>
            <el-input v-model="addMsg.name"></el-input>
            <div>示例: <span class="cred">http://mydomain.com</span></div>
          </el-form-item>
          <el-form-item prop="name">
            <p><span class="cred">*</span>SecretId</p>
            <el-input v-model="addMsg.name"></el-input>
          </el-form-item>
          <el-form-item prop="name">
            <p><span class="cred">*</span>SecretKey</p>
            <el-input v-model="addMsg.name"></el-input>
          </el-form-item>
        </template>
        <template v-if="editMsg.type==2">
          <el-form-item prop="name">
            <p><span class="cred">*</span>存储空间名称（Bucket）</p>
            <el-input v-model="addMsg.name"></el-input>
          </el-form-item>
          <el-form-item prop="name">
            <p><span class="cred">*</span>绑定域名</p>
            <el-input v-model="addMsg.name"></el-input>
            <div>示例: <span class="cred">http://mydomain.com</span> 或 <span
                class="cred">http://xxxxxx.bkt.clouddn.com</span></div>
          </el-form-item>
          <el-form-item>
            <p>AccessKey（AK）</p>
            <el-input v-model="addMsg.name"></el-input>
          </el-form-item>
          <el-form-item prop="name">
            <p><span class="cred">*</span>SecretKey（SK）</p>
            <el-input v-model="addMsg.name"></el-input>
          </el-form-item>
          <el-form-item prop="name">
            <p>图片样式接口（选填）</p>
            <el-input v-model="addMsg.name"></el-input>
            <div>示例: <span class="cred">?imageView2/0/w/1080/h/1080/q/85|imageslim</span></div>

          </el-form-item>
        </template>
      </el-form>
      <div>
        <el-button size="small" type="primary" @click="dialogVisible = false">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'homeIndex',
    data() {
      let validataMala = (rule, value, callback) => {
        if (!this.creatMsg.isChecked && this.creatMsg.MallValidate == '') {
          return callback(new Error('请选择商城有效期'));
        } else {
          callback();
        }
      }
      return {
        currentUserMsg: {},
        creatMsg: {
          MallBaseId: 0,
          MallName: '',
          MallValidate: '',
          IsEffective: 0,
          isChecked: false
        },
        creatDig: false,
        editMsg: {
          type: '',
        },
        dialogEdit: false,
        tab1: 1,
        tab2: 1,
        tab3: 1,
        tableData: [],
        val: '',
        dialogVisible: false,
        addMsg: {},
        qMsg: {
          pageIndex: 1,
          pageSize: 1,
          MallName: "",
          total: 0,
        },
        rules: {
          name: [{
            required: true,
            message: '新手机号',
            trigger: 'blur'
          }],
        },
        editMsgrules: {
          name: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
        },
        creatMsgrules: {
          MallName: [{
            required: true,
            message: '请填写商城名称。',
            trigger: 'blur'
          }],

          MallValidate: [{
            validator: validataMala,
            trigger: "blur",
            required: true
          }],
        },
      }
    },
    methods: {
      loginOut() {
        localStorage.removeItem("mall_userInfo");
        location.href = '/';
      },
      init() {
        this.apipost("/api/Tenant/GetTenant", {}, res => {
          if (res.data.resultCode == 1) {
            this.currentUserMsg = res.data.data;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      UploadImage() {

      },
      addAdress() {
        this.dialogEdit = true;
        this.editMsg = {
          type: '',
        }
      },
      SelectTab1(val) {
        this.tab1 = val;
      },
      SelectTab2(val) {
        this.tab2 = val;
      },
      SelectTab3(val) {
        this.tab3 = val;
      },
      renderHeader(h, {
        column
      }) {
        const inReview = "数据统计每10分钟刷新一次"
        return h(
          'div', [
            h('span', column.label),
            h('el-tooltip', {
              props: {
                placement: 'top'
              }
            }, [
              h('div', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal',
                }
              }, inReview),
              h('i', {
                class: 'el-icon-question',
                style: 'color:#909399;margin-left:5px;'
              })
            ], )
          ]
        )
      },
      handleCurrentChange(val) {
        this.qMsg.pageIndex = val;
        this.getMiniPrograme();
      },
      getMiniPrograme() {
        this.apipost("/api/Tenant/GetMiniProgramePage", this.qMsg, res => {
          if (res.data.resultCode == 1) {
            this.tableData = res.data.data.pageData;
            this.qMsg.total = res.data.data.count;

          } else {
            this.Info(res.data.message);
          }
        })
      },

      //创建商城
      submitForm(addMsg) {
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.createShop();
          } else {
            return false;
          }
        });
      },
      createShop() {
        if (this.creatMsg.isChecked) {
          this.creatMsg.MallValidate = ""
        }
        this.apipost("/api/Tenant/SetMiniPrograme", this.creatMsg, res => {
          if (res.data.resultCode == 1) {
            this.getMiniPrograme();
            this.creatDig = false;
          } else {
            this.Info(res.data.message);
          }
        })
      }
    },
    mounted() {
      this.init();
      this.getMiniPrograme();
    }
  }

</script>

<style>
  .homeIndex .uploadBig {
    padding: 30px 0 10px 110px;
  }

  .homeIndex .uploadDiv {
    display: inline-block;
  }

  .editMsg .el-form-item {
    margin-bottom: 15px;
  }

  .editMsg .cred {
    color: #F56C6C;
    margin-right: 4px;
    font-size: 12px;
  }

  .editMsg .el-form-item__content>.is-checked {
    border: 1px solid #3a8ee6 !important;
  }

  .editMsg .el-radio {
    width: 130px;
    padding: 9px 0;
    text-align: center;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
  }

  .homeIndex .el-button--info.is-plain {
    border-radius: 16px !important;
  }

  .homeIndex .content .searchInput {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
  }

  .homeIndex .content .searchInput .el-input__inner {
    border: none;
    outline: none;
  }

  .homeIndex .content .searchInput {
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    width: 200px;
    margin-right: 20px;
  }

  .homeIndex .content .userinfo {
    height: 210px;
    padding: 40px;
    position: relative;
  }

  .homeIndex .content .imgbg {
    position: absolute;
    right: 40px;
    top: 40px;
    height: 130px;
    width: 174px;
  }

  .homeIndex .content .radius .Spannumber {
    color: #303133;
    font-size: 24px;
  }

  .homeIndex .content .title {
    font-size: 16px;
    color: #999999;
    margin-bottom: 5px;
  }

  .homeIndex .content .tab2Div span:hover {
    background-color: #ecf5ff;
    color: #3a8ee6 !important;
    cursor: pointer;
  }

  .homeIndex .content .tab2Div span {
    color: #606266;
    font-size: 12px;
    margin-right: 20px;
    padding: 9px 15px;
    border-radius: 20px;
    font-size: 12px;
  }

  .homeIndex .content .spanactive {
    background-color: #ecf5ff;
    color: #3a8ee6 !important;

  }

  .homeIndex .content .radius {
    background: rgb(255, 255, 255);
    margin-bottom: 20px;
    padding: 15px 20px;
    border-radius: 5px;
  }

  .homeIndex .tabHead .active {
    color: #409EFF;
    border-bottom: 2px solid #409EFF;
  }

  .homeIndex .tabHead {
    white-space: nowrap;
    position: relative;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    float: left;
    z-index: 2;
    transform: translateX(0px);
    color: #fff;
    margin-top: 45px;

  }

  .homeIndex .tabHead>span:hover {
    color: #409EFF !important;
    cursor: pointer;
  }

  .homeIndex .tabHead>span {
    height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 40px;
    display: inline-block;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    margin-right: 40px;
  }

  .homeIndex .head {
    background-image: url('../assets/img/homeback.png');
    height: 200px;
    color: #fff;
  }

  .homeIndex .main-container {
    max-width: 960px;
    margin: 0 auto;
  }

  .homeIndex .div2 {
    background: rgb(255, 255, 255);
    margin-bottom: 20px;
    padding: 15px 20px;
    border-radius: 5px;
  }

  .homeIndex {
    background: #f3f3f3;
    height: 100%;
  }

  .homeIndex .homeIndexTop {
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
  }

</style>
