<!--
  @description:申报-申请申报弹框
  @Modifier:qk
  @routerPath:supplierDeclaration/declaraTionrecord
  @date:2020/2/17-17:27
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="declareDialog.dialog"
      :close-on-click-modal="false"
      title="选择申报单位"
      width="700px"
      custom-class="el-dialog__body-p0"
      top="calc((100vh - 629px) / 2)"
    >
      <section class="tools p0-16 pt16 clearfix">
        <el-form ref="infoFrom" :rules="rules" :model="infoFrom">
          <el-form-item ref="supplyScope" label="供货范围" prop="supplyScope">
            <el-input
              v-model="infoFrom.supplyScope"
              placeholder="请选择"
              disabled
              style="width:calc(100% - 240px)"
            />
            <el-button type="primary" @click="dialogData.dialog=true">
              选择
            </el-button>
            <el-button plain @click="categoryTreeInfo('clear')">
              清空
            </el-button>
          </el-form-item>
        </el-form>
      </section>
      <section class="main">
        <div class="mb10">
          <el-scrollbar style="height:400px">
            <el-tree
              ref="tree"
              :props="defaultProps"
              :load="treeLoadNode"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              :default-expanded-keys="defaultExpandedKeys"
              lazy
              node-key="id"
              @current-change="currentChange"
            />
          </el-scrollbar>
        </div>
        <table class="tableData mb10">
          <tr>
            <td>申报单位</td>
            <td>{{ treeSeletData.labels }}</td>
          </tr>
        </table>
      </section>
      <!--操作按钮-->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ensure('infoFrom')">确 认</el-button>
        <el-button @click="declareDialog.dialog = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 供货范围 -->
    <category-tree-dialog :dialog-data="dialogData" @categoryTreeInfo="categoryTreeInfo" />
  </div>
</template>

<script>
/* api */
import { submitDeclaration, getDeclarationDepartIdsBySupplierId, queryDeclarationInfo } from '@/api/supplier/declaraTionrecord'
import { getOrganizationTree } from '@/api/common/user'
/* 组件 */
import categoryTreeDialog from '@/views/common/tools/categoryTree-dialog'// 产品名称-弹框
export default {
  name: 'DeclaraTionrecordAdd',
  components: {
    'category-tree-dialog': categoryTreeDialog // 产品名称-弹框
  },
  props: {
    declareDialog: {
      type: Object,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      // 组织树请求次数
      frequency: 0,
      // 默认展开
      defaultExpandedKeys: [],
      // 供货范围-弹窗
      dialogData: {
        title: '供货范围',
        dialog: false, // 隐藏状态 true 展示/false 隐藏
        selectCodes: [] // 当前选中的供货范围Code
      },
      treeFrom: {
        excludeIds: '' // 过滤不需要返回的节点id集合
      },
      // 申报-选择的数据
      treeSeletData: {
        keys: '', // id集合
        labels: ''// 名称集合
      },
      defaultProps: {
        children: 'children',
        label: 'departname',
        isLeaf: 'existLeaf'
      },
      // 参数
      infoFrom: {
        status: '01', // 00 保存 01 提交
        supplyScope: '', // 供货范围名称
        supplyScopeId: '', // 供货范围 id
        list: []
      },
      // 校验
      rules: {
        supplyScope: [{ required: true, message: '请选择', trigger: 'change' }] // 供货范围
      }
    }
  },
  watch: {
    // 供货范围 id
    'infoFrom.supplyScopeId'(val) {
      this.dialogData.selectCodes = val ? val.split(',') : []// 前选中的采购品类Code
    },
    'declareDialog.dialog'(val) {
      if (val) {
        this.initData()// 查询数据
        this.getDeclarationDepartIdsBySupplierId()// 筛选掉已申报过的单位
      } else {
        // 初始化
        this.treeSeletData = {
          keys: '', // id集合
          labels: ''// 名称集合
        }
        this.infoFrom = {
          status: '01', // 00 保存 01 提交
          supplyScope: '', // 供货范围名称
          supplyScopeId: '', // 供货范围 id
          list: []
        }
      }
    }
  },
  created() {
    // 初始化弹窗数据
    this.initData()
  },
  methods: {
    // 过滤已选择的数据
    filterNode(value, data) {
      if (!value) return true
      return value.indexOf(data.id) === -1
    },
    // 查询数据
    initData() {
      if (this.declareDialog.id) {
        queryDeclarationInfo(this.declareDialog.id).then(res => {
          const { data } = res.data
          this.treeSeletData = {
            keys: data.departId, // id集合
            labels: data.departName// 名称集合
          }
          this.infoFrom.supplyScope = data.supplyScope// 供货范围名称
          this.infoFrom.supplyScopeId = data.supplyScopeId// 供货范围 id
        })
      }
    },
    // 获取掉已申报过的单位
    getDeclarationDepartIdsBySupplierId() {
      const departiId = this.$store.getters.info.departid// 供应商主键id
      getDeclarationDepartIdsBySupplierId(departiId).then(res => {
        this.treeFrom.excludeIds = res.data
        this.$refs.tree.filter(this.treeFrom.excludeIds)
      })
    },
    /*
    初始化数据
    resolve 添加树节点数据
    */
    initLoad(node, resolve) {
      const data = {
        parentId: node.key, // 父节点id
        ...this.treeFrom
      }
      getOrganizationTree(data).then(res => {
        // 第一次请求做默认展开
        this.frequency++
        if (this.frequency === 1) {
          this.defaultExpandedKeys = [res.data[0].id]
        }
        res.data.forEach(item => {
          // 判断是否为第一级节点-初始化数据
          if (node.level === 0) {
            item.disabled = true// 设置复选框不可选择
          }
          item.existLeaf = !item.existLeaf// 指定节点是否为叶子节点
        })
        resolve(res.data)// 添加树节点
      })
    },
    // 树节点加载子集事件
    treeLoadNode(node, resolve) {
      this.initLoad(node, resolve)// 初始化数据
    },
    // 供货范围/清空
    categoryTreeInfo(data) {
      if (data === 'clear') { // 清空
        this.infoFrom.supplyScope = ''// 名称
        this.infoFrom.supplyScopeId = ''// 代码
      } else { // 选择
        this.infoFrom.supplyScope = data.labels// 名称
        this.infoFrom.supplyScopeId = data.keys// 代码
      }
    },
    // 单选时-选择信息
    currentChange(item, node) {
      if (node.level !== 1) { // 不是第一级时
      // 初始化
        this.infoFrom.list = []
        const data = {
          keys: [], // id集合
          labels: []// 名称集合
        }
        // 前端展示
        data.keys.push(item.id)
        data.labels.push(item.departname)
        // 保存到后端
        this.infoFrom.list.push({
          departId: item.id, // 审核单位id
          departName: item.departname, // 审核单位名称
          id: ''// 主键id
        })
        data.keys = data.keys.join(',')
        data.labels = data.labels.join(',')
        this.treeSeletData = data// 选择的信息
      }
    },
    // 确认-提交申报
    ensure(formName) {
      if (this.infoFrom.list.length > 0) {
        this.$refs[formName].validate((valid) => {
          if (valid) { // 校验通过
            submitDeclaration(this.infoFrom).then(() => {
              this.$emit('declartInfo', this.infoFrom)
              this.declareDialog.dialog = false
            })
          }
        })
      } else {
        this.$message({
          message: '请选择申报单位',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
