<template>
  <div class="custom-component">
    <template v-if="!changeFlag">
      <el-button type="primary" @click="orgSign">签章上传</el-button>
    </template>
    <template v-else>
      <div class="showImg">
        <el-image :src="orgSignUrl"></el-image>
      </div>
    </template>

    <!-- <el-dialog
      title="签章"
      :visible.sync="orgSignVisiable"
      width="50%">
      <template>
        <el-radio-group v-model="radio">
          <template v-for="(item,index) in orgSignList">
            <el-radio :key="index" :label="index">
              <el-image :src="item"></el-image>
            </el-radio>
          </template>
        </el-radio-group>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="orgSignVisiable = false">取 消</el-button>
        <el-button type="primary" @click="addSignature">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
export default {
  name: 'custom-width-height',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 100
    },
    options: {
      type: Array,
      default: () => []
    },
    orgSignList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dataModel: this.value,
      changeFlag: false,
      orgSignVisiable: false,
      radio: null,
      orgSignUrl: null
    }
  },
  mounted() {},
  watch: {
    value: {
      handler(val) {
        this.dataModel = val
      },
      immediate:true
    },
    dataModel: {
      handler(val) {
        this.$emit('input', val)
      },
      immediate:true
    },
  },
  methods: {
    orgSign() {
      this.$emit('orgSign')
    },
    addSignature() {
      this.orgSignUrl = this.orgSignList[this.radio]
      console.log(this.orgSignUrl);
      this.changeFlag = true
      this.orgSignVisiable = false

    },
  }
}
</script>

<style lang="scss">
.custom-component{
  height: auto;

  span{
    +span{
      margin-left: 10px;
    }
  }
}

.custom-component .showImg{
  position: absolute;
  right: 50px;
  z-index: 100;
}
</style>
