  <!--
  @description: 推荐/邀请供应商--新增/编辑
  @Modifier: qink/haofengxian
  @routerPath:
  @date: 2020-2-25 13:20:35
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="dialog"
      :close-on-click-modal="false"
      title="推荐/邀请供应商"
      width="840px"
      custom-class="el-dialog__body-p0"
    >
      <div class="p8">
        <el-form
          ref="form"
          :rules="rules"
          :model="formData"
          :inline-message="true"
        >
          <table class="from_table">
            <tr>
              <td>
                <el-form-item label="类型" prop="qualificationsType" />
              </td>
              <td>
                <el-radio v-model="formData.qualificationsType" label="02">
                  推荐
                </el-radio>
                <el-radio v-model="formData.qualificationsType" label="01">
                  邀请到本单位
                </el-radio>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="供应商名称" prop="supplierName" />
              </td>
              <td>
                <el-input v-model="formData.supplierName" disabled style="width: calc(100% - 156px );" />
                <el-button type="primary" @click="supplierDialog.dialog = true">
                  选择
                </el-button>
                <el-button type="primary" plain @click="supplierInfo('clear')">
                  清空
                </el-button>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="供货范围" prop="supplyScope" />
              </td>
              <td>
                <el-input v-model="formData.supplyScope" disabled style="width: calc(100% - 156px );" />
                <!-- 请选择 -->
                <el-button type="primary" @click="dialogData.dialog=true">
                  选择
                </el-button>
                <el-button type="primary" plain @click="categoryTreeInfo('clear')">
                  清空
                </el-button>
              </td>
            </tr>
            <tr v-if="formData.qualificationsType === '02'">
              <td>
                <el-form-item label="推荐单位" prop="departName" />
              </td>
              <td>
                <el-input v-model="formData.departName" disabled style="width: calc(100% - 156px );" />
                <el-button type="primary" @click="oRganizationData.dialog=true">
                  选择
                </el-button>
                <el-button type="primary" plain @click="oRganizationInfo('clear')">
                  清空
                </el-button>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="推荐理由" prop="reason" />
              </td>
              <td>
                <el-input
                  v-model="formData.reason"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  type="textarea"
                  maxlength="4000"
                  show-word-limit
                  placeholder="请输入内容"
                />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="备注" prop="remark" />
              </td>
              <td>
                <el-input
                  v-model="formData.remark"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  type="textarea"
                  maxlength="4000"
                  show-word-limit
                />
              </td>
            </tr>
          </table>
        </el-form>
      </div>
      <!--底部操作按钮-->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ensure('form')">提交</el-button>
        <el-button @click="dialog = false">取消</el-button>
      </span>
    </el-dialog>
    <!-- 供货范围 -->
    <category-tree-dialog :dialog-data="dialogData" @categoryTreeInfo="categoryTreeInfo" />
    <!-- 推荐单位 -->
    <oRganizationDialog :dialog-data="oRganizationData" @oRganizationInfo="oRganizationInfo" />
    <!--选择供应商弹框-->
    <supplierListDialog :dialog-data="supplierDialog" @call-back="supplierInfo" />
  </div>
</template>

<script>
/* 接口*/
import { submitDeclarationForInviteReferer, queryDeclarationInfo } from '@/api/supplier/declaraTionrecord'
/* 组件*/
import categoryTreeDialog from '@/views/common/tools/categoryTree-dialog'// 供货范围-弹框
import oRganizationDialog from '../editorDeclaration/supplYrecord/oRganization-dialog'// 选择推荐单位弹框
import supplierListDialog from '@/views/common/user/supplierList-dialog'// 选择供应商弹框

