<template>
  <el-dialog 
  :visible.sync="dialogVisible"
  :title="$t('msg.choose_domain')"
  width="30%">
  {{$t('form.domain')}}：
  <el-select
  v-model='domainId'>
    <el-option
      v-for="item in domainList"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancleCheck">{{$t('btns.cancel')}}</el-button>
    <el-button type="primary" @click="checkDomain">{{$t('btns.confirm')}}</el-button>
  </span>

  </el-dialog>
</template>

<script>
import { getDomainList} from "@/service/ReportApi.js";

export default {
  name: 'ChooseDomain',
  props:['visible'],
  data(){
    return{
      domainId:"",
      domainList:[]
    }
  },
  computed:{
    dialogVisible:{
      get(){
        return this.visible;
      },
      set(val){
        this.$emit("update:visible",val)
      }
    }
  },
  created(){
    this.getData();
  },
  mounted(){
  },

  methods:{
    checkDomain(){
      this.$emit("checkDomainOk",this.domainId)
      this.$emit("update:visible",false)
    },
    cancleCheck(){
      this.$emit("update:visible",false)
    },
    getData(){
      getDomainList({
        onSucess: response => {
          if (response.data.errcode == 0) {
            this.domainList=response.data.data
          }
        }
      })
    }
  }
}
</script>