<template>
  <div class="app-container" style="padding: 0px;width: 100%">
    <img class="pic-404__parent" style="height: 180px;width: 100%;margin-bottom: 15px" src="@/assets/images/bj.png">
    <div style="text-align: center;font-size: 18px;font-weight: bold;margin-bottom: 15px">参会信息</div>
    <van-form @submit="submitForm2">
      <van-field
        readonly
        clickable
        name="picker"
        :value="form.ryxx2"
        label="参会人员"
        placeholder="点击选择参会人员"
        :rules="[{ required: true, message: '请选择参会人员' }]"
        @click="djryxx()"
      />
      <van-popup v-model="showPickerRy" position="bottom">
        <van-picker @confirm="confirmRy" @cancel="showPickerRy=false" show-toolbar title="人员" :columns="columnsRy" />
      </van-popup>

      <van-field
        readonly
        clickable
        name="picker"
        :value="form.chdd2"
        label="参会地点"
        placeholder="点击选择参会地点"
        :rules="[{ required: true, message: '请选择参会地点' }]"
        @click="djDdxx()"
      />
      <van-popup v-model="showPickerDd" position="bottom">
        <van-picker @confirm="confirmDd" @cancel="showPickerDd=false" show-toolbar title="参会地点" :columns="columnsDd" />
      </van-popup>
      <van-field name="switch" label="是否请假">
        <template #input>
          <van-switch v-model="form.sfqj" size="20" />
        </template>
      </van-field>
      <van-field
        v-model="form.qjyy"
        rows="5"
        autosize
        label="请假原因"
        type="textarea"
        placeholder="请输入请假原因"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import Vue from 'vue';
import { listHyjl, getHyjl, delHyjl, addHyjl, updateHyjl } from "@/api/hy/hyjl";
import { listDwxx } from "@/api/hy/dwxx";
import { listRyxx } from "@/api/hy/ryxx";
import { listHydd } from "@/api/hy/hydd";
import { Toast } from 'vant';

Vue.use(Toast);

export default {
  name: "Hyjl",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 会议记录表格数据
      hyjlList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dwid: null,
        ryxx: null,
        chdd: null,
        sfqj: null,
        qjyy: null,
        bz: null
      },
      // 表单参数
      form: {},
      chdd: [],
      // 表单校验
      rules: {
        // dwid: [
        //   { required: true, message: '请选择单位', trigger: 'blur' },
        // ],
        ryxx2: [
          { required: true, message: '请选择人员', trigger: 'blur' },
        ],
        chdd2: [
          { required: true, message: '请选择参会地点', trigger: 'blur' },
        ]
      },
      dwData:[],
      ryData:[],
      chddData:[],
      showPickerRy:false,
      columnsRy:[],
      showPickerDd:false,
      columnsDd:[]
    };
  },
  created() {
    // this.getList();
    this.getRyList();
    this.getHyddList();
  },
  methods: {

    getDwList(){
      listDwxx({}).then(res=>{
        console.log(res)
        this.dwData=res.rows
      })
    },

    getRyList(){

      listRyxx({dwid:this.form.dwid}).then(res=>{
        console.log(res)
        this.columnsRy=res.rows

      })
    },

    getHyddList(){

      listHydd({}).then(res=>{
        console.log(res)
        this.columnsDd=res.rows

      })
    },
    /** 查询会议记录列表 */
    getList() {
      this.loading = true;
      listHyjl(this.queryParams).then(response => {
        this.hyjlList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(this.form.sfqj){
            if(!this.form.qjyy){
              this.$message.warning("请输入请假原因")
              return
            }
          }
          if(this.form.chdd2){
            this.form.chdd=this.form.chdd2[1]
          }
          if(this.form.ryxx2){
            this.form.dwid=this.form.ryxx2[0]
            this.form.ryxx=this.form.ryxx2[1]
          }
          if (this.form.id != null) {
            updateHyjl(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addHyjl(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    djryxx(){
      this.showPickerRy=true
    },
    confirmRy(event){
      console.log(event)
      this.form.ryxx2=event[0]+"/"+event[1]+"/"+event[2]
      this.form.ryxx=event[2]
      var deptlx=this.columnsRy.filter(it=>it.text==event[0])
      this.form.dwid=deptlx[0].children.filter(it=>it.text==event[1])[0].id
      this.showPickerRy=false
    },
    djDdxx(){
      this.showPickerDd=true
    },
    confirmDd(event){
      console.log(event)
      this.form.chdd2=event[0]+"/"+event[1]
      this.form.chdd=event[1]
      this.showPickerDd=false
    },

    submitForm2() {
      if(this.form.sfqj){
        if(!this.form.qjyy){
          // this.$message.warning("请输入请假原因")
          Toast.fail('请输入请假原因');
          return
        }
      }
      addHyjl(this.form).then(response => {
        // Toast.success('签到成功');
        this.$router.push("/hycg")
      });
    }
  }
};
</script>
