<template>
  <a-drawer
    width="100%"
    class="model_set"
    :visible="drawerVisible"
    :keyboard="false"
    :closable="false"
    destroy-on-close
    :header-style="{ padding: 0 }"
  >
    <template slot="title">
      <div class="model-header">
        <div class="model-header__field">
          <div
            class="model-back"
            @click="drawerVisible = false"
          >
            <a-icon type="caret-left" />
          </div>
          <div class="model-title">{{ $t('模型维护') }}</div>
        </div>
        <div class="model-actions">
          <a-space :size="12">
            <a-button
              type="primary"
              @click="handleSave"
              :loading="confirmLoading"
              >{{ $t('保存') }}</a-button
            >
            <a-button @click="drawerVisible = false">{{ $t('关闭') }}</a-button>
          </a-space>
        </div>
      </div>
    </template>
    <!-- 模型维护组件 -->
    <model-design ref="modelDesignRef" :model-id="modelId" />
  </a-drawer>
</template>
<script>
  const modelDesign = require('w-vue-chongqing/src/components/modelDesign').default
  
  export default {
    name: 'setModel',
    components: {
      modelDesign,
    },
    props: {
      value: {
        type: Boolean,
        default: false,
      },
      modelId: {
        //模型ID
        type: [String, Number] 
      },
    },
    computed: {
      drawerVisible: {
        get() {
          return this.value;
        },
        set(val) {
          this.$emit('input', val);
        },
      },
    },
    data() {
      return {
        confirmLoading: false,
      };
    },
    methods: {
      handleSave() {
        this.confirmLoading = true;
        this.$refs.modelDesignRef.saveModel(() => {
          this.$emit('change')
          this.drawerVisible = false;
          this.confirmLoading = false;
        })
      }
    },
  };
</script>
<style lang="less" scoped>
  .model_set {
    /deep/.ant-drawer-content {
      .ant-drawer-header {
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
      }
      .ant-drawer-body {
        height: calc(100% - 50px);
        padding: 12px 12px 0;
        background: #eff2fd;
      }
    }
  }
  .model-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    .model-header__field {
      display: flex;
      align-items: center;
      height: 100%;
    }
    .model-back {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 100%;
      border: 1px solid #e8e8e8;
      cursor: pointer;
    }
    .model-title {
      margin: 0 28px 0 12px;
      font-weight: bold;
      color: #000;
    }
    .model-actions {
      margin-right: 15px;
    }
  }
  
</style>
