<template>
  <div class="flow-drawer-option" v-for="(button, i) in buttons" :key="i">
    <div class="flow-drawer-option-item">
      <div class="flow-drawer-option-item-left">
        <img src="@/assets/images/setting.svg" />
        <div class="flow-drawer-option-desc">
          <p class="drawer-option-title">
            <span>{{ props.formData[button.aliasName] ? props.formData[button.aliasName] : button.buttonName }}</span>
            <span class="alias-set" @click="aliasSetClick(button, i)">别名设置</span>
          </p>
          <p class="drawer-option-desc">{{ button.content }}</p>
        </div>
      </div>
      <div class="retract" v-if="button.field == 'retract'">
        <p>是否允许撤回已审批流程</p>
        <p><a-switch v-model:checked="props.formData.retractAlreadyApprovedFlag" checked-children="是" un-checked-children="否" /></p>
      </div>
      <div class="flow-drawer-option-item-switch">
        <a-switch v-model:checked="props.formData[button.field]" checked-children="开" un-checked-children="关" />
      </div>
    </div>

    <!-- 别名设置 -->
    <a-modal
      :width="600"
      :visible="visible"
      title="别名设置"
      v-if="visible"
      :body-style="{ paddingBottom: '8px' }"
      @update:visible="updateVisible"
      @close="updateVisible(false)"
      :maskClosable="true"
      @ok="save"
    >
      <a-input type="text" allow-clear v-model:value="aliasName" autofocus="autofocus" />
    </a-modal>
  </div>
</template>

<script setup name="FlowOperationPermissions">
import { ref } from 'vue';

// 接收属性
const props = defineProps({
  buttons: {
    type: Array,
    required: false,
    default: () => []
  },
  // 绑定数据
  formData: {
    type: Object,
    default: {}
  }
});

// 当前索引
const currentIndex = ref(0);

// 别名
const aliasName = ref('');

// 是否显示弹框
const visible = ref(false);

// 点击别名设置
const aliasSetClick = (button, i) => {
  aliasName.value = props.formData[button.aliasName] ? props.formData[button.aliasName] : button.buttonName;
  currentIndex.value = i;
  visible.value = true;
};

// 关闭弹框
const updateVisible = value => {
  visible.value = value;
};

// 保存
const save = () => {
  props.formData[props.buttons[currentIndex.value].aliasName] = aliasName.value;
  updateVisible(false);
};
</script>

<style scoped lang="less">
// 操作
.flow-drawer-option {
  .flow-drawer-option-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    padding: 14px 0;
    border-bottom: 1px solid #dee0e3;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    .flow-drawer-option-item-left {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;

      .flow-drawer-option-desc {
        margin-left: 9px;

        p {
          margin: 0;
          padding: 0;
          font-family: Microsoft YaHei;
        }

        .drawer-option-title {
          color: #575757;
          font-size: 14px;
          .alias-set {
            margin-left: 10px;
            color: var(--primary-color);
            cursor: pointer;
            font-size: 13px;
          }
        }

        .drawer-option-desc {
          color: #979797;
          font-size: 12px;
        }
      }
    }
    .retract {
      position: absolute;
      top: 12px;
      left: 500px;
      font-size: 14px;
      color: #575757;
      p {
        margin: 0;
        padding: 0;
        font-family: Microsoft YaHei;
      }
    }
  }
}
</style>
