<template>
  <div class="uploadSettings">
    <div class="el-card__body">
      <div style="margin-bottom: 20px;">
        <el-button size="small" @click="dialogVisible=true">添加存储位置</el-button>
        <el-button size="small">选取账户存储</el-button>
        <div style="margin-top: 20px"><div>商城创建者：T1219561424</div> <div>商城当前上传设置：腾讯云COS</div></div>
        <div class='table-body'>
          <el-table
            :data="tableData"
            v-loading="loading"
            border
            style="width: 1705px">
            <el-table-column
              fixed
              prop="Bucket"
              label="存储位置"
              width="569">
            </el-table-column>

            <el-table-column
              fixed
              label="使用中"
              width="568">
              <template slot-scope="scope">
                <div v-if="scope.row.StoreType==1">
                  <div>空间名称（Bucket）:{{scope.row.Bucket}}</div>
                  <div>所属地域:{{scope.row.Region}}</div>
                  <div>自定义域名:{{scope.row.CustomDomain}}</div>
                  <div>SecretId:{{scope.row.SecretId}}</div>
                  <div>SecretKey:{{scope.row.SecretKey}}</div>
                </div>
                <div v-if="scope.row.StoreType==2">
                  <div>存储空间名称（Bucket）:{{scope.row.Bucket}}</div>
                  <div>绑定域名:{{scope.row.Region}}</div>
                  <div>AccessKey（AK）:{{scope.row.SecretId}}</div>
                  <div>SecretKey（SK）:{{scope.row.SecretKey}}</div>
                  <div>图片样式接口:{{scope.row.ImgStyle}}</div>
                </div>
              </template>
            </el-table-column>


            <el-table-column
              fixed="right"
              label="操作"
            >
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top" >
                  <img src="../../assets/img/setup/edit.png" alt="" class="imgstyle" @click="Edit(scope.row)">
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <el-dialog title="小程序码" :visible.sync="dialogVisible" width="1024px">
      <el-form :model="addMsg"  :rules="addstoragerules" ref="addMsg" >
        <el-form-item label="存储位置"  class="is-required" >
          <div>
            <el-radio v-model="addMsg.StoreType" label="1" border>腾讯云COS</el-radio>
            <el-radio v-model="addMsg.StoreType" label="2" border>七牛云存储</el-radio>
          </div>
        </el-form-item>
        <template v-if="addMsg.StoreType==1">
          <el-form-item prop="Bucket">
            <p><span class="cred">*</span>空间名称（Bucket）</p>
            <el-input v-model="addMsg.Bucket"></el-input>
            <div>示例：<span class="cred">xxxxxx-125000000</span></div>
          </el-form-item>
          <el-form-item prop="Region">
            <p><span class="cred">*</span>所属地域</p>
            <el-input v-model="addMsg.Region"></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.CustomDomain"></el-input>
            <div>示例: <span class="cred">http://mydomain.com</span></div>
          </el-form-item>
          <el-form-item prop="SecretId">
            <p><span class="cred">*</span>SecretId</p>
            <el-input v-model="addMsg.SecretId"></el-input>
          </el-form-item>
          <el-form-item prop="SecretKey">
            <p><span class="cred">*</span>SecretKey</p>
            <el-input v-model="addMsg.SecretKey"></el-input>
          </el-form-item>
        </template>
        <template v-if="addMsg.StoreType==2">
          <el-form-item prop="Bucket">
            <p><span class="cred">*</span>存储空间名称（Bucket）</p>
            <el-input v-model="addMsg.Bucket"></el-input>
          </el-form-item>
          <el-form-item prop="Region">
            <p><span class="cred">*</span>绑定域名</p>
            <el-input v-model="addMsg.Region"></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 prop="SecretId">
            <p><span class="cred">*</span>AccessKey（AK）</p>
            <el-input v-model="addMsg.SecretId"></el-input>
          </el-form-item>
          <el-form-item prop="SecretKey">
            <p><span class="cred">*</span>SecretKey（SK）</p>
            <el-input v-model="addMsg.SecretKey"></el-input>
          </el-form-item>
          <el-form-item >
            <p>图片样式接口（选填）</p>
            <el-input v-model="addMsg.ImgStyle"></el-input>
            <div>示例: <span class="cred">?imageView2/0/w/1080/h/1080/q/85|imageslim</span></div>

          </el-form-item>
        </template>
      </el-form>
      <el-button type="primary" @click="addstorage('addMsg')" :loading="addloading">保存</el-button>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "uploadSettings",
      data(){
          return{
            dialogVisible:false,
            addloading:false,
            loading:false,
            addMsg:{
              StoreType :0,
              Bucket:'',
              Region:'',
              CustomDomain:'',
              SecretId:'',
              SecretKey:'',
              ImgStyle:'',
            },
            msg:{
              pageIndex:1,
              pageSize:20,
            },
            total:0,
            tableData:[],
            addstoragerules:{


              Bucket:[
                {required: true, message: "不能为空", trigger: "blur"}
              ],
              Region:[
                {required: true, message: "不能为空", trigger: "blur"}
              ],
              SecretId:[
                {required: true, message: "不能为空", trigger: "blur"}
              ],
              SecretKey:[
                {required: true, message: "不能为空", trigger: "blur"}
              ],
            },
          }
      },
      created(){
        this.getDateList();
        this.getFileStoreDetail()

      },
      methods:{
        getDateList(){
          this.loading=true;
          this.apipost("/api/MallBase/GetFileStoreList", this.msg, res => {
            this.loading=false;
            if(res.data.resultCode==1){
              this.tableData = res.data.data;
              this.total = res.data.data.count;
            }else {
              this.Info(res.data.message);
            }

          })
        },
        addstorageseat(){

        },
        addstorage(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
                if(this.addMsg.StoreType==0){
                  this.Info('请先选择存储位置');
                  return
                }
              this.addloading = true
              this.apipost("/api/MallBase/AddOrUpdateFileStore",this.addMsg , res => {
                this.addloading = false
                if (res.data.resultCode == 1) {
                  this.Success(res.data.message);
                  this.dialogVisible = false;
                  this.getDateList()
                } else {
                  this.Info(res.data.message);
                }
              })
            } else {
              return false;
            }
          });
        },
        getFileStoreDetail(show=false){
          this.apipost("/api/MallBase/GetFileStoreDetail", {}, res => {
            if(show==true){
              this.dialogVisible=true

            }
            if(res.data.resultCode==1){
              this.addMsg = res.data.data
              this.addMsg.StoreType = res.data.data.StoreType.toString()
            }else {
              this.Info(res.data.message);
            }

          })
        },
        Edit(row){
          this.getFileStoreDetail(true)
        },
        handleCurrentChange(val) {
          this.msg.pageIndex = val;
          this.getDateList();
        },

      }

    }
</script>

<style>
  .uploadSettings {
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
  }
  .uploadSettings .el-card__body{
    padding: 20px;
  }
  .uploadSettings .cred {
    color: #F56C6C;
    margin-right: 4px;
    font-size: 12px;
  }
</style>
