<template>
  <el-form
    ref="ruleform"
    :model="spendreimbursementform"
    label-width="120px"
    :label-position="labelPosition"
    :rules="rules"
  >
    <el-row :gutter="20">
      <!-- 第一列表单 -->
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <!-- projectId -->
          <el-form-item
            label="项目列表"
            :label-width="formLabelWidth"
            prop="projectId"
          >
            <el-select
              placeholder="请选择"
              v-model="spendreimbursementform.projectId"
            >
              <el-option
                :label="item.projectName"
                v-for="item in collectProject"
                :key="item.projectId"
                :value="item.projectId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- summary -->
          <el-form-item label="摘要" prop="summary">
            <el-input v-model="spendreimbursementform.summary"></el-input>
          </el-form-item>
          <!-- enclosureNumber -->
          <el-form-item label="附件数量" prop="enclosureNumber">
            <el-input
              v-model="spendreimbursementform.enclosureNumber"
            ></el-input>
          </el-form-item>
          <!-- tripReason -->
          <el-form-item label="出差缘由" prop="tripReason">
            <el-input v-model="spendreimbursementform.tripReason"></el-input>
          </el-form-item>
          <!-- fromPlace -->
          <el-form-item label="出发地点" prop="fromPlace">
            <el-input v-model="spendreimbursementform.fromPlace"></el-input>
          </el-form-item>
          <!-- purposePlace -->
          <el-form-item label="目的地点" prop="purposePlace">
            <el-input v-model="spendreimbursementform.purposePlace"></el-input>
          </el-form-item>
          <!-- transitPlace -->
          <el-form-item label="经过地点" prop="transitPlace">
            <el-input v-model="spendreimbursementform.transitPlace"></el-input>
          </el-form-item>
          <!-- vehicle -->
          <el-form-item label="交通工具" prop="vehicle">
            <el-input v-model="spendreimbursementform.vehicle"></el-input>
          </el-form-item>
          <!-- applyTime -->
          <el-form-item label="申请时间" prop="applyTime" required>
            <el-date-picker
              v-model="spendreimbursementform.applyTime"
              type="date"
              style="width: 90%"
              @change="formtime3"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </div>
      </el-col>
      <!-- 第二列表单 -->
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <!-- receiveSubsidy -->
          <el-form-item label="是否领取补贴">
            <el-switch
              v-model="values"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeswitch(values)"
            >
            </el-switch>
          </el-form-item>

          <!-- foodAllowance -->
          <el-form-item label="伙食补贴" prop="foodAllowance">
            <el-input
              v-model.number="spendreimbursementform.foodAllowance"
            ></el-input>
          </el-form-item>
          <!-- publicMiscellaneousSubsidy -->
          <el-form-item label="公杂补贴" prop="publicMiscellaneousSubsidy">
            <el-input
              v-model.number="spendreimbursementform.publicMiscellaneousSubsidy"
            ></el-input>
          </el-form-item>
          <!-- tripCost -->
          <el-form-item label="火车/汽车/轮船费" prop="tripCost">
            <el-input
              v-model.number="spendreimbursementform.tripCost"
            ></el-input>
          </el-form-item>
          <!-- planeTicket -->
          <el-form-item label="飞机票" prop="planeTicket">
            <el-input
              v-model.number="spendreimbursementform.planeTicket"
            ></el-input>
          </el-form-item>
          <!-- trafficCost -->
          <el-form-item label="过路过桥汽油费" prop="trafficCost">
            <el-input
              v-model.number="spendreimbursementform.trafficCost"
            ></el-input>
          </el-form-item>
          <!-- lodgingCost -->
          <el-form-item label="住宿费" prop="lodgingCost">
            <el-input
              v-model.number="spendreimbursementform.lodgingCost"
            ></el-input>
          </el-form-item>
          <!-- insuranceCost -->
          <el-form-item label="保险费" prop="insuranceCost">
            <el-input
              v-model.number="spendreimbursementform.insuranceCost"
            ></el-input>
          </el-form-item>
          <!-- otherCost -->
          <el-form-item label="其他费用" prop="otherCost">
            <el-input
              v-model.number="spendreimbursementform.otherCost"
            ></el-input>
          </el-form-item>
        </div>
      </el-col>
      <!-- 第三列表单 -->
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <!-- applyTotalAmountLarge -->
          <el-form-item
            label="申报总金额(大写)"
            prop="applyTotalAmountLarge"
            label-width="140"
          >
            <el-input
              v-model="spendreimbursementform.applyTotalAmountLarge"
            ></el-input>
          </el-form-item>
          <!-- applyTotalAmountSmall -->
          <el-form-item
            label="申报总金额(小写)"
            prop="applyTotalAmountSmall"
            label-width="140"
          >
            <el-input
              v-model="spendreimbursementform.applyTotalAmountSmall"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="出差时间"
            prop="startTime"
            required
            :rules="[
              {
                type: 'daterange',
                required: true,
                message: '请选择日期',
                trigger: 'change',
              },
            ]"
          >
            <el-date-picker
              v-model="timeSlot"
              @change="formtime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <!-- nobillExplain -->
          <el-form-item label="无票据说明" prop="nobillExplain">
            <el-input v-model="spendreimbursementform.nobillExplain"></el-input>
          </el-form-item>
          <!-- remarks -->
          <el-form-item label="备注" prop="remarks">
            <el-input
              type="textarea"
              :rows="5"
              v-model="spendreimbursementform.remarks"
            ></el-input>
          </el-form-item>
        </div>
      </el-col>
      <!-- 第四列表单 -->
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <!-- 其他 -->
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-circle-plus"
              @click="addBtn1"
              >随行人员</el-button
            >
          </el-form-item>
          <!-- 对话框1 -->
          <el-dialog title="选择随行人员" :visible.sync="dialogFormVisible">
            <el-row :gutter="20">
              <el-col
                :span="6"
                v-for="item in collectProjectpeople"
                :key="item.userId"
              >
                <div class="grid-content bg-purple" style="margin: 20px 0px">
                  <el-checkbox v-model="peopleId" :label="item.userId" border>{{
                    item.userName
                  }}</el-checkbox>
                </div>
              </el-col>
            </el-row>
            <button @click="btn">测试</button>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
    <el-button type="primary" @click="submitForm()">提交</el-button>
    <el-button @click="resetForm()">重置</el-button>
    <el-button @click="back()">返回</el-button>
  </el-form>
