<template>
  <div class="uploadSettings">
    <div class="el-card__body">
      <div style="margin-bottom: 20px;">
        <el-button size="small" @click="dialogVisible=true">添加存储位置</el-button>
        <div style="margin: 10px 0">
          <div>商城创建者：T1219561424</div>
        </div>
        <div class='table-body'>
          <el-table :data="tableData" v-loading="loading" border style="width: 100%">
            <el-table-column label="类型">
              <template slot-scope="scope">
                <img v-if="scope.row.StoreType==1" style="width:60px;margin-left:20px;" src="../../assets/img/tcent.jpg" alt=""/>
                <img v-if="scope.row.StoreType==2" style="width:115px;margin-left:20px;" src="../../assets/img/aliyun.png" alt="">
                <div style="position:relative">
                  <img v-if="scope.row.IsDefault==1" :class="{'uploadTencent':scope.row.StoreType==1,'uploadAli':scope.row.StoreType==2}" 
                   src="../../assets/img/userman/select.png"/>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="Bucket" label="存储位置" width="400">
            </el-table-column>
            <el-table-column 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==3">
                  <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>
                <div v-if="scope.row.StoreType==2">
                  <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>
              </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>
                <el-tooltip class="item" effect="dark" content="设为默认" placement="top">
                  <img src="../../assets/img/userman/status_5_active.png" alt="" class="imgstyle" @click="setMoren(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-group v-model="addMsg.StoreType" @change="getStoreType(addMsg.StoreType)">
              <el-radio :label="1" border>腾讯云COS</el-radio>
              <el-radio style="display:none" :label="3" border>七牛云存储</el-radio>
              <el-radio :label="2" border>阿里云</el-radio>
            </el-radio-group>
          </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==3">
          <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>
        <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>
            <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>
      </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"
          }],
        },
        dataList: {},
        comNum: 0
      }
    },
    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.dataList = JSON.parse(JSON.stringify(res.data.data));
            this.comNum = this.dataList.StoreType;
          } else {
            this.Error(res.data.message);
          }

        })
      },
      Edit(row) {
        this.comNum = row.StoreType;
        this.dialogVisible = true;
        this.dataList = JSON.parse(JSON.stringify(row));
        this.addMsg = row;
        // this.getFileStoreDetail(true)
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getDateList();
      },
      //切换存储位置
      getStoreType(num) {
        if (num === this.comNum) {
          this.addMsg.ID = this.dataList.ID;
          this.addMsg.TenantId = this.dataList.TenantId;
          this.addMsg.MallBaseId = this.dataList.MallBaseId;
          this.addMsg.Status = this.dataList.Status;
          this.addMsg.CreateDate = this.dataList.CreateDate;
          this.addMsg.UpdateDate = this.dataList.UpdateDate;
          this.addMsg.Bucket = this.dataList.Bucket;
          this.addMsg.Region = this.dataList.Region;
          this.addMsg.CustomDomain = this.dataList.CustomDomain;
          this.addMsg.SecretKey = this.dataList.SecretKey;
          this.addMsg.SecretId = this.dataList.SecretId;
          this.addMsg.ImgStyle = this.dataList.ImgStyle;
        } else {
          this.addMsg.ID = 0;
          this.addMsg.IsDefault = 0;
          this.addMsg.Bucket = '';
          this.addMsg.Region = '';
          this.addMsg.CustomDomain = '';
          this.addMsg.SecretKey = '';
          this.addMsg.SecretId = '';
          this.addMsg.ImgStyle = '';
        }
      },
      //设为默认
      setMoren(item) {
        let msg = item;
        msg.IsDefault = 1;
        this.apipost("/api/MallBase/AddOrUpdateFileStore", msg, res => {
          this.addloading = false
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.getDateList();
            localStorage.uploadInfo = JSON.stringify(msg);
          } else {
            this.Error(res.data.message);
          }
        })
      }

    }

  }

</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;
  }
  .uploadSettings .el-table .cell{
    overflow: visible;
  }
  .uploadSettings .uploadTencent{
    position:absolute;
    left:-10px;
    top:-103px;
    width:60px;
  }
  .uploadSettings .uploadAli{
    position:absolute;
    left:-10px;
    top:-86px;
    width:60px;
  }
</style>
