<template>
  <el-dialog title="报名点信息" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="900px" @close="closeDialog">
    <div>
      <el-form ref="dialogForm" :model="dialogForm" :rules="dataRule" label-width="110px" @keyup.enter.native="dialogFormSubmit()" :disabled="type == 2 || dialogForm.checkState==1 || dialogForm.checkState==2">
        <el-tabs v-model="activeName" style="min-height: 450px;">
          <el-tab-pane label="基础信息" name="first">
            <el-row>
              <el-col :span="12">
                <el-form-item label="报名点" prop="signPlacePoint">
                  <el-select v-model="dialogForm.signPlacePoint" filterable placeholder="请选择" value-key="schoolId" clearable size="mini">
                    <el-option v-for="(dict, index) in signPlaceOptions" :key="index" :label="dict.dictLabel" :value="dict.dictValue" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="类别" prop="signType">
                  <el-input v-model="dialogForm.signType" placeholder="请输入类别" />
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="成交日期" prop="dealDate">
                  <el-date-picker clearable v-model="dialogForm.dealDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择成交日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="dialogForm.name" placeholder="请输入姓名" />
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="线索来源" prop="source">
                  <el-select v-model="dialogForm.source" placeholder="请选择" clearable size="small">
                    <el-option v-for="(dict, index) in sourceOptions" :key="index" :label="dict.dictLabel" :value="dict.dictValue" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证号" prop="idcard">
                  <el-input v-model="dialogForm.idcard" placeholder="请输入身份证号" />
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="报名驾校" prop="signSchool">
                  <el-select v-model="dialogForm.signSchool" filterable placeholder="请选择" value-key="schoolId" clearable size="small" @change="schoolChange">
                    <el-option v-for="(dict, index) in schoolOptions" :key="index" :label="dict.schoolName" :value="dict.schoolId" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式" prop="phone">
                  <el-input v-model="dialogForm.phone" placeholder="请输入联系方式" />
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="报名场地" prop="signPlace">
                  <el-select v-model="dialogForm.signPlace" filterable placeholder="请选择" clearable value-key="placeId" size="small" @change="placeChange">
                    <el-option v-for="(dict, index) in placeOptions" :key="index" :label="dict.name" :value="dict.placeId" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报名价格" prop="signPrice">
                  <el-input v-model="dialogForm.signPrice" placeholder="请输入报名价格" type="number" />
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="报名班型" prop="signClass">
                  <el-select v-model="dialogForm.signClass" filterable placeholder="请选择" clearable value-key="typeId" size="small">
                    <el-option v-for="(dict, index) in classTypeOptions" :key="index" :label="`${dict.licenseType}-${dict.typeName}`" :value="dict.typeId" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="利润" prop="profit">
                  <el-input v-model="dialogForm.profit" placeholder="请输入利润" type="number" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="送审日期" prop="submissionTime">
                  <el-date-picker clearable v-model="dialogForm.submissionTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择送审日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="支付方式" prop="extraPayWay">
                  <el-input v-model="dialogForm.extraPayWay" placeholder="请输入支付方式" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="学员状态">
                  <el-select v-model="dialogForm.stuStatus" multiple placeholder="请选择" clearable size="small">
                    <el-option v-for="(dict, index) in studentStatusOptions" :key="index" :label="dict.name" :value="dict.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="归属人员" prop="followUserList">
                  <el-select v-model="dialogForm.followUserList" multiple placeholder="请选择" clearable size="small">
                    <el-option v-for="(dict, index) in userOptions" :key="index" :label="dict.name" :value="dict.id" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" prop="memo">
                  <el-input type="textarea" :rows="3" v-model="dialogForm.memo" placeholder="请输入备注" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="费用明细" name="second">
            <el-row>
              <el-col :span="12">
                <el-form-item label="培训费" prop="trainFee">
                  <el-input v-model="dialogForm.trainFee" placeholder="请输入培训费" type="number" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="考试费" prop="examFee">
                  <el-input v-model="dialogForm.examFee" placeholder="请输入考试费" type="number" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="学杂费" prop="learningFee">
                  <el-input v-model="dialogForm.learningFee" placeholder="请输入学杂费" type="number" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="体检费" prop="physicalExamFee">
                  <el-input v-model="dialogForm.physicalExamFee" placeholder="请输入体检费" type="number" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="额外支出" name="third">
            <el-row>
              <el-table :data="dialogForm.extraPayList" border>
                <el-table-column label="额外支出项目" align="center" min-width="160">
                  <template slot-scope="scope">
                    <el-form-item :prop="'extraPayList.'+scope.$index+'.extraPayType'" :rules="dataRule.extraPayType" label-width="0px">
                      <el-select v-model="scope.row.extraPayType" filterable placeholder="请选择" clearable size="small">
                        <el-option v-for="(dict, index) in extraPayTypeOptions" :key="index" :label="dict.dictLabel" :value="dict.dictValue" />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="额外支出金额" align="center" min-width="160">
                  <template slot-scope="scope">
                    <el-form-item :prop="'extraPayList.'+scope.$index+'.extraPay'" :rules="dataRule.extraPay" label-width="0px">
                      <el-input v-model="scope.row.extraPay" placeholder="请输入额外支出金额" type="number" />
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column align="center" width="100">
                  <template slot-scope="scope">
                    <el-button type="text" @click="removeExtraPay(scope.$index)">移除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
            <el-row style="text-align: center;">
              <el-button @click="addExtraPay">添加</el-button>

              <!-- <el-col :span="12">
                <el-form-item label="额外支出项目" prop="extraPayTypes">
                  <el-select v-model="dialogForm.extraPayTypes" filterable multiple placeholder="请选择" clearable size="small">
                    <el-option v-for="(dict, index) in extraPayTypeOptions" :key="index" :label="dict.dictLabel" :value="dict.dictValue" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="额外支出金额" prop="extraPay">
                  <el-input v-model="dialogForm.extraPay" placeholder="请输入额外支出金额" type="number" />
                </el-form-item>
              </el-col> -->
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="账户信息" name="four">
            <el-row>
              <el-col :span="12">
                <el-form-item label="收款账户" prop="collectionAccount1">
                  <el-input v-model="dialogForm.collectionAccount1" placeholder="请输入收款账户" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入账时间" prop="entryTime1">
                  <el-date-picker clearable v-model="dialogForm.entryTime1" type="date" value-format="yyyy-MM-dd" placeholder="请选择入账时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="入账金额" prop="entryMoney1">
                  <el-input v-model="dialogForm.entryMoney1" placeholder="请输入入账金额" type="number" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手续费" prop="commission1">
                  <el-input v-model="dialogForm.commission1" placeholder="请输入手续费" type="number" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="收款账户2" prop="collectionAccount2">
                  <el-input v-model="dialogForm.collectionAccount2" placeholder="请输入收款账户" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入账时间2" prop="entryTime2">
                  <el-date-picker clearable v-model="dialogForm.entryTime2" type="date" value-format="yyyy-MM-dd" placeholder="请选择入账时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="入账金额2" prop="entryMoney2">
                  <el-input v-model="dialogForm.entryMoney2" placeholder="请输入入账金额" type="number" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手续费2" prop="commission2">
                  <el-input v-model="dialogForm.commission2" placeholder="请输入手续费" type="number" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>

      </el-form>

    </div>
    <span slot="footer" class="dialog-footer">
      <el-button v-if="type==1 && (dialogForm.checkState == 0 || dialogForm.checkState == 3)" v-jclick type="primary" :disabled="!canSubmit" @click="dialogFormSubmit()">确定</el-button>
      <el-button v-if="type==2 && dialogForm.checkState == 1" v-jclick type="primary" @click="handleCheck(2)">通过</el-button>
      <el-button v-if="type==2 && dialogForm.checkState == 1" v-jclick type="primary" @click="handleCheck(3)">驳回</el-button>
      <el-button plain @click="(visible=false)">取消</el-button>

    </span>
  </el-dialog>
