<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="100px" class="qjform" :data="leaveList">
        <el-col :span="24">
          <h2 align="center">请假单</h2>
        </el-col>
        <el-col :span="8">
          <el-form-item label="请假事由" prop="actkey"  v-show="false">
            <el-input v-model="form.actkey" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="请假人" prop="leavename">
            <el-input
              v-model="form.leavename"
              placeholder="请输入请假人"
              size="small"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门" prop="deptname">
            <el-input
              v-model="form.deptname"
              placeholder="请输入部门"
              size="small"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职务" prop="positions">
            <el-input
              v-model="form.positions"
              placeholder="请输入职务"
              size="small"
              clearable :style="{width: '100%'}"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="请假类别" prop="options">
            <!--            <el-radio-group v-model="form.options" size="medium">-->
            <!--              <el-radio v-for="(item, index) in field106Options" :key="index" :label="item.value"-->
            <!--                        :disabled="item.disabled">{{item.label}}-->
            <!--              </el-radio>-->
            <!--            </el-radio-group>-->
            <el-radio-group v-model="form.options"size="medium">
              <el-radio
                v-for="dict in options"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="请假事由" prop="reason">
            <el-input v-model="form.reason" type="textarea" placeholder="请输入请假事由"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="18">
          <el-form-item label="日期范围" prop="daterange">
            <el-date-picker type="daterange" v-model="form.daterange" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期"
                            end-placeholder="结束日期" range-separator="至" clearable @blur="hqtime()"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="共" prop="statistics">
            <el-input v-model="form.statistics" placeholder="" show-word-limit clearable
                      :style="{width: '100%'}">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入休息期间联系方式" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作委托人" prop="consignor">
            <!--            <el-input v-model="form.consignor" placeholder="请输入休息期间应急工作委托人" clearable-->
            <!--                      :style="{width: '100%'}"></el-input>-->
            <el-input v-model="form.consignor" placeholder="请选择休息期间应急工作委托人" clearable="true" :disabled="true">
              <template slot="append">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleSelect">
                  选择人员
                </el-button>
              </template>
            </el-input>

          </el-form-item>
        </el-col>

        <el-col :span="24" align="center">
          <el-form-item size="large" v-show="open3">
            <el-button type="primary" @click="submitForm" style="margin-left: -100px;">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
          <el-form-item size="large" v-show="open4">
            <el-button type="primary" @click="submitToDo()" >同意</el-button>
            <el-button type="primary" @click="deleteToDo()" >拒绝</el-button>
          </el-form-item>
        </el-col>

      </el-form>
    </el-row>

    <!-- 选择人员对话框 -->
    <select-user-by-dept ref="selectUserByDept" :title="title" :open="open"  @ok="selectOK"/>
  </div>
