<!-- @format -->

<template>
  <div class="switchAlign">
    <a-switch
      v-model:checked="checked"
      :checkedValue="1"
      :unCheckedValue="0"
      @click="changeBool()" />
    <span v-if="configValue.expectedValue == 1 ? true : false">开</span>
    <span v-else>关</span>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, createVNode } from 'vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { Modal } from 'ant-design-vue';
  export default defineComponent({
    components: {
      ExclamationCircleOutlined,
    },
    props: {
      configValue: {
        type: Object,
      },
      index: {
        type: Number,
      },
      listKey: {
        type: String,
      },
    },
    emits: ['changeSwitch', 'blur'],
    setup(props, ctx) {
      let checked = ref<Boolean>(props.configValue.expectedValue);
      //改变开关状态
      const changeBool = () => {
        // console.log('changeBool');
        Modal.confirm({
          title: '警告',
          icon: createVNode(ExclamationCircleOutlined),
          content: '确定要将进行此项操作?',
          onOk() {
            let value = {
              configValue: checked.value,
              index: props.index,
              key: props.listKey,
            };
            ctx.emit('changeSwitch', value);
          },
          onCancel() {
            checked.value = props.configValue.expectedValue;
          },
        });
      };
      return {
        changeBool,
        checked,
      };
    },
  });
</script>
<style lang="less" scoped>
  .switchAlign {
    display: flex;
    align-items: center;
    span {
      padding-left: 10px;
    }
  }
</style>