<template>
  <div class="wrapper editwrap">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="title"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-col :span="24">
          <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
            <div v-if="title != '详情'">
				<el-form-item label="值班员" prop="dutyMan">
				  <el-tree
					:props="NumbersProps"
					:data="NumberArrAll"
					node-key="id"
					show-checkbox
					ref="zbyTree"
				  ></el-tree>
				</el-form-item>
				<el-form-item label="其他人" prop="otherMan">
				  <el-tree
					:props="NumbersProps"
					:data="NumberArrAll"
					node-key="id"
					show-checkbox
					ref="qtrTree"
				  ></el-tree>
				</el-form-item>
				<el-form-item label="值班领导" prop="dutyLeaderID">
				  <el-select v-model="editForm.dutyLeaderID" placeholder="请选择" @change="seletChange(1)">
					<el-option
					  v-for="item in NumberArr"
					  :key="item.uid"
					  :label="item.userName"
					  :value="item.uid"
					></el-option>
				  </el-select>
				</el-form-item>
				<el-form-item label="值班主任" prop="dutyDirectorID">
				  <el-select v-model="editForm.dutyDirectorID" placeholder="请选择" @change="seletChange(2)">
					<el-option
					  v-for="item in NumberArr"
					  :key="item.uid"
					  :label="item.userName"
					  :value="item.uid"
					></el-option>
				  </el-select>
				</el-form-item>
            </div>
            <div v-else>
				  <el-form-item label="值班员" prop="dutyMan">
					<el-input type="textarea" v-model="editForm.dutyMan"></el-input>
				  </el-form-item>
				  <el-form-item label="值班领导" prop="dutyLeader">
					<el-input type="textarea" v-model="editForm.dutyLeader"></el-input>
				  </el-form-item>
				  <el-form-item label="值班主任" prop="dutyDirector">
					<el-input type="textarea" v-model="editForm.dutyDirector"></el-input>
				  </el-form-item>
				  <el-form-item label="值班星期" prop="dutyWeek">
					<el-input type="text" v-model="editForm.dutyWeek"></el-input>
				  </el-form-item>
            </div>
            <el-form-item label="值班开始时间" prop="dutyDateStart">
              <el-date-picker
                v-model="editForm.dutyDateStart"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="datePick"
              ></el-date-picker>
            </el-form-item>
			<el-form-item label="值班结束时间" prop="dutyDateEnd">
			  <el-date-picker
			    v-model="editForm.dutyDateEnd"
			    type="datetime"
			    placeholder="选择日期时间"
			    align="right"
                value-format="yyyy-MM-dd HH:mm:ss"
			    @change="datePick"
			  ></el-date-picker>
			</el-form-item>
            <el-form-item label="值班类型" prop="dutyType">
              <el-radio-group v-model="editForm.dutyType">
                <el-radio label="1">日常值班</el-radio>
                <el-radio label="2">应急值班</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否发送短信" prop="isMessage">
              <el-radio-group v-model="editForm.isMessage">
                <el-radio label="0">否</el-radio>
                <el-radio label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="短信内容" prop="message">
              <el-input type="textarea" v-model="editForm.message"></el-input>
            </el-form-item>
			<el-form-item label="备注" prop="remarks">
				<el-input type="textarea" v-model="editForm.remarks"></el-input>
			</el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="confirmFun('editForm')" v-if="title != '详情'">提交</el-button>
        <el-button @click="$emit('dialogFun')" size="small">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style lang="scss">
.w100 .el-dialog {
  width: 80%;
  .flcolum {
    > div {
      border-radius: 3px;
    }
  }
  .yatit {
    background: #4273bd;
    color: #ffffff;
    line-height: 2;
    height: 2em;
    text-align: center;
    margin-bottom: 10px;
    border-radius: 2px;
  }
  .el-transfer-panel {
    width: calc((100% - 116px) / 2);
  }
  .el-transfer__buttons {
    width: 56px;
  }
  .el-transfer__button {
    margin-left: 0;
    display: block;
  }
}
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import METHOD from "@/utils/methods";
@Component({
  components: {}
})
export default class BookPlanEdit extends Vue {
  // @Getter('signs') signsData: any;
  @Prop(Boolean) dialogVisible!: Boolean;
  @Prop(String) title!: String;
  @Prop(Object) editForm; 

  @Provide() rules: any = {
    dutyDate: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    dutyType: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    dutyMan: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    planTitle: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    planType: [{ required: true, trigger: "blur", message: "该项为必填项！" }]
  };

  @Provide() NumberArr: any = [];
  @Provide() NumberArrAll: any = [];
  @Provide() NumbersProps: Object = {
    key: "uid",
    label: "userName"
  };

  //取消事件要在父级取消是所以用到 $emit
  confirmFun(formName: string) {
    let that = this;
    that.editForm.dutyMan = that.getTreeNode("zbyTree");
    that.editForm.otherMan = that.getTreeNode("qtrTree");
    console.log(that.editForm);
    (that as any).$refs[formName].validate((valid: boolean) => {
      if (valid) {
        (that as any).$axios
          .post("/onDutyInfo/addOrEditOnDutyInfo", that.editForm)
          .then(() => {
            (that as any).$message({
              message: "操作成功！",
              type: "success"
            });
            (that as any).$emit("dialogFun");
            that.$emit("refreshTableData"); //刷新表格
          });
      } else {
        return false;
      }
    });
  }
  //人员
  getNumberData() {
    let that = this;
    (that as any).$axios.get(`/user/getDutyContactsList`).then((res: any) => {
      that.NumberArr = res;
      that.NumberArrAll = [
        {
          uid: 0,
          userName: "选择值班人员",
          children: this.NumberArr
        }
      ];
    });
  }
  seletChange(key: any) {
    let that = this;
    that.NumberArr.forEach((ele: any) => {
      if (key == 1 && ele.uid == that.editForm.dutyLeaderID) {
        that.editForm.dutyLeader =
          (ele.deptName || '-') + "|" + (ele.userName || '-') + "|" + (ele.mobliePhone || '-');
      }
      if (key == 2 && ele.uid == that.editForm.dutyDirectorID) {
        that.editForm.dutyDirector =
          (ele.deptName || '-') + "|" + (ele.userName || '-') + "|" + (ele.mobliePhone || '-');
      }
    });
  }
  getTreeNode(refName: string) {
    let that = this,
      strs: any = [],
      checkedNode;
    checkedNode = (that.$refs[refName] as any).getCheckedNodes();
    checkedNode.forEach((ele: any) => {
      if (ele.uid != 0)
        strs.push((ele.deptName || '-') + "|" + (ele.userName || '-') + "|" + (ele.mobliePhone || '-'));
    });
    return strs.join(",");
  }
  datePick(v: string) {
    let today: Date = new Date(v);
    let d = today.getDay(),
      chnNumChar = ["日", "一", "二", "三", "四", "五", "六"];
    this.editForm.dutyWeek = "星期" + chnNumChar[d];
  }
  created() {
    // let that = this;
    // that.editForm ={...that.formData};
    this.getNumberData();
  }
  mounted() {}
}
</script>