<!--
<sync-set
  :editRow="editRow"
  :syncShow="syncShow"
  @hideSyncDialog="hideSyncDialog">
</sync-set>

import syncSet from '@/components/api/sync-set.vue'
 -->
<template>
  <div v-show="customDialog">
    <el-dialog
      class="edit-dialog"
      title="同步"
      :visible.sync="customDialog"
      width="424px"
      :before-close="handleClose">
      <div class="edit-dialog-body">
        <el-form
          ref="syncForm"
          :model="formData"
          label-width="110px"
          :rules="rules">
          <el-form-item label="API名称:">
            {{ $route.query.interfaceName }}
          </el-form-item>
          <el-form-item label="API版本:">
            {{ formData.version }}
          </el-form-item>
          <el-form-item
            label="同步至环境:"
            prop="sceneCode">
            <el-select
              v-model="formData.sceneCode"
              class="w-190"
              placeholder="请选择">
              <el-option
                v-for="item in envOptions"
                :key="item.sceneCode"
                :label="item.sceneName"
                :value="item.sceneCode" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
        style="padding-bottom: 10px;">
        <el-button @click="customCancel">
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="customConfirm('syncForm')">
          同 步
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getRequest } from '@/api/api';
import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
  name: 'SyncSet',
  props: {
    syncShow: {
      type: Boolean,
      default: false
    },
    editRow: {
      type: Object,
      default() {
        return {
          interfaceVersionId: '',
          version: '',
          status: '', // 0 删除 1更新修改 2发布 3 历史发布版本
          description: '',
          proxyType: '',
          defaultFlag: false,
          sceneCode: ''
        };
      }
    }
  },
  data() {
    return {
      customDialog: false, // 弹框显示
      formData: {
        interfaceVersionId: '',
        version: '',
        status: '', // 0 删除 1更新修改 2发布 3 历史发布版本
        description: '',
        proxyType: '',
        sceneCode: ''
      },
      rules: {
        sceneCode: [ { required: true, message: '请选择环境', trigger: 'change' } ]
      },
      envOptions: [
        /* {
          sceneCode: '1',
          sceneName: '测试'
        },
        {
          sceneCode: '2',
          sceneName: '正式'
        } */
      ]
    };
  },

  /* 接收数据 */
  mounted() {
    const that = this;
    that.getEnvData();
    that.customDialog = that.syncShow;
    that.formData = JSON.parse(JSON.stringify(that.editRow));
  },
  methods: {
    /**
     * @description: 关闭
     * @param {Function} done
     * @author: 无尘
     */
    handleClose(done) {
      const that = this;
      done();
      that.hideDialog();
    },

    /**
     * @description: 取消
     * @author: 无尘
     */
    customCancel() {
      const that = this;
      that.hideDialog();
    },

    hideDialog() {
      const that = this;
      that.customDialog = false;
      that.$emit('hideSyncDialog');
      /* that.$nextTick(() => {
        that.formData.classifyName = '';
      }); */
    },

    /**
     * @description: 确定同步
     * @param {String} formName
     * @returns {Boolean}
     * @author: 无尘
     */
    customConfirm(formName) {
      const that = this;
      if (that.editRow.sceneCode == that.formData.sceneCode) {
        showMsg.showmsg('已经在当前环境', 'warning');
        return false;
      }
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.postEditData();
        } else {
          return false;
        }
      });
    },
    postEditData() {
      const that = this;
      let para = {
        interfaceVersionId: that.formData.interfaceVersionId,
        sceneCode: that.formData.sceneCode
      };
      getRequest('/gateway-manage/async-api', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            showMsg.showmsg('同步成功', 'success');
            that.setData();
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    /**
     * @description: 提交数据
     * @author: 无尘
     */
    setData() {
      const that = this;
      that.$emit('hideSyncDialog');
    },
    /**
     * @description: 获取环境列表
     * @author: 无尘
     */
    getEnvData() {
      const that = this;
      getRequest('/gateway-manage/list-all-scene', {})
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            that.envOptions = resData.result || [];
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    syncShow: function(newData, oldData) {
      const that = this;
      that.customDialog = newData;
    },
    editRow: function(newData, oldData) {
      const that = this;
      that.formData = JSON.parse(JSON.stringify(newData));
    }
  }
};
</script>

<style lang="less" scoped>
.w-190 {
  width: 190px;
}
.edit-dialog {
  /deep/ .el-dialog__body {
    padding: 2px 55px 0 34px;
  }

  /deep/ .el-dialog__footer {
    border: none;
    padding-top: 3px;
  }

  &__title {
    width: 100%;
    height: 38px;
    padding: 12px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(235, 238, 245, 1);
  }

  .el-alert--info {
    width: 400px;
    font-size: 14px;
    color: #606266;
    background: #e6f7ff;
    border: 1px solid rgba(145, 213, 255, 1);
  }
  .el-icon-info {
    width: 12px;
    font-size: 12px;
    color: #1890ff;
  }
  .el-form {
    margin-top: 40px;
  }
}
</style>
