<template>
  <audit-form-top-banner :handel-save-form="saveForm" @handelSaveForm="saveForm">
    <sd-detail-form
      ref="workNodeForm"
      form-id="iamWorkNode"
      page-id="audit/node/workNode/iamWorkNode"
      :record-id="this.$route.query.record ? parseInt(this.$route.query.record) : null"
      :class="$style.form"
      @close="close(true)"
      @saved="saved"
    >
      <template v-slot="{ model, fields }">
        <table
          ><tr
            ><td style="border:none;padding-left:5px">
              <audit-advanced-group
                :expand="workExpand"
                :expand-str="'workExpand'"
                :group-label="'基本信息'"
                tablestyle="''"
                @changedClick="changedClick"
              ></audit-advanced-group> </td></tr
        ></table>

        <table v-show="workExpand">
          <tr>
            <!-- 代码 -->
            <sd-form-item-td name="nodeCode">
              <a-form-model-item
                :rules="[
                  {
                    validator: validator,
                    trigger: ['change', 'blur'],
                  },
                ]"
                prop="nodeCode"
              >
                <a-input
                  v-model="model.nodeCode"
                  @blur="fnbulrvaild"
                  @change="fnbulrvaild"
                ></a-input
              ></a-form-model-item>
            </sd-form-item-td>
            <!-- 节点名称 -->
            <sd-form-item-td name="nodeName" />
          </tr>
          <tr>
            <!-- 所属阶段 -->
            <sd-form-item-td name="nodePeriod" />
            <!-- 节点URL -->
            <sd-form-item-td name="nodeUrl" />
          </tr>

          <tr>
            <!-- 排序号 -->
            <sd-form-item-td name="sortNo" />
          </tr>
          <tr>
            <!-- 权限配置 -->
            <sd-form-item-td name="authority" :colspan="3">
              <template slot="read-and-edit">
                <div :class="$style.qxList">
                  <div v-for="item of fields.authority.attr.selectListItem" :key="item.value">
                    <div>{{ item.label }}</div>
                    <div style="width: 50px"
                      ><a-button
                        type="link"
                        size="small"
                        :title="'编辑'"
                        :style="
                          model.authority && model.authority.indexOf(item.value) !== -1
                            ? 'color: red;'
                            : ''
                        "
                        @click="handleAuthorityChange(item)"
                      >
                        <sd-icon :type="'edit'" :theme="'fill'" /> </a-button
                    ></div>
                  </div>
                </div>
              </template>
            </sd-form-item-td>
          </tr>
          <tr>
            <!-- 编制人员 -->
            <sd-form-item-td name="creatorName" />
            <!-- 编制日期 -->
            <sd-form-item-td name="creationTime" />
          </tr>
        </table>
      </template>
    </sd-detail-form>
  </audit-form-top-banner>
</template>

<script>
import debounce from 'lodash.debounce'
import axios from '@/common/services/axios-instance'
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import auditAdvancedGroup from '../../../components/audit-advanced-group.vue'
import auditAdvancedGroupMixins from '../../../components/audit-advanced-group-mixins'
import auditFormTopBanner from '../../../components/audit-form-top-banner'
import components from './_import-components/audit-worknode-form-import'

export default {
  name: 'AuditWorknodeForm',
  metaInfo: {
    title: '作业节点',
  },
  components: {
    ...components,
    auditAdvancedGroup,
    auditFormTopBanner,
  },
  mixins: [auditAdvancedGroupMixins],
  data() {
    return {
      saveFlag: true,
      workExpand: true,
    }
  },
  methods: {
    // 代码校验
    fnbulrvaild() {
      this.$refs.workNodeForm.validateField('nodeCode').then(() => {
        return false
      })
    },
    validator(rule, value, callback) {
      const id = this.$route.query.record || ''
      debounce(() => {
        axios
          .get(`api/xcoa-mobile/v1/iamworknode/node-code?nodeCode=${value}&id=` + id)
          .then((res) => {
            if (res?.data === true) {
              callback()
            } else {
              callback('已存在，不允许重复')
            }
          })
      }, 500)()
    },
    close(flag) {
      crossWindowWatcher.notifyChange(this.$route.fullPath, flag)
      window.close()
    },
    saved() {
      this.close(true)
    },
    // 保存
    saveForm() {
      this.$refs.workNodeForm.validateFields().then(() => {
        this.$refs.workNodeForm.saveBtnClick()
      })
    },
    handleAuthorityChange(item) {
      const ref = this.$refs.workNodeForm
      const originValues = ref.getFieldValue('authority')
      let values = originValues ? originValues.split(',') : []
      const v = item.value

      if (values.indexOf(v) !== -1) {
        values = values.filter((it) => it !== v)
      } else {
        values.push(v)
      }

      ref.setFieldValue('authority', values.join(','))
    },
  },
}
</script>

<style module lang="scss">
@import '@/webflow/sd-flow-form.scss';

.qxList {
  width: 500px;
  padding: 0.5rem;

  > div {
    display: flex;
    justify-content: space-between;
    border: 0.1px solid #e8e8e8;
    padding: 0 8px;

    > div:first-child {
      border-right: 0.1px solid #e8e8e8;
      width: 350px;
    }
  }
}
</style>