</template>
<script>
  import {  addLeave ,findLeave,getDetail} from "@/api/activiti/leave/leave";
  import Treeselect from "@riophae/vue-treeselect";
  import SelectRen from '@/components/SelectRen';
  import SelectUserByDept from "@/components/SelectRen/selectUserByDept";
  import {deleteToDoItem,submitToDoItem } from "@/api/activiti/form/fw";
  export default {
    name: "Leave",
    components: {
      SelectRen,
      Treeselect,
      SelectUserByDept
    },
    props: {
      data:'',
    },
    data() {
      return {
        open:false,
        title: "",
        open3: false,
        open4: false,
        leaveList: [],
        flg: [],
        form: {
          positions: undefined,
          options: undefined,
          reason: undefined,
          daterange: undefined,
          endTime:undefined,
          statistics:undefined ,
          //   daterange : Date.parse(this.form.daterange),
          //   endTime : Date.parse(this.form.endTime),
          //   statistics: parseInt((daterange-endTime)/ (1000 * 60 * 60 * 24)),
          phone: undefined,
          consignor: undefined,
        },
        rules: {
          // leavename: [
          //   { required: true, message: "请假人不能为空", trigger: "blur" }
          // ],
          // deptname: [
          //   { required: true, message: "部门不能为空", trigger: "blur" }
          // ],
          positions: [
            { required: true, message: "职务不能为空", trigger: "blur" }
          ],
          options: [
            { required: true, message: "请假类别不能为空", trigger: "blur" }
          ],
          reason: [
            { required: true, message: "请假事由不能为空", trigger: "blur" }
          ],
          daterange: [
            { required: true, message: "请假开始时间不能为空", trigger: "blur" }
          ],
          endTime: [
            { required: true, message: "请假结束时间不能为空", trigger: "blur" }
          ],
          statistics: [
            { required: true, message: "请假天数不能为空", trigger: "blur" }
          ],
        },
        options: [],
        time: [],
        qjr:'',
        bumen:'',
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getName();
      this.form.actkey = this.data.getactkey;
      this.getList();
      this.flg = this.data.flg;
      if(this.flg==undefined){
        this.open3=true;
      }else if(this.flg=='1'){
        this.form = this.data;
        this.getDetails(this.data.formId);
        this.open4=true;
      }else {
        this.form = this.data;
        this.getDetails(this.data.formId);
      }
    },
    methods: {

      //获取详细信息
      getDetails(id){
        id=id.split(".")[1]
        getDetail(id).then(response => {
          this.form=response.data
          this.form.daterange=JSON.parse(response.data.daterange)
        });
      },
      submitToDo(){
        this.loading = true;
        submitToDoItem(this.form.taskid).then(response => {
          this.msgSuccess("提交成功");
          this.$emit('getList');
        })
      },
      //拒绝按钮
      deleteToDo(){
        this.$confirm('是否确认拒绝这这个申请吗?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteToDoItem(this.form.taskid).then(response => {
            this.msgSuccess("拒绝成功")
            this.$emit('getList');
          })

        }).catch(() => {
        });

      },
      getName(){
        this.loading = true;
        findLeave().then(response => {
          console.log(response.data)
          this.form.leavename = response.data[0];
          this.form.deptname = response.data[1];
          this.qjr = response.data[0];
          this.bumen = response.data[1];
          this.loading = false;
        });

      },


      /** 写信中的 选择人员 按钮弹窗操作 */
      handleSelect() {
        this.$refs.selectUserByDept.childOpen=true;
        this.open = true;
        this.title = "选择工作委托人";
      },
      selectOK(zh, xm) {
        // this.receiverAccount = zh;
        this.form.consignor=xm;
        this.open=false;
      },
      /** ---------------收件人end---------------*/

      hqtime(){
        let s1 =  this.form.daterange;
        let s2 = s1[0];
        let s3 = s1[1];
        let strtime = new Date(s2);
        let strtime1 = new Date(s3);
        let time = strtime.getTime();
        let time1 = strtime1.getTime();
        let time2 = parseInt((time1 - time) / (1000 * 60 *60 * 24));
        if (time2==0){
          this.form.statistics = 1
        }else{
          this.form.statistics = time2
        }
        this.time=s1
        console.log(this.form.daterange)
        console.log(   JSON.stringify(this.time))
      },

      getList(){
        this.getDicts("options").then(response => {
          this.options = response.data;
        });
      },

      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          leavename: undefined,
          deptname: undefined,
          position: undefined,
          option: undefined,
          reason: undefined,
          daterange: undefined,
          statistics: undefined,
          phone: undefined,
          consignor: undefined,
          createTime: undefined
        };
        this.resetForm("form");
      },
      submitForm() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.form.daterange= JSON.stringify(this.time)
            console.log(  this.form.daterange)
            addLeave(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("提交成功");
                this.resetForm("form");
              }
            });
          }
        })
      },
      resetForm() {
        this.form=[];
        this.form.leavename = this.qjr;
        this.form.deptname = this.bumen;
        // this.$refs['form'].resetFields()
      }
    }
  }
</script>
<style>
  .v-modal{
    z-index: 1999 !important;
  }
  .qjform {
    border: 1px solid #eee;
    overflow: hidden;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
    box-shadow: 1px 1px 10px #c7c7c7;
  }
</style>
