<template>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="70%"
      append-to-body
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="form-dialog-box"
      v-loading="loading"
      :element-loading-text="loadingText"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0)">
        <div
          v-loading="loading"
          :element-loading-text="''"
          element-loading-spinner="''"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          >
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本信息：" name="first"></el-tab-pane>
          </el-tabs>
          <el-form :model="form" ref="form" :rules="rules" label-width="120px">
            <div v-show="activeName == 'first'">
                <el-form-item label="第三方名称：" prop="name">
                  <el-input style="width: 350px;" v-model="form.name" placeholder="请输入第三方名称" maxlength="50" show-word-limit />
                </el-form-item>
                <el-form-item label="状态：" prop="status">
                    <el-radio-group v-model="form.status">
                    <el-radio 
                        v-for="dict in dict.type.openapi_account_status"
                        :label="Number(dict.value)"
                        :key="dict.value"
                        >{{ dict.label }}</el-radio>
                    </el-radio-group>
                    
                </el-form-item>
                <el-form-item label="通知地址：" prop="noticeUrl">
                  <el-input style="width: 350px;" v-model="form.noticeUrl" placeholder="请输入通知地址" maxlength="50" show-word-limit />
                </el-form-item>
                <el-form-item label="允许访问API：" prop="apiList">
                  <el-input style="width: 350px;" type="textarea" v-model="form.apiList" placeholder="请输入允许访问API" maxlength="200" show-word-limit />
                </el-form-item>
                <el-form-item label="来源标签：" prop="sourceLabel">
                    <el-select v-model="form.sourceLabel" clearable placeholder="请选择来源标签">
                      <el-option
                          v-for="dict in dict.type.order_form_type"
                          :key="dict.value"
                          :label="dict.label"
                          :value="Number(dict.value)">
                      </el-option>
                    </el-select>
                </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" v-if="formStatus==1">
        <el-button @click="cancel">取消</el-button>
        <el-button
          type="primary"
          @click="submitForm"
          :loading="loading"
          element-loading-text="提交中..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        > 
          {{ loading ? '提交中...' : '保存' }}
        </el-button>
      </span>
      <!-- 添加或修改对话框 End -->
    </el-dialog>
  </template>
  
  <script>
  import { 
    getTableDeatilsByIdApi,
    addTableApi,
   } from '@/api/thirdParty'
  export default {
    name: "addAndEdit",
    //components: {selectMoreBox},
    dicts: ['openapi_account_status','order_form_type'],
    data() {
      return {
        title: "",
        model: "", // EDIT: 编辑模式 ADD : 新增模式  EDITInit : 编辑模式（需要请求详情）
        open: false,
        loading: false,
        loadingText: "拼命加载数据中...",
        formStatus: null, // 0/null : 加载中 1 : 获取详情成功 2  : 获取详情失败 
        configUrl: {
          list: '', // 列表地址
          add: '/thirdapi/openapiAccount/insertOrUpdate', // 新增地址
          details: '/thirdapi/openapiAccount/selectById', // 详情地址
          edit: '/thirdapi/openapiAccount/insertOrUpdate', // 编辑地址
        },
        form: {
          id: undefined,
        },
        rules: {
          name: [{ required: true, message: "请输入第三方名称", trigger: ["change","blur"] }],
          status: [{ required: true, message: "请选择状态", trigger: ["change","blur"] }],
          noticeUrl: [{ required: true, message: "请输入通知地址", trigger: ["change","blur"] }],
          apiList: [{ required: true, message: "请输入允许访问API列表", trigger: ["change","blur"] }],
          sourceLabel: [{ required: true, message: "请输入来源标签", trigger: ["change","blur"] }],
        },
  
        activeName: 'first',
  
        actionUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE,
        actionUrlLoading: false,
  
        templateIdList: []
      };
    },
    
    methods: {
      async initData(title , model,row){
        this.title = title
        this.activeName = 'first'
        this.open = true
        this.loadingText = "拼命加载数据中..."
        this.loading = true
        this.model = model
        this.formStatus = 0
        if(model=='ADD') { // 新增
          this.$set(this,'form',{
            ...row,
            status: 1,
            //performVoList: [],
          })
          this.formStatus = 1
        }else if(model=='EDIT') { // 新增
          let obj = {
            ...row,
            //image: row.image?row.image.split(','):[],
          }
          this.$set(this,'form',{
            memberId: row.id
          })
          this.formStatus = 1
        }else if(model=='EDITInit') { // 新增
          await this.getTableDeatilsFun(row)
        }
        this.loading = false
        this.$nextTick(()=>{
            if(this.$refs["form"]) {
            this.$refs["form"].clearValidate();
            }
        })
      },
      /** 获取详情 */
      async getTableDeatilsFun(row) {
        const id = row.id
        this.loading = true
        try {
          let res = await getTableDeatilsByIdApi({id})
          if(res.code == 200) {
            let obj = {
              ...res.data,
              //status: 1,
              //eventTime: [res.data.startDate,res.data.endDate], // 发放时间段
              //image: res.data.image?res.data.image.split(','):[],
            }
            this.$set(this,'form',JSON.parse(JSON.stringify(obj)))
            this.formStatus = 1
          }else {
            this.$message.error('获取详情失败!!!');
            this.formStatus = 2
            this.loading = false
            this.open = false;
          }
          this.loading = false
        } catch (error) {
          console.error('获取详情失败!!!!',error)
          this.formStatus = 2
          this.loading = false
          this.open = false;
        }
      },
      
      /**
       * 保存
       * @date 2023-11-22
       * @returns {any}
       */
      submitForm() {
        this.$refs["form"].validate((valid ,object)=> {
          if (valid) {
            this.loadingText = "提交数据中..."
            this.loading = true
            let param = JSON.parse(JSON.stringify(this.form))
            
            if (this.model != 'ADD') {
              addTableApi({
                  ...param,
                  //image: param.image ? param.image.join(','):'',
                }).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.loading = false
                this.open = false;
                this.$emit('refresh')
              }).catch(()=>{
                this.$message.error("修改失败!!!");
                this.loading = false
              })
            } else {
              addTableApi({
                  ...param,
                  //image: param.image ? param.image.join(','):'',
                }).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.loading = false
                this.open = false;
                this.$emit('refresh')
              }).catch(()=>{
                this.$message.error("新增失败!!!");
                this.loading = false
              })
            }
          }else {
            console.log("fsdfsd===",valid,object)
            if(object&&JSON.stringify(object)!='{}') {
              let srt = ''
              for(let key in object) {
                if(object.hasOwnProperty(key)) {
                  srt = srt + `[${object[key][0].message}],`
                }
              }
              this.$message.error(srt);
            }
            
          }
        });
      },
      /**
       * 重置
       * @date 2023-11-22
       * @returns {any}
       */
      reset() {
        if(this.$refs["form"]) {
          this.$refs["form"].clearValidate();
        }
      },
      /**
       * 关闭弹框
       * @date 2023-11-22
       * @returns {any}
       */
      cancel() {
        this.reset();
        this.open = false;
      },
      /**  点击tab  */
      handleClick() {
  
      },
      
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .form-dialog-box {
    padding: 0 30px;
    padding: 0 30px;
    min-height: 50vh;
    max-height: 65vh;
    overflow-y: auto;
    >div {
      width: 100%;
      min-height: 50vh;
    }
    .form-title {
      padding: 0 0 10px 0;
      span {
        display: flex;
        color: rgba(65,80,88,1);
        font-size: 16px;
        font-family: SourceHanSansSC;
        font-weight: 700;
        line-height: 23px;
        border-left: 4px solid rgb(22, 132, 252);
        padding-left: 10px;
      }
      
    }
    ::v-deep .ql-editor {
      height: 400px;
    }
    .upload-btn {
      width: 100px;
      height: 100px;
      background-color: #fbfdff;
      border: dashed 1px #c0ccda;
      border-radius: 5px;
      i {
        font-size: 30px;
        margin-top: 20px;
      }
      &-text {
        margin-top: -10px;
      }
    }
    .avatar {
      cursor: pointer;
    }
  }
  .el-table{
    .upload-btn {
      width: 100px;
      height: 100px;
      background-color: #fbfdff;
      border: dashed 1px #c0ccda;
      border-radius: 5px;
      i {
        font-size: 30px;
        margin-top: 20px;
      }
      &-text {
        margin-top: -10px;
      }
    }
    .avatar {
      cursor: pointer;
    }
  }
  
  .area-container {
    min-height: 400px;
  }
  
  ::v-deep .area-wrap-city.el-cascader {
    line-height: normal;
    .el-input {
      cursor: pointer;
      width: 100% !important;
      height: 28px !important;
      .el-input__inner {
        display: none !important;
      }
      span.el-input__suffix {
        position: inherit !important;
        i.el-input__icon {
          line-height: inherit;
          margin-left: 5px;
        }
      }
  
      .el-input__wrapper {
        box-shadow: none;
        input {
          display: none;
        }
      }
    }
  
    .el-cascader__tags {
      display: none;
    }
  }
  
  .area-city-popper {
    .el-cascader-panel {
      .el-scrollbar.el-cascader-menu {
        .el-cascader-menu__wrap.el-scrollbar__wrap {
          height: 315px;
        }
      }
    }
  }
  
  ::v-deep .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    ::v-deep .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    ::v-deep .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    ::v-deep .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  </style>
  <style>
  .custom-class-box {
    z-index: 999999 !important;
  }
  </style>