<template>
  <div>
    <BaseDialog
      width="600px"
      :isShow.sync="isShow"
      :title="activeData.orderSn ? '修改' : '添加'"
      @submit="submitForm"
      @close="close"
      :appendToBody="true"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="formData"
        label-width="140px"
        class="demo-ruleForm"
      >
        <el-form-item label="订单号：" prop="orderSn">
          <el-input
            clearable
            v-model.trim="formData.orderSn"
            placeholder="请输入订单号"
            @change="getOrderDetails"
          ></el-input>
        </el-form-item>
        <el-form-item label="业务号：" prop="createNo">
          <el-input
            disabled
            v-model="formData.createNo"
            placeholder="请输入业务号"
          ></el-input>
        </el-form-item>
        <el-form-item label="业务员：" prop="createUsername">
          <el-input
            disabled
            v-model="formData.createUsername"
            placeholder="请输入业务员"
          ></el-input>
        </el-form-item>
        <el-form-item label="下单客户：" prop="clientName">
          <el-input
            disabled
            v-model="formData.clientName"
            placeholder="请输入下单客户"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名：" prop="userName">
          <el-select v-model="formData.userName" placeholder="请选择姓名">
            <el-option
              @click.native="changeIdCard(item)"
              v-for="(item, index) in formData.orderStudyList"
              :key="index"
              :label="item.userName"
              :value="item.userName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号：" prop="userCard">
          <el-input
            disabled
            v-model="formData.userCard"
            placeholder="请输入身份证号"
          ></el-input>
        </el-form-item>
        <el-form-item label="交资料日期：" prop="submitDataTime">
          <el-date-picker
            v-model="formData.submitDataTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    activeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    //父级参数集合
    nowFatherActiveData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      formData: {
        orderSn: "",
        createNo: "",
        createUsername: "",
        clientName: "",
        userName: "",
        userCard: "",
        submitDataTime: "",
        orderStudyList: [],
      },
      rules: {
        orderSn: [{ required: true, message: "请输入订单号", trigger: "blur" }],
        userName: [
          { required: true, message: "请选择姓名", trigger: "change" },
        ],
        userCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        submitDataTime: [
          { required: true, message: "请选择交资料日期", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    init() {
      this.$nextTick(async () => {
        if (this.activeData.orderSn) {
          this.formData = Object.assign({}, this.activeData);
          this.formData.submitDataTime = this.formData.submitDataTime * 1000;
          let data = {
            orderSn: this.formData.orderSn,
            educationTypeId: this.nowFatherActiveData.educationTypeId,
            projectId: this.nowFatherActiveData.projectId,
            businessId: this.nowFatherActiveData.businessId,
          };
          this.$api.settleorderinfo(data).then((res) => {
            this.$set(this.formData, "orderStudyList", res.data.orderStudyList);
            this.$set(this.formData, "orderFrom", res.data.orderFrom);
          });
        }
      });
    },
    getOrderDetails(value) {
      this.$refs["formData"].resetFields();
      this.formData.orderStudyList = [];
      if (value) {
        let data = {
          orderSn: value,
          educationTypeId: this.nowFatherActiveData.educationTypeId,
          projectId: this.nowFatherActiveData.projectId,
          businessId: this.nowFatherActiveData.businessId,
        };
        this.$api.settleorderinfo(data).then((res) => {
          this.formData = res.data;
          this.$refs["formData"].clearValidate();
        });
      }
    },
    changeIdCard(item) {
      this.$set(this.formData, "userCard", item.userCard);
      this.formData.orderGoodsId = item.orderGoodsId;
      this.$refs["formData"].validateField("userCard");
    },
    close() {
      this.$refs["formData"].resetFields();
    },
    submitForm() {
      this.$refs["formData"].validate(async (valid) => {
        if (valid) {
          let data = {
            orderFrom: this.formData.orderFrom,
            orderGoodsId: this.formData.orderGoodsId,
            orderSn: this.formData.orderSn,
            costCatId: this.nowFatherActiveData.costCatId,
            instId: this.nowFatherActiveData.instId,
            educationTypeId: this.nowFatherActiveData.educationTypeId,
            projectId: this.nowFatherActiveData.projectId,
            businessId: this.nowFatherActiveData.businessId,
          };
          const res = await this.$api.settlemoney(data);
          if (res.code == 200) {
            let obj = Object.assign(
              { index: this.activeData.index },
              this.formData
            );
            obj.settleMoney = res.data;
            obj.submitDataTime = parseInt(obj.submitDataTime / 1000);
            delete obj.orderStudyList;
            this.$emit("backData", obj);
            this.isShow = false;
          }
        } else {
          return false;
        }
      });
    },
  },
  computed: {
    isShow: {
      get() {
        if (this.dialogVisible) {
          this.init();
        }
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 280px;
}
.el-select {
  width: 280px;
}
</style>
