<template>
  <div class="expressSetup">
    <div class="head-title" style="height:55px;">
      <el-button @click="addInfo()" style="float:right;margin-top: -5px;" size="small" type="primary">
        添加
      </el-button>
    </div>
    <div class="content">
      <el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
        <el-table-column label="类型" width="250px">
          <template slot-scope="scope">
            <img v-if="scope.row.Type==1" style="width:100px;margin-left:40px;" src="../../assets/img/aliyun.png"
              alt="" />
            <img v-if="scope.row.Type==2" style="width:100px;margin-left:40px;" src="../../assets/img/Courier.jpg"
              alt="">
            <div style="position:relative">
              <img v-if="scope.row.IsDefault==1" :class="{'aliyun':scope.row.Type==1,'kuaidiniao':scope.row.Type==2}" src="../../assets/img/userman/select.png" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Id" label="ID" width="150">
        </el-table-column>
        <el-table-column prop="Name" label="别名" width="200">
        </el-table-column>
        <el-table-column label="使用中">
          <template slot-scope="scope">
            <div>AppCode:{{scope.row.AppCode}}</div>
            <div>AppID:{{scope.row.AppID}}</div>
            <div>AppKey:{{scope.row.AppKey}}</div>
            <div>AppSecret:{{scope.row.AppSecret}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="RquUrl" label="请求地址">
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <img @click="EditexpressSetup(scope.row)" class="operatImg" src="../../assets/img/userman/edit.png" alt="">
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="comTitle" :visible.sync="dialogVisible" width="700px">
      <el-form :model="addMsg" ref="addMsg" :rules="rules" label-width="120px">
        <el-form-item label="类型" class="is-required">
          <div>
            <el-radio-group v-model="addMsg.Type" size="small">
              <el-radio :label="1" border :disabled="isEdit">阿里云</el-radio>
              <el-radio :label="2" border :disabled="isEdit">快递鸟</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="别名" size="small" prop="Name">
          <el-input v-model="addMsg.Name"></el-input>
        </el-form-item>
        <el-form-item label="AppID" size="small">
          <el-input v-model="addMsg.AppID"></el-input>
        </el-form-item>
        <el-form-item label="AppKey" size="small">
          <el-input v-model="addMsg.AppKey"></el-input>
        </el-form-item>
        <el-form-item label="AppSecret" size="small">
          <el-input v-model="addMsg.AppSecret"></el-input>
        </el-form-item>
        <el-form-item label="AppCode" size="small">
          <el-input v-model="addMsg.AppCode"></el-input>
        </el-form-item>
        <el-form-item label="请求地址" size="small">
          <el-input v-model="addMsg.RquUrl"></el-input>
        </el-form-item>
        <el-form-item label="是否默认">
          <el-switch v-model="addMsg.IsDefault" active-color="#409EFF" :active-value="1" :inactive-value="2">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" size="small" @click="saveInfo()">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    components: {},
    data() {
      return {
        //是否线下链接弹窗
        loading: false,
        dataList: [],
        comTitle: '新增信息',
        msg: {
          pageIndex: 1,
          pageSize: 15,
          Name: ""
        },
        dialogVisible: false, //弹窗
        addMsg: {
          Id: 0,
          IsDefault: 1, //是否默认 1是 2否
          RquUrl: '', //请求地址
          AppCode: '',
          AppSecret: '',
          AppKey: '',
          AppID: '',
          Name: '', //别名
          Type: 1 //阿里云 2快递鸟
        },
        isEdit: false, // 是否可以修改类型
        rules: {  
          Name: [
              { required: true, message: '请填写别名', trigger: 'change' }
          ],
        },

      };
    },
    created() {

    },
    methods: {
      getList() {
        this.loading=true;
        this.apipost("/api/MallBase/GetExpressConfigList", {}, res => {
        this.loading=false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        })
      },
      //保存
      saveInfo() {
        if (this.addMsg.Type == 1) {
          if (this.addMsg.AppCode == '') {
            this.Error('请填写AppCode');
            return
          }
        }
        if (this.addMsg.Type == 2) {
          if (this.addMsg.AppID == '') {
            this.Error('请填写AppID');
            return
          }
        }
        this.apipost("/api/MallBase/SetExpressConfig", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.getList();
            this.clearMsg();
            this.dialogVisible = false;
            this.Success(res.data.message);
          } else {
            this.Error(res.data.message);
          }
        })
      },
      //清空值
      clearMsg() {
          this.addMsg.Id = 0,
          this.addMsg.IsDefault = 1, //是否默认 1是 2否
          this.addMsg.RquUrl = '', //请求地址
          this.addMsg.AppCode = '',
          this.addMsg.AppSecret = '',
          this.addMsg.AppKey = '',
          this.addMsg.AppID = '',
          this.addMsg.Name = '', //别名
          this.addMsg.Type = 1 //阿里云 2快递鸟
      },
      //修改
      EditexpressSetup(item) {
        this.isEdit = true;
        this.dialogVisible = true;
        this.comTitle = '修改信息';
        this.addMsg = JSON.parse(JSON.stringify(item));
      },
      //新增
      addInfo(){
        this.clearMsg();
        this.isEdit=false;
        this.comTitle='增加信息';
        this.dialogVisible=true;
      }
    },
    mounted() {
      this.getList();
    }
  };

</script>
<style>

  .expressSetup .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .expressSetup .operatImg {
    width: 32px;
    height: 32px;
    margin: 0 10px
  }

  .expressSetup .el-table .cell {
    overflow: visible;
  }
  .expressSetup .aliyun{
      position: absolute;
      top:-72px;
      left:-10px;
      width:60px;
  }
  .expressSetup .kuaidiniao{
      position: absolute;
      top:-93px;
      left:-10px;
      width:60px;
  }

</style>