export default {
  name: 'SupplierRecommendedAdd',
  components: {
    'category-tree-dialog': categoryTreeDialog, // 供货范围选择弹框
    oRganizationDialog, // 推荐单位
    supplierListDialog // 选择供应商弹框
  },
  data() {
    return {
      dialog: false, // 弹框是否打开
      formData: {
        departName: '', // 推荐单位名称
        qualificationsType: '01', // 类型
        supplierName: '', // 供应名称
        supplierId: '', // 供应商id
        supplyScope: '', // 供货范围
        supplyScopeId: '', // 供货范围id
        list: [], // 推荐单位
        reason: '', // 推荐理由
        remark: '', // 备注
        status: '01' // 状态 00保存 01提交
      },
      // 校验输入内容
      rules: {
        departName: [{ required: true, message: '请选择', trigger: 'blur' }], // 推荐单位
        qualificationsType: [{ required: true, message: '请选择', trigger: 'blur' }], // 类型
        supplierName: [{ required: true, message: '请选择', trigger: 'blur' }], // 供应名称
        supplyScope: [{ required: true, message: '请选择', trigger: 'blur' }], // 供货范围
        list: [{ required: true, message: '请填写', trigger: 'change' }], // 推荐单位
        reason: [{ required: true, message: '请填写', trigger: 'blur' }] // 推荐理由
      },
      // 弹窗-展示/隐藏状态 true 展示/false 隐藏
      dialogData: {
        title: '供货范围',
        dialog: false, // 供货范围
        selectCodes: [] // 当前选中的供货范围Code
      },
      // 推荐单位-弹窗
      oRganizationData: {
        dialog: false // 弹框状态
      },
      // 选择供应商-弹窗-展示/隐藏状态 true 展示/false 隐藏
      supplierDialog: {
        dialog: false // 选择供应名称弹框
      }
    }
  },
  watch: {
    // 类型
    'formData.qualificationsType'() {
      this.formData.list = []// 推荐单位清空
      this.formData.departName = ''// 推荐单位 名称清空
    }
  },
  methods: {
    // 打开弹框（父组件触发）
    openDialog(id) {
      this.dialog = true
      // 有id为编辑需获取详情否则是新增
      if (id) {
        this.initData(id)
      } else {
        this.$nextTick(function() {
          this.$refs.form.resetFields()
        })
      }
    },
    // 查询详情（编辑时调用）
    initData(id) {
      queryDeclarationInfo(id).then(res => {
        const { data: { data }} = res
        this.formData = Object.assign(data, this.formData)
        const departData = {
          departId: this.formData.departId, // 推荐单位代码
          departName: this.formData.departName// 推荐单位名称
        }
        this.formData.list = [departData]
      })
    },
    // 范围选择/清空
    categoryTreeInfo(data) {
      if (data === 'clear') { // 清空
        this.formData.supplyScope = ''// 名称
        this.formData.supplyScopeId = ''// 代码
      } else { // 选择
        this.formData.supplyScope = data.labels// 名称
        this.formData.supplyScopeId = data.keys// 代码
      }
    },
    // 推荐单位
    oRganizationInfo(data) {
      if (data === 'clear') { // 清空
        this.formData.list = []
      } else { // 选择
        this.formData.departName = data.labels // 名称
        const departData = {
          departId: data.keys, // 代码
          departName: data.labels// 名称
        }
        this.formData.list = [departData]
      }
    },
    // 选择供应商/清除
    supplierInfo(data) {
      if (data === 'clear') { // 清空
        this.formData.supplierName = ''// 供应名称
        this.formData.supplierId = '' // 供应商id
      } else { // 选择
        this.formData.supplierName = data.supplierName// 供应名称
        this.formData.supplierId = data.supplierId // 供应商id
      }
    },
    // 提交
    ensure(formName) {
      // 校验输入内容
      this.$refs[formName].validate((valid, field) => {
        if (valid) { // 校验通过
          submitDeclarationForInviteReferer(this.formData).then(res => {
            this.$message({
              message: '成功',
              type: 'success'
            })
            this.$emit('call-back') // 提交成功触发父组件重新获取列表
            this.dialog = false
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>
