<template>
  <task-design-view
    :processIndex="4"
    :taskTemplateName="templateName"
    :taskTemplateId="templateId"
    @saveData="handleTitleChange">
    <div class="task-design-content">
      <div class="task-design-content-sm">
        <a-card :bordered="false">
          <div class="setting-form">
            <a-form :form="form" layout="vertical">
              <a-form-item
                label="审批人去重">
                <a-select
                  placeholder="请选择"
                  v-decorator="[
                    'approveRepeat',
                    {rules: [{ required: true, message: '请选择' }]}
                  ]">
                  <a-select-option value="" disabled>请选择</a-select-option>
                  <a-select-option v-for="(item, index) in approveRepeatList" :key="index" :value="item.value">
                    {{item.name}}
                  </a-select-option>

                </a-select>
              </a-form-item>
<!--              <a-form-item-->
<!--                label="通知抄送人">-->
<!--                <span>按照流程顺序进行通知，具体<span style="margin-left: .5em;color: #00A0E9;cursor: pointer;">设置方法查看</span></span>-->
<!--              </a-form-item>-->
              <a-form-item
                label="审批意见填写提示">
                <a-input
                  v-decorator="[
                    'approveTips',
                    {rules: [{ required: true, message: '请输入' }, { max: 20, message: '最多填写20字' }]}
                  ]"
                  placeholder="请输入"
                />
              </a-form-item>
              <a-form-item
                label="审批意见"
                :required="true"
                help=""
              >
                <a-radio-group
                  v-decorator="[
                    'isRequired',
                    {rules: [{ required: true, message: '请输入标题' }]}
                  ]">
                  <a-radio value="0">是</a-radio>
                  <a-radio value="1">否</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-form>
          </div>

        </a-card>
      </div>
    </div>
  </task-design-view>
</template>

<script>
  import { PageView, TaskDesignView } from '@/layouts'
  import ARow from 'ant-design-vue/es/grid/Row'
  import {} from '@/api/task'
  import { mapActions, mapGetters } from 'vuex'

  export default {
    name: 'taskOtherSetting',
    components: {
      ARow,
      PageView,
      TaskDesignView
    },
    computed: {
      ...mapGetters(['workTemplateOtherSettings'])
    },
    data() {
      return {
        templateId: '',
        templateName: '',
        // form
        form: this.$form.createForm(this),
        approveRepeatList: [
          {
            name: '是',
            value: '1'
          },
          {
            name: '否',
            value: '0'
          }
        ]
      }
    },
    methods: {
      ...mapActions(['saveWorkTemplateOtherSettings']),
      /**
       * 父组件的上方导航条回调
       * @param val
       * @param callback
       */
      handleTitleChange(val, callback) {
        console.log(val)
        this.form.validateFields((err, values) => {
          console.error(err)
          // if (!err) {
          const data = Object.assign(values, {
            templateId: this.templateId
          })
          this.saveWorkTemplateOtherSettings(data)
            .then(res => {
              console.log('res', res)
              // 跳转页面
              callback()
            })
            .catch(err => {
              console.error('err', err)
            })
          // }
        })
      },
      initForm() {
        this.form = this.$form.createForm(this, {
          onFieldsChange: (_, changedFields) => {
            this.$emit('change', changedFields)
          },
          mapPropsToFields: () => {
            return {
              approveRepeat: this.$form.createFormField({
                value: this.workTemplateOtherSettings.approveRepeat
              }),
              isRequired: this.$form.createFormField({
                value: this.workTemplateOtherSettings.isRequired
              }),
              approveTips: this.$form.createFormField({
                value: this.workTemplateOtherSettings.approveTips
              }),
              createRoles: this.$form.createFormField({
                value: this.workTemplateOtherSettings.phone
              })
            }
          },
          onValuesChange(_, values) {
            console.log(values)
          }
        })
      }
    },
    mounted() {
      this.initForm()
      this.templateId = this.$route.query.templateId
      this.templateName = this.$route.query.templateNm
    }
  }
</script>

<style lang="less" scoped>
  .page-header {
    background: #ffffff;
    height: 100%;

    .header-title {
      display: inline-block;
      font-size: 18px;
      padding-right: 30px;
    }
  }

  .task-design-content {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 30px;

    .task-design-content-sm {
      width: 600px;
      margin: 16px auto;
    }
  }

</style>