</template>

<script>
import { insert } from "@/api/spendreimbursement.js";
import { selectTypeitem } from "@/api/spendreimbursement.js";
// selectProjectitem
import { selectProjectitem } from "@/api/spendreimbursement.js";
//selectProjectpeople
import { selectProjectpeople } from "@/api/spendreimbursement.js";
// insertId
import { insertId } from "@/api/spendreimbursement.js";
export default {
  created() {
    this.Typeitem.companyId = this.$store.getters.companyId;
    this.Projectitem.companyId = this.$store.getters.companyId;
    this.Projectpeople.companyId = this.$store.getters.companyId;
    this.spendreimbursementform.companyId = this.$store.getters.companyId;
    this.spendreimbursementform.userId = this.$store.getters.urId;
    this.reimebursementtypeItem();
    this.reimebursementprojectItem();
    this.reimebursementprojectpeopleItem();
  },
  data() {
    return {
      dialogFormVisible: false,
      labelPosition: "left",
      values: false,
      timeSlot: null,
      userId: [],
      // 收集的是页面表单的数据
      spendreimbursementform: {
        companyId: null,
        summary: "",
        enclosureNumber: "",
        tripReason: "",
        typeId: "",
        fromPlace: "",
        remarks: "",
        purposePlace: "",
        transitPlace: "",
        startTime: "",
        endTime: "",
        applyTime: "",
        receiveSubsidy: 0,
        vehicle: "",
        foodAllowance: "",
        publicMiscellaneousSubsidy: "",
        tripCost: "",
        planeTicket: "",
        trafficCost: "",
        lodgingCost: "",
        insuranceCost: "",
        otherCost: "",
        remarks: "",
        nobillExplain: "",
        applyTotalAmountLarge: "",
        applyTotalAmountSmall: "",
        projectId: "",
        companyId: null,
        // 天数
        days: null,
        userId: null,
        tripStatus: 0,
      },
      peopleId: [],
      insertBatch: [
        {
          personnelId: null,
          tripId: null,
        },
      ],
      // 报销类型
      Typeitem: {
        companyId: null,
        typeCategory: 0,
      },
      // 项目类型
      Projectitem: {
        companyId: null,
      },
      // 随从成员
      Projectpeople: {
        companyId: null,
      },
      // 收集报销类型进行展示
      collectType: [],
      // 收集项目名称进行展示
      collectProject: [],
      // 收集随从人员进行展示
      collectProjectpeople: [],
      // 验证规则
      rules: {
        summary: [{ required: true, message: "此项不能为空！" }],
        enclosureNumber: [{ required: true, message: "此项不能为空！" }],
        tripReason: [{ required: true, message: "此项不能为空！" }],
        typeId: [
          {
            required: true,
            message: "此项不能为空！",
            trigger: "change",
          },
        ],
        fromPlace: [{ required: true, message: "此项不能为空！" }],
        purposePlace: [{ required: true, message: "此项不能为空！" }],
        transitPlace: [{ required: true, message: "此项不能为空！" }],
        applyTotalAmountLarge: [{ required: true, message: "此项不能为空！" }],
        applyTotalAmountSmall: [{ required: true, message: "此项不能为空！" }],
        applyTime: [
          {
            type: "daterange",
            required: true,
            message: "请选择日期！",
            trigger: "change",
          },
        ],
        planeTicket: [
          { required: true, message: "此项不能为空！" },
          { type: "number", message: "该项必须为数字值" },
        ],
        vehicle: [{ required: true, message: "此项不能为空！" }],
        foodAllowance: [
          { required: true, message: "此项不能为空！" },
          { type: "number", message: "该项必须为数字值" },
        ],
        publicMiscellaneousSubsidy: [
          { required: true, message: "此项不能为空！" },
          { type: "number", message: "该项必须为数字值" },
        ],
        tripCost: [
          { required: true, message: "此项不能为空！" },
          { type: "number", message: "该项必须为数字值" },
        ],
        planeTicket: [
          { required: true, message: "此项不能为空！" },
          { type: "number", message: "该项必须为数字值" },
        ],
        trafficCost: [
          { required: true, message: "此项不能为空！" },
          { type: "number", message: "该项必须为数字值" },
        ],
        lodgingCost: [
          { required: true, message: "此项不能为空！" },
          { type: "number", message: "该项必须为数字值" },
        ],
        insuranceCost: [
          { required: true, message: "此项不能为空！" },
          { type: "number", message: "该项必须为数字值" },
        ],
        otherCost: [
          { required: true, message: "此项不能为空！" },
          { type: "number", message: "该项必须为数字值" },
        ],

        remarks: [{ required: true, message: "此项不能为空！" }],
        projectId: [
          {
            required: true,
            message: "此项不能为空！",
            trigger: "change",
          },
        ],
        publicMiscellaneousSubsidy: [
          { required: true, message: "此项不能为空！" },
        ],
        startTime: [{ required: true, message: "此项不能为空！" }],
        endTime: [{ required: true, message: "此项不能为空！" }],
        trafficCost: [{ required: true, message: "此项不能为空！" }],
        lodgingCost: [{ required: true, message: "此项不能为空！" }],
        insuranceCost: [{ required: true, message: "此项不能为空！" }],
        otherCost: [{ required: true, message: "此项不能为空！" }],
        nobillExplain: [{ required: true, message: "此项不能为空！" }],
      },
    };
  },
  methods: {
    // 这是测试的数据
    btn() {
      this.insertBatch.splice(this.insertBatch.indexOf(0), 1);
      this.peopleId.forEach((item) => {
        let obj = {};
        obj.personnelId = item;
        obj.tripId = 3;
        this.insertBatch.push(obj);
      });
      insertId(this.insertBatch)
        .then((result) => {
          if (result.success) {
            console.log(result);
          } else {
            this.$message.error(result.msg);
          }
        })
        .catch((error) => {
          this.$message.error("失败");
        });
      this.insertBatch = [];
    },
    // 添加数据的方法
    submitForm() {
      this.$refs.ruleform.validate((valid) => {
        console.log("1111");
        if (valid) {
          console.log("aaaa");
          // insert(this.spendreimbursementform)
          //   .then((res) => {
          //     if (res.success) {
          //       this.insertBatch.tripId = res.data;
          //       var tid = this.insertBatch.tripId;
          //       // 处理数组 得到传递数据的对象
          //       this.insertBatch.splice(this.insertBatch.indexOf(0), 1);
          //       this.peopleId.forEach((item) => {
          //         let obj = {};
          //         obj.personnelId = item;
          //         obj.tripId = tid;
          //         this.insertBatch.push(obj);
          //       });
          //       // 第二个方法
          //       insertId(this.insertBatch)
          //         .then((result) => {
          //           if (result.success) {
          //             this.$message.success("添加成功！");
          //             // 添加成功以后 把表单的数据清空
          //             this.$refs.ruleform.resetFields();
          //           } else {
          //             this.$message.error(result.msg);
          //           }
          //         })
          //         .catch((error) => {
          //           this.$message.error("失败");
          //         });
          //       this.insertBatch = [];
          //     } else {
          //       this.$message.error(res.msg);
          //     }
          //   })
          //   .catch((error) => {
          //     this.$message.error("添加失败");
          //   });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 报销类型
    reimebursementtypeItem() {
      selectTypeitem(this.Typeitem)
        .then((res) => {
          if (res.success) {
            this.collectType = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error("查询失败");
        });
    },
    // 项目类型
    reimebursementprojectItem() {
      selectProjectitem(this.Projectitem)
        .then((res) => {
          if (res.success) {
            this.collectProject = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error("查询失败");
        });
    },
    // 随从人员
    reimebursementprojectpeopleItem() {
      selectProjectpeople(this.Projectpeople)
        .then((res) => {
          if (res.code == 20000) {
            this.collectProjectpeople = res.data;
          } else {
            this.$message.error("失败");
          }
        })
        .catch((error) => {
          this.$message.error("查询失败");
        });
    },
    // 弹窗按钮
    addBtn1() {
      this.dialogFormVisible = true;
    },
    // 开关选项
    changeswitch(values) {
      // console.log(values);
      if (values == true) {
        this.spendreimbursementform.receiveSubsidy = 1;
      } else {
        this.spendreimbursementform.receiveSubsidy = 0;
      }
    },
    // 返回上一级
    back() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push("/spendreimbursementList");
    },
    //申请时间处理
    formtime3(val) {
      if (val != null) {
        let time = this.timestampToTime(val);
        this.spendreimbursementform.applyTime = time;
      }
    },
    // 计算天数
    DateDiff(sDate1, sDate2) {
      //sDate1和sDate2是2006-12-18格式
      var aDate, oDate1, oDate2, iDays;
      aDate = sDate1.split("-");
      oDate1 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]); //转换为12-18-2006格式
      aDate = sDate2.split("-");
      oDate2 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]);
      iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
      return iDays;
    },
    //开始结束 时间的处理  计算天数
    formtime(val) {
      if (val == null) {
        this.spendreimbursementform.startTime = null;
        this.spendreimbursementform.endTime = null;
      } else {
        this.spendreimbursementform.startTime = this.timestampToTime(val[0]);
        this.spendreimbursementform.endTime = this.timestampToTime(val[1]);
        let time = this.DateDiff(
          this.spendreimbursementform.startTime,
          this.spendreimbursementform.endTime
        );
        this.spendreimbursementform.days = time;
      }
    },
    //时间处理
    timestampToTime(value) {
      var date = value;
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    //重置
    resetForm() {
      this.$refs.ruleform.resetFields();
    },
  },
};
</script>

<style>
</style>