</template>
  
  <script>
import { listOffice } from "@/api/zs/office";
import { addSign, updateSign, checkSign } from "@/api/zs/placeSign";
import schoolAPi from '@/api/sch/school'
import empApi from '@/api/system/employee'
import { getAllPlaces } from '@/api/sch/place'
import { getClassTypeTableList } from '@/api/sch/classType'


export default {
  name: "OfficeSignDialogForm",
  props: {
    signPlaceOptions: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      visible: false,
      canSubmit: true,
      dialogForm: {},
      dataRule: {
        signPlacePoint: [{ required: true, message: '报名点不能为空', trigger: 'blur,change' }],
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        idcard: [{ required: true, message: '身份证号不能为空', trigger: 'blur' }],
        phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
        source: [{ required: true, message: '线索来源不能为空', trigger: 'blur, change' }],
        signType: [{ required: true, message: '报名类别不能为空', trigger: 'blur,change' }],
        dealDate: [{ required: true, message: '报名日期不能为空', trigger: 'blur,change' }],
        signSchool: [{ required: true, message: '报名驾校不能为空', trigger: 'blur,change' }],
        signPlace: [{ required: true, message: '报名场地不能为空', trigger: 'blur,change' }],
        signClass: [{ required: true, message: '报名班型不能为空', trigger: 'blur,change' }],
        signPrice: [{ required: true, message: '报名价格不能为空', trigger: 'blur' }],
        profit: [{ required: true, message: '利润不能为空', trigger: 'blur' }],
        trainFee: [{ required: true, message: '培训费不能为空', trigger: 'blur' }],
        examFee: [{ required: true, message: '考试费不能为空', trigger: 'blur' }],
        learningFee: [{ required: true, message: '学杂费不能为空', trigger: 'blur' }],
        physicalExamFee: [{ required: true, message: '体检费不能为空', trigger: 'blur' }],
        extraPayType: [{ required: true, message: '额外支付项目不能为空', trigger: 'blur' }],
        extraPay: [{ required: true, message: '额外支付金额不能为空', trigger: 'blur' }],
        extraPayWay: [{ required: true, message: '支付方式不能为空', trigger: 'blur' }],
        collectionAccount1: [{ required: true, message: '收款账号不能为空', trigger: 'blur' }],
        entryTime1: [{ required: true, message: '入账时间不能为空', trigger: 'blur' }],
        entryMoney1: [{ required: true, message: '入账金额不能为空', trigger: 'blur' }],
        commission1: [{ required: true, message: '手续费不能为空', trigger: 'blur' }],
        submissionTime: [{ required: true, message: '送审时间不能为空', trigger: 'blur, change' }],
        stuStatus: [{ required: true, message: '学员状态不能为空', trigger: 'blur,change' }],
        followUserList: [{ required: true, message: '归属人员不能为空', trigger: 'blur,change' }],
      },
      officeOptions: [],
      schoolOptions: [],
      placeOptions: [],
      classTypeOptions: [],
      userOptions: [],
      sourceOptions: [],
      extraPayTypeOptions: [],
      type: 1,
      schoolIdList: [],
      activeName: "first",
      studentStatusOptions: []
    };
  },
  methods: {
    init(info = undefined, type) {
      this.visible = true;
      this.initData();
      this.$nextTick(() => {
        this.resetDialogForm();
        this.$refs['dialogForm'].resetFields();
        if (info) {
          this.dialogForm = this.deepClone(info);
          if (this.dialogForm.signSchool) {
            this.getAllPlaces(this.dialogForm.signSchool)
            this.getClassTypes(this.dialogForm.signSchool, this.dialogForm.signPlace)
          }
        }

      });
      if (type) {
        this.type = type
      }

    },
    initData() {
      this.getSchools();
      this.getEmployee();
      this.getUserOfficeInfo();
      //线索来源
      this.getDicts('dm_source').then((response) => {
        this.sourceOptions = response.data
      })
      //额外支出类型
      this.getDicts('dm_extra_pay').then((response) => {
        this.extraPayTypeOptions = response.data
      })
      //报名类别
      this.getDicts('student_status').then((response) => {
        this.studentStatusOptions = response.data
      })
    },
    resetDialogForm() {
      this.dialogForm = {
        placeSignId: null,
        signPlacePoint: null,
        name: null,
        idcard: null,
        phone: null,
        source: null,
        dealDate: null,
        signType: null,
        signSchool: null,
        schoolName: null,
        signPlace: null,
        placeName: null,
        signClass: null,
        className: null,
        signPrice: null,
        profit: null,
        followUser: null,
        followUserName: null,
        trainFee: null,
        examFee: null,
        learningFee: null,
        physicalExamFee: null,
        memo: null,
        checkState: 0,
        rejectReason: null,
        createTime: null,
        createUser: null,
        updateTime: null,
        signDate: null,
        delFlag: null,
        submissionTime: null,
        stuStatus: "0",
        collectionAccount1: null,
        entryTime1: null,
        entryMoney1: null,
        commission1: null,
        collectionAccount2: null,
        entryTime2: null,
        entryMoney2: null,
        commission2: null,
        extraPayType: null,
        extraPay: null,
        extraPayWay: null,
        extraPayList: []
      };
    },
    closeDialog() {
      this.$emit('update:dialogVisible', false);
    },
    // 表单提交
    dialogFormSubmit() {
      this.dialogForm.checkState = 1
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          this.canSubmit = false;

          if (this.dialogForm.placeSignId) {
            // 校验完成，调接口
            updateSign(this.dialogForm)
              .then((resp) => {
                this.canSubmit = true;
                if (resp.code == 200) {
                  this.$message.success('保存成功');
                  this.$emit('refreshDataList');
                  this.visible = false;
                }
              })
              .catch(() => {
                this.canSubmit = true;
              });
          } else {
            addSign(this.dialogForm)
              .then((resp) => {
                this.canSubmit = true;
                if (resp.code == 200) {
                  this.$message.success('保存成功');
                  this.$emit('refreshDataList');
                  this.visible = false;
                }
              })
              .catch(() => {
                this.canSubmit = true;
              });
          }
        }
      });
    },
    //审核登记
    handleCheck(status) {
      checkSign({ placeSignId: this.dialogForm.placeSignId, checkState: status })
        .then((resp) => {
          this.canSubmit = true;
          if (resp.code == 200) {
            this.$message.success('保存成功');
            this.$emit('refreshDataList');
            this.visible = false;
          }
        })
        .catch(() => {
          this.canSubmit = true;
        });
    },
    getSchools() {
      schoolAPi.pageList().then((resp) => {
        this.schoolOptions = resp.rows
      })
    },
    getPlaces(schoolId) {
      getAllPlaces({ schoolId: schoolId, status: '0' }).then((resp) => {
        this.placeOptions = resp.data
      })
    },
    getClassTypes(schoolId, placeId) {
      getClassTypeTableList({ schoolId: schoolId, placeId: placeId, status: '0' }).then(
        (resp) => {
          this.classTypeOptions = resp.rows
        }
      )
    },
    //查询员工
    getEmployee() {
      empApi.getEmployee().then((resp) => {
        if (resp.code == 200) {
          this.userOptions = resp.data
        }
      })
    },
    //查询当前账号关联的报名点信息
    getUserOfficeInfo() {
      let userId = localStorage.getItem('userId');
      empApi.getSignPlace(userId).then((resp) => {
        if (resp.code == 200) {
          if (resp.data) {
            this.dialogForm.signPlacePoint = resp.data
          }
        }
      })
    },
    //驾校change事件
    schoolChange(e) {
      this.$set(this.dialogForm, 'signPlace', undefined)
      this.$set(this.dialogForm, 'signClass', undefined)
      this.classTypeOptions = []
      this.getPlaces(e)
    },
    //場地change事件
    placeChange() {
      this.$set(this.dialogForm, 'signClass', undefined)
      this.classTypeOptions = []
      if (this.dialogForm.signPlace) {
        const place = this.placeOptions.find(
          (item) => item.placeId === this.dialogForm.signPlace
        )
        this.getClassTypes(this.dialogForm.signSchool, this.dialogForm.signPlace)
      }
    },
    addExtraPay() {
      this.dialogForm.extraPayList.push({
        extraPayType: undefined,
        extraPay: undefined
      })
    },
    removeExtraPay(index) {
      this.dialogForm.extraPayList.splice(index, 1)
    }
  }
};
  </script>
  