<template>
  <el-dialog
    v-if="visible"
    :visible.sync="visible"
    :before-close="handleClose"
    :append-to-body="true"
    title="停止服务申请"
    width="60%">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item
            prop="AUDIT_DEPARTMENT_ID"
            label="主管部门"
          >
            <Treeselect
              :options="treeData"
              :normalizer="normalizer"
              v-model="form.AUDIT_DEPARTMENT_ID"
              placeholder="请选择部门"
              no-options-text="暂无数据"
              no-children-text="暂无数据"
              style="width: 100%;"
              @select="getUserList($event)"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            prop="AUDIT_USER_ID"
            label="审核人员"
          >
            <div style="display:flex;justify-content: space-between;align-items: flex-start;">
              <el-select v-model="form.AUDIT_USER_ID">
                <el-option v-for="item in userList" :key="item.USER_ID" :label="item.NAME" :value="item.USER_ID"/>
              </el-select>
              <!--              <el-button v-if="index !== 0" type="danger" @click="removeCoverPeople(index)">删除</el-button>-->
            </div>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input :rows="3" v-model="form.DESCR" type="textarea" placeholder="这里输入备注..." />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="closeWindow">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { requestFN } from '@/utils/request'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: {
    Treeselect
  },
  data() {
    return {
      visible: false,
      loading: false,
      treeData: [],
      userList: [],
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.nodes
        }
      },
      form: {},
      rules: {
        AUDIT_DEPARTMENT_ID: [{ required: true, message: '部门不能为空', trigger: 'blur' }],
        AUDIT_USER_ID: [{ required: true, message: '人员不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    init(e) {
      this.visible = true
      this.loading = false
      this.form = {}
      this.form.USER_ID = e.USER_ID
      this.form.STOP_CORPINFO = e.STOP_CORPINFO
      this.form.SERVICE_COMPANY_USER_MAP_ID = e.SERVICE_COMPANY_USER_MAP_ID
      this.getTreeData()
    },

    // 获得部门树
    getTreeData() {
      requestFN(
        '/companyApi/department/listTree',
        {
          CORPINFO_ID: this.form.STOP_CORPINFO
        }
      ).then((data) => {
        this.treeData = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
      })
    },

    // 人员
    getUserList({ id: DEPARTMENT_ID }) {
      if (this.form.AUDIT_USER_ID) this.form.AUDIT_USER_ID = ''
      requestFN(
        '/companyApi/user/listAll',
        {
          DEPARTMENT_ID
        }
      ).then((data) => {
        this.userList = data.userList
      }).catch((e) => {
      })
    },

    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          this.form.AUDIT_STATUS = 0
          requestFN(
            '/stopserverlog/add',
            {
              ...this.form
            }
          ).then((data) => {
            this.loading = false
            this.$message({
              message: '申请成功',
              type: 'success'
            })
            this.handleClose()
          }).catch((e) => {
            this.listLoading = false
          })
        } else {
          return false
        }
      })
    },
    handleClose() {
      this.visible = false
      this.$emit('finish', '')
    },
    closeWindow() {
      this.handleClose()
    }
  }
}
</script>
