<template>
  <el-dialog
    title="画面切换"
    :visible.sync="centerDialogVisible"
    width="350px"
    center
  >
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="画面名称：" prop="picture">
        <el-select v-model="ruleForm.picture" placeholder="请选择">
          <el-option
            v-for="item in pictureList"
            :key="item"
            :label="item.name"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="changeForm()">切换</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
    name: 'CreatePicture',
    data() {
        return {
            centerDialogVisible: false,
            ruleForm: { picture: '' },
            rules: {
                picture: [{ required: true, message: '请选择画面', trigger: 'change' }]
            }
        };
    },
    computed: {
        pictureList() {
            return this.$store.state.map.map.pictureList;
        }
    },
    methods: {
        changeForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$emit('pictureChanged', this.ruleForm.picture);
                }
            });
        },
        doClose() {
            this.$refs.ruleForm.resetFields();
            this.centerDialogVisible = false;
        },
        doShow() {
            this.centerDialogVisible = true;
        }
    }
};
</script>

<style scoped>

</style>
