<template>
  <div class="todo-setting__container">
    <el-button
      size="small"
      icon="el-icon-setting"
      @click="() => (todoSettingVisible = true)"
    >
      {{ $t('task.ApprovalSettings') }}
    </el-button>
    <el-dialog
      :title="$t('task.ApprovalSettings')"
      :visible.sync="todoSettingVisible"
      :close-on-click-modal="false"
      width="550px"
      append-to-body
      @open="openHandler"
    >
      <el-form v-form="{ inputsDisplay: 'block' }" label-width="150px">
        <ht-form-item :label="$t('task.TaskOpenMode')">
          <ht-radio v-model="openMode" :options="openModeOptions" />
        </ht-form-item>
        <ht-form-item>
          <span
            slot="label"
            v-tooltip="
              '同一流程、同一审批人，审批完当前任务后，可自动或手动打开下一条任务。'
            "
          >
            {{ $t('task.ProcessApprovalSettings') }}
          </span>
          <ht-radio v-model="autoOpenNext" :options="autoOpenNextOptions" />
        </ht-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel">
          {{ $t('Common.Cancel') }}
        </el-button>
        <el-button type="primary" size="small" @click="confirmOk">
          {{ $t('Common.Confirm') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'TodoSetting',
    props: {
      beforeClick: {
        type: Function,
        default: null,
      },
    },
    data() {
      return {
        todoSettingVisible: false,
        openModeOptions: [
          { key: '1', value: '子窗口模式' },
          { key: '2', value: '弹窗模式' },
        ],
        autoOpenNextOptions: [
          { key: '1', value: '自动打开下一条' },
          { key: '2', value: '手动打开下一条' },
        ],
        openMode: '1',
        autoOpenNext: '1',
      }
    },
    methods: {
      openHandler() {
        const isDialog = localStorage.getItem('isDialog')
        const isAutoOpenNextTodo = localStorage.getItem('isAutoOpenNextTodo')
        this.openMode = isDialog && JSON.parse(isDialog) === true ? '2' : '1'
        this.autoOpenNext =
          isAutoOpenNextTodo && JSON.parse(isAutoOpenNextTodo) === false
            ? '2'
            : '1'
      },
      confirmOk() {
        localStorage.setItem('isDialog', this.openMode == '2')
        localStorage.setItem('isAutoOpenNextTodo', this.autoOpenNext == '1')
        this.todoSettingVisible = false
      },
      cancel() {
        this.todoSettingVisible = false
      },
    },
  }
</script>
<style lang="scss" scoped>
  .todo-setting__container {
    display: inline-block;
    margin-left: 10px;
  }
</style>
